collection filter add highlight

client/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-highlight-words": "^0.16.2",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
@@ -23,6 +24,7 @@
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.2",
+    "react-highlight-words": "^0.17.0",
     "react-i18next": "^11.10.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

client/src/components/customInput/Types.ts

@@ -95,6 +95,7 @@ export interface IAdornmentConfig {
 
 export type SearchType = {
   searchText?: string;
+  placeholder?: string;
   onClear?: () => void;
   onSearch: (value: string) => void;
 };

client/src/components/grid/ToolBar.tsx

@@ -116,6 +116,7 @@ const CustomToolBar: FC<ToolBarType> = props => {
                     onClear={c.onClear}
                     onSearch={c.onSearch}
                     searchText={c.searchText}
+                    placeholder={c.placeholder}
                     key={i}
                   />
                 );

client/src/i18n/cn/common.ts

@@ -22,6 +22,7 @@ const commonTrans = {
     copied: 'Copied',
   },
   param: 'Parameter',
+  search: 'Search by name',
 };
 
 export default commonTrans;

client/src/i18n/en/common.ts

@@ -22,6 +22,7 @@ const commonTrans = {
     copied: 'Copied',
   },
   param: 'Parameter',
+  search: 'Search by name',
 };
 
 export default commonTrans;

client/src/pages/collections/Collections.tsx

@@ -20,6 +20,7 @@ import CreateCollection from './Create';
 import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
 import { CollectionHttp } from '../../http/Collection';
 import { useDialogHook } from '../../hooks/Dialog';
+import Highlighter from 'react-highlight-words';
 
 const useStyles = makeStyles((theme: Theme) => ({
   emptyWrapper: {
@@ -38,6 +39,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   link: {
     color: theme.palette.common.black,
   },
+  highlight: {
+    color: theme.palette.primary.main,
+    backgroundColor: 'transparent',
+  },
 }));
 
 const Collections = () => {
@@ -156,6 +161,29 @@ const Collections = () => {
     setSelectedCollections([]);
   };
 
+  const handleSearch = (value: string) => {
+    const searchWords = [value];
+    const list = value
+      ? collections.filter(c => c._name.includes(value))
+      : collections;
+
+    const highlightList = list.map(c => {
+      Object.assign(c, {
+        nameElement: (
+          <Link to={`/collections/${c._name}`} className={classes.link}>
+            <Highlighter
+              textToHighlight={c._name}
+              searchWords={searchWords}
+              highlightClassName={classes.highlight}
+            />
+          </Link>
+        ),
+      });
+      return c;
+    });
+    setSearchedCollections(highlightList);
+  };
+
   const toolbarConfigs: ToolBarConfig[] = [
     {
       label: collectionTrans('create'),
@@ -200,11 +228,7 @@ const Collections = () => {
       label: 'Search',
       icon: 'search',
       onSearch: (value: string) => {
-        const list = value
-          ? collections.filter(c => c._name.includes(value))
-          : collections;
-
-        setSearchedCollections(list);
+        handleSearch(value);
       },
     },
   ];

client/yarn.lock

@@ -1947,6 +1947,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-highlight-words@^0.16.2":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/react-highlight-words/-/react-highlight-words-0.16.2.tgz#c196d1016db7519c607997699f51cb262789fc90"
+  integrity sha512-l9HsbTTLGUQB6CwrI6/e89QDdnkTjLZt0K1MVAYyrzwVbWUNR6FiwwUpECwPoOcAg0iJjYf2uqonSuurdE91oQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.7":
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
@@ -5573,6 +5580,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight-words-core@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
+  integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -7321,6 +7333,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
+  integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9065,7 +9082,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9287,6 +9304,15 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-highlight-words@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.17.0.tgz#e79a559a2de301548339d7216264d6cd0f1eed6f"
+  integrity sha512-uX1Qh5IGjnLuJT0Zok234QDwRC8h4hcVMnB99Cb7aquB1NlPPDiWKm0XpSZOTdSactvnClCk8LOmVlP+75dgHA==
+  dependencies:
+    highlight-words-core "^1.2.0"
+    memoize-one "^4.0.0"
+    prop-types "^15.5.8"
+
 react-i18next@^11.10.0:
   version "11.10.0"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.10.0.tgz#f34257447e18e710e36d8fd3f721dd7d37c7004f"