Add fuzzy search for props table

bartvde · Apr 17, 2019 · 385c272 · 385c272
1 parent 7f91844
commit 385c272
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 42 deletions.
diff --git a/docs/_shared/PropTypesTable.tsx b/docs/_shared/PropTypesTable.tsx
@@ -1,7 +1,8 @@
 import clsx from 'clsx';
-import React from 'react';
+import FuzzySearch from 'fuzzy-search';
 import PropTypesDoc from '../prop-types.json';
 import SearchBar from 'material-ui-search-bar';
+import React, { useMemo, useState } from 'react';
 import {
   Table,
   Paper,
@@ -16,9 +17,11 @@ import {
 } from '@material-ui/core';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  header: {
+    marginTop: 24,
+  },
   tableWrapper: {
     overflowX: 'auto',
-    // marginTop: 8
   },
   required: {
     color: '#8bc34a',
@@ -47,16 +50,47 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const PropTypesTableLazy: React.FC<{ src: keyof typeof PropTypesDoc }> = ({ src }) => {
   const classes = useStyles();
-  const propsDoc = PropTypesDoc[src] as any;
+  const [searchString, setSearchString] = useState('');
+  const propsDoc = Object.values(PropTypesDoc[src]);
+
+  const searcher = useMemo(
+    () =>
+      new FuzzySearch(propsDoc, ['name', 'defaultValue', 'description', 'type.name'], {
+        caseSensitive: false,
+      }),
+    [propsDoc]
+  );
+
+  // prettier-ignore
+  const propsToShow = useMemo(() => {
+    return searcher
+      .search(searchString.trim())
+      .sort((a, b) => {
+        if (a.required && !b.required) {
+          return -1;
+        }
+
+        if (!a.required && b.required) {
+          return 1;
+        }
+
+        return a.name.localeCompare(b.name)
+      });
+  }, [searchString, searcher]);
 
   return (
     <React.Fragment>
-      <Grid container>
+      <Grid className={classes.header} container>
         <Grid item sm={6} xs={12}>
           <Typography variant="h4"> Props </Typography>
         </Grid>
         <Grid item sm={6} xs={12}>
-          <SearchBar className={classes.searchBar} onChange={console.log} />
+          <SearchBar
+            value={searchString}
+            onChange={setSearchString}
+            onCancelSearch={() => setSearchString('')}
+            className={classes.searchBar}
+          />
         </Grid>
       </Grid>
 
@@ -72,40 +106,38 @@ const PropTypesTableLazy: React.FC<{ src: keyof typeof PropTypesDoc }> = ({ src
           </TableHead>
 
           <TableBody>
-            {Object.keys(propsDoc)
-              .sort((a, b) => a.localeCompare(b))
-              .map(prop => (
-                <TableRow key={prop}>
-                  <TableCell
-                    className={clsx({
-                      [classes.required]: propsDoc[prop].required,
-                    })}
-                  >
-                    {propsDoc[prop].required ? `${prop} *` : prop}
-                  </TableCell>
+            {propsToShow.map(prop => (
+              <TableRow key={prop.name}>
+                <TableCell
+                  className={clsx({
+                    [classes.required]: prop.required,
+                  })}
+                >
+                  {prop.required ? `${prop.name} *` : prop.name}
+                </TableCell>
 
-                  <TableCell className={classes.type}>{propsDoc[prop].type.name}</TableCell>
-                  <TableCell>
-                    <Typography
-                      align="center"
-                      variant="body1"
-                      component="span"
-                      className={classes.defaultValue}
-                    >
-                      {propsDoc[prop].defaultValue && propsDoc[prop].defaultValue.value}
-                    </Typography>
-                  </TableCell>
+                <TableCell className={classes.type}>{prop.type.name}</TableCell>
+                <TableCell>
+                  <Typography
+                    align="center"
+                    variant="body1"
+                    component="span"
+                    className={classes.defaultValue}
+                  >
+                    {prop.defaultValue && prop.defaultValue.value}
+                  </Typography>
+                </TableCell>
 
-                  <TableCell className={classes.description}>
-                    <span dangerouslySetInnerHTML={{ __html: propsDoc[prop].description }} />
-                  </TableCell>
-                </TableRow>
-              ))}
+                <TableCell className={classes.description}>
+                  <span dangerouslySetInnerHTML={{ __html: prop.description }} />
+                </TableCell>
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
       </Paper>
     </React.Fragment>
   );
 };
 
-export default PropTypesTableLazy;
+export default React.memo(PropTypesTableLazy);
diff --git a/docs/package.json b/docs/package.json
@@ -21,6 +21,7 @@
     "@material-ui/core": "^4.0.0-alpha.7",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/styles": "^4.0.0-alpha.7",
+    "@types/fuzzy-search": "^2.1.0",
     "@types/luxon": "^1.11.0",
     "@types/next": "^8.0.1",
     "@types/prismjs": "^1.9.1",
@@ -37,6 +38,7 @@
     "date-fns": "^2.0.0-alpha.27",
     "dayjs": "^1.8.6",
     "formik": "^1.5.1",
+    "fuzzy-search": "^3.0.1",
     "jss": "^10.0.0-alpha.16",
     "jss-rtl": "^0.2.3",
     "luxon": "^1.11.2",

diff --git a/docs/pages/api/docs.tsx b/docs/pages/api/docs.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Ad from '_shared/Ad';
 import PropTypesTable from '_shared/PropTypesTable';
 import { PageMeta } from '_shared/PageMeta';
+import { Typography } from '@material-ui/core';
 import { WithRouterProps, withRouter } from 'next/router';
 
 const Docs: React.FC<WithRouterProps> = ({ router }) => {
@@ -20,7 +21,7 @@ const Docs: React.FC<WithRouterProps> = ({ router }) => {
       <Ad />
 
       <h4> Inheritance </h4>
-      <p>
+      <Typography gutterBottom>
         Any prop not recognized by the pickers and their sub-components are passed down to
         material-ui{' '}
         <a
@@ -31,7 +32,7 @@ const Docs: React.FC<WithRouterProps> = ({ router }) => {
           TextField
         </a>{' '}
         component.
-      </p>
+      </Typography>
 
       <PropTypesTable src={componentName} />
     </>

diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -79,7 +79,7 @@
     },
     "emptyLabel": {
       "defaultValue": { "value": "' '" },
-      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)\\",
+      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)",
       "name": "emptyLabel",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -698,7 +698,7 @@
     },
     "emptyLabel": {
       "defaultValue": { "value": "' '" },
-      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)\\",
+      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)",
       "name": "emptyLabel",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -856,7 +856,7 @@
     },
     "emptyLabel": {
       "defaultValue": { "value": "' '" },
-      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)\\",
+      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)",
       "name": "emptyLabel",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1111,7 +1111,7 @@
     },
     "emptyLabel": {
       "defaultValue": { "value": "' '" },
-      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)\\",
+      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)",
       "name": "emptyLabel",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1269,7 +1269,7 @@
     },
     "emptyLabel": {
       "defaultValue": { "value": "' '" },
-      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)\\",
+      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)",
       "name": "emptyLabel",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1976,7 +1976,7 @@
     },
     "emptyLabel": {
       "defaultValue": { "value": "' '" },
-      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)\\",
+      "description": "Message displaying in text field, if null passed (doesn't work in keyboard mode)",
       "name": "emptyLabel",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/typings/BasePicker.tsx",

diff --git a/lib/src/typings/BasePicker.tsx b/lib/src/typings/BasePicker.tsx
@@ -23,7 +23,7 @@ export interface BasePickerProps {
    */
   invalidLabel?: string;
   /**
-   * Message displaying in text field, if null passed (doesn't work in keyboard mode)\
+   * Message displaying in text field, if null passed (doesn't work in keyboard mode)
    * @default ' '
    */
   emptyLabel?: string;

diff --git a/yarn.lock b/yarn.lock
@@ -1221,6 +1221,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/fuzzy-search@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/fuzzy-search/-/fuzzy-search-2.1.0.tgz#a628a5136799a48d6fa72e88079d06a5f5a0c71a"
+  integrity sha512-huf9Mwh1pJPsN2riqiOOhFNBJfdZ88Pp7Vy9Y/8hYBcfIXPTHGk+B9OU2TSSV1FOTUh+JQfcg082wfAMMEJSoA==
+
 "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
@@ -4824,6 +4829,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuzzy-search@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fuzzy-search/-/fuzzy-search-3.0.1.tgz#14a4964508a9607d6e9a88818e7ff634108260b6"
+  integrity sha512-rjUvzdsMlOyarm0oD5k6zVQwgvt4Tb5Xe3YdIGU+Vogw54+ueAGPUTMU2B9jfPQEie5cD11i/S9J9d+MNBSQ3Q==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"