feat: propstable collapse parents data rows

ccontrols · Mar 14, 2020 · 6d173ac · 6d173ac
1 parent 08a7a0d
commit 6d173ac
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 182 deletions.
diff --git a/ui/blocks/src/PropsTable/BlockPropsTable/BlockPropsTable.tsx b/ui/blocks/src/PropsTable/BlockPropsTable/BlockPropsTable.tsx
@@ -27,8 +27,8 @@ export const BlockPropsTable: FC<BlockPropsTableProps> = ({
     <BlockContainer actions={allActions} title={title}>
       <PropsTable
         css={{
-          'thead :first-of-type': {
-            marginTop: 15,
+          'thead tr:first-of-type>th': {
+            paddingTop: 26,
           },
         }}
         filtering={filtering}

diff --git a/ui/blocks/src/PropsTable/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable/PropsTable.tsx
@@ -2,13 +2,16 @@
 /** @jsx jsx */
 import { jsx, Text, Flex, Styled } from 'theme-ui';
 import { FC } from 'react';
-import { PropType } from '@component-controls/specification';
 import { Table, TableProps } from '@component-controls/components';
 import { useControlsContext, ComponentInputProps } from '../../BlocksContext';
 
 export type PropsTableProps = ComponentInputProps &
   Omit<TableProps, 'columns' | 'data'>;
 
+type GroupingProps = Partial<
+  Pick<TableProps, 'groupBy' | 'hiddenColumns' | 'expanded'>
+>;
+
 export const PropsTable: FC<PropsTableProps> = ({
   of,
   sorting = true,
@@ -18,95 +21,124 @@ export const PropsTable: FC<PropsTableProps> = ({
     of,
   });
   const { info } = component || {};
-  return info ? (
+  if (!info) {
+    return null;
+  }
+  const parents = new Set();
+  const rows = Object.keys(info.props).map(key => {
+    const prop = info.props[key];
+    parents.add(prop.parentName);
+    return {
+      name: key,
+      prop: prop,
+    };
+  });
+  const groupProps: GroupingProps = {};
+  if (parents.size > 1) {
+    groupProps.expanded = {
+      [`prop.parentName:${parents.values().next().value}`]: true,
+    };
+    console.log(groupProps.expanded);
+    groupProps.groupBy = ['prop.parentName'];
+  } else {
+    groupProps.hiddenColumns = ['parent'];
+  }
+  /*
+   */
+
+  return (
     <Table
+      {...groupProps}
       {...rest}
       sorting={sorting}
       columns={[
+        {
+          Header: 'Parent',
+          accessor: 'prop.parentName',
+        },
         {
           Header: 'Name',
           accessor: 'name',
-          Cell: ({
-            row: {
-              original: {
-                name,
-                prop: {
-                  type: { required },
-                },
+          Cell: ({ row: { original } }: any) => {
+            if (!original) {
+              return null;
+            }
+            const {
+              name,
+              prop: {
+                type: { required },
               },
-            },
-          }: {
-            row: { original: { name: string; prop: PropType } };
-          }) => (
-            <Text
-              sx={{
-                fontWeight: 'bold',
-                color: required ? 'red' : undefined,
-                textOverflow: 'ellipsis',
-              }}
-            >
-              {name}
-              {required ? '*' : ''}
-            </Text>
-          ),
+            } = original;
+
+            return (
+              <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 },
-                },
+          Cell: ({ row: { original } }: any) => {
+            if (!original) {
+              return null;
+            }
+            const {
+              prop: {
+                description,
+                type: { raw },
               },
-            },
-          }: {
-            row: { original: { name: string; prop: PropType } };
-          }) => (
-            <Flex
-              sx={{
-                flexDirection: 'column',
-              }}
-            >
-              {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>
-          ),
+            } = original;
+            return (
+              <Flex
+                sx={{
+                  flexDirection: 'column',
+                }}
+              >
+                {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 } };
-          }) => {
+          Cell: ({ row: { original } }: any) => {
+            if (!original) {
+              return null;
+            }
+            const {
+              prop: { defaultValue },
+            } = original;
             let value = null;
             switch (typeof defaultValue) {
               case 'object':
@@ -130,13 +162,7 @@ export const PropsTable: FC<PropsTableProps> = ({
           },
         },
       ]}
-      data={Object.keys(info.props).map(key => {
-        const prop = info.props[key];
-        return {
-          name: key,
-          prop: prop,
-        };
-      })}
+      data={rows}
     />
-  ) : null;
+  );
 };
diff --git a/ui/blocks/src/Subtitle/Subtitle.tsx b/ui/blocks/src/Subtitle/Subtitle.tsx
@@ -12,7 +12,6 @@ export const Subtitle: FC<SubtitleProps> = ({ id, name, ...rest }) => {
     id,
     name,
   });
-  console.log(story);
   const title =
     story && story.attributes && story.attributes.parameters
       ? story.attributes.parameters.componentSubtitle

diff --git a/ui/components/package.json b/ui/components/package.json
@@ -33,7 +33,6 @@
     "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",
@@ -47,7 +46,6 @@
   "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
@@ -9,6 +9,10 @@ export default {
 };
 
 const columns = [
+  {
+    Header: 'Age',
+    accessor: 'age',
+  },
   {
     Header: 'Name',
     columns: [
@@ -44,17 +48,21 @@ const columns = [
     ],
   },
 ];
-const mockData = () =>
-  Array.apply(null, Array(20)).map(() => ({
+const mockData = () => {
+  let i = 10;
+  return Array.apply(null, Array(20)).map(() => ({
+    id: i++,
     ...faker.helpers.userCard(),
+    age: faker.random.number({ min: 21, max: 25 }),
     subRows: undefined,
   }));
+};
 
 export const main = () => {
   const data = React.useMemo(mockData, []);
   return (
     <ThemeProvider>
-      <Table columns={columns} data={data} />
+      <Table hiddenColumns={['age']} columns={columns} data={data} />
     </ThemeProvider>
   );
 };
@@ -76,3 +84,17 @@ export const filteravle = () => {
     </ThemeProvider>
   );
 };
+
+export const grouping = () => {
+  const data = React.useMemo(mockData, []);
+  return (
+    <ThemeProvider>
+      <Table
+        expanded={{ 'age:21': true }}
+        groupBy={['age']}
+        columns={columns}
+        data={data}
+      />
+    </ThemeProvider>
+  );
+};