From c9e555d0775c0ed05c62207ed09dbea91ac4b7c1 Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Fri, 6 Dec 2024 07:14:11 +0000 Subject: [PATCH] feat(mobile): open doc info in explorer (#9040) --- .../components/mobile/config-modal/index.tsx | 2 +- .../doc-info}/doc-info.css.ts | 0 .../doc-info}/doc-info.tsx | 0 .../mobile/components/doc-info/doc-scope.tsx | 25 +++++++++++++++ .../src/mobile/components/doc-info/index.ts | 2 ++ .../explorer/nodes/doc/operations.tsx | 31 ++++++++++--------- .../core/src/mobile/components/index.ts | 1 + .../detail/page-header-more-button.tsx | 2 +- 8 files changed, 47 insertions(+), 16 deletions(-) rename packages/frontend/core/src/mobile/{pages/workspace/detail/sheets => components/doc-info}/doc-info.css.ts (100%) rename packages/frontend/core/src/mobile/{pages/workspace/detail/sheets => components/doc-info}/doc-info.tsx (100%) create mode 100644 packages/frontend/core/src/mobile/components/doc-info/doc-scope.tsx create mode 100644 packages/frontend/core/src/mobile/components/doc-info/index.ts diff --git a/packages/frontend/core/src/components/mobile/config-modal/index.tsx b/packages/frontend/core/src/components/mobile/config-modal/index.tsx index 32caaefdf8..2fd2a0f75f 100644 --- a/packages/frontend/core/src/components/mobile/config-modal/index.tsx +++ b/packages/frontend/core/src/components/mobile/config-modal/index.tsx @@ -1,5 +1,5 @@ import { Button, Modal } from '@affine/component'; -import { PageHeader } from '@affine/core/mobile/components'; +import { PageHeader } from '@affine/core/mobile/components/page-header'; import { useI18n } from '@affine/i18n'; import clsx from 'clsx'; import { diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.css.ts b/packages/frontend/core/src/mobile/components/doc-info/doc-info.css.ts similarity index 100% rename from packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.css.ts rename to packages/frontend/core/src/mobile/components/doc-info/doc-info.css.ts diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx b/packages/frontend/core/src/mobile/components/doc-info/doc-info.tsx similarity index 100% rename from packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx rename to packages/frontend/core/src/mobile/components/doc-info/doc-info.tsx diff --git a/packages/frontend/core/src/mobile/components/doc-info/doc-scope.tsx b/packages/frontend/core/src/mobile/components/doc-info/doc-scope.tsx new file mode 100644 index 0000000000..6643551ae0 --- /dev/null +++ b/packages/frontend/core/src/mobile/components/doc-info/doc-scope.tsx @@ -0,0 +1,25 @@ +import type { Doc } from '@toeverything/infra'; +import { DocsService, FrameworkScope, useService } from '@toeverything/infra'; +import { type PropsWithChildren, useEffect, useState } from 'react'; + +export const DocFrameScope = ({ + children, + docId, +}: PropsWithChildren<{ docId: string }>) => { + const docsService = useService(DocsService); + + const [doc, setDoc] = useState(null); + useEffect(() => { + if (!docId) return; + const docRef = docsService.open(docId); + setDoc(docRef.doc); + return () => { + docRef.release(); + setDoc(null); + }; + }, [docId, docsService]); + + if (!doc || !docId) return null; + + return {children}; +}; diff --git a/packages/frontend/core/src/mobile/components/doc-info/index.ts b/packages/frontend/core/src/mobile/components/doc-info/index.ts new file mode 100644 index 0000000000..078fe13d66 --- /dev/null +++ b/packages/frontend/core/src/mobile/components/doc-info/index.ts @@ -0,0 +1,2 @@ +export * from './doc-info'; +export * from './doc-scope'; diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/doc/operations.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/doc/operations.tsx index d644af9c88..a2fcf793a0 100644 --- a/packages/frontend/core/src/mobile/components/explorer/nodes/doc/operations.tsx +++ b/packages/frontend/core/src/mobile/components/explorer/nodes/doc/operations.tsx @@ -2,6 +2,7 @@ import { IconButton, MenuItem, MenuSeparator, + MenuSub, toast, useConfirmModal, } from '@affine/component'; @@ -12,6 +13,7 @@ import { IsFavoriteIcon } from '@affine/core/components/pure/icons'; import type { NodeOperation } from '@affine/core/modules/explorer'; import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/favorite'; import { WorkbenchService } from '@affine/core/modules/workbench'; +import { preventDefault } from '@affine/core/utils'; import { useI18n } from '@affine/i18n'; import { track } from '@affine/track'; import { @@ -33,12 +35,12 @@ import { } from '@toeverything/infra'; import { useCallback, useMemo } from 'react'; +import { DocFrameScope, DocInfoSheet } from '../../../doc-info'; import { DocRenameSubMenu } from './dialog'; export const useExplorerDocNodeOperations = ( docId: string, options: { - openInfoModal: () => void; openNodeCollapsed: () => void; } ) => { @@ -74,10 +76,6 @@ export const useExplorerDocNodeOperations = ( duplicate(docId, true); track.$.navigationPanel.docs.createDoc(); }, [docId, duplicate]); - const handleOpenInfoModal = useCallback(() => { - track.$.docInfoPanel.$.open(); - options.openInfoModal(); - }, [options]); const handleMoveToTrash = useCallback(() => { if (!docRecord) { @@ -154,7 +152,6 @@ export const useExplorerDocNodeOperations = ( handleOpenInSplitView, handleOpenInNewTab, handleMoveToTrash, - handleOpenInfoModal, handleRename, }), [ @@ -164,7 +161,6 @@ export const useExplorerDocNodeOperations = ( handleMoveToTrash, handleOpenInNewTab, handleOpenInSplitView, - handleOpenInfoModal, handleRename, handleToggleFavoriteDoc, ] @@ -188,7 +184,6 @@ export const useExplorerDocNodeOperationsMenu = ( handleOpenInSplitView, handleOpenInNewTab, handleMoveToTrash, - handleOpenInfoModal, handleRename, } = useExplorerDocNodeOperations(docId, options); @@ -224,12 +219,20 @@ export const useExplorerDocNodeOperationsMenu = ( { index: 50, view: ( - } - onClick={handleOpenInfoModal} + , + onClick: preventDefault, + }} + title={title ?? t['unnamed']()} + items={ + + + + } > - {t['com.affine.page-properties.page-info.view']()} - + {t['com.affine.page-properties.page-info.view']()} + ), }, { @@ -305,6 +308,7 @@ export const useExplorerDocNodeOperationsMenu = ( }, ], [ + docId, enableMultiView, favorite, handleAddLinkedPage, @@ -312,7 +316,6 @@ export const useExplorerDocNodeOperationsMenu = ( handleMoveToTrash, handleOpenInNewTab, handleOpenInSplitView, - handleOpenInfoModal, handleRename, handleToggleFavoriteDoc, t, diff --git a/packages/frontend/core/src/mobile/components/index.ts b/packages/frontend/core/src/mobile/components/index.ts index f0334eda3f..ae3c6a47ee 100644 --- a/packages/frontend/core/src/mobile/components/index.ts +++ b/packages/frontend/core/src/mobile/components/index.ts @@ -1,5 +1,6 @@ export * from './app-tabs'; export * from './doc-card'; +export * from './doc-info'; export * from './navigation-back'; export * from './page-header'; export * from './rename'; diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx index ea9f613ddf..56510085d9 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx @@ -8,6 +8,7 @@ import { import { useFavorite } from '@affine/core/components/blocksuite/block-suite-header/favorite'; import { IsFavoriteIcon } from '@affine/core/components/pure/icons'; import { EditorOutlinePanel } from '@affine/core/desktop/pages/workspace/detail-page/tabs/outline'; +import { DocInfoSheet } from '@affine/core/mobile/components'; import { EditorService } from '@affine/core/modules/editor'; import { ViewService } from '@affine/core/modules/workbench/services/view'; import { preventDefault } from '@affine/core/utils'; @@ -27,7 +28,6 @@ import { JournalConflictsMenuItem } from './menu/journal-conflicts'; import { JournalTodayActivityMenuItem } from './menu/journal-today-activity'; import { EditorModeSwitch } from './menu/mode-switch'; import * as styles from './page-header-more-button.css'; -import { DocInfoSheet } from './sheets/doc-info'; export const PageHeaderMenuButton = () => { const t = useI18n();