mirror of https://github.com/fantasticit/think.git
client: use popover instead of modal
This commit is contained in:
parent
0faf0f3086
commit
c4e2a82493
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue