diff --git a/core/editors/src/editors/ArrayEditor/ArrayEditor.tsx b/core/editors/src/editors/ArrayEditor/ArrayEditor.tsx index e9ec88277..a60a9a1ce 100644 --- a/core/editors/src/editors/ArrayEditor/ArrayEditor.tsx +++ b/core/editors/src/editors/ArrayEditor/ArrayEditor.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent } from 'react'; import { ComponentControlArray } from '@component-controls/specification'; import { Textarea } from 'theme-ui'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; export interface ArrayEditorProps extends PropertyControlProps { prop: ComponentControlArray; diff --git a/core/editors/src/editors/BooleanEditor/BooleanEditor.tsx b/core/editors/src/editors/BooleanEditor/BooleanEditor.tsx index 7cc2244a2..e3c8449a3 100644 --- a/core/editors/src/editors/BooleanEditor/BooleanEditor.tsx +++ b/core/editors/src/editors/BooleanEditor/BooleanEditor.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ComponentControlBoolean } from '@component-controls/specification'; import { Toggle } from '../../components/Toggle/Toggle'; import { FlexContainer } from '../../components/FlexContainer/FlexContainer'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; export interface BooleanEditorProps extends PropertyControlProps { prop: ComponentControlBoolean; diff --git a/core/editors/src/editors/ButtonEditor/ButtonEditor.tsx b/core/editors/src/editors/ButtonEditor/ButtonEditor.tsx index 429277f20..b0a35eff6 100644 --- a/core/editors/src/editors/ButtonEditor/ButtonEditor.tsx +++ b/core/editors/src/editors/ButtonEditor/ButtonEditor.tsx @@ -5,7 +5,7 @@ import { PropertyControlProps, PropertyEditor, PropertyOnClick, -} from '../../types'; +} from '../types'; export interface ButtonEditorProps extends PropertyControlProps { prop: ComponentControlButton; diff --git a/core/editors/src/editors/ColorEditor/ColorEditor.tsx b/core/editors/src/editors/ColorEditor/ColorEditor.tsx index 1d86a7c5a..6b79b8f61 100644 --- a/core/editors/src/editors/ColorEditor/ColorEditor.tsx +++ b/core/editors/src/editors/ColorEditor/ColorEditor.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { SketchPicker, ColorResult } from 'react-color'; import { ComponentControlColor } from '@component-controls/specification'; import { Button, Box } from 'theme-ui'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; export interface ColorEditorProps extends PropertyControlProps { prop: ComponentControlColor; diff --git a/core/editors/src/editors/DateEditor/DateEditor.tsx b/core/editors/src/editors/DateEditor/DateEditor.tsx index 480ef4ec8..9a964004b 100644 --- a/core/editors/src/editors/DateEditor/DateEditor.tsx +++ b/core/editors/src/editors/DateEditor/DateEditor.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, RefObject } from 'react'; import { ComponentControlDate } from '@component-controls/specification'; import { Input, Box } from 'theme-ui'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; const formatDate = (date: Date | undefined) => { if (date) { diff --git a/core/editors/src/editors/FilesEditor/FilesEditor.tsx b/core/editors/src/editors/FilesEditor/FilesEditor.tsx index 35f01c3a5..b8df5c647 100644 --- a/core/editors/src/editors/FilesEditor/FilesEditor.tsx +++ b/core/editors/src/editors/FilesEditor/FilesEditor.tsx @@ -2,7 +2,7 @@ import { FileReader } from 'global'; import React, { ChangeEvent } from 'react'; import { ComponentControlFiles } from '@component-controls/specification'; import { Input } from 'theme-ui'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; function fileReaderPromise(file: File) { return new Promise(resolve => { diff --git a/core/editors/src/editors/NumberEditor/NumberEditor.tsx b/core/editors/src/editors/NumberEditor/NumberEditor.tsx index 5224d8c56..1f43d07ba 100644 --- a/core/editors/src/editors/NumberEditor/NumberEditor.tsx +++ b/core/editors/src/editors/NumberEditor/NumberEditor.tsx @@ -1,7 +1,7 @@ import React, { FC, ChangeEvent } from 'react'; import { ComponentControlNumber } from '@component-controls/specification'; import { Input, Box, BoxProps } from 'theme-ui'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; export interface NumberEditorProps extends PropertyControlProps { prop: ComponentControlNumber; diff --git a/core/editors/src/editors/ObjectEditor/ObjectEditor.tsx b/core/editors/src/editors/ObjectEditor/ObjectEditor.tsx index 9ea90b3f2..c8433bd2d 100644 --- a/core/editors/src/editors/ObjectEditor/ObjectEditor.tsx +++ b/core/editors/src/editors/ObjectEditor/ObjectEditor.tsx @@ -1,15 +1,16 @@ import React, { FC } from 'react'; import { Button, Box } from 'theme-ui'; import { + ControlTypes, ComponentControl, ComponentControlObject, } from '@component-controls/specification'; import { mergeControlValues, getControlValues } from '@component-controls/core'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; import { FlexContainer } from '../../components/FlexContainer/FlexContainer'; import { Popover } from '../../components/Popover/Popover'; -import { getPropertyEditor } from '../../prop-factory'; +import { PropertyEditors } from '../PropertyEditors'; export interface ObjectEditorProps extends PropertyControlProps { prop: ComponentControlObject; @@ -56,7 +57,7 @@ export const ObjectEditor: PropertyEditor = ({ return { name: key, prop: childProp, - node: getPropertyEditor(childProp.type), + node: AllPropertyEditors[childProp.type], }; }) .filter(p => p && p.node); @@ -102,3 +103,11 @@ export const ObjectEditor: PropertyEditor = ({ ); }; + +// avoid circular reference problem +export const AllPropertyEditors: { + [name in ControlTypes]: PropertyEditor; +} = { + ...PropertyEditors, + [ControlTypes.OBJECT]: ObjectEditor, +}; diff --git a/core/editors/src/editors/ObjectEditor/index.ts b/core/editors/src/editors/ObjectEditor/index.ts index 6c7192abd..6b2d678af 100644 --- a/core/editors/src/editors/ObjectEditor/index.ts +++ b/core/editors/src/editors/ObjectEditor/index.ts @@ -1 +1 @@ -export { ObjectEditor } from './ObjectEditor'; +export { ObjectEditor, AllPropertyEditors } from './ObjectEditor'; diff --git a/core/editors/src/editors/OptionsEditor/CheckboxEditor.tsx b/core/editors/src/editors/OptionsEditor/CheckboxEditor.tsx index 12c4aa208..9ac62b65a 100644 --- a/core/editors/src/editors/OptionsEditor/CheckboxEditor.tsx +++ b/core/editors/src/editors/OptionsEditor/CheckboxEditor.tsx @@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react'; import styled from '@emotion/styled'; import { ComponentControlOptions } from '@component-controls/specification'; import { normalizeOptions, NormalizedOption } from './utils'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; interface CheckboxEditorProps extends PropertyControlProps { prop: ComponentControlOptions; diff --git a/core/editors/src/editors/OptionsEditor/OptionsEditor.tsx b/core/editors/src/editors/OptionsEditor/OptionsEditor.tsx index 25ef900be..982b1e38f 100644 --- a/core/editors/src/editors/OptionsEditor/OptionsEditor.tsx +++ b/core/editors/src/editors/OptionsEditor/OptionsEditor.tsx @@ -3,7 +3,7 @@ import ReactSelect from 'react-select'; import styled from '@emotion/styled'; import { ComponentControlOptions } from '@component-controls/specification'; import { normalizeOptions } from './utils'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; import { RadiosEditor } from './RadiosEditor'; import { CheckboxEditor } from './CheckboxEditor'; diff --git a/core/editors/src/editors/OptionsEditor/RadiosEditor.tsx b/core/editors/src/editors/OptionsEditor/RadiosEditor.tsx index ccd927859..486b81e34 100644 --- a/core/editors/src/editors/OptionsEditor/RadiosEditor.tsx +++ b/core/editors/src/editors/OptionsEditor/RadiosEditor.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { ComponentControlOptions } from '@component-controls/specification'; import { normalizeOptions, NormalizedOption } from './utils'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; interface RadiosEditorProps extends PropertyControlProps { prop: ComponentControlOptions; diff --git a/core/editors/src/editors/PropertyEditors.ts b/core/editors/src/editors/PropertyEditors.ts new file mode 100644 index 000000000..66d3866f4 --- /dev/null +++ b/core/editors/src/editors/PropertyEditors.ts @@ -0,0 +1,25 @@ +import { ControlTypes } from '@component-controls/specification'; +import { TextEditor } from './TextEditor'; +import { NumberEditor } from './NumberEditor'; + +import { BooleanEditor } from './BooleanEditor'; +import { OptionsEditor } from './OptionsEditor'; + +import { DateEditor } from './DateEditor'; +import { ColorEditor } from './ColorEditor'; +import { ButtonEditor } from './ButtonEditor'; + +import { ArrayEditor } from './ArrayEditor'; +import { FilesEditor } from './FilesEditor'; + +export const PropertyEditors = { + [ControlTypes.TEXT]: TextEditor, + [ControlTypes.NUMBER]: NumberEditor, + [ControlTypes.BOOLEAN]: BooleanEditor, + [ControlTypes.OPTIONS]: OptionsEditor, + [ControlTypes.DATE]: DateEditor, + [ControlTypes.COLOR]: ColorEditor, + [ControlTypes.BUTTON]: ButtonEditor, + [ControlTypes.ARRAY]: ArrayEditor, + [ControlTypes.FILES]: FilesEditor, +}; diff --git a/core/editors/src/editors/TextEditor/TextEditor.tsx b/core/editors/src/editors/TextEditor/TextEditor.tsx index 313169245..83849c884 100644 --- a/core/editors/src/editors/TextEditor/TextEditor.tsx +++ b/core/editors/src/editors/TextEditor/TextEditor.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent } from 'react'; import { ComponentControlText } from '@component-controls/specification'; import { Input, Textarea } from 'theme-ui'; -import { PropertyControlProps, PropertyEditor } from '../../types'; +import { PropertyControlProps, PropertyEditor } from '../types'; export interface TextEditorProps extends PropertyControlProps { prop: ComponentControlText; diff --git a/core/editors/src/editors/prop-factory.ts b/core/editors/src/editors/prop-factory.ts new file mode 100644 index 000000000..afef00bde --- /dev/null +++ b/core/editors/src/editors/prop-factory.ts @@ -0,0 +1,7 @@ +import { ControlTypes } from '@component-controls/specification'; +import { PropertyEditor } from './types'; + +import { AllPropertyEditors } from './ObjectEditor'; + +export const getPropertyEditor = (type: ControlTypes): PropertyEditor => + AllPropertyEditors[type]; diff --git a/core/editors/src/types.ts b/core/editors/src/editors/types.ts similarity index 100% rename from core/editors/src/types.ts rename to core/editors/src/editors/types.ts diff --git a/core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx b/core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx index 73f88c633..fb072d076 100644 --- a/core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx +++ b/core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx @@ -12,7 +12,7 @@ import { } from '@component-controls/core'; import { Tab, Tabs, TabList, TabPanel } from '../../components/Tabs/Tabs'; -import { ControlsEditorsTableProps } from '../../types'; +import { ControlsEditorsTableProps } from '../../editors/types'; import { ActionBar } from '../../components/ActionBar/ActionBar'; import { PropertyEditorRow } from './PropEditorRow'; diff --git a/core/editors/src/forms/ControlsTable/PropEditorRow.tsx b/core/editors/src/forms/ControlsTable/PropEditorRow.tsx index 676d86852..ae0b12aad 100644 --- a/core/editors/src/forms/ControlsTable/PropEditorRow.tsx +++ b/core/editors/src/forms/ControlsTable/PropEditorRow.tsx @@ -6,9 +6,9 @@ import { import styled from '@emotion/styled'; import { LoadedComponentControl } from '@component-controls/core'; -import { getPropertyEditor } from '../../prop-factory'; +import { getPropertyEditor } from '../../editors/prop-factory'; import { FlexContainer } from '../../components/FlexContainer/FlexContainer'; -import { PropertyEditor } from '../../types'; +import { PropertyEditor } from '../../editors/types'; const StyledTR = styled.tr<{}>(({ theme }) => ({ //@ts-ignore diff --git a/core/editors/src/index.ts b/core/editors/src/index.ts index 2a17041b6..042e0dbc5 100644 --- a/core/editors/src/index.ts +++ b/core/editors/src/index.ts @@ -1,4 +1,4 @@ -export * from './prop-factory'; -export * from './types'; +export * from './editors/prop-factory'; +export * from './editors/types'; export * from './forms/ControlsTable/ControlEditorsTable'; export { FlexContainer } from './components/FlexContainer/FlexContainer'; diff --git a/core/editors/src/prop-factory.ts b/core/editors/src/prop-factory.ts deleted file mode 100644 index d14788ee6..000000000 --- a/core/editors/src/prop-factory.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { ControlTypes } from '@component-controls/specification'; -import { PropertyEditor } from './types'; -import { TextEditor } from './editors/TextEditor'; -import { NumberEditor } from './editors/NumberEditor'; - -import { BooleanEditor } from './editors/BooleanEditor'; -import { OptionsEditor } from './editors/OptionsEditor'; - -import { DateEditor } from './editors/DateEditor'; -import { ColorEditor } from './editors/ColorEditor'; -import { ButtonEditor } from './editors/ButtonEditor'; - -import { ObjectEditor } from './editors/ObjectEditor'; -import { ArrayEditor } from './editors/ArrayEditor'; -import { FilesEditor } from './editors/FilesEditor'; - -const PropertyEditors: { - [name in ControlTypes]: PropertyEditor; -} = { - [ControlTypes.TEXT]: TextEditor, - [ControlTypes.NUMBER]: NumberEditor, - [ControlTypes.BOOLEAN]: BooleanEditor, - [ControlTypes.OPTIONS]: OptionsEditor, - [ControlTypes.DATE]: DateEditor, - [ControlTypes.COLOR]: ColorEditor, - [ControlTypes.BUTTON]: ButtonEditor, - [ControlTypes.OBJECT]: ObjectEditor, - [ControlTypes.ARRAY]: ArrayEditor, - [ControlTypes.FILES]: FilesEditor, -}; - -export const getPropertyEditor = (type: ControlTypes): PropertyEditor => - PropertyEditors[type];