mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-03 18:40:00 +08:00
feat: update search result
This commit is contained in:
@@ -3,9 +3,13 @@ import JumpTo from './JumpTo';
|
|||||||
import { Command } from 'cmdk';
|
import { Command } from 'cmdk';
|
||||||
import SearchResult from './searchResult';
|
import SearchResult from './searchResult';
|
||||||
|
|
||||||
const Result = (props: { result: string }) => {
|
const Result = (props: { query: string }) => {
|
||||||
|
const query = props.query;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Command.List>{props.result ? <SearchResult /> : <JumpTo />}</Command.List>
|
<Command.List>
|
||||||
|
{query ? <SearchResult query={query} /> : <JumpTo />}
|
||||||
|
</Command.List>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,20 @@
|
|||||||
import React from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import NoResult from './NotFound';
|
import NoResult from './NotFound';
|
||||||
import { Command } from 'cmdk';
|
import { Command } from 'cmdk';
|
||||||
|
import { useEditor } from '@/providers/editor-provider';
|
||||||
|
|
||||||
|
const SearchResult = (props: { query: string }) => {
|
||||||
|
const { pageList, search, getPageMeta, openPage } = useEditor();
|
||||||
|
const [results, setResults] = useState({});
|
||||||
|
const query = props.query;
|
||||||
|
useEffect(() => {
|
||||||
|
setResults(search(query));
|
||||||
|
}, [query]);
|
||||||
|
|
||||||
const SearchResult = () => {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NoResult />
|
<NoResult />
|
||||||
<Command.Group heading="Letters">
|
|
||||||
<Command.Item>a</Command.Item>
|
|
||||||
<Command.Item>b</Command.Item>
|
|
||||||
<Command.Item>c</Command.Item>
|
|
||||||
</Command.Group>
|
|
||||||
<Command.Item>Apple</Command.Item>
|
<Command.Item>Apple</Command.Item>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -6,14 +6,16 @@ import { useModal } from '@/providers/global-modal-provider';
|
|||||||
import { IconButton } from '@/ui/button';
|
import { IconButton } from '@/ui/button';
|
||||||
|
|
||||||
const QuickSearchFooter = () => {
|
const QuickSearchFooter = () => {
|
||||||
const { createPage } = useEditor();
|
const { createPage, getPageMeta, openPage } = useEditor();
|
||||||
const { triggerQuickSearchModal } = useModal();
|
const { triggerQuickSearchModal } = useModal();
|
||||||
return (
|
return (
|
||||||
<StyledModalFooterContent>
|
<StyledModalFooterContent>
|
||||||
<IconButton>
|
<IconButton>
|
||||||
<MiddleAddIcon
|
<MiddleAddIcon
|
||||||
onClick={() => {
|
onClick={async () => {
|
||||||
createPage();
|
const page = createPage();
|
||||||
|
const pageMeta = getPageMeta((await page).id);
|
||||||
|
pageMeta && openPage(pageMeta.id);
|
||||||
triggerQuickSearchModal();
|
triggerQuickSearchModal();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ import Result from './content';
|
|||||||
import QuickSearchFooter from './Footer';
|
import QuickSearchFooter from './Footer';
|
||||||
import { Command } from 'cmdk';
|
import { Command } from 'cmdk';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useEditor } from '@/providers/editor-provider';
|
|
||||||
import { useModal } from '@/providers/global-modal-provider';
|
import { useModal } from '@/providers/global-modal-provider';
|
||||||
type TransitionsModalProps = {
|
type TransitionsModalProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -22,13 +21,8 @@ const isMac = () => {
|
|||||||
};
|
};
|
||||||
export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
|
export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const { search } = useEditor();
|
|
||||||
const [result, setResult] = useState({});
|
|
||||||
const { pageList } = useEditor();
|
|
||||||
const { triggerQuickSearchModal } = useModal();
|
const { triggerQuickSearchModal } = useModal();
|
||||||
useEffect(() => {
|
|
||||||
setResult(search(query, { enrich: true }));
|
|
||||||
}, [query]);
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const down = (e: KeyboardEvent) => {
|
const down = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'k' && e.metaKey) {
|
if (e.key === 'k' && e.metaKey) {
|
||||||
@@ -64,7 +58,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
|
|||||||
</StyledModalHeader>
|
</StyledModalHeader>
|
||||||
<StyledModalDivider />
|
<StyledModalDivider />
|
||||||
<StyledContent>
|
<StyledContent>
|
||||||
<Result result={query} />
|
<Result query={query} />
|
||||||
</StyledContent>
|
</StyledContent>
|
||||||
|
|
||||||
<StyledModalFooter>
|
<StyledModalFooter>
|
||||||
|
|||||||
Reference in New Issue
Block a user