From b87ad46bafe71fcb74f32bdfef4c92b3f75afe10 Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 1 Apr 2020 11:17:43 -0400 Subject: [PATCH] fix: table editing lock update --- ui/blocks/src/ControlsTable/ControlsTable.tsx | 22 +- .../src/ControlsTable/SingleControlsTable.tsx | 154 +++++-------- ui/blocks/src/PropsTable/PropsTable.tsx | 214 +++++++++--------- ui/components/src/Table/Table.stories.tsx | 54 ++--- ui/components/src/Table/Table.tsx | 1 - 5 files changed, 207 insertions(+), 238 deletions(-) diff --git a/ui/blocks/src/ControlsTable/ControlsTable.tsx b/ui/blocks/src/ControlsTable/ControlsTable.tsx index 92b8b5c76..b53d1c337 100644 --- 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 = ( setControlValue={setControlValue} clickControl={clickControl} storyId={storyId} - controls={groupedItems[0].controls} + data={createData(groupedItems[0].controls)} /> ) : ( @@ -151,7 +169,7 @@ export const ControlsTable: FC = ( setControlValue={setControlValue} clickControl={clickControl} storyId={storyId} - controls={item.controls} + data={createData(item.controls)} /> ))} diff --git a/ui/blocks/src/ControlsTable/SingleControlsTable.tsx b/ui/blocks/src/ControlsTable/SingleControlsTable.tsx index 2af6aa6ff..f7215fd9e 100644 --- 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 = ({ - 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 ( - - - - ); - })} - + return ( + + + + ); + }, + }, + ], + [], ); - */ + return ( `${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 ( - - - - ); - }, - }, - ]} + columns={columns} data={data} /> ); diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx index 7d3bce293..daec89947 100644 --- a/ui/blocks/src/PropsTable/PropsTable.tsx +++ b/ui/blocks/src/PropsTable/PropsTable.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/display-name */ /** @jsx jsx */ import { jsx, Text, Flex, Styled } from 'theme-ui'; -import { FC } from 'react'; +import { FC, useMemo } from 'react'; import { getPropertyEditor, PropertyEditor } from '@component-controls/editors'; import { Table, TableProps, Markdown } from '@component-controls/components'; import { Column } from 'react-table'; @@ -60,110 +60,115 @@ export const PropsTable: FC = ({ } /* */ - const columns: Column[] = [ - { - Header: 'Parent', - accessor: 'prop.parentName', - }, - { - Header: 'Name', - accessor: 'name', - Cell: ({ row: { original } }: any) => { - if (!original) { - return null; - } - const { - name, - prop: { - type: { required }, - }, - } = original; + const columns = useMemo( + () => [ + { + Header: 'Parent', + accessor: 'prop.parentName', + }, + { + Header: 'Name', + accessor: 'name', + Cell: ({ row: { original } }: any) => { + if (!original) { + return null; + } + const { + name, + prop: { + type: { required }, + }, + } = original; - return ( - - {name} - {required ? '*' : ''} - - ); + return ( + + {name} + {required ? '*' : ''} + + ); + }, }, - }, - { - Header: 'Description', - accessor: 'prop.description', - width: '60%', - Cell: ({ row: { original } }: any) => { - if (!original) { - return null; - } - const { - prop: { - description, - type: { raw, name }, - }, - } = original; - return ( - - {description && {description}} - {(raw ?? name) && ( - - {raw ?? name} - - )} - - ); + { + Header: 'Description', + accessor: 'prop.description', + width: '60%', + Cell: ({ row: { original } }: any) => { + if (!original) { + return null; + } + const { + prop: { + description, + type: { raw, name }, + }, + } = original; + return ( + + {description && {description}} + {(raw ?? name) && ( + + {raw ?? name} + + )} + + ); + }, }, - }, - { - Header: 'Default', - accessor: 'prop.defaultValue', - width: '40%', - Cell: ({ row: { original } }: any) => { - if (!original) { - return null; - } - const { - prop: { defaultValue }, - } = original; - let value = null; - switch (typeof defaultValue) { - case 'object': - value = JSON.stringify(defaultValue, null, 2); - break; - case 'undefined': - value = '-'; - break; - default: - value = defaultValue.toString(); - } - return ( - - {value} - - ); + { + Header: 'Default', + accessor: 'prop.defaultValue', + width: '40%', + Cell: ({ row: { original } }: any) => { + if (!original) { + return null; + } + const { + prop: { defaultValue }, + } = original; + let value = null; + switch (typeof defaultValue) { + case 'object': + value = JSON.stringify(defaultValue, null, 2); + break; + case 'undefined': + value = '-'; + break; + default: + value = defaultValue.toString(); + } + return ( + + {value} + + ); + }, }, - }, - ]; + ...extraColumns, + , + ], + [extraColumns], + ); const { controls } = story || {}; // check if we should display controls in the PrpsTable // at least one control's name should exist as a property name @@ -216,12 +221,7 @@ export const PropsTable: FC = ({ } return ( -
+
); }} diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx index fa1b930dd..664f5b276 100644 --- a/ui/components/src/Table/Table.stories.tsx +++ b/ui/components/src/Table/Table.stories.tsx @@ -105,41 +105,35 @@ export const grouping = () => { }; export const editing = () => { - const [value, setValue] = React.useState('example'); + const [data, setData] = React.useState([{ value: 'example' }]); const [skipPageReset, setSkipPageReset] = React.useState(false); React.useEffect(() => { setSkipPageReset(false); - }, [value]); + }, [data]); + const columns = React.useMemo( + () => [ + { + Header: 'Value', + accessor: 'value', + Cell: ({ cell: { value } }: any) => { + return ( + { + setSkipPageReset(true); + setData([{ value: e.target.value }]); + }} + /> + ); + }, + }, + ], + [], + ); + return ( -
( - { - setSkipPageReset(true); - setValue(e.target.value); - }} - /> - ), - }, - ]} - data={[ - { - value, - }, - , - ]} - /> +
); }; diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx index 32bf1c155..8f8e6b4d7 100644 --- a/ui/components/src/Table/Table.tsx +++ b/ui/components/src/Table/Table.tsx @@ -146,7 +146,6 @@ export const Table: FC = ({ if (sorting) { plugins.push(); } - console.log(options); const tableOptions = useTable(options, ...plugins) as any; const { getTableProps,