feat(mobile): explorer create/rename operation

toeverything · Oct 29, 2024 · 51a495c · 51a495c
1 parent 7699296
commit 51a495c
Show file tree

Hide file tree

Showing 34 changed files with 879 additions and 240 deletions.
diff --git a/packages/frontend/component/src/ui/menu/desktop/sub.tsx b/packages/frontend/component/src/ui/menu/desktop/sub.tsx
@@ -20,9 +20,9 @@ export const DesktopMenuSub = ({
   } = {},
 }: MenuSubProps) => {
   const { className, children, otherProps } = useMenuItem({
-    ...triggerOptions,
     children: propsChildren,
     suffixIcon: <ArrowRightSmallIcon />,
+    ...triggerOptions,
   });
 
   return (

diff --git a/packages/frontend/component/src/ui/menu/index.ts b/packages/frontend/component/src/ui/menu/index.ts
@@ -30,3 +30,4 @@ export {
 };
 
 export { Menu, MenuItem, MenuSeparator, MenuSub, MenuTrigger };
+export * from './mobile/hook';
diff --git a/packages/frontend/component/src/ui/menu/menu.types.ts b/packages/frontend/component/src/ui/menu/menu.types.ts
@@ -36,7 +36,7 @@ export interface MenuItemProps
 export interface MenuSubProps {
   children: ReactNode;
   items: ReactNode;
-  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children' | 'suffixIcon'>;
+  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children'>;
   portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
   subOptions?: Omit<DropdownMenuSubProps, 'children'>;
   subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;

diff --git a/packages/frontend/component/src/ui/menu/mobile/context.ts b/packages/frontend/component/src/ui/menu/mobile/context.ts
@@ -8,6 +8,11 @@ import {
 import type { MenuSubProps } from '../menu.types';
 
 export type SubMenuContent = {
+  /**
+   * Customize submenu's title
+   * @default "Back"
+   */
+  title?: string;
   items: ReactNode;
   contentOptions?: MenuSubProps['subContentOptions'];
 };

diff --git a/packages/frontend/component/src/ui/menu/mobile/hook.ts b/packages/frontend/component/src/ui/menu/mobile/hook.ts
@@ -0,0 +1,18 @@
+import { useCallback, useContext } from 'react';
+
+import { MobileMenuContext } from './context';
+
+export const useMobileMenuController = () => {
+  const context = useContext(MobileMenuContext);
+
+  /**
+   * **A workaround to close mobile menu manually**
+   * By default, it will close automatically when `MenuItem` clicked.
+   * For custom menu content, you can use this method to close the menu.
+   */
+  const close = useCallback(() => {
+    context.setOpen?.(false);
+  }, [context]);
+
+  return { close };
+};
diff --git a/packages/frontend/component/src/ui/menu/mobile/root.tsx b/packages/frontend/component/src/ui/menu/mobile/root.tsx
@@ -134,9 +134,9 @@ export const MobileMenu = ({
                   className={styles.backButton}
                   prefix={<ArrowLeftSmallIcon />}
                   onClick={() => setSubMenus(prev => prev.slice(0, index))}
-                  prefixStyle={{ width: 20, height: 20 }}
+                  prefixStyle={{ width: 24, height: 24 }}
                 >
-                  {t['com.affine.backButton']()}
+                  {sub.title || t['com.affine.backButton']()}
                 </Button>
 
                 {sub.items}

diff --git a/packages/frontend/component/src/ui/menu/mobile/sub.tsx b/packages/frontend/component/src/ui/menu/mobile/sub.tsx
@@ -7,26 +7,28 @@ import { useMenuItem } from '../use-menu-item';
 import { MobileMenuContext } from './context';
 
 export const MobileMenuSub = ({
+  title,
   children: propsChildren,
   items,
   triggerOptions,
   subContentOptions: contentOptions = {},
-}: MenuSubProps) => {
+}: MenuSubProps & { title?: string }) => {
   const {
     className,
     children,
     otherProps: { onClick, ...otherTriggerOptions },
   } = useMenuItem({
-    ...triggerOptions,
     children: propsChildren,
     suffixIcon: <ArrowRightSmallPlusIcon />,
+    ...triggerOptions,
   });
 
   return (
     <MobileMenuSubRaw
       onClick={onClick}
       items={items}
       subContentOptions={contentOptions}
+      title={title}
     >
       <div className={className} {...otherTriggerOptions}>
         {children}
@@ -36,19 +38,23 @@ export const MobileMenuSub = ({
 };
 
 export const MobileMenuSubRaw = ({
+  title,
   onClick,
   children,
   items,
   subContentOptions: contentOptions = {},
-}: MenuSubProps & { onClick?: (e: MouseEvent<HTMLDivElement>) => void }) => {
+}: MenuSubProps & {
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  title?: string;
+}) => {
   const { setSubMenus } = useContext(MobileMenuContext);
 
   const onItemClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       onClick?.(e);
-      setSubMenus(prev => [...prev, { items, contentOptions }]);
+      setSubMenus(prev => [...prev, { items, contentOptions, title }]);
     },
-    [contentOptions, items, onClick, setSubMenus]
+    [contentOptions, items, onClick, setSubMenus, title]
   );
 
   return <Slot onClick={onItemClick}>{children}</Slot>;

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/collection/dialog.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/collection/dialog.tsx
@@ -0,0 +1,43 @@
+import { useI18n } from '@affine/i18n';
+
+import {
+  RenameDialog,
+  type RenameDialogProps,
+  RenameSubMenu,
+  type RenameSubMenuProps,
+} from '../../../rename';
+
+export const CollectionRenameSubMenu = ({
+  title,
+  text,
+  ...props
+}: RenameSubMenuProps) => {
+  const t = useI18n();
+  return (
+    <RenameSubMenu
+      title={title || t['com.affine.m.explorer.collection.rename-menu-title']()}
+      text={text || t['com.affine.m.explorer.collection.rename']()}
+      {...props}
+    />
+  );
+};
+
+const CollectionDesc = () => {
+  const t = useI18n();
+  return t['com.affine.collection.emptyCollectionDescription']();
+};
+
+export const CollectionRenameDialog = ({
+  title,
+  confirmText,
+  ...props
+}: RenameDialogProps) => {
+  return (
+    <RenameDialog
+      title={title}
+      confirmText={confirmText}
+      {...props}
+      descRenderer={CollectionDesc}
+    />
+  );
+};
diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/collection/index.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/collection/index.tsx
@@ -52,23 +52,6 @@ export const ExplorerCollectionNode = ({
 
   const collection = useLiveData(collectionService.collection$(collectionId));
 
-  const handleRename = useCallback(
-    (name: string) => {
-      if (collection && collection.name !== name) {
-        collectionService.updateCollection(collectionId, () => ({
-          ...collection,
-          name,
-        }));
-
-        track.$.navigationPanel.organize.renameOrganizeItem({
-          type: 'collection',
-        });
-        notify.success({ message: t['com.affine.toastMessage.rename']() });
-      }
-    },
-    [collection, collectionId, collectionService, t]
-  );
-
   const handleOpenCollapsed = useCallback(() => {
     setCollapsed(false);
   }, []);
@@ -105,7 +88,7 @@ export const ExplorerCollectionNode = ({
       return [...additionalOperations, ...collectionOperations];
     }
     return collectionOperations;
-  }, [collectionOperations, additionalOperations]);
+  }, [additionalOperations, collectionOperations]);
 
   if (!collection) {
     return null;
@@ -115,12 +98,10 @@ export const ExplorerCollectionNode = ({
     <ExplorerTreeNode
       icon={CollectionIcon}
       name={collection.name || t['Untitled']()}
-      renameable
       collapsed={collapsed}
       setCollapsed={setCollapsed}
       to={`/collection/${collection.id}`}
       active={active}
-      onRename={handleRename}
       operations={finalOperations}
       data-testid={`explorer-collection-${collectionId}`}
     >

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/collection/operations.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/collection/operations.tsx
@@ -2,6 +2,7 @@ import {
   IconButton,
   MenuItem,
   MenuSeparator,
+  notify,
   useConfirmModal,
 } from '@affine/component';
 import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
@@ -28,6 +29,8 @@ import {
 } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import { CollectionRenameSubMenu } from './dialog';
+
 export const useExplorerCollectionNodeOperations = (
   collectionId: string,
   onOpenCollapsed: () => void,
@@ -113,6 +116,24 @@ export const useExplorerCollectionNodeOperations = (
     onOpenEdit();
   }, [onOpenEdit]);
 
+  const handleRename = useCallback(
+    (name: string) => {
+      const collection = collectionService.collection$(collectionId).value;
+      if (collection && collection.name !== name) {
+        collectionService.updateCollection(collectionId, () => ({
+          ...collection,
+          name,
+        }));
+
+        track.$.navigationPanel.organize.renameOrganizeItem({
+          type: 'collection',
+        });
+        notify.success({ message: t['com.affine.toastMessage.rename']() });
+      }
+    },
+    [collectionId, collectionService, t]
+  );
+
   return useMemo(
     () => ({
       favorite,
@@ -122,13 +143,15 @@ export const useExplorerCollectionNodeOperations = (
       handleOpenInSplitView,
       handleShowEdit,
       handleToggleFavoriteCollection,
+      handleRename,
     }),
     [
       favorite,
       handleAddDocToCollection,
       handleDeleteCollection,
       handleOpenInNewTab,
       handleOpenInSplitView,
+      handleRename,
       handleShowEdit,
       handleToggleFavoriteCollection,
     ]
@@ -154,6 +177,7 @@ export const useExplorerCollectionNodeOperationsMenu = (
     handleOpenInSplitView,
     handleShowEdit,
     handleToggleFavoriteCollection,
+    handleRename,
   } = useExplorerCollectionNodeOperations(
     collectionId,
     onOpenCollapsed,
@@ -177,6 +201,14 @@ export const useExplorerCollectionNodeOperationsMenu = (
           </IconButton>
         ),
       },
+      {
+        index: 10,
+        view: <CollectionRenameSubMenu onConfirm={handleRename} />,
+      },
+      {
+        index: 11,
+        view: <MenuSeparator />,
+      },
       {
         index: 99,
         view: (
@@ -256,6 +288,7 @@ export const useExplorerCollectionNodeOperationsMenu = (
       handleDeleteCollection,
       handleOpenInNewTab,
       handleOpenInSplitView,
+      handleRename,
       handleShowEdit,
       handleToggleFavoriteCollection,
       t,

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/doc/dialog.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/doc/dialog.tsx
@@ -0,0 +1,13 @@
+import { useI18n } from '@affine/i18n';
+
+import { RenameSubMenu, type RenameSubMenuProps } from '../../../rename';
+
+export const DocRenameSubMenu = ({ title, text }: RenameSubMenuProps) => {
+  const t = useI18n();
+  return (
+    <RenameSubMenu
+      title={title || t['com.affine.m.explorer.doc.rename']()}
+      text={text || t['com.affine.m.explorer.doc.rename']()}
+    />
+  );
+};
diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/doc/index.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/doc/index.tsx
@@ -1,11 +1,9 @@
 import { Loading } from '@affine/component';
-import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { DocInfoService } from '@affine/core/modules/doc-info';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import type { NodeOperation } from '@affine/core/modules/explorer';
 import { useI18n } from '@affine/i18n';
-import track from '@affine/track';
 import {
   DocsService,
   FeatureFlagService,
@@ -92,14 +90,6 @@ export const ExplorerDocNode = ({
     );
   }, [indexerLoading]);
 
-  const handleRename = useAsyncCallback(
-    async (newName: string) => {
-      await docsService.changeDocTitle(docId, newName);
-      track.$.navigationPanel.organize.renameOrganizeItem({ type: 'doc' });
-    },
-    [docId, docsService]
-  );
-
   const docInfoModal = useService(DocInfoService).modal;
   const option = useMemo(
     () => ({
@@ -126,7 +116,6 @@ export const ExplorerDocNode = ({
     <ExplorerTreeNode
       icon={Icon}
       name={t.t(docTitle)}
-      renameable
       extractEmojiAsIcon={enableEmojiIcon}
       collapsed={collapsed}
       setCollapsed={setCollapsed}
@@ -140,7 +129,6 @@ export const ExplorerDocNode = ({
           </div>
         )
       }
-      onRename={handleRename}
       operations={finalOperations}
       data-testid={`explorer-doc-${docId}`}
     >