client: update layout

packages/client/src/components/document/share/index.tsx

@@ -1,12 +1,12 @@
 import { IconLink } from '@douyinfe/semi-icons';
-import { Button, Input, Modal, Toast, Typography } from '@douyinfe/semi-ui';
+import { Button, Input, Popover, Space, Toast, Typography } from '@douyinfe/semi-ui';
 import { isPublicDocument } from '@think/domains';
-import { DataRender } from 'components/data-render';
 import { useDocumentDetail } from 'data/document';
 import { getDocumentShareURL } from 'helpers/url';
+import { IsOnMobile } from 'hooks/use-on-mobile';
 import { useToggle } from 'hooks/use-toggle';
 import { ShareIllustration } from 'illustrations/share';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 interface IProps {
   documentId: string;
@@ -17,63 +17,60 @@ interface IProps {
 const { Text } = Typography;
 
 export const DocumentShare: React.FC<IProps> = ({ documentId, disabled = false, render }) => {
+  const { isMobile } = IsOnMobile.useHook();
+  const ref = useRef<HTMLInputElement>();
   const [visible, toggleVisible] = useToggle(false);
-  const { data, loading, error, toggleStatus } = useDocumentDetail(documentId, { enabled: visible });
+  const { data, loading, toggleStatus } = useDocumentDetail(documentId, { enabled: visible });
   const [sharePassword, setSharePassword] = useState('');
   const isPublic = useMemo(() => data && isPublicDocument(data.document.status), [data]);
   const shareUrl = useMemo(() => data && getDocumentShareURL(data.document.id), [data]);
 
-  const handleOk = () => {
+  const copyable = useMemo(
+    () => ({
+      onCopy: () => Toast.success({ content: '复制文本成功' }),
+    }),
+    []
+  );
+
+  const prevent = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+
+  const viewUrl = useCallback(() => {
+    window.open(shareUrl, '_blank');
+  }, [shareUrl]);
+
+  const handleOk = useCallback(() => {
     toggleStatus({ sharePassword: isPublic ? '' : sharePassword });
-  };
+  }, [isPublic, sharePassword, toggleStatus]);
 
   useEffect(() => {
     if (loading || !data) return;
     setSharePassword(data.document && data.document.sharePassword);
   }, [loading, data]);
 
-  return (
-    <>
-      {render ? (
-        render({ isPublic, disabled, toggleVisible })
-      ) : (
-        <Button disabled={disabled} type="primary" theme="light" onClick={toggleVisible}>
-          {isPublic ? '分享中' : '分享'}
-        </Button>
-      )}
-      <Modal
-        title={isPublic ? '关闭分享' : '开启分享'}
-        okText={isPublic ? '关闭分享' : '开启分享'}
-        visible={visible}
-        onOk={handleOk}
-        onCancel={() => toggleVisible(false)}
-        style={{ maxWidth: '96vw' }}
-        footer={
-          <>
-            <Button onClick={() => toggleVisible(false)}>取消</Button>
-            <Button theme="solid" type={isPublic ? 'danger' : 'primary'} onClick={handleOk}>
-              {isPublic ? '关闭分享' : '开启分享'}
-            </Button>
-            {isPublic && (
-              <Button
-                theme="solid"
-                type="primary"
-                onClick={() => {
-                  window.open(shareUrl, '_blank');
-                }}
-              >
-                查看文档
-              </Button>
-            )}
-          </>
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => ref.current?.focus(), 100);
     }
-      >
-        <DataRender
-          loading={loading}
-          error={error}
-          normalContent={() => {
+  }, [visible]);
+
   return (
-              <div>
+    <Popover
+      showArrow
+      visible={visible}
+      onVisibleChange={toggleVisible}
+      trigger="click"
+      position={isMobile ? 'top' : 'bottomLeft'}
+      style={{ width: 376, maxWidth: '80vw' }}
+      content={
+        <div
+          style={{
+            maxHeight: '70vh',
+            overflow: 'auto',
+          }}
+          onClick={prevent}
+        >
           <div style={{ textAlign: 'center' }}>
             <ShareIllustration />
           </div>
@@ -81,18 +78,16 @@ export const DocumentShare: React.FC<IProps> = ({ documentId, disabled = false,
             <Text
               ellipsis
               icon={<IconLink />}
-                    copyable={{
-                      onCopy: () => Toast.success({ content: '复制文本成功' }),
-                    }}
+              copyable={copyable}
               style={{
-                      width: 320,
+                width: 240,
               }}
             >
               {shareUrl}
             </Text>
           ) : (
             <Input
-                    autofocus
+              ref={ref}
               mode="password"
               placeholder="设置访问密码"
               value={sharePassword}
@@ -106,11 +101,27 @@ export const DocumentShare: React.FC<IProps> = ({ documentId, disabled = false,
                 : '  分享关闭后，其他人将不能继续访问该页面'}
             </Text>
           </div>
+          <Space style={{ width: '100%', justifyContent: 'end', margin: '12px 0' }}>
+            <Button onClick={() => toggleVisible(false)}>取消</Button>
+            <Button theme="solid" type={isPublic ? 'danger' : 'primary'} onClick={handleOk}>
+              {isPublic ? '关闭分享' : '开启分享'}
+            </Button>
+            {isPublic && (
+              <Button theme="solid" type="primary" onClick={viewUrl}>
+                查看文档
+              </Button>
+            )}
+          </Space>
         </div>
-            );
-          }}
-        />
-      </Modal>
-    </>
+      }
+    >
+      {render ? (
+        render({ isPublic, disabled, toggleVisible })
+      ) : (
+        <Button disabled={disabled} type="primary" theme="light" onClick={toggleVisible}>
+          {isPublic ? '分享中' : '分享'}
+        </Button>
+      )}
+    </Popover>
   );
 };