Add highlighting in search.

Gabriel Gavilan · Gabriel Gavilan · commit b32df1841238 · 2020-11-29T13:31:22.000+01:00
diff --git a/packages/preview/src/components/@core/icon/index.tsx b/packages/preview/src/components/@core/icon/index.tsx
@@ -2,18 +2,26 @@ import toast from "cogo-toast";
 import copy from "copy-to-clipboard";
 import React from "react";
 
-function Icon({ icon, name }) {
+function Icon({ icon, name, highlightPattern = null }) {
   const copyToClipboard = () => {
     copy(name);
     toast.success(`Copied '${name}' to clipboard`, {
       position: "bottom-center"
     });
   };
 
+  const highlightedName = () => {
+    if (highlightPattern)
+      return name
+        .split(highlightPattern)
+        .map((part) => (part.match(highlightPattern) ? <b>{part}</b> : part));
+    return name;
+  };
+
   return (
     <div className="item" tabIndex={0} onClick={copyToClipboard} key={name}>
       <div className="icon h2">{typeof icon === "function" && icon()}</div>
-      <div className="name">{name}</div>
+      <div className="name">{highlightedName()}</div>
     </div>
   );
 }
diff --git a/packages/preview/src/components/pages/search/index.tsx b/packages/preview/src/components/pages/search/index.tsx
@@ -15,26 +15,27 @@ export default function SearchPageComponent() {
       0
   }
 
-  return query.length > 2 ? (
-    <>
-      <h2>
-        Results for: <i>{query}</i>
-      </h2>
-      <div className="icons">
-        {allIcons.map(icon => (
-          <SearchIconSet
-            key={icon.id}
-            icon={icon}
-            query={query}
-            setResults={setResults} />
-        ))}
-      </div>
-      { 
-        getTotal(results) === 0 &&
-        <h3>No icons found</h3>
-      }
-    </>
-  ) : (
-    <h2>Please enter at least 3 characters to search...</h2>
-  );
+  if (query.length > 2) {
+    const hightlightPattern = new RegExp(`(${query})`, "i");
+    return (
+      <>
+        <h2>
+          Results for: <i>{query}</i>
+        </h2>
+        <div className="icons">
+          {allIcons.map((icon) => (
+            <SearchIconSet
+              key={icon.id}
+              icon={icon}
+              query={query}
+              setResults={setResults}
+              highlightPattern={hightlightPattern}
+            />
+          ))}
+        </div>
+        {getTotal(results) === 0 && <h3>No icons found</h3>}
+      </>
+    );
+  }
+  return <h2>Please enter at least 3 characters to search...</h2>;
 }
diff --git a/packages/preview/src/components/pages/search/search-iconset.tsx b/packages/preview/src/components/pages/search/search-iconset.tsx
@@ -5,7 +5,7 @@ import { getIcons } from "@utils/getIcons";
 
 import SearchPageIconLoading from "./loading";
 
-export default function SearchIconSet({ icon, query, setResults }) {
+export default function SearchIconSet({ icon, query, setResults, highlightPattern }) {
   const IconSet = loadable.lib(() => getIcons(icon.id));
 
   return (
@@ -16,16 +16,21 @@ export default function SearchIconSet({ icon, query, setResults }) {
         return (
           <>
             {found.map(name => (
-                <Icon key={name} icon={icons[name]} name={name} />
-              ))}
-              {setResults(prevResults => {
-                return prevResults.hasOwnProperty(icon.id) ?
-                  prevResults :
-                  {
+              <Icon
+                key={name}
+                icon={icons[name]}
+                name={name}
+                highlightPattern={highlightPattern}
+              />
+            ))}
+            {setResults(prevResults => {
+              return prevResults.hasOwnProperty(icon.id) ?
+                prevResults :
+                {
                     ...prevResults,
-                    [icon.id]: found.length
-                  }
-              })}
+                  [icon.id]: found.length
+                }
+            })}
           </>
         )
       }}
