diff options
author | crupest <crupest@outlook.com> | 2020-10-31 00:42:06 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-31 00:42:06 +0800 |
commit | a3c97f6fb6313da2e8c0fac0b4c08f2ef4265d0f (patch) | |
tree | ee006874b0c93e9bfc76f141a092a8b9585a1f95 /Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx | |
parent | 0c4caaebe2480e77918d5d7df234f0edaeab74ba (diff) | |
parent | 7ce0846d9ec968da3ea4f7ebcc6db26db8e49089 (diff) | |
download | timeline-a3c97f6fb6313da2e8c0fac0b4c08f2ef4265d0f.tar.gz timeline-a3c97f6fb6313da2e8c0fac0b4c08f2ef4265d0f.tar.bz2 timeline-a3c97f6fb6313da2e8c0fac0b4c08f2ef4265d0f.zip |
Merge pull request #161 from crupest/upgrade
Upgrade packages and split front end and back end.
Diffstat (limited to 'Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx | 84 |
1 files changed, 0 insertions, 84 deletions
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx b/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx deleted file mode 100644 index fd051d45..00000000 --- a/Timeline/ClientApp/src/app/views/timeline-common/Timeline.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react"; -import clsx from "clsx"; - -import { TimelinePostInfo } from "@/services/timeline"; - -import TimelineItem from "./TimelineItem"; - -export interface TimelinePostInfoEx extends TimelinePostInfo { - deletable: boolean; -} - -export type TimelineDeleteCallback = (index: number, id: number) => void; - -export interface TimelineProps { - className?: string; - posts: TimelinePostInfoEx[]; - onDelete: TimelineDeleteCallback; - onResize?: () => void; - containerRef?: React.Ref<HTMLDivElement>; -} - -const Timeline: React.FC<TimelineProps> = (props) => { - const { posts, onDelete, onResize } = props; - - const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState< - number - >(-1); - - const onItemClick = React.useCallback(() => { - setIndexShowDeleteButton(-1); - }, []); - - const onToggleDelete = React.useMemo(() => { - return posts.map((post, i) => { - return post.deletable - ? () => { - setIndexShowDeleteButton((oldIndexShowDeleteButton) => { - return oldIndexShowDeleteButton !== i ? i : -1; - }); - } - : undefined; - }); - }, [posts]); - - const onItemDelete = React.useMemo(() => { - return posts.map((post, i) => { - return () => { - onDelete(i, post.id); - }; - }); - }, [posts, onDelete]); - - return ( - <div ref={props.containerRef} className={clsx("timeline", props.className)}> - {(() => { - const length = posts.length; - return posts.map((post, i) => { - const toggleMore = onToggleDelete[i]; - - return ( - <TimelineItem - post={post} - key={post.id} - current={length - 1 === i} - more={ - toggleMore - ? { - isOpen: indexShowDeleteButton === i, - toggle: toggleMore, - onDelete: onItemDelete[i], - } - : undefined - } - onClick={onItemClick} - onResize={onResize} - /> - ); - }); - })()} - </div> - ); -}; - -export default Timeline; |