feat: add filtering to table

ccontrols · Mar 13, 2020 · 2711667 · 2711667
1 parent 2c5a560
commit 2711667
Show file tree

Hide file tree

Showing 10 changed files with 333 additions and 96 deletions.
diff --git a/core/instrument/src/misc/propsInfo.ts b/core/instrument/src/misc/propsInfo.ts
@@ -25,7 +25,6 @@ export const propsInfo = async (
       .update(filePath)
       .digest('hex'),
   );
-  console.log(componentName);
   if (fs.existsSync(cachedFileName)) {
     const cacheStats = fs.statSync(cachedFileName);
     const fileStats = fs.statSync(filePath);

diff --git a/props-info/react-docgen-typescript/src/transform-props.ts b/props-info/react-docgen-typescript/src/transform-props.ts
@@ -20,7 +20,7 @@ export const transformProps = (props: Props): PropTypes => {
       prop.parentName = rdProp.parent?.name;
     }
     if (rdProp.defaultValue !== null && rdProp.defaultValue !== undefined) {
-      prop.defaultValue = rdProp.defaultValue.value || rdProp.defaultValue;
+      prop.defaultValue = rdProp.defaultValue.value ?? rdProp.defaultValue;
     }
     const typeName = rdProp.type.name || '';
     let type: Partial<TypeInformation> = {};

diff --git a/props-info/react-docgen/src/transform-props.ts b/props-info/react-docgen/src/transform-props.ts
@@ -10,7 +10,7 @@ const rdPropToCCProp = (rdProp: any): PropType => {
     prop.description = rdProp.description;
   }
   if (rdProp.defaultValue !== null && rdProp.defaultValue !== undefined) {
-    prop.defaultValue = rdProp.defaultValue.value || rdProp.defaultValue;
+    prop.defaultValue = rdProp.defaultValue.value ?? rdProp.defaultValue;
   }
   let type: Partial<TypeInformation> = {};
   if (rdProp.type) {

diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
-import { jsx, Text, Flex, Styled } from 'theme-ui';
-import { FC } from 'react';
+import { jsx, Box, Text, Flex, Styled } from 'theme-ui';
+import { FC, useState } from 'react';
 import { PropType } from '@component-controls/specification';
 import {
   Table,
   BlockContainer,
   BlockContainerProps,
+  ActionItem,
 } from '@component-controls/components';
 import { useControlsContext, ComponentInputProps } from '../BlocksContext';
 
@@ -17,95 +18,145 @@ export const PropsTable: FC<PropsTableProps> = ({ of, title, actions }) => {
     of,
   });
   const { info } = component || {};
-  console.log(component);
+  const [filtering, setFiltering] = useState(false);
+  const allActions: ActionItem[] = [];
+
+  allActions.push({
+    title: 'filter',
+    onClick: () => setFiltering(!filtering),
+  });
+  if (actions) {
+    allActions.push.apply(allActions, actions);
+  }
   return (
-    <BlockContainer actions={actions} title={title}>
-      {info && (
-        <Table
-          sorting={true}
-          columns={[
-            {
-              Header: 'Name',
-              accessor: 'name',
-              Cell: ({
-                row: {
-                  original: {
-                    name,
-                    prop: {
-                      type: { required },
+    <BlockContainer actions={allActions} title={title}>
+      <Box
+        sx={{
+          pt: 4,
+        }}
+      >
+        {info && (
+          <Table
+            filtering={filtering}
+            sorting={true}
+            columns={[
+              {
+                Header: 'Name',
+                accessor: 'name',
+                Cell: ({
+                  row: {
+                    original: {
+                      name,
+                      prop: {
+                        type: { required },
+                      },
                     },
                   },
-                },
-              }: {
-                row: { original: { name: string; prop: PropType } };
-              }) => (
-                <Text
-                  sx={{
-                    fontWeight: 'bold',
-                    color: required ? 'red' : undefined,
-                  }}
-                >
-                  {name}
-                  {required ? '*' : ''}
-                </Text>
-              ),
-            },
-            {
-              Header: 'Description',
-              accessor: 'prop.description',
-              Cell: ({
-                row: {
-                  original: {
-                    prop: {
-                      description,
-                      type: { raw },
+                }: {
+                  row: { original: { name: string; prop: PropType } };
+                }) => (
+                  <Text
+                    sx={{
+                      fontWeight: 'bold',
+                      color: required ? 'red' : undefined,
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {name}
+                    {required ? '*' : ''}
+                  </Text>
+                ),
+              },
+              {
+                Header: 'Description',
+                accessor: 'prop.description',
+                Cell: ({
+                  row: {
+                    original: {
+                      prop: {
+                        description,
+                        type: { raw },
+                      },
                     },
                   },
-                },
-              }: {
-                row: { original: { name: string; prop: PropType } };
-              }) => (
-                <Flex
-                  sx={{
-                    flexDirection: 'column',
-                  }}
-                >
-                  <Text>{description}</Text>
-                  <Styled.pre
+                }: {
+                  row: { original: { name: string; prop: PropType } };
+                }) => (
+                  <Flex
                     sx={{
-                      color: 'fadedText',
-                      mt: 2,
-                      letterSpacing: '0.10em',
+                      flexDirection: 'column',
                     }}
                   >
-                    {raw}
-                  </Styled.pre>
-                </Flex>
-              ),
-            },
-            {
-              Header: 'Default',
-              accessor: 'prop.defaultValue',
-              Cell: ({
-                row: {
-                  original: {
-                    prop: { defaultValue },
+                    {description && (
+                      <Text
+                        sx={{
+                          textOverflow: 'ellipsis',
+                        }}
+                      >
+                        {description}
+                      </Text>
+                    )}
+                    {raw && (
+                      <Styled.pre
+                        sx={{
+                          color: 'fadedText',
+                          mt: 2,
+                          letterSpacing: '0.10em',
+                          whiteSpace: 'pre-wrap',
+                        }}
+                      >
+                        {raw}
+                      </Styled.pre>
+                    )}
+                  </Flex>
+                ),
+              },
+              {
+                Header: 'Default',
+                accessor: 'prop.defaultValue',
+                width: '20%',
+                Cell: ({
+                  row: {
+                    original: {
+                      prop: { defaultValue },
+                    },
                   },
+                }: {
+                  row: { original: { name: string; prop: PropType } };
+                }) => {
+                  let value = null;
+                  switch (typeof defaultValue) {
+                    case 'object':
+                      value = JSON.stringify(defaultValue, null, 2);
+                      break;
+                    case 'undefined':
+                      value = '-';
+                      break;
+                    default:
+                      value = defaultValue.toString();
+                  }
+                  return (
+                    <Styled.pre
+                      sx={{
+                        whiteSpace: 'pre-wrap',
+                      }}
+                    >
+                      {value}
+                    </Styled.pre>
+                  );
                 },
-              }: {
-                row: { original: { name: string; prop: PropType } };
-              }) => <Text>{defaultValue || '-'}</Text>,
-            },
-          ]}
-          data={Object.keys(info.props).map(key => {
-            const prop = info.props[key];
-            return {
-              name: key,
-              prop: prop,
-            };
-          })}
-        />
-      )}
+              },
+            ]}
+            data={Object.keys(info.props).map(key => {
+              const prop = info.props[key];
+              return {
+                name: key,
+                prop: prop,
+              };
+            })}
+          />
+        )}
+      </Box>
     </BlockContainer>
   );
 };
diff --git a/ui/components/package.json b/ui/components/package.json
@@ -31,7 +31,9 @@
   "dependencies": {
     "@primer/octicons-react": "^9.5.0",
     "copy-to-clipboard": "^3.2.1",
+    "fast-memoize": "^2.5.2",
     "markdown-to-jsx": "^6.11.0",
+    "match-sorter": "^4.0.2",
     "prism-react-renderer": "^1.0.2",
     "react": "^16.8.3",
     "react-animate-height": "^2.0.20",
@@ -45,6 +47,7 @@
   "devDependencies": {
     "@types/jest": "^25.1.2",
     "@types/markdown-to-jsx": "^6.11.0",
+    "@types/match-sorter": "^4.0.0",
     "@types/react-table": "^7.0.10",
     "@types/react-tabs": "^2.3.1",
     "@types/theme-ui": "^0.3.0",

diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx
@@ -67,3 +67,12 @@ export const sortable = () => {
     </ThemeProvider>
   );
 };
+
+export const filteravle = () => {
+  const data = React.useMemo(mockData, []);
+  return (
+    <ThemeProvider>
+      <Table filtering={true} columns={columns} data={data} />
+    </ThemeProvider>
+  );
+};