aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2022-04-10 16:04:03 +0800
committercrupest <crupest@outlook.com>2022-04-10 16:04:03 +0800
commit928ba0ce419bacba113951095278a5138ead34cf (patch)
treead4bc6b985c21e751199a25a77f36da7163a47c5 /FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
parent86160e4a5697615452a7e06dc78f8be4c8b2515f (diff)
downloadtimeline-928ba0ce419bacba113951095278a5138ead34cf.tar.gz
timeline-928ba0ce419bacba113951095278a5138ead34cf.tar.bz2
timeline-928ba0ce419bacba113951095278a5138ead34cf.zip
...
Diffstat (limited to 'FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx')
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx153
1 files changed, 0 insertions, 153 deletions
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
deleted file mode 100644
index eb17a9d0..00000000
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTranslation } from "react-i18next";
-
-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 { useIsSmallScreen } from "@/utilities/mediaQuery";
-
-import { TimelinePageCardProps } from "./TimelinePageTemplate";
-
-import CollapseButton from "./CollapseButton";
-import { TimelineMemberDialog } from "./TimelineMember";
-import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
-import ConnectionStatusBadge from "./ConnectionStatusBadge";
-import { MenuItems } from "../common/menu/Menu";
-import PopupMenu from "../common/menu/PopupMenu";
-import FullPageDialog from "../common/dailog/FullPageDialog";
-import Card from "../common/Card";
-
-export interface TimelineCardTemplateProps extends TimelinePageCardProps {
- infoArea: React.ReactNode;
- manageItems?: MenuItems;
- dialog: string | "property" | "member" | null;
- setDialog: (dialog: "property" | "member" | null) => void;
-}
-
-const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
- timeline,
- collapse,
- toggleCollapse,
- infoArea,
- manageItems,
- connectionStatus,
- onReload,
- className,
- dialog,
- setDialog,
-}) => {
- const { t } = useTranslation();
-
- const isSmallScreen = useIsSmallScreen();
-
- const user = useUser();
-
- const content = (
- <>
- {infoArea}
- <p className="mb-0">{timeline.description}</p>
- <small className="mt-1 d-block">
- {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
- </small>
- <div className="mt-2 cru-text-end">
- <i
- className={classnames(
- timeline.isHighlight ? "bi-star-fill" : "bi-star",
- "icon-button cru-color-primary me-3"
- )}
- onClick={
- user?.hasHighlightTimelineAdministrationPermission
- ? () => {
- getHttpHighlightClient()
- [timeline.isHighlight ? "delete" : "put"](timeline.name)
- .then(onReload, () => {
- pushAlert({
- message: timeline.isHighlight
- ? "timeline.removeHighlightFail"
- : "timeline.addHighlightFail",
- type: "danger",
- });
- });
- }
- : undefined
- }
- />
- {user != null ? (
- <i
- className={classnames(
- timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
- "icon-button cru-color-primary me-3"
- )}
- onClick={() => {
- getHttpBookmarkClient()
- [timeline.isBookmark ? "delete" : "put"](timeline.name)
- .then(onReload, () => {
- pushAlert({
- message: timeline.isBookmark
- ? "timeline.removeBookmarkFail"
- : "timeline.addBookmarkFail",
- type: "danger",
- });
- });
- }}
- />
- ) : null}
- <i
- className={"icon-button bi-people cru-color-primary me-3"}
- onClick={() => setDialog("member")}
- />
- {manageItems != null ? (
- <PopupMenu items={manageItems} containerClassName="d-inline">
- <i className="icon-button bi-three-dots-vertical cru-color-primary" />
- </PopupMenu>
- ) : null}
- </div>
- </>
- );
-
- return (
- <>
- <Card className={classnames("p-2 cru-clearfix", className)}>
- <div
- className={classnames(
- "cru-float-right d-flex align-items-center",
- !collapse && "ms-3"
- )}
- >
- <ConnectionStatusBadge status={connectionStatus} className="me-2" />
- <CollapseButton collapse={collapse} onClick={toggleCollapse} />
- </div>
- {isSmallScreen ? (
- <FullPageDialog
- onBack={toggleCollapse}
- show={!collapse}
- contentContainerClassName="p-2"
- >
- {content}
- </FullPageDialog>
- ) : (
- <div style={{ display: collapse ? "none" : "inline" }}>{content}</div>
- )}
- </Card>
- <TimelineMemberDialog
- timeline={timeline}
- onClose={() => setDialog(null)}
- open={dialog === "member"}
- onChange={onReload}
- />
- <TimelinePropertyChangeDialog
- timeline={timeline}
- close={() => setDialog(null)}
- open={dialog === "property"}
- onChange={onReload}
- />
- </>
- );
-};
-
-export default TimelinePageCardTemplate;