From f37e054a6eb2ea8e2752d4a6df0693b2f14279e4 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 29 Aug 2022 11:39:28 +0800 Subject: [PATCH] client: fix client ui --- .../document/collaboration/index.tsx | 2 +- .../client/src/components/wiki/tocs/index.tsx | 31 ++----------- .../src/components/wiki/tocs/public.tsx | 23 +--------- .../client/src/components/wiki/tocs/tree.tsx | 43 +++++++++++-------- .../wiki/[wikiId]/doc/[documentId]/index.tsx | 2 +- .../[wikiId]/document/[documentId]/index.tsx | 2 +- packages/client/src/tiptap/core/all-kit.ts | 2 + 7 files changed, 34 insertions(+), 71 deletions(-) diff --git a/packages/client/src/components/document/collaboration/index.tsx b/packages/client/src/components/document/collaboration/index.tsx index 40166f70..986d0979 100644 --- a/packages/client/src/components/document/collaboration/index.tsx +++ b/packages/client/src/components/document/collaboration/index.tsx @@ -105,7 +105,7 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId, di {collaborationUsers.map((user) => { return ( - + {user.name && user.name.charAt(0)} diff --git a/packages/client/src/components/wiki/tocs/index.tsx b/packages/client/src/components/wiki/tocs/index.tsx index 55512a08..926a7b30 100644 --- a/packages/client/src/components/wiki/tocs/index.tsx +++ b/packages/client/src/components/wiki/tocs/index.tsx @@ -4,20 +4,18 @@ import { IDocument } from '@think/domains'; import cls from 'classnames'; import { DataRender } from 'components/data-render'; import { IconOverview, IconSetting } from 'components/icons'; -import { findParents } from 'components/wiki/tocs/utils'; import { useStarDocumentsInWiki, useStarWikisInOrganization } from 'data/star'; import { useWikiDetail, useWikiTocs } from 'data/wiki'; import { triggerCreateDocument } from 'event'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { useEffect, useMemo, useState } from 'react'; +import { useMemo } from 'react'; import styles from './index.module.scss'; import { Tree } from './tree'; interface IProps { wikiId: string; - documentId?: string; docAsLink?: string; getDocLink?: (arg: IDocument) => string; } @@ -26,7 +24,6 @@ const { Text } = Typography; export const WikiTocs: React.FC = ({ wikiId, - documentId = null, docAsLink = '/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]', getDocLink = (document) => `/app/org/${document.organizationId}/wiki/${document.wikiId}/doc/${document.id}`, }) => { @@ -39,15 +36,8 @@ export const WikiTocs: React.FC = ({ loading: starDocumentsLoading, error: starDocumentsError, } = useStarDocumentsInWiki(query.organizationId, wikiId); - const [parentIds, setParentIds] = useState>([]); const otherStarWikis = useMemo(() => (starWikis || []).filter((wiki) => wiki.id !== wikiId), [starWikis, wikiId]); - useEffect(() => { - if (!tocs || !tocs.length) return; - const parentIds = findParents(tocs, documentId); - setParentIds(parentIds); - }, [tocs, documentId]); - return (
@@ -276,15 +266,7 @@ export const WikiTocs: React.FC = ({ ( - - )} + normalContent={() => } />
@@ -315,14 +297,7 @@ export const WikiTocs: React.FC = ({ loading={tocsLoading} error={tocsError} normalContent={() => ( - + )} /> diff --git a/packages/client/src/components/wiki/tocs/public.tsx b/packages/client/src/components/wiki/tocs/public.tsx index 5ea059da..2169d65c 100644 --- a/packages/client/src/components/wiki/tocs/public.tsx +++ b/packages/client/src/components/wiki/tocs/public.tsx @@ -5,10 +5,9 @@ import { DataRender } from 'components/data-render'; import { IconOverview } from 'components/icons'; import { LogoImage, LogoText } from 'components/logo'; import { Seo } from 'components/seo'; -import { findParents } from 'components/wiki/tocs/utils'; import { usePublicWikiDetail, usePublicWikiTocs } from 'data/wiki'; import { useRouter } from 'next/router'; -import React, { useEffect, useState } from 'react'; +import React from 'react'; import styles from './index.module.scss'; import { NavItem } from './nav-item'; @@ -16,7 +15,6 @@ import { Tree } from './tree'; interface IProps { wikiId: string; - documentId?: string; docAsLink?: string; getDocLink?: (arg: IDocument) => string; pageTitle: string; @@ -27,20 +25,12 @@ const { Text } = Typography; export const WikiPublicTocs: React.FC = ({ pageTitle, wikiId, - documentId = null, docAsLink = '/share/wiki/[wikiId]/document/[documentId]', getDocLink = (document) => `/share/wiki/${document.wikiId}/document/${document.id}`, }) => { const { pathname } = useRouter(); const { data: wiki, loading: wikiLoading, error: wikiError } = usePublicWikiDetail(wikiId); const { data: tocs, loading: tocsLoading, error: tocsError } = usePublicWikiTocs(wikiId); - const [parentIds, setParentIds] = useState>([]); - - useEffect(() => { - if (!tocs || !tocs.length) return; - const parentIds = findParents(tocs, documentId); - setParentIds(parentIds); - }, [tocs, documentId]); return (
@@ -131,16 +121,7 @@ export const WikiPublicTocs: React.FC = ({ /> } error={tocsError} - normalContent={() => ( - - )} + normalContent={() => } />
diff --git a/packages/client/src/components/wiki/tocs/tree.tsx b/packages/client/src/components/wiki/tocs/tree.tsx index dbc2b72b..ed2159b0 100644 --- a/packages/client/src/components/wiki/tocs/tree.tsx +++ b/packages/client/src/components/wiki/tocs/tree.tsx @@ -2,13 +2,16 @@ import { IconPlus } from '@douyinfe/semi-icons'; import { Button, Tree as SemiTree, Typography } from '@douyinfe/semi-ui'; import { DocumentActions } from 'components/document/actions'; import { DocumentCreator as DocumenCreatorForm } from 'components/document/create'; +import deepEqual from 'deep-equal'; import { CREATE_DOCUMENT, event, triggerCreateDocument } from 'event'; import { useToggle } from 'hooks/use-toggle'; import Link from 'next/link'; +import { useRouter } from 'next/router'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import scrollIntoView from 'scroll-into-view-if-needed'; import styles from './index.module.scss'; +import { findParents } from './utils'; const Actions = ({ node }) => { return ( @@ -67,17 +70,16 @@ const AddDocument = () => { let scrollTimer; -export const Tree = ({ - data, - docAsLink, - getDocLink, - parentIds, - activeId, - isShareMode = false, - needAddDocument = false, -}) => { +export const _Tree = ({ data, docAsLink, getDocLink, isShareMode = false, needAddDocument = false }) => { + const { query } = useRouter(); const $container = useRef(null); - const [expandedKeys, setExpandedKeys] = useState(parentIds); + const [expandedKeys, setExpandedKeys] = useState([]); + + useEffect(() => { + if (!data || !data.length) return; + const parentIds = findParents(data, query.documentId as string); + setExpandedKeys(parentIds); + }, [data, query.documentId]); const renderBtn = useCallback((node) => , []); @@ -103,12 +105,7 @@ export const Tree = ({ ); useEffect(() => { - if (!parentIds || !parentIds.length) return; - setExpandedKeys(parentIds); - }, [parentIds]); - - useEffect(() => { - const target = $container.current.querySelector(`#item-${activeId}`); + const target = $container.current.querySelector(`#item-${query.documentId}`); if (!target) return; clearTimeout(scrollTimer); scrollTimer = setTimeout(() => { @@ -121,15 +118,15 @@ export const Tree = ({ return () => { clearTimeout(scrollTimer); }; - }, [activeId]); + }, [query.documentId]); return (
setExpandedKeys(expandedKeys)} /> @@ -137,3 +134,11 @@ export const Tree = ({
); }; + +export const Tree = React.memo(_Tree, (prevProps, nextProps) => { + if (deepEqual(prevProps.data, nextProps.data)) { + return true; + } + + return false; +}); diff --git a/packages/client/src/pages/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]/index.tsx b/packages/client/src/pages/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]/index.tsx index 478e473f..be539a5e 100644 --- a/packages/client/src/pages/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]/index.tsx +++ b/packages/client/src/pages/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]/index.tsx @@ -16,7 +16,7 @@ interface IProps { const Page: NextPage = ({ wikiId, documentId }) => { return ( } + leftNode={} rightNode={} /> ); diff --git a/packages/client/src/pages/share/wiki/[wikiId]/document/[documentId]/index.tsx b/packages/client/src/pages/share/wiki/[wikiId]/document/[documentId]/index.tsx index 70d60420..544976e5 100644 --- a/packages/client/src/pages/share/wiki/[wikiId]/document/[documentId]/index.tsx +++ b/packages/client/src/pages/share/wiki/[wikiId]/document/[documentId]/index.tsx @@ -16,7 +16,7 @@ interface IProps { const Page: NextPage = ({ wikiId, documentId }) => { return ( } + leftNode={} rightNode={} > ); diff --git a/packages/client/src/tiptap/core/all-kit.ts b/packages/client/src/tiptap/core/all-kit.ts index ba166277..c10d3600 100644 --- a/packages/client/src/tiptap/core/all-kit.ts +++ b/packages/client/src/tiptap/core/all-kit.ts @@ -14,6 +14,7 @@ import { DocumentChildren } from 'tiptap/core/extensions/document-children'; import { DocumentReference } from 'tiptap/core/extensions/document-reference'; import { Dropcursor } from 'tiptap/core/extensions/dropcursor'; import { Emoji } from 'tiptap/core/extensions/emoji'; +import { Excalidraw } from 'tiptap/core/extensions/excalidraw'; import { Flow } from 'tiptap/core/extensions/flow'; import { Focus } from 'tiptap/core/extensions/focus'; import { FontSize } from 'tiptap/core/extensions/font-size'; @@ -73,6 +74,7 @@ export const AllExtensions = [ Color, ColorHighlighter, Dropcursor, + Excalidraw, Focus, FontSize, Gapcursor,