mirror of https://github.com/fantasticit/think.git
client: update layout
This commit is contained in:
parent
1c782e23ad
commit
19924b740b
|
@ -1,12 +1,12 @@
|
|||
import { IconLink } from '@douyinfe/semi-icons';
|
||||
import { Button, Input, Modal, Toast, Typography } from '@douyinfe/semi-ui';
|
||||
import { Button, Input, Popover, Space, Toast, Typography } from '@douyinfe/semi-ui';
|
||||
import { isPublicDocument } from '@think/domains';
|
||||
import { DataRender } from 'components/data-render';
|
||||
import { useDocumentDetail } from 'data/document';
|
||||
import { getDocumentShareURL } from 'helpers/url';
|
||||
import { IsOnMobile } from 'hooks/use-on-mobile';
|
||||
import { useToggle } from 'hooks/use-toggle';
|
||||
import { ShareIllustration } from 'illustrations/share';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
interface IProps {
|
||||
documentId: string;
|
||||
|
@ -17,23 +17,104 @@ interface IProps {
|
|||
const { Text } = Typography;
|
||||
|
||||
export const DocumentShare: React.FC<IProps> = ({ documentId, disabled = false, render }) => {
|
||||
const { isMobile } = IsOnMobile.useHook();
|
||||
const ref = useRef<HTMLInputElement>();
|
||||
const [visible, toggleVisible] = useToggle(false);
|
||||
const { data, loading, error, toggleStatus } = useDocumentDetail(documentId, { enabled: visible });
|
||||
const { data, loading, toggleStatus } = useDocumentDetail(documentId, { enabled: visible });
|
||||
const [sharePassword, setSharePassword] = useState('');
|
||||
const isPublic = useMemo(() => data && isPublicDocument(data.document.status), [data]);
|
||||
const shareUrl = useMemo(() => data && getDocumentShareURL(data.document.id), [data]);
|
||||
|
||||
const handleOk = () => {
|
||||
const copyable = useMemo(
|
||||
() => ({
|
||||
onCopy: () => Toast.success({ content: '复制文本成功' }),
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const prevent = useCallback((e) => {
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const viewUrl = useCallback(() => {
|
||||
window.open(shareUrl, '_blank');
|
||||
}, [shareUrl]);
|
||||
|
||||
const handleOk = useCallback(() => {
|
||||
toggleStatus({ sharePassword: isPublic ? '' : sharePassword });
|
||||
};
|
||||
}, [isPublic, sharePassword, toggleStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading || !data) return;
|
||||
setSharePassword(data.document && data.document.sharePassword);
|
||||
}, [loading, data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setTimeout(() => ref.current?.focus(), 100);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
showArrow
|
||||
visible={visible}
|
||||
onVisibleChange={toggleVisible}
|
||||
trigger="click"
|
||||
position={isMobile ? 'top' : 'bottomLeft'}
|
||||
style={{ width: 376, maxWidth: '80vw' }}
|
||||
content={
|
||||
<div
|
||||
style={{
|
||||
maxHeight: '70vh',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
onClick={prevent}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<ShareIllustration />
|
||||
</div>
|
||||
{isPublic ? (
|
||||
<Text
|
||||
ellipsis
|
||||
icon={<IconLink />}
|
||||
copyable={copyable}
|
||||
style={{
|
||||
width: 240,
|
||||
}}
|
||||
>
|
||||
{shareUrl}
|
||||
</Text>
|
||||
) : (
|
||||
<Input
|
||||
ref={ref}
|
||||
mode="password"
|
||||
placeholder="设置访问密码"
|
||||
value={sharePassword}
|
||||
onChange={setSharePassword}
|
||||
></Input>
|
||||
)}
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text type="tertiary">
|
||||
{isPublic
|
||||
? '分享开启后,该页面包含的所有内容均可访问,请谨慎开启'
|
||||
: ' 分享关闭后,其他人将不能继续访问该页面'}
|
||||
</Text>
|
||||
</div>
|
||||
<Space style={{ width: '100%', justifyContent: 'end', margin: '12px 0' }}>
|
||||
<Button onClick={() => toggleVisible(false)}>取消</Button>
|
||||
<Button theme="solid" type={isPublic ? 'danger' : 'primary'} onClick={handleOk}>
|
||||
{isPublic ? '关闭分享' : '开启分享'}
|
||||
</Button>
|
||||
{isPublic && (
|
||||
<Button theme="solid" type="primary" onClick={viewUrl}>
|
||||
查看文档
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{render ? (
|
||||
render({ isPublic, disabled, toggleVisible })
|
||||
) : (
|
||||
|
@ -41,76 +122,6 @@ export const DocumentShare: React.FC<IProps> = ({ documentId, disabled = false,
|
|||
{isPublic ? '分享中' : '分享'}
|
||||
</Button>
|
||||
)}
|
||||
<Modal
|
||||
title={isPublic ? '关闭分享' : '开启分享'}
|
||||
okText={isPublic ? '关闭分享' : '开启分享'}
|
||||
visible={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={() => toggleVisible(false)}
|
||||
style={{ maxWidth: '96vw' }}
|
||||
footer={
|
||||
<>
|
||||
<Button onClick={() => toggleVisible(false)}>取消</Button>
|
||||
<Button theme="solid" type={isPublic ? 'danger' : 'primary'} onClick={handleOk}>
|
||||
{isPublic ? '关闭分享' : '开启分享'}
|
||||
</Button>
|
||||
{isPublic && (
|
||||
<Button
|
||||
theme="solid"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
window.open(shareUrl, '_blank');
|
||||
}}
|
||||
>
|
||||
查看文档
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<DataRender
|
||||
loading={loading}
|
||||
error={error}
|
||||
normalContent={() => {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<ShareIllustration />
|
||||
</div>
|
||||
{isPublic ? (
|
||||
<Text
|
||||
ellipsis
|
||||
icon={<IconLink />}
|
||||
copyable={{
|
||||
onCopy: () => Toast.success({ content: '复制文本成功' }),
|
||||
}}
|
||||
style={{
|
||||
width: 320,
|
||||
}}
|
||||
>
|
||||
{shareUrl}
|
||||
</Text>
|
||||
) : (
|
||||
<Input
|
||||
autofocus
|
||||
mode="password"
|
||||
placeholder="设置访问密码"
|
||||
value={sharePassword}
|
||||
onChange={setSharePassword}
|
||||
></Input>
|
||||
)}
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text type="tertiary">
|
||||
{isPublic
|
||||
? '分享开启后,该页面包含的所有内容均可访问,请谨慎开启'
|
||||
: ' 分享关闭后,其他人将不能继续访问该页面'}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue