From a220ea517f083895d2fb70957c546fd8b52b3859 Mon Sep 17 00:00:00 2001
From: DarkSky <darksky2048@gmail.com>
Date: Wed, 27 Jul 2022 18:12:34 +0800
Subject: [PATCH] feat: improve search ux

---
 .../editor-plugins/src/search/Search.tsx      | 32 +++++++++++--------
 .../editor-plugins/src/search/index.tsx       |  2 +-
 .../{list-button.tsx => ListButton.tsx}       |  5 ++-
 libs/components/ui/src/button/index.ts        |  2 +-
 4 files changed, 25 insertions(+), 16 deletions(-)
 rename libs/components/ui/src/button/{list-button.tsx => ListButton.tsx} (92%)

diff --git a/libs/components/editor-plugins/src/search/Search.tsx b/libs/components/editor-plugins/src/search/Search.tsx
index 5dd7c65096..5ab54b32ff 100644
--- a/libs/components/editor-plugins/src/search/Search.tsx
+++ b/libs/components/editor-plugins/src/search/Search.tsx
@@ -41,7 +41,10 @@ const styles = style9.create({
         overflowX: 'hidden',
         overflowY: 'hidden',
     },
-    result_hide: {
+    resultItem: {
+        width: '100%',
+    },
+    resultHide: {
         opacity: 0,
     },
 });
@@ -53,7 +56,9 @@ const query_blocks = (
     search: string,
     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);
@@ -100,19 +105,20 @@ export const Search = (props: SearchProps) => {
                 <MuiBox
                     sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
                     className={styles('result', {
-                        result_hide: !result.length,
+                        resultHide: !result.length,
                     })}
                 >
-                    {result
-                        // 过滤掉空标题的文档
-                        .filter(block => block.content)
-                        .map(block => (
-                            <BlockPreview
-                                key={block.id}
-                                block={block}
-                                onClick={() => handle_navigate(block.id)}
-                            />
-                        ))}
+                    {result.map(block => (
+                        <BlockPreview
+                            className={styles('resultItem')}
+                            key={block.id}
+                            block={block}
+                            onClick={() => {
+                                handle_navigate(block.id);
+                                props.onClose();
+                            }}
+                        />
+                    ))}
                 </MuiBox>
             </Box>
         </TransitionsModal>
diff --git a/libs/components/editor-plugins/src/search/index.tsx b/libs/components/editor-plugins/src/search/index.tsx
index a19953ae8b..41a6c44db6 100644
--- a/libs/components/editor-plugins/src/search/index.tsx
+++ b/libs/components/editor-plugins/src/search/index.tsx
@@ -29,7 +29,7 @@ export class FullTextSearchPlugin extends BasePlugin {
         if (this.#root) {
             this.editor.setHotKeysScope();
             this.#root.unmount();
-            this.#root = undefined;
+            // this.#root = undefined;
         }
     }
 
diff --git a/libs/components/ui/src/button/list-button.tsx b/libs/components/ui/src/button/ListButton.tsx
similarity index 92%
rename from libs/components/ui/src/button/list-button.tsx
rename to libs/components/ui/src/button/ListButton.tsx
index 47fcefe1ac..f5b4371873 100644
--- a/libs/components/ui/src/button/list-button.tsx
+++ b/libs/components/ui/src/button/ListButton.tsx
@@ -26,8 +26,11 @@ const styles = style9.create({
         lineHeight: '17px',
         textAlign: 'justify',
         letterSpacing: '1.5px',
-        marginLeft: '21px',
+        marginLeft: '8px',
         color: '#4C6275',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
     },
 });
 
diff --git a/libs/components/ui/src/button/index.ts b/libs/components/ui/src/button/index.ts
index f6a56b47ca..bac4da3799 100644
--- a/libs/components/ui/src/button/index.ts
+++ b/libs/components/ui/src/button/index.ts
@@ -1,3 +1,3 @@
 export { BaseButton } from './base-button';
-export { ListButton } from './list-button';
+export { ListButton } from './ListButton';
 export { IconButton } from './IconButton';