feat: refine search

zxch3n · Apr 22, 2020 · 23c40ff · 23c40ff
1 parent eac37b7
commit 23c40ff
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/src/renderer/components/Kanban/Card/Card.tsx b/src/renderer/components/Kanban/Card/Card.tsx
@@ -62,7 +62,14 @@ export const Card: FC<Props> = React.memo((props: Props) => {
             return props.content;
         }
 
-        const reg = new RegExp(props.searchReg, 'gimsu');
+        let reg: undefined | RegExp;
+        try {
+            reg = new RegExp(props.searchReg, 'gimsu');
+        } catch (e) {}
+        if (!reg) {
+            return props.content;
+        }
+
         const oldContent = props.content;
         let newContent = '';
         let lastEnd = 0;

diff --git a/src/renderer/components/Kanban/Card/CardEditor.tsx b/src/renderer/components/Kanban/Card/CardEditor.tsx
@@ -62,7 +62,7 @@ const _CardInDetail: FC<Props> = React.memo((props: Props) => {
                 actualTime: undefined,
             } as FormData);
         }
-    }, [card]);
+    }, [card, visible]);
 
     const onDelete = React.useCallback(() => {
         if (!card) {
@@ -80,7 +80,7 @@ const _CardInDetail: FC<Props> = React.memo((props: Props) => {
 
     const saveValues = ({ title, content, estimatedTime, actualTime }: FormData) => {
         const time = estimatedTime || 0;
-        setCardContent(content);
+        setCardContent(content || '');
         if (!card) {
             // Creating
             const _id = shortid.generate();
@@ -123,7 +123,7 @@ const _CardInDetail: FC<Props> = React.memo((props: Props) => {
             setShowMarkdownPreview(false);
         } else {
             validateFields((err: Error, values: FormData) => {
-                setCardContent(values.content);
+                setCardContent(values.content || '');
                 setShowMarkdownPreview(true);
             });
         }
@@ -172,7 +172,7 @@ const _CardInDetail: FC<Props> = React.memo((props: Props) => {
                                     minHeight: 120,
                                 }}
                                 dangerouslySetInnerHTML={{
-                                    __html: formatMarkdown(cardContent),
+                                    __html: formatMarkdown(cardContent || ''),
                                 }}
                             />
                         </TabPane>

diff --git a/src/renderer/components/Kanban/List/List.tsx b/src/renderer/components/Kanban/List/List.tsx
@@ -116,7 +116,10 @@ interface Props extends ListType, InputProps, ListActionTypes, KanbanActionTypes
 
 export const List: FC<Props> = React.memo((props: Props) => {
     const { focused = false, searchReg, cards, cardsState, done = false } = props;
-    const reg = searchReg ? new RegExp(searchReg, 'gimsu') : undefined;
+    let reg: RegExp | undefined;
+    try {
+        reg = searchReg ? new RegExp(searchReg, 'gimsu') : undefined;
+    } catch (e) {}
     const [estimatedTimeSum, actualTimeSum] = props.cards.reduce(
         (l: [number, number], r: string) => {
             return [
@@ -132,6 +135,7 @@ export const List: FC<Props> = React.memo((props: Props) => {
         reg === undefined
             ? cards
             : cards.filter((id) => {
+                if (!reg) return true;
                 const card = cardsState[id];
                 return card.title.match(reg) || card.content.match(reg);
             });
@@ -220,8 +224,16 @@ export const List: FC<Props> = React.memo((props: Props) => {
                                     <span className="list-head-text">
                                         <h1>{props.title}</h1>
                                         <span>
-                                            {props.cards.length} Card
-                                            {props.cards.length > 1 ? 's ' : ' '}
+                                            {reg == null ? (
+                                                <span>
+                                                    {props.cards.length} Card
+                                                    {props.cards.length > 1 ? 's ' : ' '}
+                                                </span>
+                                            ) : (
+                                                <span>
+                                                    {filteredCards.length} / {props.cards.length}
+                                                </span>
+                                            )}
                                             {overallTimeInfo}
                                         </span>
                                     </span>

diff --git a/src/renderer/components/Kanban/SearchBar.tsx b/src/renderer/components/Kanban/SearchBar.tsx
@@ -8,7 +8,7 @@ import { Icon } from 'antd';
 
 const Bar = styled.div`
     position: fixed;
-    top: 60px;
+    top: 90px;
     right: 30px;
     z-index: 10000;
     box-shadow: 2px 2px 4px 4px rgba(40, 40, 40, 0.2);
@@ -54,17 +54,21 @@ const _SearchBar: FC<Props> = (props: Props) => {
         });
     }, []);
 
-    const quit = React.useCallback(() => {
+    const hide = () => {
         props.setIsSearching(false);
-    }, []);
+    };
+
+    const quit = React.useCallback(() => {
+        props.setReg(undefined);
+        hide();
+    }, [props.setIsSearching, props.setReg]);
 
     const onKeyDown = React.useCallback(
         (event: KeyboardEvent<any>) => {
             if (event.keyCode === 27) {
-                props.setReg(undefined);
                 quit();
             } else if (event.keyCode === 13) {
-                quit();
+                hide();
             }
         },
         [props.setIsSearching]
@@ -82,7 +86,7 @@ const _SearchBar: FC<Props> = (props: Props) => {
             <input
                 // @ts-ignore
                 ref={ref}
-                placeholder="input search text"
+                placeholder="Search by RegExp"
                 onKeyDown={onKeyDown}
                 onChange={onChange}
                 value={props.reg}