From 232c818c81b412cd3549bcfef9142ea9e9b96414 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 3 Jun 2022 18:08:08 +0800 Subject: [PATCH] client: use dropdown instad of popover --- .../document/collaboration/index.tsx | 167 +++++++++++------- .../src/components/document/share/index.tsx | 166 ++++++++++------- .../src/components/document/style/index.tsx | 9 +- .../client/src/components/message/index.tsx | 8 +- .../client/src/components/search/index.tsx | 144 +++++++++------ packages/client/src/styles/reset.scss | 6 + .../collaboration/collaboration/editor.tsx | 8 +- .../client/src/tiptap/editor/reader/index.tsx | 8 +- .../client/src/tiptap/editor/tocs/index.tsx | 2 +- 9 files changed, 320 insertions(+), 198 deletions(-) diff --git a/packages/client/src/components/document/collaboration/index.tsx b/packages/client/src/components/document/collaboration/index.tsx index 7ff24a7..eacd866 100644 --- a/packages/client/src/components/document/collaboration/index.tsx +++ b/packages/client/src/components/document/collaboration/index.tsx @@ -4,6 +4,7 @@ import { AvatarGroup, Button, Checkbox, + Dropdown, Input, Modal, Popconfirm, @@ -24,7 +25,7 @@ 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, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; interface IProps { wikiId: string; @@ -79,6 +80,71 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId, di [deleteUser] ); + const content = useMemo( + () => ( + + +
+ + + 邀请成功后，请将该链接发送给对方。 + + + + + +
+ + + } + normalContent={() => ( + + + + + ( + handleDelete(document)}> +
+ )} + /> + + + ), + [documentId, error, handleDelete, handleOk, inviteUser, loading, updateUser, users, wikiId] + ); + + const btn = useMemo( + () => ( + - - - - } - normalContent={() => ( - - - - - ( - handleDelete(document)}> -
- )} - /> - - - } - > - + + {isPublic && ( + + )} + + + ), + [copyable, handleOk, isPublic, prevent, sharePassword, shareUrl, toggleVisible, viewUrl] + ); + + const btn = useMemo( + () => + render ? ( + render({ isPublic, disabled, toggleVisible }) + ) : ( + + ), + [disabled, isPublic, render, toggleVisible] + ); + useEffect(() => { if (loading || !data) return; setSharePassword(data.document && data.document.sharePassword); @@ -56,72 +124,42 @@ export const DocumentShare: React.FC = ({ documentId, disabled = false, }, [visible]); return ( - -
- -
- {isPublic ? ( - } - copyable={copyable} + <> + {isMobile ? ( + <> + + {content} + + {btn} + + ) : ( + - {shareUrl} - - ) : ( - - )} -
- - {isPublic - ? '分享开启后，该页面包含的所有内容均可访问，请谨慎开启' - : ' 分享关闭后，其他人将不能继续访问该页面'} - -
- - - - {isPublic && ( - - )} - - - } - > - {render ? ( - render({ isPublic, disabled, toggleVisible }) - ) : ( - + {content} + + } + > + {btn} + )} - + ); }; diff --git a/packages/client/src/components/document/style/index.tsx b/packages/client/src/components/document/style/index.tsx index f81df06..33adf94 100644 --- a/packages/client/src/components/document/style/index.tsx +++ b/packages/client/src/components/document/style/index.tsx @@ -1,5 +1,5 @@ import { IconArticle } from '@douyinfe/semi-icons'; -import { Button, Popover, Radio, RadioGroup, Slider, Typography } from '@douyinfe/semi-ui'; +import { Button, Dropdown, Radio, RadioGroup, Slider, Typography } from '@douyinfe/semi-ui'; import { throttle } from 'helpers/throttle'; import { useDocumentStyle } from 'hooks/use-document-style'; import { IsOnMobile } from 'hooks/use-on-mobile'; @@ -21,15 +21,14 @@ export const DocumentStyle = () => { }, [setWidth]); return ( -
@@ -50,6 +49,6 @@ export const DocumentStyle = () => { } >
} > {btn} - + )} ); diff --git a/packages/client/src/components/search/index.tsx b/packages/client/src/components/search/index.tsx index 4a44c2b..9c1d208 100644 --- a/packages/client/src/components/search/index.tsx +++ b/packages/client/src/components/search/index.tsx @@ -1,5 +1,5 @@ import { IconSearch as SemiIconSearch } from '@douyinfe/semi-icons'; -import { Button, Input, Modal, Spin, Typography } from '@douyinfe/semi-ui'; +import { Button, Dropdown, Input, Modal, Spin, Typography } from '@douyinfe/semi-ui'; import { IDocument } from '@think/domains'; import { DataRender } from 'components/data-render'; import { DocumentStar } from 'components/document/star'; @@ -8,10 +8,11 @@ import { IconSearch } from 'components/icons'; import { IconDocumentFill } from 'components/icons/IconDocumentFill'; import { LocaleTime } from 'components/locale-time'; import { useAsyncLoading } from 'hooks/use-async-loading'; +import { IsOnMobile } from 'hooks/use-on-mobile'; import { useToggle } from 'hooks/use-toggle'; import Link from 'next/link'; import Router from 'next/router'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { HttpClient } from 'services/http-client'; import styles from './index.module.scss'; @@ -68,6 +69,8 @@ const List: React.FC<{ data: IDocument[] }> = ({ data }) => { }; export const Search = () => { + const ref = useRef(); + const { isMobile } = IsOnMobile.useHook(); const [visible, toggleVisible] = useToggle(false); const [searchApi, loading] = useAsyncLoading(searchDocument, 10); const [keyword, setKeyword] = useState(''); @@ -85,6 +88,60 @@ export const Search = () => { }); }, [searchApi, keyword]); + const onKeywordChange = useCallback((val) => { + setSearchDocs([]); + setKeyword(val); + }, []); + + const content = useMemo( + () => ( +
+
+ } + /> +
+
+ + +
+ } + error={error} + normalContent={() => } + /> +
+ + ), + [error, keyword, loading, onKeywordChange, search, searchDocs] + ); + + const btn = useMemo( + () =>