perf(search-bar): resolve some problems in search-bar (#534)

affects: @gio-design/components, website resolve some problems in search-bar Co-authored-by: huskylengcb <649569822@qq.com>
growingio · Nov 27, 2020 · 2d7708f · 2d7708f · vercel · Nov 27, 2020
1 parent f090170
commit 2d7708f
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 34 deletions.
diff --git a/packages/components/src/components/input/style/index.less b/packages/components/src/components/input/style/index.less
@@ -76,18 +76,20 @@
     }
 
     &-suffix {
-      right: 15px;
+      right: 16px;
     }
 
     &-prefix {
-      left: 15px;
+      left: 16px;
     }
 
     &-suffix,
     &-prefix {
       position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
+      top: 0;
+      display: flex;
+      align-items: center;
+      height: 100%;
       &-iconGroup {
         display: flex;
         flex-direction: column;

diff --git a/packages/components/src/components/search-bar/__tests__/__snapshots__/searchbar.test.js.snap b/packages/components/src/components/search-bar/__tests__/__snapshots__/searchbar.test.js.snap
@@ -29,7 +29,7 @@ initialize {
               "children": Array [
                 Object {
                   "attribs": Object {
-                    "class": "gio-icon gio-searchbar-suffix-search-large",
+                    "class": "gio-icon gio-searchbar-suffix-search",
                   },
                   "children": Array [
                     Object {
@@ -307,7 +307,7 @@ initialize {
             "children": Array [
               Object {
                 "attribs": Object {
-                  "class": "gio-icon gio-searchbar-suffix-search-large",
+                  "class": "gio-icon gio-searchbar-suffix-search",
                 },
                 "children": Array [
                   Object {

diff --git a/packages/components/src/components/search-bar/index.tsx b/packages/components/src/components/search-bar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { CloseCircleFilled, SearchOutlined } from '@gio-design/icons';
 import Input from '../input';
 import Button from '../button';
@@ -44,6 +44,7 @@ const clearStorage = (key: string): string[] => {
 const SearchBar: React.FC<SearchBarProps> = (props: SearchBarProps) => {
   const sizeContext = useContext(SizeContext);
   const prefixCls = usePrefixCls('searchbar');
+  const [searchValue, setSearchValue] = useState('');
   const {
     showStorage = false,
     storageNum = 5,
@@ -56,7 +57,7 @@ const SearchBar: React.FC<SearchBarProps> = (props: SearchBarProps) => {
     wrapStyle,
     placeholder,
     value,
-    onChange,
+    onChange = setSearchValue,
     id,
   } = props;
   const storageKey = React.useMemo(() => `${prefixCls}-storage-${id}`, [id, prefixCls]);
@@ -75,34 +76,41 @@ const SearchBar: React.FC<SearchBarProps> = (props: SearchBarProps) => {
     setSearchStorage(newValue);
   };
 
+  const handleFocus = () => {
+    searchStorage.length && setShowDropdown(true);
+  };
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value);
     const newValue = findStorage(storageKey, e.target.value);
     setSearchStorage(newValue);
-  };
-
-  const handleFocus = () => {
-    setShowDropdown(true);
+    handleFocus();
+    newValue.length === 0 && setShowDropdown(false);
   };
 
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const { value } = e.target;
     setTimeout(() => {
-      setStorage(storageKey, value);
+      id && setStorage(storageKey, value);
       setShowDropdown(false);
     }, 200);
   };
 
   const renderSuffix = () => {
-    if (value) {
+    if (value || searchValue) {
       return showClear ? (
         <CloseCircleFilled className={`${prefixCls}-suffix-close`} onClick={handleClearValue} />
       ) : null;
     }
-    return <SearchOutlined className={`${prefixCls}-suffix-search-${size}`} />;
+    return <SearchOutlined className={`${prefixCls}-suffix-search`} />;
   };
 
+  // 按esc建关闭下拉框
+  const handleKeyUp = (e: any) => {
+    (e.keyCode === 27) && handleBlur(e);
+  }
+
   const renderStorage = () => {
     if (!showStorage || !showDropdown) {
       return null;
@@ -122,7 +130,7 @@ const SearchBar: React.FC<SearchBarProps> = (props: SearchBarProps) => {
             </Button>
           </div>
         )}
-        {searchStorage.slice(0, storageNum).map((item) => (
+        {searchStorage.slice((searchStorage.length - storageNum) >= 0 ? (searchStorage.length - storageNum) : 0, searchStorage.length).reverse().map((item) => (
           <div
             onClick={() => {
               onChange(item);
@@ -131,7 +139,8 @@ const SearchBar: React.FC<SearchBarProps> = (props: SearchBarProps) => {
             key={item}
             aria-hidden="true"
           >
-            {item}
+            {(value || searchValue) && <mark className={`${prefixCls}-dropdown-item-mark`}>{value || searchValue}</mark>}
+            {item.replace(value || searchValue,'')}
           </div>
         ))}
       </div>
@@ -146,11 +155,12 @@ const SearchBar: React.FC<SearchBarProps> = (props: SearchBarProps) => {
         inputStyle={inputStyle}
         wrapStyle={inputWrapStyle}
         suffix={renderSuffix()}
-        value={value}
+        value={value || searchValue}
         placeholder={placeholder}
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        onKeyUp={handleKeyUp}
       />
       {renderStorage()}
     </div>

diff --git a/packages/components/src/components/search-bar/interfaces.ts b/packages/components/src/components/search-bar/interfaces.ts
@@ -48,13 +48,13 @@ export interface SearchBarProps {
   /**
    * 值
    */
-  value: string;
+  value?: string;
   /**
    * 修改值时触发的回调函数
    */
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   /**
    * 存储记录的唯一 id
    */
-  id: string;
+  id?: string;
 }
diff --git a/packages/components/src/components/search-bar/style/index.less b/packages/components/src/components/search-bar/style/index.less
@@ -18,7 +18,7 @@
     left: 0;
     z-index: 10000;
     width: 100%;
-    height: 240px;
+    height: fit-content;
     padding: 8px;
     overflow-y: auto;
     background-color: @palette-white;
@@ -53,6 +53,11 @@
         background-color: @palette-gray-1;
         border-radius: @radius-border-medium;
       }
+
+      &-mark {
+        z-index: -1;
+        background-color: @palette-yellow-2;
+      }
     }
   }
 
@@ -61,16 +66,8 @@
       color: @palette-black-6;
       cursor: pointer;
     }
-    &-search-middle {
-      color: @palette-gray-6;
-    }
-    &-search-large {
-      color: @palette-gray-6;
-      vertical-align: middle;
-    }
-    &-search-small {
+    &-search {
       color: @palette-gray-6;
-      vertical-align: inherit;
     }
   }
 }
diff --git a/packages/website/src/components/functional/searchBar/demo/index.tsx b/packages/website/src/components/functional/searchBar/demo/index.tsx
@@ -14,6 +14,7 @@ export default () => {
       onChange={setValue}
       id="demo1"
       size="middle"
+      placeholder="请输入要搜索的内容"
     />
   );
 };
diff --git a/packages/website/src/components/functional/searchBar/index.zh-CN.md b/packages/website/src/components/functional/searchBar/index.zh-CN.md
@@ -18,9 +18,9 @@ group:
 
 | 参数              | 说明                           | 类型                       | 默认值   |
 | ----------------- | ------------------------------ | -------------------------- | -------- |
-| value             | 值                             | string                     | 必填     |
-| onChange          | 修改值时触发的回调函数         | Function(value: string)    | 必填     |
-| id                | 存储记录的唯一 id              | string                     | 必填     |
+| value             | 值                             | string                     | -     |
+| onChange          | 修改值时触发的回调函数         | Function(value: string)    | -     |
+| id                | 存储记录的唯一 id              | string                     | -     |
 | showStorage       | 是否需要展示搜索记录           | boolean                    | false    |
 | storageNum        | 默认显示最近搜索条数           | number                     | 5        |
 | disabled          | 是否禁用                       | boolean                    | false    |