luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: quick search input and result (#1512)

Browse Source
This commit is contained in:
JimmFly
2023-03-10 18:00:16 +08:00
committed by GitHub
parent e578721cce
commit f54e0567d6
6 changed files with 146 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/components/pure/quick-search-modal/Footer.tsx
View File

@@ -1,7 +1,7 @@
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import type { PageBlockModel } from '@blocksuite/blocks'; import type { PageBlockModel } from '@blocksuite/blocks';
import { PlusIcon } from '@blocksuite/icons'; import { PlusIcon } from '@blocksuite/icons';
import { assertEquals, assertExists, nanoid } from '@blocksuite/store'; import { assertEquals, nanoid } from '@blocksuite/store';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import { NextRouter } from 'next/router'; import { NextRouter } from 'next/router';
import React from 'react'; import React from 'react';
@@ -49,8 +49,9 @@ export const Footer: React.FC<FooterProps> = ({
const block = newPage.getBlockByFlavour( const block = newPage.getBlockByFlavour(
'affine:page' 'affine:page'
)[0] as PageBlockModel; )[0] as PageBlockModel;
assertExists(block); if (block) {
block.title.insert(query, 0); block.title.insert(query, 0);
}
} }
}} }}
> >

86
apps/web/src/components/pure/quick-search-modal/Input.tsx
View File

@@ -1,86 +0,0 @@
import { useTranslation } from '@affine/i18n';
import { SearchIcon } from '@blocksuite/icons';
import { Command } from 'cmdk';
import React, { useEffect, useRef, useState } from 'react';
import { StyledInputContent, StyledLabel } from './style';
export const Input = (props: {
open: boolean;
query: string;
setQuery: (query: string) => void;
isPublic: boolean;
publishWorkspaceName: string | undefined;
}) => {
const { open, query, setQuery, isPublic, publishWorkspaceName } = props;
const [isComposition, setIsComposition] = useState(false);
const [inputValue, setInputValue] = useState('');
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
useEffect(() => {
if (open) {
const inputElement = inputRef.current;
return inputElement?.focus();
}
}, [open]);
useEffect(() => {
const inputElement = inputRef.current;
if (!open) {
return;
}
const handleFocus = () => {
inputElement?.focus();
};
inputElement?.addEventListener('blur', handleFocus, true);
return () => inputElement?.removeEventListener('blur', handleFocus, true);
}, [inputRef, open]);
useEffect(() => {
setInputValue(query);
}, [query]);
return (
<StyledInputContent>
<StyledLabel htmlFor=":r5:">
<SearchIcon />
</StyledLabel>
<Command.Input
ref={inputRef}
value={inputValue}
onCompositionStart={() => {
setIsComposition(true);
}}
onCompositionEnd={e => {
setQuery(e.data);
setIsComposition(false);
}}
onValueChange={str => {
setInputValue(str);
if (!isComposition) {
setQuery(str);
}
}}
onKeyDown={(e: React.KeyboardEvent) => {
if (e.key === 'a' && e.metaKey) {
e.stopPropagation();
inputRef.current?.select();
return;
}
if (isComposition) {
if (
e.key === 'ArrowDown' ||
e.key === 'ArrowUp' ||
e.key === 'Enter'
) {
e.stopPropagation();
}
}
}}
placeholder={
isPublic
? t('Quick search placeholder2', {
workspace: publishWorkspaceName,
})
: t('Quick search placeholder')
}
/>
</StyledInputContent>
);
};

152
apps/web/src/components/pure/quick-search-modal/Results.tsx
View File

@@ -4,7 +4,7 @@ import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store'; import { assertExists } from '@blocksuite/store';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import { NextRouter } from 'next/router'; import { NextRouter } from 'next/router';
import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'; import React, { Dispatch, SetStateAction, useEffect } from 'react';
import { useRecentlyViewed } from '../../../hooks/affine/use-recent-views'; import { useRecentlyViewed } from '../../../hooks/affine/use-recent-views';
import { useBlockSuiteWorkspaceHelper } from '../../../hooks/use-blocksuite-workspace-helper'; import { useBlockSuiteWorkspaceHelper } from '../../../hooks/use-blocksuite-workspace-helper';
@@ -18,14 +18,12 @@ import { StyledListItem, StyledNotFound } from './style';
export type ResultsProps = { export type ResultsProps = {
blockSuiteWorkspace: BlockSuiteWorkspace; blockSuiteWorkspace: BlockSuiteWorkspace;
query: string; query: string;
loading: boolean;
onClose: () => void; onClose: () => void;
setShowCreatePage: Dispatch<SetStateAction<boolean>>; setShowCreatePage: Dispatch<SetStateAction<boolean>>;
router: NextRouter; router: NextRouter;
}; };
export const Results: React.FC<ResultsProps> = ({ export const Results: React.FC<ResultsProps> = ({
query, query,
loading,
blockSuiteWorkspace, blockSuiteWorkspace,
setShowCreatePage, setShowCreatePage,
router, router,
@@ -35,15 +33,12 @@ export const Results: React.FC<ResultsProps> = ({
const pageList = usePageMeta(blockSuiteWorkspace); const pageList = usePageMeta(blockSuiteWorkspace);
assertExists(blockSuiteWorkspace.id); assertExists(blockSuiteWorkspace.id);
const List = useSwitchToConfig(blockSuiteWorkspace.id); const List = useSwitchToConfig(blockSuiteWorkspace.id);
const [results, setResults] = useState(new Map<string, string | undefined>());
const recentlyViewed = useRecentlyViewed(); const recentlyViewed = useRecentlyViewed();
const { t } = useTranslation(); const { t } = useTranslation();
const { jumpToPage } = useRouterHelper(router); const { jumpToPage } = useRouterHelper(router);
useEffect(() => { const results = blockSuiteWorkspace.search(query);
setResults(blockSuiteWorkspace.search(query));
//Save the Map<BlockId, PageId> obtained from the search as state
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [query, setResults]);
const pageIds = [...results.values()]; const pageIds = [...results.values()];
const resultsPageMeta = pageList.filter( const resultsPageMeta = pageList.filter(
@@ -61,93 +56,88 @@ export const Results: React.FC<ResultsProps> = ({
setShowCreatePage(!resultsPageMeta.length); setShowCreatePage(!resultsPageMeta.length);
//Determine whether to display the ‘+ New page’ //Determine whether to display the ‘+ New page’
}, [resultsPageMeta.length, setShowCreatePage]); }, [resultsPageMeta.length, setShowCreatePage]);
return loading ? null : ( if (!query) {
<> return (
{query ? ( <>
resultsPageMeta.length ? ( {recentlyViewedItem.length > 0 && (
<Command.Group <Command.Group heading={t('Recent')}>
heading={t('Find results', { number: resultsPageMeta.length })} {recentlyViewedItem.map(recent => {
> const page = pageList.find(page => recent.id === page.id);
{resultsPageMeta.map(result => { assertExists(page);
return ( return (
<Command.Item <Command.Item
key={result.id} key={page.id}
value={page.id}
onSelect={() => { onSelect={() => {
onClose(); onClose();
assertExists(blockSuiteWorkspace.id); jumpToPage(blockSuiteWorkspace.id, page.id);
jumpToPage(blockSuiteWorkspace.id, result.id);
}} }}
value={result.id}
> >
<StyledListItem> <StyledListItem>
{result.mode === 'edgeless' ? ( {recent.mode === 'edgeless' ? (
<EdgelessIcon /> <EdgelessIcon />
) : ( ) : (
<PageIcon /> <PageIcon />
)} )}
<span>{result.title}</span> <span>{page.title || UNTITLED_WORKSPACE_NAME}</span>
</StyledListItem> </StyledListItem>
</Command.Item> </Command.Item>
); );
})} })}
</Command.Group> </Command.Group>
) : ( )}
<StyledNotFound> <Command.Group heading={t('Jump to')}>
<span>{t('Find 0 result')}</span> {List.map(link => {
<NoResultSVG /> return (
</StyledNotFound> <Command.Item
) key={link.title}
) : ( value={link.title}
<div> onSelect={() => {
{recentlyViewedItem.length > 0 && ( onClose();
<Command.Group heading={t('Recent')}> router.push(link.href);
{recentlyViewedItem.map(recent => { }}
const page = pageList.find(page => recent.id === page.id); >
assertExists(page); <StyledListItem>
return ( <link.icon />
<Command.Item <span>{link.title}</span>
key={page.id} </StyledListItem>
value={page.id} </Command.Item>
onSelect={() => { );
onClose(); })}
jumpToPage(blockSuiteWorkspace.id, page.id); </Command.Group>
}} </>
> );
<StyledListItem> }
{recent.mode === 'edgeless' ? ( if (!resultsPageMeta.length) {
<EdgelessIcon /> return (
) : ( <StyledNotFound>
<PageIcon /> <span>{t('Find 0 result')}</span>
)} <NoResultSVG />
<span>{page.title || UNTITLED_WORKSPACE_NAME}</span> </StyledNotFound>
</StyledListItem> );
</Command.Item> }
); return (
})} <Command.Group
</Command.Group> heading={t('Find results', { number: resultsPageMeta.length })}
)} >
{resultsPageMeta.map(result => {
<Command.Group heading={t('Jump to')}> return (
{List.map(link => { <Command.Item
return ( key={result.id}
<Command.Item onSelect={() => {
key={link.title} onClose();
value={link.title} assertExists(blockSuiteWorkspace.id);
onSelect={() => { jumpToPage(blockSuiteWorkspace.id, result.id);
onClose(); }}
router.push(link.href); value={result.id}
}} >
> <StyledListItem>
<StyledListItem> {result.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />}
<link.icon /> <span>{result.title}</span>
<span>{link.title}</span> </StyledListItem>
</StyledListItem> </Command.Item>
</Command.Item> );
); })}
})} </Command.Group>
</Command.Group>
</div>
)}
</>
); );
}; };

33
apps/web/src/components/pure/quick-search-modal/SearchInput.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { SearchIcon } from '@blocksuite/icons';
import { Command } from 'cmdk';
import { forwardRef } from 'react';
import { StyledInputContent, StyledLabel } from './style';
export const SearchInput = forwardRef<
HTMLInputElement,
Omit<
React.InputHTMLAttributes<HTMLInputElement>,
'value' | 'onChange' | 'type'
> & {
/**
* Optional controlled state for the value of the search input.
*/
value?: string;
/**
* Event handler called when the search value changes.
*/
onValueChange?: (search: string) => void;
} & React.RefAttributes<HTMLInputElement>
>((props, ref) => {
return (
<StyledInputContent>
<StyledLabel htmlFor=":r5:">
<SearchIcon />
</StyledLabel>
<Command.Input ref={ref} {...props} />
</StyledInputContent>
);
});
SearchInput.displayName = 'SearchInput';

45
apps/web/src/components/pure/quick-search-modal/index.tsx
View File

@@ -1,20 +1,22 @@
import { Modal, ModalWrapper } from '@affine/component'; import { Modal, ModalWrapper } from '@affine/component';
import { getEnvironment } from '@affine/env'; import { getEnvironment } from '@affine/env';
import { useTranslation } from '@affine/i18n';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import { NextRouter } from 'next/router'; import { NextRouter } from 'next/router';
import React, { import React, {
useCallback, useCallback,
useEffect, useEffect,
useMemo, useMemo,
useRef,
useState, useState,
useTransition, useTransition,
} from 'react'; } from 'react';
import { BlockSuiteWorkspace } from '../../../shared'; import { BlockSuiteWorkspace } from '../../../shared';
import { Footer } from './Footer'; import { Footer } from './Footer';
import { Input } from './Input';
import { PublishedResults } from './PublishedResults'; import { PublishedResults } from './PublishedResults';
import { Results } from './Results'; import { Results } from './Results';
import { SearchInput } from './SearchInput';
import { import {
StyledContent, StyledContent,
StyledModalDivider, StyledModalDivider,
@@ -41,6 +43,8 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
router, router,
blockSuiteWorkspace, blockSuiteWorkspace,
}) => { }) => {
const { t } = useTranslation();
const inputRef = useRef<HTMLInputElement>(null);
const [loading, startTransition] = useTransition(); const [loading, startTransition] = useTransition();
const [query, _setQuery] = useState(''); const [query, _setQuery] = useState('');
const setQuery = useCallback((query: string) => { const setQuery = useCallback((query: string) => {
@@ -58,9 +62,8 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
return isPublicWorkspace && query.length === 0; return isPublicWorkspace && query.length === 0;
}, [isPublicWorkspace, query.length]); }, [isPublicWorkspace, query.length]);
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
setQuery('');
setOpen(false); setOpen(false);
}, [setOpen, setQuery]); }, [setOpen]);
// Add ‘⌘+K’ shortcut keys as switches // Add ‘⌘+K’ shortcut keys as switches
useEffect(() => { useEffect(() => {
const keydown = (e: KeyboardEvent) => { const keydown = (e: KeyboardEvent) => {
@@ -80,7 +83,15 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
return () => return () =>
document.removeEventListener('keydown', keydown, { capture: true }); document.removeEventListener('keydown', keydown, { capture: true });
}, [open, router, setOpen, setQuery]); }, [open, router, setOpen, setQuery]);
useEffect(() => {
if (open) {
// Waiting for DOM rendering
requestAnimationFrame(() => {
const inputElement = inputRef.current;
inputElement?.focus();
});
}
}, [open]);
return ( return (
<Modal <Modal
open={open} open={open}
@@ -111,12 +122,25 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
}} }}
> >
<StyledModalHeader> <StyledModalHeader>
<Input <SearchInput
open={open} ref={inputRef}
query={query} onValueChange={value => {
setQuery={setQuery} setQuery(value);
isPublic={isPublicWorkspace} }}
publishWorkspaceName={publishWorkspaceName} onKeyDown={e => {
// Avoid triggering the cmdk onSelect event when the input method is in use
if (e.nativeEvent.isComposing) {
e.stopPropagation();
return;
}
}}
placeholder={
isPublicWorkspace
? t('Quick search placeholder2', {
workspace: publishWorkspaceName,
})
: t('Quick search placeholder')
}
/> />
<StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut> <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
</StyledModalHeader> </StyledModalHeader>
@@ -130,7 +154,6 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
{!isPublicWorkspace ? ( {!isPublicWorkspace ? (
<Results <Results
query={query} query={query}
loading={loading}
onClose={handleClose} onClose={handleClose}
router={router} router={router}
blockSuiteWorkspace={blockSuiteWorkspace} blockSuiteWorkspace={blockSuiteWorkspace}

6
apps/web/src/components/pure/quick-search-modal/style.ts
View File

@@ -7,7 +7,8 @@ export const StyledContent = styled('div')(({ theme }) => {
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
marginBottom: '10px', marginBottom: '10px',
...displayFlex('center', 'flex-start'), ...displayFlex('flex-start', 'flex-start'),
flexDirection: 'column',
color: theme.colors.textColor, color: theme.colors.textColor,
transition: 'all 0.15s', transition: 'all 0.15s',
letterSpacing: '0.06em', letterSpacing: '0.06em',
@@ -67,7 +68,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
fontSize: theme.font.base, fontSize: theme.font.base,
...displayFlex('space-between', 'center'), ...displayFlex('space-between', 'center'),
letterSpacing: '0.06em', letterSpacing: '0.06em',
color: theme.colors.textColor,
'::placeholder': { '::placeholder': {
color: theme.colors.placeHolderColor, color: theme.colors.placeHolderColor,
}, },
@@ -114,6 +115,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
lineHeight: '22px', lineHeight: '22px',
marginBottom: '8px', marginBottom: '8px',
textAlign: 'center', textAlign: 'center',
color: theme.colors.textColor,
...displayFlex('center', 'center'), ...displayFlex('center', 'center'),
'[aria-selected="true"]': { '[aria-selected="true"]': {
transition: 'background .15s, color .15s', transition: 'background .15s, color .15s',