refactor: clean all pages component (#2176)

Co-authored-by: himself65 <himself65@outlook.com>
2026-08-01 17:39:55 +08:00 · 2023-05-04 20:59:16 -07:00
parent 2c49c774af
commit 84b36c1d35
32 changed files with 772 additions and 504 deletions
@@ -0,0 +1,29 @@
+import { MenuItem, toast } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CopyIcon } from '@blocksuite/icons';
+import { useCallback } from 'react';
+
+import type { CommonMenuItemProps } from './types';
+
+export const CopyLink = ({ onItemClick, onSelect }: CommonMenuItemProps) => {
+  const t = useAFFiNEI18N();
+
+  const copyUrl = useCallback(() => {
+    navigator.clipboard.writeText(window.location.href);
+    toast(t['Copied link to clipboard']());
+  }, [t]);
+
+  return (
+    <MenuItem
+      data-testid="copy-link"
+      onClick={() => {
+        copyUrl();
+        onItemClick?.();
+        onSelect?.();
+      }}
+      icon={<CopyIcon />}
+    >
+      {t['Copy Link']()}
+    </MenuItem>
+  );
+};
@@ -0,0 +1,49 @@
+import { MenuItem, styled } from '@affine/component';
+import { PublicLinkDisableModal } from '@affine/component/share-menu';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ShareIcon } from '@blocksuite/icons';
+
+import type { CommonMenuItemProps } from './types';
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => {
+  return {
+    div: {
+      color: theme.palette.error.main,
+      svg: {
+        color: theme.palette.error.main,
+      },
+    },
+    ':hover': {
+      div: {
+        color: theme.palette.error.main,
+        svg: {
+          color: theme.palette.error.main,
+        },
+      },
+    },
+  };
+});
+export const DisablePublicSharing = ({
+  onSelect,
+  onItemClick,
+  testId,
+}: CommonMenuItemProps) => {
+  const t = useAFFiNEI18N();
+  return (
+    <>
+      <StyledMenuItem
+        data-testid={testId}
+        onClick={() => {
+          onItemClick?.();
+          onSelect?.();
+        }}
+        style={{ color: 'red' }}
+        icon={<ShareIcon />}
+      >
+        {t['Disable Public Sharing']()}
+      </StyledMenuItem>
+    </>
+  );
+};
+
+DisablePublicSharing.DisablePublicSharingModal = PublicLinkDisableModal;
@@ -0,0 +1,73 @@
+import { Menu, MenuItem } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ContentParser } from '@blocksuite/blocks/content-parser';
+import {
+  ArrowRightSmallIcon,
+  ExportIcon,
+  ExportToHtmlIcon,
+  ExportToMarkdownIcon,
+} from '@blocksuite/icons';
+import { useRef } from 'react';
+
+import type { CommonMenuItemProps } from './types';
+
+export const Export = ({
+  onSelect,
+  onItemClick,
+}: CommonMenuItemProps<{ type: 'markdown' | 'html' }>) => {
+  const t = useAFFiNEI18N();
+  const contentParserRef = useRef<ContentParser>();
+  return (
+    <Menu
+      width={248}
+      placement="left"
+      trigger="click"
+      content={
+        <>
+          <MenuItem
+            data-testid="export-to-html"
+            onClick={() => {
+              if (!contentParserRef.current) {
+                contentParserRef.current = new ContentParser(
+                  globalThis.currentEditor!.page
+                );
+              }
+              contentParserRef.current.onExportHtml();
+              onSelect?.({ type: 'html' });
+            }}
+            icon={<ExportToHtmlIcon />}
+          >
+            {t['Export to HTML']()}
+          </MenuItem>
+          <MenuItem
+            data-testid="export-to-markdown"
+            onClick={() => {
+              if (!contentParserRef.current) {
+                contentParserRef.current = new ContentParser(
+                  globalThis.currentEditor!.page
+                );
+              }
+              contentParserRef.current.onExportMarkdown();
+              onSelect?.({ type: 'markdown' });
+            }}
+            icon={<ExportToMarkdownIcon />}
+          >
+            {t['Export to Markdown']()}
+          </MenuItem>
+        </>
+      }
+    >
+      <MenuItem
+        data-testid="export-menu"
+        icon={<ExportIcon />}
+        endIcon={<ArrowRightSmallIcon />}
+        onClick={e => {
+          e.stopPropagation();
+          onItemClick?.();
+        }}
+      >
+        {t.Export()}
+      </MenuItem>
+    </Menu>
+  );
+};
@@ -0,0 +1,52 @@
+import type { ConfirmProps } from '@affine/component';
+import { Confirm, MenuItem } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { DeleteTemporarilyIcon } from '@blocksuite/icons';
+
+import type { CommonMenuItemProps } from './types';
+
+export const MoveToTrash = ({
+  onSelect,
+  onItemClick,
+  testId,
+}: CommonMenuItemProps) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <>
+      <MenuItem
+        data-testid={testId}
+        onClick={() => {
+          onItemClick?.();
+          onSelect?.();
+        }}
+        icon={<DeleteTemporarilyIcon />}
+      >
+        {t['Move to Trash']()}
+      </MenuItem>
+    </>
+  );
+};
+
+const ConfirmModal = ({
+  title,
+  ...confirmModalProps
+}: {
+  title: string;
+} & ConfirmProps) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <Confirm
+      title={t['Delete page?']()}
+      content={t['will be moved to Trash']({
+        title: title || 'Untitled',
+      })}
+      confirmText={t.Delete()}
+      confirmType="danger"
+      {...confirmModalProps}
+    />
+  );
+};
+
+MoveToTrash.ConfirmModal = ConfirmModal;
@@ -0,0 +1,5 @@
+export * from './CopyLink';
+export * from './DisablePublicSharing';
+export * from './Export';
+// export * from './MoveTo';
+export * from './MoveToTrash';
@@ -0,0 +1,7 @@
+export type CommonMenuItemProps<SelectParams = undefined> = {
+  // onItemClick is triggered when the item is clicked, sometimes after item click, it still has some internal logic to run(like popover a new menu), so we need to have a separate callback for that
+  onItemClick?: () => void;
+  // onSelect is triggered when the item is selected, it's the final callback for the item click
+  onSelect?: (params?: SelectParams) => void;
+  testId?: string;
+};