fix: table add skipPageReset

ccontrols · Apr 1, 2020 · 19a3973 · 19a3973
1 parent 55962bc
commit 19a3973
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 69 deletions.
diff --git a/ui/blocks/src/ControlsTable/SingleControlsTable.tsx b/ui/blocks/src/ControlsTable/SingleControlsTable.tsx
@@ -39,74 +39,111 @@ export const SingleControlsTable: FC<SingleControlsTableProps> = ({
   storyId,
   setControlValue,
   clickControl,
-}) => (
-  <Table
-    className="component-controls-table"
-    header={false}
-    columns={[
-      {
-        Header: 'Name',
-        accessor: 'name',
-      },
-      {
-        Header: 'Editor',
-        accessor: 'control',
-        Cell: ({
-          row: {
-            original: { control, name },
+}) => {
+  const data = controls
+    ? Object.keys(controls)
+        .map((key, index) => ({
+          name: key,
+          control: {
+            ...controls[key],
+            order:
+              controls[key].order === undefined ? index : controls[key].order,
           },
-        }: any) => {
-          const InputType: PropertyEditor =
-            getPropertyEditor(control.type) || InvalidType;
-          const onChange = (propName: string, value: any) => {
-            if (setControlValue && storyId) {
-              setControlValue(storyId, propName, value);
-            }
-          };
-          const onClick = () => {
-            if (clickControl && storyId) {
-              clickControl(storyId, name);
-            }
-          };
+        }))
+        .sort((a, b) => {
+          const aOrder = a.control.order || 0;
+          const bOrder = b.control.order || 0;
+          return aOrder - bOrder;
+        })
+    : undefined;
+  /*
+  return (
+    <>
+      {data?.map(({ control, name }) => {
+        const InputType: PropertyEditor =
+          getPropertyEditor(control.type) || InvalidType;
+        const onChange = (propName: string, value: any) => {
+          if (setControlValue && storyId) {
+            setControlValue(storyId, propName, value);
+          }
+        };
+        const onClick = () => {
+          if (clickControl && storyId) {
+            clickControl(storyId, name);
+          }
+        };
 
-          return (
-            <Flex
-              sx={{
-                flexDirection: 'column',
-                alignItems: 'left',
-                flexBasis: '100%',
-              }}
-            >
-              <InputType
-                prop={control}
-                name={name}
-                onChange={onChange}
-                onClick={onClick}
-              />
-            </Flex>
-          );
+        return (
+          <Flex
+            sx={{
+              flexDirection: 'column',
+              alignItems: 'left',
+              flexBasis: '100%',
+            }}
+          >
+            <InputType
+              prop={control}
+              name={name}
+              onChange={onChange}
+              onClick={onClick}
+            />
+          </Flex>
+        );
+      })}
+    </>
+  );
+  */
+  return (
+    <Table
+      key={data?.reduce((acc: string, { name }) => `${acc}-${name}}`, '')}
+      className="component-controls-table"
+      header={false}
+      columns={[
+        {
+          Header: 'Name',
+          accessor: 'name',
         },
-      },
-    ]}
-    data={
-      controls
-        ? Object.keys(controls)
-            .map((key, index) => ({
-              name: key,
-              control: {
-                ...controls[key],
-                order:
-                  controls[key].order === undefined
-                    ? index
-                    : controls[key].order,
-              },
-            }))
-            .sort((a, b) => {
-              const aOrder = a.control.order || 0;
-              const bOrder = b.control.order || 0;
-              return aOrder - bOrder;
-            })
-        : undefined
-    }
-  />
-);
+        {
+          Header: 'Editor',
+          accessor: 'control',
+          Cell: ({
+            row: {
+              original: { control, name },
+            },
+          }: any) => {
+            const InputType: PropertyEditor =
+              getPropertyEditor(control.type) || InvalidType;
+            const onChange = (propName: string, value: any) => {
+              if (setControlValue && storyId) {
+                setControlValue(storyId, propName, value);
+              }
+            };
+            const onClick = () => {
+              if (clickControl && storyId) {
+                clickControl(storyId, name);
+              }
+            };
+
+            return (
+              <Flex
+                sx={{
+                  flexDirection: 'column',
+                  alignItems: 'left',
+                  flexBasis: '100%',
+                }}
+              >
+                <InputType
+                  prop={control}
+                  name={name}
+                  onChange={onChange}
+                  onClick={onClick}
+                />
+              </Flex>
+            );
+          },
+        },
+      ]}
+      data={data}
+    />
+  );
+};
diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react';
 import faker from 'faker';
 import { Table } from './Table';
@@ -102,3 +103,43 @@ export const grouping = () => {
     </ThemeProvider>
   );
 };
+
+export const editing = () => {
+  const [value, setValue] = React.useState('example');
+  const [skipPageReset, setSkipPageReset] = React.useState(false);
+  React.useEffect(() => {
+    setSkipPageReset(false);
+  }, [value]);
+  return (
+    <ThemeProvider>
+      <Table
+        skipPageReset={skipPageReset}
+        columns={[
+          {
+            Header: 'Value',
+            accessor: 'value',
+            Cell: ({
+              row: {
+                original: { value: cellValue },
+              },
+            }: any) => (
+              <input
+                value={cellValue}
+                onChange={e => {
+                  setSkipPageReset(true);
+                  setValue(e.target.value);
+                }}
+              />
+            ),
+          },
+        ]}
+        data={[
+          {
+            value,
+          },
+          ,
+        ]}
+      />
+    </ThemeProvider>
+  );
+};
diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx
@@ -16,6 +16,12 @@ import {
   PluginHook,
   TableOptions,
   UseFiltersOptions,
+  UseExpandedOptions,
+  UsePaginationOptions,
+  UseRowSelectOptions,
+  UseSortByOptions,
+  UseRowStateOptions,
+  UseGroupByOptions,
   UseGroupByCellProps,
   UseGroupByRowProps,
   UseExpandedState,
@@ -70,6 +76,11 @@ interface TableOwnProps {
   expanded?: {
     [key: string]: boolean;
   };
+
+  /**
+   * reset state update while update table data
+   */
+  skipPageReset?: boolean;
 }
 
 export type TableProps = TableOwnProps & BoxProps;
@@ -88,6 +99,7 @@ export const Table: FC<TableProps> = ({
   groupBy,
   expanded,
   hiddenColumns,
+  skipPageReset,
   ...rest
 }) => {
   const plugins: PluginHook<any>[] = [
@@ -110,16 +122,31 @@ export const Table: FC<TableProps> = ({
   if (typeof expanded === 'object') {
     initialState.expanded = expanded;
   }
-  const options: TableOptions<{}> & UseFiltersOptions<{}> = {
+  const options: TableOptions<{}> &
+    UseFiltersOptions<{}> &
+    UseExpandedOptions<{}> &
+    UsePaginationOptions<{}> &
+    UseGroupByOptions<{}> &
+    UseRowSelectOptions<{}> &
+    UseSortByOptions<{}> &
+    UseRowStateOptions<{}> = {
     columns,
     data,
     defaultColumn: defaultColumn() as Column,
     initialState,
+    autoResetPage: !skipPageReset,
+    autoResetExpanded: !skipPageReset,
+    autoResetGroupBy: !skipPageReset,
+    autoResetSelectedRows: !skipPageReset,
+    autoResetSortBy: !skipPageReset,
+    autoResetFilters: !skipPageReset,
+    autoResetRowState: !skipPageReset,
   };
 
   if (sorting) {
     plugins.push();
   }
+  console.log(options);
   const tableOptions = useTable(options, ...plugins) as any;
   const {
     getTableProps,