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(
-    const data = {
+    (docAuth) => {
-      ...docAuth.auth,
+      const data = {
-      userName: docAuth.user.name,
+        ...docAuth.auth,
-    };
+        userName: docAuth.user.name,
-    deleteUser(data);
+      };
-  };
+      deleteUser(data);
+    },
+    [deleteUser]
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => ref.current?.focus(), 100);
+    }
+  }, [visible]);
 
   useEffect(() => {
     const handler = (mentionUsers) => {
@@ -126,77 +139,70 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
           );
         })}
       </AvatarGroup>
-      <Tooltip content="邀请他人协作" position="bottom">
+      <Popover
-        <Button
+        showArrow
-          theme="borderless"
-          type="tertiary"
-          disabled={disabled}
-          icon={<IconUserAdd />}
-          onClick={toggleVisible}
-        ></Button>
-      </Tooltip>
-      <Modal
-        title={'文档协作'}
-        okText={'邀请对方'}
         visible={visible}
-        onOk={handleOk}
+        onVisibleChange={toggleVisible}
-        onCancel={() => toggleVisible(false)}
+        trigger="click"
-        style={{ maxWidth: '96vw' }}
+        position={isMobile ? 'top' : 'bottomLeft'}
-        footer={null}
+        style={{ width: 376, maxWidth: '80vw' }}
+        content={
+          <Tabs type="line">
+            <TabPane tab="添加成员" itemKey="add">
+              <div style={{ marginTop: 16 }}>
+                <Input ref={ref} placeholder="输入对方用户名" value={inviteUser} onChange={setInviteUser}></Input>
+                <Paragraph style={{ marginTop: 16 }}>
+                  邀请成功后，请将该链接发送给对方。
+                  <span style={{ verticalAlign: 'middle' }}>
+                    <DocumentLinkCopyer wikiId={wikiId} documentId={documentId} />
+                  </span>
+                </Paragraph>
+                <Button theme="solid" block style={{ margin: '24px 0' }} disabled={!inviteUser} onClick={handleOk}>
+                  添加用户
+                </Button>
+              </div>
+            </TabPane>
+            <TabPane tab="协作成员" itemKey="list">
+              <DataRender
+                loading={loading}
+                error={error}
+                loadingContent={<Spin />}
+                normalContent={() => (
+                  <Table dataSource={users} size="small" pagination>
+                    <Column title="用户名" dataIndex="user.name" key="name" />
+                    <Column
+                      title="是否可读"
+                      dataIndex="auth.readable"
+                      key="readable"
+                      render={renderChecked(updateUser, 'readable')}
+                      align="center"
+                    />
+                    <Column
+                      title="是否可编辑"
+                      dataIndex="auth.editable"
+                      key="editable"
+                      render={renderChecked(updateUser, 'editable')}
+                      align="center"
+                    />
+                    <Column
+                      title="操作"
+                      dataIndex="operate"
+                      key="operate"
+                      render={(_, document) => (
+                        <Popconfirm showArrow title="确认删除该成员？" onConfirm={() => handleDelete(document)}>
+                          <Button type="tertiary" theme="borderless" icon={<IconDelete />} />
+                        </Popconfirm>
+                      )}
+                    />
+                  </Table>
+                )}
+              />
+            </TabPane>
+          </Tabs>
+        }
       >
-        <Tabs type="line">
+        <Button theme="borderless" type="tertiary" disabled={disabled} icon={<IconUserAdd />} />
-          <TabPane tab="添加成员" itemKey="add">
+      </Popover>
-            <div style={{ marginTop: 16 }}>
-              <Input placeholder="输入对方用户名" value={inviteUser} onChange={setInviteUser}></Input>
-              <Paragraph style={{ marginTop: 16 }}>
-                邀请成功后，请将该链接发送给对方。
-                <span style={{ verticalAlign: 'middle' }}>
-                  <DocumentLinkCopyer wikiId={wikiId} documentId={documentId} />
-                </span>
-              </Paragraph>
-              <Button theme="solid" block style={{ margin: '24px 0' }} disabled={!inviteUser} onClick={handleOk}>
-                添加用户
-              </Button>
-            </div>
-          </TabPane>
-          <TabPane tab="协作成员" itemKey="list">
-            <DataRender
-              loading={loading}
-              error={error}
-              loadingContent={<Spin />}
-              normalContent={() => (
-                <Table style={{ margin: '24px 0' }} dataSource={users} size="small" pagination>
-                  <Column title="用户名" dataIndex="user.name" key="name" />
-                  <Column
-                    title="是否可读"
-                    dataIndex="auth.readable"
-                    key="readable"
-                    render={renderChecked(updateUser, 'readable')}
-                    align="center"
-                  />
-                  <Column
-                    title="是否可编辑"
-                    dataIndex="auth.editable"
-                    key="editable"
-                    render={renderChecked(updateUser, 'editable')}
-                    align="center"
-                  />
-                  <Column
-                    title="操作"
-                    dataIndex="operate"
-                    key="operate"
-                    render={(_, document) => (
-                      <Popconfirm showArrow title="确认删除该成员？" onConfirm={() => handleDelete(document)}>
-                        <Button type="tertiary" theme="borderless" icon={<IconDelete />} />
-                      </Popconfirm>
-                    )}
-                  />
-                </Table>
-              )}
-            />
-          </TabPane>
-        </Tabs>
-      </Modal>
     </>
   );
 };