toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-28 12:52:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #846 from toeverything/fix/quick-search-input

Browse Source 
fix: update quick search close function
This commit is contained in:
JimmFly 2023-02-07 12:15:17 +08:00 committed by GitHub
commit d7cb1b5c0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/app/src/components/quick-search/Footer.tsx
View File

@ -1,26 +1,23 @@
import React from 'react';
import { AddIcon } from '@blocksuite/icons';
import { StyledModalFooterContent } from './style';
import { useModal } from '@/providers/GlobalModalProvider';
import { Command } from 'cmdk';
import { usePageHelper } from '@/hooks/use-page-helper';
import { useTranslation } from '@affine/i18n';
export const Footer = (props: { query: string }) => {
const { triggerQuickSearchModal } = useModal();
export const Footer = (props: { query: string; onClose: () => void }) => {
const { openPage, createPage } = usePageHelper();
const { t } = useTranslation();
const query = props.query;
const { query, onClose } = props;
return (
<Command.Item
data-testid="quickSearch-addNewPage"
onSelect={async () => {
onClose();
const pageId = await createPage({ title: query });
if (pageId) {
openPage(pageId);
}
triggerQuickSearchModal();
}}
>
<StyledModalFooterContent>

7
packages/app/src/components/quick-search/Input.tsx
View File

@ -28,12 +28,9 @@ export const Input = (props: {
},
true
);
setInputValue(props.query);
return inputRef.current?.focus();
}, [inputRef]);
useEffect(() => {
return setInputValue(props.query);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [inputRef, props.query]);
return (
<StyledInputContent>
<StyledLabel htmlFor=":r5:">

12
packages/app/src/components/quick-search/Results.tsx
View File

@ -1,6 +1,5 @@
import { Command } from 'cmdk';
import { StyledListItem, StyledNotFound } from './style';
import { useModal } from '@/providers/GlobalModalProvider';
import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { useAppState } from '@/providers/app-state-provider';
@ -12,14 +11,11 @@ import usePageHelper from '@/hooks/use-page-helper';
export const Results = (props: {
query: string;
loading: boolean;
onClose: () => void;
setLoading: Dispatch<SetStateAction<boolean>>;
setShowCreatePage: Dispatch<SetStateAction<boolean>>;
}) => {
const query = props.query;
const loading = props.loading;
const setLoading = props.setLoading;
const setShowCreatePage = props.setShowCreatePage;
const { triggerQuickSearchModal } = useModal();
const { query, loading, setLoading, setShowCreatePage, onClose } = props;
const { openPage } = usePageHelper();
const router = useRouter();
const { currentWorkspace, pageList } = useAppState();
@ -55,8 +51,8 @@ export const Results = (props: {
<Command.Item
key={result.id}
onSelect={() => {
onClose();
openPage(result.id);
triggerQuickSearchModal();
}}
value={result.id}
>
@ -86,8 +82,8 @@ export const Results = (props: {
key={link.title}
value={link.title}
onSelect={() => {
onClose();
router.push(link.href);
triggerQuickSearchModal();
}}
>
<StyledListItem>

15
packages/app/src/components/quick-search/index.tsx
View File

@ -31,11 +31,16 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [showCreatePage, setShowCreatePage] = useState(true);
const { triggerQuickSearchModal } = useModal();
const handleClose = () => {
setQuery('');
onClose();
};
// Add ‘⌘+K’ shortcut keys as switches
useEffect(() => {
const down = (e: KeyboardEvent) => {
if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
const selection = window.getSelection();
setQuery('');
if (selection?.toString()) {
triggerQuickSearchModal(false);
return;
@ -45,9 +50,6 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
}
}
};
if (!open) {
setQuery('');
}
document.addEventListener('keydown', down, { capture: true });
return () =>
document.removeEventListener('keydown', down, { capture: true });
@ -64,7 +66,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
return (
<Modal
open={open}
onClose={onClose}
onClose={handleClose}
wrapperPosition={['top', 'center']}
data-testid="quickSearch"
>
@ -108,6 +110,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
query={query}
loading={loading}
setLoading={setLoading}
onClose={handleClose}
setShowCreatePage={setShowCreatePage}
/>
) : (
@ -115,7 +118,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
query={query}
loading={loading}
setLoading={setLoading}
onClose={onClose}
onClose={handleClose}
setPublishWorkspaceName={setPublishWorkspaceName}
/>
)}
@ -125,7 +128,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
<>
<StyledModalDivider />
<StyledModalFooter>
<Footer query={query} />
<Footer query={query} onClose={handleClose} />
</StyledModalFooter>
</>
) : null

35
tests/quick-search.spec.ts
View File

@ -8,15 +8,19 @@ loadPage();
const openQuickSearchByShortcut = async (page: Page) =>
await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
async function assertTitleTexts(page: Page, texts: string) {
await page.title();
const actual = await page.evaluate(() => {
const titleElement = <HTMLTextAreaElement>(
document.querySelector('.affine-default-page-block-title')
);
return titleElement.value;
});
expect(actual).toEqual(texts);
async function assertTitleTexts(page: Page, texts: string, isSearch?: boolean) {
if (isSearch) {
const actual = await page.evaluate(() => {
const titleElement = <HTMLTextAreaElement>(
document.querySelector('.affine-default-page-block-title')
);
return titleElement.value;
});
expect(actual).toEqual(texts);
} else {
const actual = await page.title();
expect(actual).toEqual(texts);
}
}
async function assertResultList(page: Page, texts: string[]) {
const actual = await page.locator('[cmdk-item]').allInnerTexts();
@ -53,14 +57,13 @@ test.describe('Open quick search', () => {
});
test.describe('Add new page in quick search', () => {
// FIXME: not working
test('Create a new page without keyword', async ({ page }) => {
await newPage(page);
await openQuickSearchByShortcut(page);
const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
await addNewPage.click();
await page.waitForTimeout(300);
await assertTitleTexts(page, '');
await assertTitleTexts(page, 'Untitled');
});
test('Create a new page with keyword', async ({ page }) => {
@ -75,7 +78,7 @@ test.describe('Add new page in quick search', () => {
});
test.describe('Search and select', () => {
test.skip('Create a new page and search this page', async ({ page }) => {
test('Create a new page and search this page', async ({ page }) => {
await newPage(page);
await openQuickSearchByShortcut(page);
await page.keyboard.insertText('test123456');
@ -83,11 +86,11 @@ test.describe('Search and select', () => {
await addNewPage.click();
await page.waitForTimeout(300);
await assertTitleTexts(page, 'test123456');
await page.waitForTimeout(100);
await openQuickSearchByShortcut(page);
await page.keyboard.type('test123456');
await page.keyboard.insertText('test123456');
await assertResultList(page, ['test123456']);
await page.keyboard.press('Enter', { delay: 50 });
await assertTitleTexts(page, 'test123456');
await page.keyboard.press('Enter');
await page.waitForTimeout(300);
await assertTitleTexts(page, 'test123456', true);
});
});