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,
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 data = {
...docAuth.auth,
userName: docAuth.user.name,
};
deleteUser(data);
};
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,77 +139,70 @@ 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 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">
<TabPane tab="添加成员" itemKey="add">
<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>
<Button theme="borderless" type="tertiary" disabled={disabled} icon={<IconUserAdd />} />
</Popover>
</>
);
};