From 73272e266bd01bf005f40d66b44d314d5b2b15a4 Mon Sep 17 00:00:00 2001 From: Prajna <44605072+hqwuzhaoyi@users.noreply.github.com> Date: Wed, 9 Aug 2023 01:54:20 +0800 Subject: [PATCH] fix: collection-list pin icon not changed (#3625) --- .../page-list/view/collection-bar.css.ts | 8 ++ .../page-list/view/collection-bar.tsx | 80 ++--------------- .../page-list/view/collection-list.tsx | 71 ++++----------- .../components/page-list/view/use-action.tsx | 86 +++++++++++++++++++ 4 files changed, 118 insertions(+), 127 deletions(-) create mode 100644 packages/component/src/components/page-list/view/use-action.tsx diff --git a/packages/component/src/components/page-list/view/collection-bar.css.ts b/packages/component/src/components/page-list/view/collection-bar.css.ts index be8283f6bd..c2a678335b 100644 --- a/packages/component/src/components/page-list/view/collection-bar.css.ts +++ b/packages/component/src/components/page-list/view/collection-bar.css.ts @@ -1,5 +1,7 @@ import { style } from '@vanilla-extract/css'; +import { viewMenu } from './collection-list.css'; + export const view = style({ display: 'flex', alignItems: 'center', @@ -36,6 +38,9 @@ export const pinedIcon = style({ [`${option}:hover &`]: { display: 'none', }, + [`${viewMenu}:hover &`]: { + display: 'none', + }, }, }); export const pinIcon = style({ @@ -44,5 +49,8 @@ export const pinIcon = style({ [`${option}:hover &`]: { display: 'block', }, + [`${viewMenu}:hover &`]: { + display: 'block', + }, }, }); diff --git a/packages/component/src/components/page-list/view/collection-bar.tsx b/packages/component/src/components/page-list/view/collection-bar.tsx index cffd440c7d..e73c3ac0eb 100644 --- a/packages/component/src/components/page-list/view/collection-bar.tsx +++ b/packages/component/src/components/page-list/view/collection-bar.tsx @@ -3,21 +3,14 @@ import { EditCollectionModel } from '@affine/component/page-list'; import type { PropertiesMeta } from '@affine/env/filter'; import type { GetPageInfoById } from '@affine/env/page-info'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { - DeleteIcon, - FilterIcon, - PinedIcon, - PinIcon, - UnpinIcon, - ViewLayersIcon, -} from '@blocksuite/icons'; +import { ViewLayersIcon } from '@blocksuite/icons'; import { Button } from '@toeverything/components/button'; import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import { useCallback, useMemo, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useCollectionManager } from '../use-collection-manager'; import * as styles from './collection-bar.css'; +import { useActions } from './use-action'; interface CollectionBarProps { getPageInfo: GetPageInfoById; @@ -26,74 +19,17 @@ interface CollectionBarProps { workspaceId: string; } -interface CollectionBarAction { - icon: ReactNode; - click: () => void; - className?: string; - name: string; - tooltip: string; -} - export const CollectionBar = (props: CollectionBarProps) => { const { getPageInfo, propertiesMeta, columnsCount, workspaceId } = props; const t = useAFFiNEI18N(); const setting = useCollectionManager(workspaceId); const collection = setting.currentCollection; const [open, setOpen] = useState(false); - const actions = useMemo( - () => [ - { - icon: ( - <> - {collection.pinned ? ( - - ) : ( - - )} - {collection.pinned ? ( - - ) : ( - - )} - - ), - name: 'pin', - tooltip: collection.pinned - ? t['com.affine.collection-bar.action.tooltip.unpin']() - : t['com.affine.collection-bar.action.tooltip.pin'](), - className: styles.pin, - click: () => { - setting - .updateCollection({ - ...collection, - pinned: !collection.pinned, - }) - .catch(err => { - console.error(err); - }); - }, - }, - { - icon: , - name: 'edit', - tooltip: t['com.affine.collection-bar.action.tooltip.edit'](), - click: () => { - setOpen(true); - }, - }, - { - icon: , - name: 'delete', - tooltip: t['com.affine.collection-bar.action.tooltip.delete'](), - click: () => { - setting.deleteCollection(collection.id).catch(err => { - console.error(err); - }); - }, - }, - ], - [collection, t, setting] - ); + const actions = useActions({ + collection, + setting, + openEdit: () => setOpen(true), + }); const onClose = useCallback(() => setOpen(false), []); return !setting.isDefault ? ( diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx index d8a66f74b1..6eb5ad014f 100644 --- a/packages/component/src/components/page-list/view/collection-list.tsx +++ b/packages/component/src/components/page-list/view/collection-list.tsx @@ -3,19 +3,12 @@ import type { Collection, Filter } from '@affine/env/filter'; import type { PropertiesMeta } from '@affine/env/filter'; import type { GetPageInfoById } from '@affine/env/page-info'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { - DeleteIcon, - FilteredIcon, - FilterIcon, - FolderIcon, - PinIcon, - ViewLayersIcon, -} from '@blocksuite/icons'; +import { FilteredIcon, FolderIcon, ViewLayersIcon } from '@blocksuite/icons'; import { Button } from '@toeverything/components/button'; import clsx from 'clsx'; import { useAtom } from 'jotai'; -import type { MouseEvent, ReactNode } from 'react'; -import { useCallback, useMemo, useState } from 'react'; +import type { MouseEvent } from 'react'; +import { useCallback, useState } from 'react'; import { MenuItem, Tooltip } from '../../..'; import Menu from '../../../ui/menu/menu'; @@ -23,6 +16,7 @@ import { appSidebarOpenAtom } from '../../app-sidebar'; import { CreateFilterMenu } from '../filter/vars'; import type { useCollectionManager } from '../use-collection-manager'; import * as styles from './collection-list.css'; +import { useActions } from './use-action'; const CollectionOption = ({ collection, @@ -33,46 +27,12 @@ const CollectionOption = ({ setting: ReturnType; updateCollection: (view: Collection) => void; }) => { - const actions: { - icon: ReactNode; - click: () => void; - className?: string; - name: string; - }[] = useMemo( - () => [ - { - icon: , - name: 'pin', - click: () => { - setting - .updateCollection({ - ...collection, - pinned: !collection.pinned, - }) - .catch(err => { - console.error(err); - }); - }, - }, - { - icon: , - name: 'edit', - click: () => { - updateCollection(collection); - }, - }, - { - icon: , - name: 'delete', - click: () => { - setting.deleteCollection(collection.id).catch(err => { - console.error(err); - }); - }, - }, - ], - [setting, updateCollection, collection] - ); + const actions = useActions({ + collection, + setting, + openEdit: updateCollection, + }); + const selectCollection = useCallback( () => setting.selectCollection(collection.id), [setting, collection.id] @@ -112,20 +72,21 @@ const CollectionOption = ({ alignItems: 'center', }} > - {actions.map((v, i) => { + {actions.map((action, i) => { const onClick = (e: MouseEvent) => { e.stopPropagation(); - v.click(); + action.click(); }; + return (
- {v.icon} + {action.icon}
); })} diff --git a/packages/component/src/components/page-list/view/use-action.tsx b/packages/component/src/components/page-list/view/use-action.tsx new file mode 100644 index 0000000000..a2db0c77a4 --- /dev/null +++ b/packages/component/src/components/page-list/view/use-action.tsx @@ -0,0 +1,86 @@ +import type { Collection } from '@affine/env/filter'; +import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { + DeleteIcon, + FilterIcon, + PinedIcon, + PinIcon, + UnpinIcon, +} from '@blocksuite/icons'; +import { type ReactNode, useMemo } from 'react'; + +import type { useCollectionManager } from '../use-collection-manager'; +import * as styles from './collection-bar.css'; + +interface CollectionBarAction { + icon: ReactNode; + click: () => void; + className?: string; + name: string; + tooltip: string; +} + +export const useActions = ({ + collection, + setting, + openEdit, +}: { + collection: Collection; + setting: ReturnType; + openEdit: (open: Collection) => void; +}) => { + const t = useAFFiNEI18N(); + return useMemo(() => { + return [ + { + icon: ( + <> + {collection.pinned ? ( + + ) : ( + + )} + {collection.pinned ? ( + + ) : ( + + )} + + ), + name: 'pin', + tooltip: collection.pinned + ? t['com.affine.collection-bar.action.tooltip.unpin']() + : t['com.affine.collection-bar.action.tooltip.pin'](), + className: styles.pin, + click: () => { + setting + .updateCollection({ + ...collection, + pinned: !collection.pinned, + }) + .catch(err => { + console.error(err); + }); + }, + }, + { + icon: , + name: 'edit', + tooltip: t['com.affine.collection-bar.action.tooltip.edit'](), + click: () => { + openEdit(collection); + }, + }, + { + icon: , + name: 'delete', + tooltip: t['com.affine.collection-bar.action.tooltip.delete'](), + click: () => { + setting.deleteCollection(collection.id).catch(err => { + console.error(err); + }); + }, + }, + ]; + }, [collection, t, setting, openEdit]); +};