feat: improve search ux

This commit is contained in:
DarkSky
2022-07-27 18:12:34 +08:00
parent e273d1e606
commit a220ea517f
4 changed files with 25 additions and 16 deletions

View File

@@ -41,7 +41,10 @@ const styles = style9.create({
overflowX: 'hidden', overflowX: 'hidden',
overflowY: 'hidden', overflowY: 'hidden',
}, },
result_hide: { resultItem: {
width: '100%',
},
resultHide: {
opacity: 0, opacity: 0,
}, },
}); });
@@ -53,7 +56,9 @@ const query_blocks = (
search: string, search: string,
callback: (result: QueryResult) => void callback: (result: QueryResult) => void
) => { ) => {
(editor as BlockEditor).search(search).then(pages => callback(pages)); (editor as BlockEditor)
.search(search)
.then(pages => callback(pages.filter(b => !!b.content)));
}; };
export const QueryBlocks = throttle(query_blocks, 500); export const QueryBlocks = throttle(query_blocks, 500);
@@ -100,19 +105,20 @@ export const Search = (props: SearchProps) => {
<MuiBox <MuiBox
sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }} sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
className={styles('result', { className={styles('result', {
result_hide: !result.length, resultHide: !result.length,
})} })}
> >
{result {result.map(block => (
// 过滤掉空标题的文档 <BlockPreview
.filter(block => block.content) className={styles('resultItem')}
.map(block => ( key={block.id}
<BlockPreview block={block}
key={block.id} onClick={() => {
block={block} handle_navigate(block.id);
onClick={() => handle_navigate(block.id)} props.onClose();
/> }}
))} />
))}
</MuiBox> </MuiBox>
</Box> </Box>
</TransitionsModal> </TransitionsModal>

View File

@@ -29,7 +29,7 @@ export class FullTextSearchPlugin extends BasePlugin {
if (this.#root) { if (this.#root) {
this.editor.setHotKeysScope(); this.editor.setHotKeysScope();
this.#root.unmount(); this.#root.unmount();
this.#root = undefined; // this.#root = undefined;
} }
} }

View File

@@ -26,8 +26,11 @@ const styles = style9.create({
lineHeight: '17px', lineHeight: '17px',
textAlign: 'justify', textAlign: 'justify',
letterSpacing: '1.5px', letterSpacing: '1.5px',
marginLeft: '21px', marginLeft: '8px',
color: '#4C6275', color: '#4C6275',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
}, },
}); });

View File

@@ -1,3 +1,3 @@
export { BaseButton } from './base-button'; export { BaseButton } from './base-button';
export { ListButton } from './list-button'; export { ListButton } from './ListButton';
export { IconButton } from './IconButton'; export { IconButton } from './IconButton';