From eef782f09676046fb031df195309fdf7a5d38fcd Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Fri, 27 May 2022 21:41:03 +0800
Subject: [PATCH] client: optimize render actions

---
 .../src/components/document/actions/index.tsx | 98 ++++++++++++-------
 .../src/components/document/delete/index.tsx  | 65 ++++++------
 .../src/components/document/link/index.tsx    | 19 ++--
 3 files changed, 115 insertions(+), 67 deletions(-)

diff --git a/packages/client/src/components/document/actions/index.tsx b/packages/client/src/components/document/actions/index.tsx
index abee6b1b..a7573cde 100644
--- a/packages/client/src/components/document/actions/index.tsx
+++ b/packages/client/src/components/document/actions/index.tsx
@@ -1,5 +1,5 @@
 import { IconMore, IconPlus, IconStar } from '@douyinfe/semi-icons';
-import { Button, Dropdown, Space, Typography } from '@douyinfe/semi-ui';
+import { Button, Dropdown, Popover, Space, Typography } from '@douyinfe/semi-ui';
 import { DocumentCreator } from 'components/document/create';
 import { DocumentDeletor } from 'components/document/delete';
 import { DocumentLinkCopyer } from 'components/document/link';
@@ -29,22 +29,40 @@ export const DocumentActions: React.FC<IProps> = ({
   showCreateDocument,
   children,
 }) => {
-  const [visible, toggleVisible] = useToggle(false);
+  const [popoverVisible, togglePopoverVisible] = useToggle(false);
+  const [createVisible, toggleCreateVisible] = useToggle(false);
 
-  const prevent = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
+  const create = useCallback(() => {
+    togglePopoverVisible(false);
+    toggleCreateVisible(true);
+  }, [togglePopoverVisible, toggleCreateVisible]);
+
+  const wrapedOnDelete = useCallback(() => {
+    togglePopoverVisible(false);
+    onDelete && onDelete();
+  }, [onDelete, togglePopoverVisible]);
+
+  const wrapOnVisibleChange = useCallback(
+    (visible) => {
+      togglePopoverVisible(visible);
+      onVisibleChange && onVisibleChange();
+    },
+    [onVisibleChange, togglePopoverVisible]
+  );
 
   return (
     <>
-      <Dropdown
-        onVisibleChange={onVisibleChange}
-        render={
+      <Popover
+        showArrow
+        style={{ padding: 0 }}
+        trigger="click"
+        visible={popoverVisible}
+        onVisibleChange={wrapOnVisibleChange}
+        content={
           <Dropdown.Menu>
             {showCreateDocument && (
-              <Dropdown.Item onClick={prevent}>
-                <Text onClick={toggleVisible}>
+              <Dropdown.Item onClick={create}>
+                <Text>
                   <Space>
                     <IconPlus />
                     新建子文档
@@ -52,15 +70,16 @@ export const DocumentActions: React.FC<IProps> = ({
                 </Text>
               </Dropdown.Item>
             )}
-            <Dropdown.Item onClick={prevent}>
-              <DocumentStar
-                documentId={documentId}
-                render={({ star, toggleStar, text }) => (
-                  <Text
-                    onClick={() => {
-                      toggleStar().then(onStar);
-                    }}
-                  >
+
+            <DocumentStar
+              documentId={documentId}
+              render={({ star, toggleStar, text }) => (
+                <Dropdown.Item
+                  onClick={() => {
+                    toggleStar().then(onStar);
+                  }}
+                >
+                  <Text>
                     <Space>
                       <IconStar
                         style={{
@@ -70,27 +89,40 @@ export const DocumentActions: React.FC<IProps> = ({
                       {text}
                     </Space>
                   </Text>
-                )}
-              />
-            </Dropdown.Item>
-            <Dropdown.Item onClick={prevent}>
-              <DocumentLinkCopyer wikiId={wikiId} documentId={documentId} />
-            </Dropdown.Item>
+                </Dropdown.Item>
+              )}
+            />
+
+            <DocumentLinkCopyer
+              wikiId={wikiId}
+              documentId={documentId}
+              render={({ copy, children }) => {
+                return <Dropdown.Item onClick={copy}>{children}</Dropdown.Item>;
+              }}
+            />
+
             <Dropdown.Divider />
-            <Dropdown.Item onClick={prevent}>
-              <DocumentDeletor wikiId={wikiId} documentId={documentId} onDelete={onDelete} />
-            </Dropdown.Item>
+
+            <DocumentDeletor
+              wikiId={wikiId}
+              documentId={documentId}
+              onDelete={wrapedOnDelete}
+              render={({ children }) => {
+                return <Dropdown.Item>{children}</Dropdown.Item>;
+              }}
+            />
           </Dropdown.Menu>
         }
       >
-        {children || <Button onClick={prevent} icon={<IconMore />} theme="borderless" type="tertiary" />}
-      </Dropdown>
+        {children || <Button icon={<IconMore />} theme="borderless" type="tertiary" />}
+      </Popover>
+
       {showCreateDocument && (
         <DocumentCreator
           wikiId={wikiId}
           parentDocumentId={documentId}
-          visible={visible}
-          toggleVisible={toggleVisible}
+          visible={createVisible}
+          toggleVisible={toggleCreateVisible}
           onCreate={onCreate}
         />
       )}
diff --git a/packages/client/src/components/document/delete/index.tsx b/packages/client/src/components/document/delete/index.tsx
index 61585e0e..b177ffbc 100644
--- a/packages/client/src/components/document/delete/index.tsx
+++ b/packages/client/src/components/document/delete/index.tsx
@@ -1,52 +1,61 @@
 import { IconDelete } from '@douyinfe/semi-icons';
-import { Modal, Space, Typography } from '@douyinfe/semi-ui';
+import { Modal, Popconfirm, Space, Typography } from '@douyinfe/semi-ui';
 import { useDeleteDocument } from 'data/document';
 import { useRouterQuery } from 'hooks/use-router-query';
 import Router from 'next/router';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 interface IProps {
   wikiId: string;
   documentId: string;
   onDelete?: () => void;
+  render?: (arg: { children: React.ReactNode }) => React.ReactNode;
 }
 
 const { Text } = Typography;
 
-export const DocumentDeletor: React.FC<IProps> = ({ wikiId, documentId, onDelete }) => {
+export const DocumentDeletor: React.FC<IProps> = ({ wikiId, documentId, render, onDelete }) => {
   const { wikiId: currentWikiId, documentId: currentDocumentId } =
     useRouterQuery<{ wikiId?: string; documentId?: string }>();
   const { deleteDocument: api, loading } = useDeleteDocument(documentId);
 
   const deleteAction = useCallback(() => {
-    Modal.error({
-      title: '确定删除吗？',
-      content: <Text>文档删除后不可恢复！</Text>,
-      onOk: () => {
-        api().then(() => {
-          const navigate = () => {
-            if (wikiId !== currentWikiId || documentId !== currentDocumentId) {
-              return;
-            }
-            Router.push({
-              pathname: `/wiki/${wikiId}`,
-            });
-          };
-
-          onDelete ? onDelete() : navigate();
+    api().then(() => {
+      const navigate = () => {
+        if (wikiId !== currentWikiId || documentId !== currentDocumentId) {
+          return;
+        }
+        Router.push({
+          pathname: `/wiki/${wikiId}`,
         });
-      },
-      okButtonProps: { loading, type: 'danger' },
-      style: { maxWidth: '96vw' },
+      };
+
+      onDelete ? onDelete() : navigate();
     });
-  }, [wikiId, documentId, api, loading, onDelete, currentWikiId, currentDocumentId]);
+  }, [wikiId, documentId, api, onDelete, currentWikiId, currentDocumentId]);
+
+  const content = useMemo(
+    () => (
+      <Text type="danger">
+        <Space>
+          <IconDelete />
+          删除
+        </Space>
+      </Text>
+    ),
+    []
+  );
 
   return (
-    <Text type="danger" onClick={deleteAction}>
-      <Space>
-        <IconDelete />
-        删除
-      </Space>
-    </Text>
+    <Popconfirm
+      title="确定删除吗？"
+      content="文档删除后不可恢复！"
+      onConfirm={deleteAction}
+      okButtonProps={{ loading }}
+      zIndex={1070}
+      showArrow
+    >
+      {render ? render({ children: content }) : content}
+    </Popconfirm>
   );
 };
diff --git a/packages/client/src/components/document/link/index.tsx b/packages/client/src/components/document/link/index.tsx
index beb77294..369d78df 100644
--- a/packages/client/src/components/document/link/index.tsx
+++ b/packages/client/src/components/document/link/index.tsx
@@ -7,21 +7,28 @@ import React, { useCallback } from 'react';
 interface IProps {
   wikiId: string;
   documentId: string;
+  render?: (arg: { copy: () => void; children: React.ReactNode }) => React.ReactNode;
 }
 
 const { Text } = Typography;
 
-export const DocumentLinkCopyer: React.FC<IProps> = ({ wikiId, documentId }) => {
+export const DocumentLinkCopyer: React.FC<IProps> = ({ wikiId, documentId, render }) => {
   const handle = useCallback(() => {
     copy(buildUrl(`/wiki/${wikiId}/document/${documentId}`));
   }, [wikiId, documentId]);
 
-  return (
+  const content = (
+    <Space>
+      <IconLink />
+      复制链接
+    </Space>
+  );
+
+  return render ? (
+    <>{render({ copy: handle, children: content })}</>
+  ) : (
     <Text onClick={handle} style={{ cursor: 'pointer' }}>
-      <Space>
-        <IconLink />
-        复制链接
-      </Space>
+      {content}
     </Text>
   );
 };