import React from "react"; import clsx from "clsx"; import { useTranslation } from "react-i18next"; import { Dropdown, Button } from "react-bootstrap"; import { getHttpHighlightClient } from "@/http/highlight"; import { getHttpBookmarkClient } from "@/http/bookmark"; import { useUser } from "@/services/user"; import { pushAlert } from "@/services/alert"; import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline"; import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI"; import CollapseButton from "../timeline-common/CollapseButton"; export interface TimelineCardTemplateProps extends Omit, "operations"> { infoArea: React.ReactElement; manageArea: | { type: "member"; onMember: () => void } | { type: "manage"; items: ( | { type: "button"; text: string; color?: string; onClick: () => void; } | { type: "divider" } )[]; }; } function TimelineCardTemplate({ timeline, collapse, infoArea, manageArea, toggleCollapse, className, }: TimelineCardTemplateProps): React.ReactElement | null { const { t } = useTranslation(); const user = useUser(); return (
{infoArea}

{timeline.description}

{t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
{ getHttpHighlightClient() [timeline.isHighlight ? "delete" : "put"](timeline.name) .catch(() => { pushAlert({ message: timeline.isHighlight ? "timeline.removeHighlightFail" : "timeline.addHighlightFail", type: "danger", }); }); } : undefined } /> {user != null ? ( { getHttpBookmarkClient() [timeline.isBookmark ? "delete" : "put"](timeline.name) .catch(() => { pushAlert({ message: timeline.isBookmark ? "timeline.removeBookmarkFail" : "timeline.addBookmarkFail", type: "danger", }); }); }} /> ) : null} {manageArea.type === "manage" ? ( {t("timeline.manage")} {manageArea.items.map((item, index) => { if (item.type === "divider") { return ; } else { return ( {t(item.text)} ); } })} ) : ( )}
); } export default TimelineCardTemplate;