client: use popover instead of modal

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

@@ -7,6 +7,7 @@ import {
   Input,
   Modal,
   Popconfirm,
+  Popover,
   Spin,
   Table,
   TabPane,
@@ -21,8 +22,9 @@ import { DocumentLinkCopyer } from 'components/document/link';
 import { useDoumentMembers } from 'data/document';
 import { useUser } from 'data/user';
 import { event, JOIN_USER } from 'event';
+import { IsOnMobile } from 'hooks/use-on-mobile';
 import { useToggle } from 'hooks/use-toggle';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 interface IProps {
   wikiId: string;
@@ -48,7 +50,9 @@ const renderChecked = (onChange, authKey: 'readable' | 'editable') => (checked,
 };
 
 export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, disabled = false }) => {
+  const { isMobile } = IsOnMobile.useHook();
   const toastedUsersRef = useRef<Array<IUser['id']>>([]);
+  const ref = useRef<HTMLInputElement>();
   const { user: currentUser } = useUser();
   const [visible, toggleVisible] = useToggle(false);
   const { users, loading, error, addUser, updateUser, deleteUser } = useDoumentMembers(documentId, {
@@ -57,20 +61,29 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
   const [inviteUser, setInviteUser] = useState('');
   const [collaborationUsers, setCollaborationUsers] = useState([]);
 
-  const handleOk = () => {
+  const handleOk = useCallback(() => {
     addUser(inviteUser).then(() => {
       Toast.success('添加成功');
       setInviteUser('');
     });
-  };
+  }, [addUser, inviteUser]);
 
-  const handleDelete = (docAuth) => {
+  const handleDelete = useCallback(
+    (docAuth) => {
       const data = {
         ...docAuth.auth,
         userName: docAuth.user.name,
       };
       deleteUser(data);
-  };
+    },
+    [deleteUser]
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => ref.current?.focus(), 100);
+    }
+  }, [visible]);
 
   useEffect(() => {
     const handler = (mentionUsers) => {
@@ -126,28 +139,18 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
           );
         })}
       </AvatarGroup>
-      <Tooltip content="邀请他人协作" position="bottom">
-        <Button
-          theme="borderless"
-          type="tertiary"
-          disabled={disabled}
-          icon={<IconUserAdd />}
-          onClick={toggleVisible}
-        ></Button>
-      </Tooltip>
-      <Modal
-        title={'文档协作'}
-        okText={'邀请对方'}
+      <Popover
+        showArrow
         visible={visible}
-        onOk={handleOk}
-        onCancel={() => toggleVisible(false)}
-        style={{ maxWidth: '96vw' }}
-        footer={null}
-      >
+        onVisibleChange={toggleVisible}
+        trigger="click"
+        position={isMobile ? 'top' : 'bottomLeft'}
+        style={{ width: 376, maxWidth: '80vw' }}
+        content={
           <Tabs type="line">
             <TabPane tab="添加成员" itemKey="add">
               <div style={{ marginTop: 16 }}>
-              <Input placeholder="输入对方用户名" value={inviteUser} onChange={setInviteUser}></Input>
+                <Input ref={ref} placeholder="输入对方用户名" value={inviteUser} onChange={setInviteUser}></Input>
                 <Paragraph style={{ marginTop: 16 }}>
                   邀请成功后，请将该链接发送给对方。
                   <span style={{ verticalAlign: 'middle' }}>
@@ -165,7 +168,7 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
                 error={error}
                 loadingContent={<Spin />}
                 normalContent={() => (
-                <Table style={{ margin: '24px 0' }} dataSource={users} size="small" pagination>
+                  <Table dataSource={users} size="small" pagination>
                     <Column title="用户名" dataIndex="user.name" key="name" />
                     <Column
                       title="是否可读"
@@ -196,7 +199,10 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
               />
             </TabPane>
           </Tabs>
-      </Modal>
+        }
+      >
+        <Button theme="borderless" type="tertiary" disabled={disabled} icon={<IconUserAdd />} />
+      </Popover>
     </>
   );
 };