diff options
author | crupest <crupest@outlook.com> | 2020-09-03 23:09:03 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-09-03 23:09:03 +0800 |
commit | 292e5551c5a83a08e9e3c7125567a75f265d4374 (patch) | |
tree | 923c0183f0df17217e2534b50c4f49303aec9dca /Timeline/ClientApp/src/app/timeline/Timeline.tsx | |
parent | edfefcf9bdbf5ba186a8f2c7d021acf04dbbb329 (diff) | |
parent | c97e69f7c22cc93cca44d14ae3c499c30f7760b8 (diff) | |
download | timeline-292e5551c5a83a08e9e3c7125567a75f265d4374.tar.gz timeline-292e5551c5a83a08e9e3c7125567a75f265d4374.tar.bz2 timeline-292e5551c5a83a08e9e3c7125567a75f265d4374.zip |
Merge pull request #159 from crupest/dev
Development on front end.
Diffstat (limited to 'Timeline/ClientApp/src/app/timeline/Timeline.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/timeline/Timeline.tsx | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/Timeline/ClientApp/src/app/timeline/Timeline.tsx b/Timeline/ClientApp/src/app/timeline/Timeline.tsx deleted file mode 100644 index 780588d1..00000000 --- a/Timeline/ClientApp/src/app/timeline/Timeline.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React from "react"; -import clsx from "clsx"; - -import { TimelinePostInfo } from "../data/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("container-fluid timeline", props.className)} - > - <div className="timeline-enter-animation-mask" /> - {(() => { - 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; |