client: use popover instead of modal

This commit is contained in:
fantasticit 2022-05-30 17:32:34 +08:00
parent 0faf0f3086
commit c4e2a82493
1 changed files with 85 additions and 79 deletions

View File

@ -7,6 +7,7 @@ import {
Input, Input,
Modal, Modal,
Popconfirm, Popconfirm,
Popover,
Spin, Spin,
Table, Table,
TabPane, TabPane,
@ -21,8 +22,9 @@ import { DocumentLinkCopyer } from 'components/document/link';
import { useDoumentMembers } from 'data/document'; import { useDoumentMembers } from 'data/document';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { event, JOIN_USER } from 'event'; import { event, JOIN_USER } from 'event';
import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
interface IProps { interface IProps {
wikiId: string; wikiId: string;
@ -48,7 +50,9 @@ const renderChecked = (onChange, authKey: 'readable' | 'editable') => (checked,
}; };
export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, disabled = false }) => { export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, disabled = false }) => {
const { isMobile } = IsOnMobile.useHook();
const toastedUsersRef = useRef<Array<IUser['id']>>([]); const toastedUsersRef = useRef<Array<IUser['id']>>([]);
const ref = useRef<HTMLInputElement>();
const { user: currentUser } = useUser(); const { user: currentUser } = useUser();
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
const { users, loading, error, addUser, updateUser, deleteUser } = useDoumentMembers(documentId, { 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 [inviteUser, setInviteUser] = useState('');
const [collaborationUsers, setCollaborationUsers] = useState([]); const [collaborationUsers, setCollaborationUsers] = useState([]);
const handleOk = () => { const handleOk = useCallback(() => {
addUser(inviteUser).then(() => { addUser(inviteUser).then(() => {
Toast.success('添加成功'); Toast.success('添加成功');
setInviteUser(''); setInviteUser('');
}); });
}; }, [addUser, inviteUser]);
const handleDelete = (docAuth) => { const handleDelete = useCallback(
(docAuth) => {
const data = { const data = {
...docAuth.auth, ...docAuth.auth,
userName: docAuth.user.name, userName: docAuth.user.name,
}; };
deleteUser(data); deleteUser(data);
}; },
[deleteUser]
);
useEffect(() => {
if (visible) {
setTimeout(() => ref.current?.focus(), 100);
}
}, [visible]);
useEffect(() => { useEffect(() => {
const handler = (mentionUsers) => { const handler = (mentionUsers) => {
@ -126,28 +139,18 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
); );
})} })}
</AvatarGroup> </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} 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"> <Tabs type="line">
<TabPane tab="添加成员" itemKey="add"> <TabPane tab="添加成员" itemKey="add">
<div style={{ marginTop: 16 }}> <div style={{ marginTop: 16 }}>
<Input placeholder="输入对方用户名" value={inviteUser} onChange={setInviteUser}></Input> <Input ref={ref} placeholder="输入对方用户名" value={inviteUser} onChange={setInviteUser}></Input>
<Paragraph style={{ marginTop: 16 }}> <Paragraph style={{ marginTop: 16 }}>
<span style={{ verticalAlign: 'middle' }}> <span style={{ verticalAlign: 'middle' }}>
@ -165,7 +168,7 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
error={error} error={error}
loadingContent={<Spin />} loadingContent={<Spin />}
normalContent={() => ( 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="用户名" dataIndex="user.name" key="name" />
<Column <Column
title="是否可读" title="是否可读"
@ -196,7 +199,10 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
/> />
</TabPane> </TabPane>
</Tabs> </Tabs>
</Modal> }
>
<Button theme="borderless" type="tertiary" disabled={disabled} icon={<IconUserAdd />} />
</Popover>
</> </>
); );
}; };