From 08e7fa34868c11712e28f5277be4c0eb562341e3 Mon Sep 17 00:00:00 2001 From: 3720 Date: Tue, 7 Nov 2023 18:18:56 +0800 Subject: [PATCH] fix(core): improve the UX for edit collection (#4827) Co-authored-by: Peng Xiao --- packages/common/cmdk/src/index.tsx | 21 ++- .../page-list/filter/multi-select.tsx | 1 + .../page-list/view/affine-shape.tsx | 170 +++++++++--------- .../page-list/view/create-collection.tsx | 3 + .../view/edit-collection/edit-collection.tsx | 13 +- .../view/edit-collection/rules-mode.tsx | 4 +- tests/kit/utils/filter.ts | 2 + 7 files changed, 121 insertions(+), 93 deletions(-) diff --git a/packages/common/cmdk/src/index.tsx b/packages/common/cmdk/src/index.tsx index 34f09cf5e..ec48f331c 100644 --- a/packages/common/cmdk/src/index.tsx +++ b/packages/common/cmdk/src/index.tsx @@ -4,7 +4,9 @@ import * as RadixDialog from '@radix-ui/react-dialog'; import * as React from 'react'; import { commandScore } from './command-score'; -type Children = { children?: React.ReactNode }; +type Children = { + children?: React.ReactNode; +}; type DivProps = React.HTMLAttributes; type LoadingProps = Children & @@ -117,7 +119,11 @@ type Context = { type State = { search: string; value: string; - filtered: { count: number; items: Map; groups: Set }; + filtered: { + count: number; + items: Map; + groups: Set; + }; }; type Store = { subscribe: (callback: () => void) => () => void; @@ -827,6 +833,17 @@ const Input = React.forwardRef( ref={forwardedRef} {...etc} cmdk-input="" + onKeyDown={e => { + if ( + e.key === 'Escape' || + e.key === 'k' || + e.key.startsWith('Arrow') || + e.key === 'Enter' + ) { + return; + } + e.stopPropagation(); + }} autoComplete="off" autoCorrect="off" spellCheck={false} diff --git a/packages/frontend/component/src/components/page-list/filter/multi-select.tsx b/packages/frontend/component/src/components/page-list/filter/multi-select.tsx index 9d0509bb4..797a24876 100644 --- a/packages/frontend/component/src/components/page-list/filter/multi-select.tsx +++ b/packages/frontend/component/src/components/page-list/filter/multi-select.tsx @@ -29,6 +29,7 @@ export const MultiSelect = ({ const selected = value.includes(option.value); const click = (e: MouseEvent) => { e.stopPropagation(); + e.preventDefault(); if (selected) { onChange(value.filter(v => v !== option.value)); } else { diff --git a/packages/frontend/component/src/components/page-list/view/affine-shape.tsx b/packages/frontend/component/src/components/page-list/view/affine-shape.tsx index 474dbafc2..5a598fda2 100644 --- a/packages/frontend/component/src/components/page-list/view/affine-shape.tsx +++ b/packages/frontend/component/src/components/page-list/view/affine-shape.tsx @@ -2,132 +2,126 @@ import type React from 'react'; export const AffineShapeIcon = (props: React.SVGProps) => ( - + - ); diff --git a/packages/frontend/component/src/components/page-list/view/create-collection.tsx b/packages/frontend/component/src/components/page-list/view/create-collection.tsx index 0f8243894..32f4f37fd 100644 --- a/packages/frontend/component/src/components/page-list/view/create-collection.tsx +++ b/packages/frontend/component/src/components/page-list/view/create-collection.tsx @@ -96,6 +96,9 @@ export const CreateCollection = ({ { + e.stopPropagation(); + }} data-testid="input-collection-title" placeholder={t['com.affine.editCollectionName.name.placeholder']()} onChange={useCallback((value: string) => onChange(value), [onChange])} diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx b/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx index 2b3e5a95b..4cf17f9b3 100644 --- a/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx +++ b/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx @@ -22,6 +22,7 @@ export interface EditCollectionModalProps { onConfirm: (view: Collection) => Promise; allPageListConfig: AllPageListConfig; } + const contentOptions: DialogContentProps = { onPointerDownOutside: e => { e.preventDefault(); @@ -29,7 +30,7 @@ const contentOptions: DialogContentProps = { style: { padding: 0, maxWidth: 944, - backgroundColor: 'var(--affine-white)', + backgroundColor: 'var(--affine-background-primary-color)', }, }; export const EditCollectionModal = ({ @@ -167,7 +168,15 @@ export const EditCollection = ({ [mode, t] ); return ( -
+
{ + if (e.key === 'Escape') { + return; + } + e.stopPropagation(); + }} + className={styles.collectionEditContainer} + > {mode === 'page' ? ( 0 + ); return ( <> {/*prevents modal autofocus to the first input*/} diff --git a/tests/kit/utils/filter.ts b/tests/kit/utils/filter.ts index f8f84e80e..dc1edaf81 100644 --- a/tests/kit/utils/filter.ts +++ b/tests/kit/utils/filter.ts @@ -23,6 +23,7 @@ export const createFirstFilter = async (page: Page, name: string) => { await page .locator('[data-testid="variable-select-item"]', { hasText: name }) .click(); + await page.keyboard.press('Escape'); }; export const checkFilterName = async (page: Page, name: string) => { @@ -212,4 +213,5 @@ export const changeFilter = async (page: Page, to: string) => { export async function selectTag(page: Page, name: string | RegExp) { await page.getByTestId('filter-arg').click(); await page.getByTestId(`multi-select-${name}`).click(); + await page.keyboard.press('Escape', { delay: 100 }); }