fix: table editing lock update

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

Hide file tree

Showing 5 changed files with 207 additions and 238 deletions.
diff --git a/ui/blocks/src/ControlsTable/ControlsTable.tsx b/ui/blocks/src/ControlsTable/ControlsTable.tsx
@@ -4,6 +4,7 @@ import React, { FC, MouseEvent } from 'react';
 import { window, document } from 'global';
 import qs from 'qs';
 import copy from 'copy-to-clipboard';
+import { ComponentControls } from '@component-controls/specification';
 import {
   resetControlValues,
   getControlValues,
@@ -34,6 +35,23 @@ interface GroupedControlsType {
   [key: string]: LoadedComponentControls;
 }
 
+const createData = (controls: ComponentControls): any[] | undefined =>
+  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;
 /**
  * Table component to display a story's controls and their editors.
  * Can adapt to multiple groups of controls, displaying them in their own tabs.
@@ -135,7 +153,7 @@ export const ControlsTable: FC<ControlsTableProps> = (
                     setControlValue={setControlValue}
                     clickControl={clickControl}
                     storyId={storyId}
-                    controls={groupedItems[0].controls}
+                    data={createData(groupedItems[0].controls)}
                   />
                 ) : (
                   <Tabs>
@@ -151,7 +169,7 @@ export const ControlsTable: FC<ControlsTableProps> = (
                           setControlValue={setControlValue}
                           clickControl={clickControl}
                           storyId={storyId}
-                          controls={item.controls}
+                          data={createData(item.controls)}
                         />
                       </TabPanel>
                     ))}

diff --git a/ui/blocks/src/ControlsTable/SingleControlsTable.tsx b/ui/blocks/src/ControlsTable/SingleControlsTable.tsx
@@ -3,7 +3,6 @@ import React, { FC } from 'react';
 import {
   SetControlValueFn,
   ClickControlFn,
-  ComponentControls,
 } from '@component-controls/specification';
 import { getPropertyEditor, PropertyEditor } from '@component-controls/editors';
 import { Table } from '@component-controls/components';
@@ -14,7 +13,7 @@ export interface SingleControlsTableProps {
   /**
    * component controls to display in the table.
    */
-  controls?: ComponentControls;
+  data?: any[];
   /**
    * storyId, will be used to update the values of the controls
    */
@@ -35,114 +34,73 @@ export interface SingleControlsTableProps {
  * The controls and storyId are already set in priops;
  */
 export const SingleControlsTable: FC<SingleControlsTableProps> = ({
-  controls,
+  data,
   storyId,
   setControlValue,
   clickControl,
 }) => {
-  const data = controls
-    ? Object.keys(controls)
-        .map((key, index) => ({
-          name: key,
-          control: {
-            ...controls[key],
-            order:
-              controls[key].order === undefined ? index : controls[key].order,
+  const [skipPageReset, setSkipPageReset] = React.useState(false);
+  React.useEffect(() => {
+    setSkipPageReset(false);
+  }, [data]);
+
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Editor',
+        accessor: 'control',
+        Cell: ({
+          row: {
+            original: { control, 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);
-          }
-        };
+        }: any) => {
+          const InputType: PropertyEditor =
+            getPropertyEditor(control.type) || InvalidType;
+          const onChange = (propName: string, value: any) => {
+            if (setControlValue && storyId) {
+              setSkipPageReset(true);
+              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
+      skipPageReset={skipPageReset}
       key={data?.reduce((acc: string, { name }) => `${acc}-${name}}`, '')}
       className="component-controls-table"
       header={false}
-      columns={[
-        {
-          Header: 'Name',
-          accessor: 'name',
-        },
-        {
-          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>
-            );
-          },
-        },
-      ]}
+      columns={columns}
       data={data}
     />
   );