filtering on the Icons component demo page is now much speedier

src/core/builtins/dashboard/pages/docs/components/Icons.jsx

@@ -1,21 +1,34 @@
-import { AsideNav, Section, Content, Layout } from '@vizality/components/dashboard';
-import { Icon, CodeBlock, ComponentPreview, TextInput } from '@vizality/components';
+import { ContentSidebar, Section, Content, Layout } from '@vizality/components/dashboard';
+import { Icon, CodeBlock, ComponentPreview, FilterInput } from '@vizality/components';
 import { joinClassNames } from '@vizality/util/dom';
 import { getModule } from '@vizality/webpack';
 import React, { memo, useState } from 'react';
+import { useFilter } from '@vizality/hooks';
 
+/**
+ * 
+ * @component
+ * @private
+ * @returns
+ */
 const Search = memo(({ query, handleQueryChange }) => (
   <div className='vz-component-preview-search'>
-    <TextInput
+    <FilterInput
       className='vz-component-preview-search-input-wrapper'
-      size={TextInput.Sizes.MINI}
       placeholder='Filter'
       value={query}
       onChange={handleQueryChange}
+      debounce={0}
     />
   </div>
 ));
 
+/**
+ * 
+ * @component
+ * @private
+ * @returns
+ */
 const DocsIcon = memo(({ icon, selectedIcon, handleSelectedIcon }) => {
   return (
     <Icon
@@ -29,8 +42,13 @@ const DocsIcon = memo(({ icon, selectedIcon, handleSelectedIcon }) => {
   );
 });
 
-const Preview = memo(({ query, selectedIcon, handleSort, handleSelectedIcon }) => {
-  const icons = handleSort(Icon.Names);
+/**
+ * 
+ * @component
+ * @private
+ * @returns
+ */
+const Preview = memo(({ icons, query, selectedIcon, handleSelectedIcon }) => {
   const { marginBottom20 } = getModule('marginBottom20');
   return (
     <>
@@ -55,6 +73,12 @@ const Preview = memo(({ query, selectedIcon, handleSort, handleSelectedIcon }) =
   );
 });
 
+/**
+ * 
+ * @component
+ * @private
+ * @returns
+ */
 const CodeBlocks = memo(({ selectedIcon }) => {
   return (
     <>
@@ -74,6 +98,12 @@ const CodeBlocks = memo(({ selectedIcon }) => {
   );
 });
 
+/**
+ * 
+ * @component
+ * @private
+ * @returns
+ */
 const Aside = memo(({ selectedIcon }) => {
   const { marginBottom20 } = getModule('marginBottom20');
   const { weightMedium } = getModule('weightMedium');
@@ -94,41 +124,48 @@ const Aside = memo(({ selectedIcon }) => {
   );
 });
 
+/**
+ * 
+ * @component
+ * @returns
+ */
 export default memo(() => {
   const [ selectedIcon, setSelectedIcon ] = useState(Icon.Names[0]);
-  const [ query, setQuery ] = useState('');
-
-  const handleSort = icons => {
-    if (query && query !== '') {
-      const search = query.toLowerCase();
-      return icons
-        .filter(icon => icon.toLowerCase().includes(search))
-        .sort();
-    }
-    return icons.sort();
-  };
+  const [ query, setQuery, filteredResults ] = useFilter({ data: Icon.Names });
 
+  /**
+   * 
+   * @param {*} query 
+   * @returns 
+   */
   const handleQueryChange = query => {
-    setQuery(query);
+    return setQuery(query);
   };
 
+  /**
+   * 
+   * @param {*} icon 
+   * @returns 
+   */
   const handleSelectedIcon = icon => {
-    setSelectedIcon(icon);
+    return setSelectedIcon(icon);
   };
 
   return (
     <Layout>
-      <Content heading='Components' subheading='I like components and stuff'>
-        <Section heading='Icons' subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'>
+      <Content header='Components' description='I like components and stuff'>
+        <Section
+          header='Icons'
+          description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
+        >
           <ComponentPreview
-            preview={<Preview handleSort={handleSort} selectedIcon={selectedIcon} query={query} handleSelectedIcon={handleSelectedIcon} />}
+            preview={<Preview icons={filteredResults} selectedIcon={selectedIcon} query={query} handleSelectedIcon={handleSelectedIcon} />}
             code={<CodeBlocks selectedIcon={selectedIcon} />}
             aside={<Aside selectedIcon={selectedIcon} />}
             tabBarChildren={<Search query={query} handleQueryChange={handleQueryChange} />}
           />
         </Section>
       </Content>
-      <AsideNav type='Components' />
     </Layout>
   );
 });

src/core/modules/components/FilterInput.jsx

@@ -9,7 +9,7 @@ import { Icon } from '.';
  * @component
  * @returns {}
  */
-export default memo(({ size, disabled, value, loading, caseSensitive, sortResults, minLength = 4, debounce = 200, filterKeys, fuzzy, inputClassName, className, onChange, ...other }) => {
+export default memo(({ size, disabled, value, placeholder, loading, minLength = 4, debounce = 200, inputClassName, className, onChange, ...other }) => {
   const [ query, setQuery ] = useState(value || '');
   const { container, inner, disabled: _disabled, small, medium, large, input, clear, iconLayout, iconContainer, icon, visible, pointer } = getModule('container', 'inner', 'small', 'input', 'clear');
 
@@ -68,7 +68,7 @@ export default memo(({ size, disabled, value, loading, caseSensitive, sortResult
           className={joinClassNames(input, inputClassName)}
           onChange={handleOnChange}
           value={query}
-          placeholder={Messages.SEARCH}
+          placeholder={placeholder || Messages.SEARCH}
         />
         <div className={joinClassNames(iconLayout, size, { [pointer]: query?.length })} tabindex={query?.length ? '0' : '-1'} role='button'>
           <div className={iconContainer}>