Skip to content

Commit 656b556

Browse files
rvsiarvsia
committed
fix(editor): add initial schema prop
1 parent 1951605 commit 656b556

7 files changed

Lines changed: 233 additions & 16 deletions

File tree

‎packages/editor-core/src/convert-schema/convert-schema.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Field, Schema } from '@data-driven-forms/react-form-renderer';
2+
import { AnyObject } from '../types';
3+
4+
export const convertSchemaComponent = (fields: Field[] | Field, components: AnyObject, containers: AnyObject, container: string) => {
5+
if(Array.isArray(fields)) {
6+
fields.forEach((field: Field) => convertSchemaComponent(field, components, containers, container));
7+
} else {
8+
containers[container].children.push(fields.name);
9+
components[fields.name] = fields;
10+
11+
if(fields.component === 'sub-form') {
12+
if(!containers[fields.name]) {
13+
containers[fields.name] = {
14+
children: []
15+
};
16+
}
17+
fields.fields.forEach((subField: Field) => convertSchemaComponent(subField, components, containers, fields.name));
18+
}
19+
}
20+
};
21+
22+
const convertSchema = (schema?: Schema) => {
23+
const components = {};
24+
const containers = {
25+
root: {
26+
children: [],
27+
ref: null
28+
}
29+
};
30+
31+
if(schema) {
32+
convertSchemaComponent(schema.fields, components, containers, 'root');
33+
}
34+
35+
return { components, containers };
36+
};
37+
38+
export default convertSchema;

‎packages/editor-core/src/convert-schema/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './convert-schema';
2+
export * from './convert-schema';

‎packages/editor-core/src/editor/editor.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { ProviderProps } from '@data-driven-forms/dnd';
66
import { AnyObject } from '../types';
77

88
import useEditor from '../use-editor';
9+
import { Schema } from '@data-driven-forms/react-form-renderer';
910

10-
export interface EditorProps extends AnyObject, Partial<ProviderProps> { };
11+
export interface EditorProps extends AnyObject, Partial<ProviderProps> { initialSchema?: Schema; };
1112

12-
const Editor: React.FC<EditorProps> = ({ children, ...props }) => {
13-
const [state, dispatch] = useEditor();
13+
const Editor: React.FC<EditorProps> = ({ children, initialSchema, ...props }) => {
14+
const [state, dispatch] = useEditor({ initialSchema });
1415

1516
return (
1617
<Provider dispatch={dispatch} state={state} {...props}>

‎packages/editor-core/src/use-editor/use-editor.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import { useReducer } from 'react';
22
import { clearDrag } from '@data-driven-forms/dnd/reducer';
3+
import { Schema } from '@data-driven-forms/react-form-renderer';
4+
35
import reducer from '../reducer';
6+
import convertSchema from '../convert-schema';
7+
8+
export interface UseEditorProps {
9+
initialSchema?: Schema;
10+
}
411

5-
function useEditor(): [any, any] {
12+
function useEditor(props?: UseEditorProps): [any, any] {
613
const [state, dispatch] = useReducer(reducer, null, () => {
14+
const { containers, components } = convertSchema(props?.initialSchema);
15+
716
return {
817
...clearDrag,
9-
components: {},
10-
containers: {
11-
root: {
12-
children: [],
13-
ref: null
14-
}
15-
},
18+
components,
19+
containers,
1620
selectedComponent: null,
1721
showSchema: false,
1822
mode: 'build'

‎packages/editor-pro/README.md‎

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,130 @@
11
- [Data Driven Forms Editor Pro](#data-driven-forms-editor-pro)
2+
- [Props](#props)
3+
- [fields](#fields)
4+
- [componentMapper](#componentmapper)
5+
- [componentInitialProps](#componentinitialprops)
6+
- [initialSchema](#initialschema)
27

38
# Data Driven Forms Editor Pro
49

5-
Data Driven Forms Editor is editor to build complex Data Driven Forms.
10+
Data Driven Forms Editor is editor to build complex Data Driven Forms.
11+
12+
# Props
13+
14+
## fields
15+
16+
A schema of the properties editor. You can use our predefined helper functions to create subsections. Check [`public/index.tsx`](./public/index.tsx) for an example
17+
18+
```tsx
19+
const fields: Schema = {
20+
fields: [{
21+
name: 'component',
22+
component: 'select',
23+
label: 'Component',
24+
description: 'Component type.',
25+
isRequired: true,
26+
validate: [{ type: 'required' }],
27+
options: Object.keys(componentMapper).map(key => ({
28+
label: key.replaceAll('-', ' '),
29+
value: key
30+
}))
31+
}, {
32+
name: 'name',
33+
component: 'text-field',
34+
label: 'Name',
35+
description: 'Name of the field. You can use dot notation to nest variables.',
36+
isRequired: true,
37+
validate: [{ type: 'required' }]
38+
}]
39+
}
40+
```
41+
42+
## componentMapper
43+
44+
A mapper of components you want to be able to edit.
45+
46+
**Example**
47+
48+
```tsx
49+
import { componentMapper } from '@data-driven-forms/mui-component-mapper';
50+
```
51+
52+
## componentInitialProps
53+
54+
An object to set initial props for components. For example, some components required props to be initialized.
55+
56+
**Example**
57+
58+
```tsx
59+
const componentInitialProps: AnyObject = {
60+
'dual-list-select': {
61+
options: []
62+
},
63+
'sub-form': {
64+
title: 'Sub form',
65+
fields: []
66+
},
67+
'field-array': {
68+
fields: []
69+
},
70+
wizard: {
71+
fields: [{ name: 'step-1', fields: [] }]
72+
},
73+
tabs: {
74+
fields: []
75+
}
76+
};
77+
```
78+
79+
## initialSchema
80+
81+
Initial schema to be put in the editor.
82+
83+
**Example**
84+
85+
```tsx
86+
const initialSchema: Schema = {
87+
fields: [{
88+
component: componentTypes.TEXT_FIELD,
89+
name: 'name',
90+
label: 'Your name',
91+
isRequired: true,
92+
validate: [{ type: validatorTypes.REQUIRED }]
93+
}, {
94+
component: componentTypes.TEXT_FIELD,
95+
name: 'email',
96+
label: 'Email',
97+
isRequired: true,
98+
validate: [
99+
{ type: validatorTypes.REQUIRED },
100+
{
101+
type: validatorTypes.PATTERN,
102+
pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
103+
message: 'Not valid email'
104+
}
105+
]
106+
},{
107+
component: componentTypes.TEXT_FIELD,
108+
name: 'confirm-email',
109+
label: 'Confirm email',
110+
type: 'email',
111+
isRequired: true,
112+
},{
113+
component: componentTypes.CHECKBOX,
114+
name: 'newsletters',
115+
label: 'I want to receive newsletter'
116+
}, {
117+
component: componentTypes.SUB_FORM,
118+
name: 'subform1',
119+
title: 'Additional info',
120+
fields: [
121+
{
122+
component: componentTypes.TEXTAREA,
123+
name: 'address',
124+
label: 'Your address',
125+
}
126+
]
127+
}
128+
]
129+
};
130+
```

‎packages/editor-pro/public/index.tsx‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Editor from '../src/editor';
77
import propertiesFields from '../src/editor/properties-fields';
88

99
import { AnyObject } from '../src/types';
10+
import { componentTypes, Schema, validatorTypes } from '@data-driven-forms/react-form-renderer';
1011

1112
const componentInitialProps: AnyObject = {
1213
'dual-list-select': {
@@ -29,7 +30,52 @@ const componentInitialProps: AnyObject = {
2930

3031
const fields = propertiesFields({ componentMapper });
3132

32-
const App = () => <Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />;
33+
const initialSchema: Schema = {
34+
fields: [{
35+
component: componentTypes.TEXT_FIELD,
36+
name: 'name',
37+
label: 'Your name',
38+
isRequired: true,
39+
validate: [{ type: validatorTypes.REQUIRED }]
40+
}, {
41+
component: componentTypes.TEXT_FIELD,
42+
name: 'email',
43+
label: 'Email',
44+
isRequired: true,
45+
validate: [
46+
{ type: validatorTypes.REQUIRED },
47+
{
48+
type: validatorTypes.PATTERN,
49+
pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
50+
message: 'Not valid email'
51+
}
52+
]
53+
},{
54+
component: componentTypes.TEXT_FIELD,
55+
name: 'confirm-email',
56+
label: 'Confirm email',
57+
type: 'email',
58+
isRequired: true,
59+
},{
60+
component: componentTypes.CHECKBOX,
61+
name: 'newsletters',
62+
label: 'I want to receive newsletter'
63+
}, {
64+
component: componentTypes.SUB_FORM,
65+
name: 'subform1',
66+
title: 'Additional info',
67+
fields: [
68+
{
69+
component: componentTypes.TEXTAREA,
70+
name: 'address',
71+
label: 'Your address',
72+
}
73+
]
74+
}
75+
]
76+
};
77+
78+
const App = () => <Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} initialSchema={initialSchema} />;
3379

3480
ReactDOM.render(
3581
<App />,

‎packages/editor-pro/src/editor/editor.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import AdapterDateFns from '@mui/lab/AdapterDateFns';
99
import LocalizationProvider from '@mui/lab/LocalizationProvider';
1010
import EditorContent from './editor-content';
1111
import PropertiesCard from './properties-card';
12-
import { Field, FormRenderer, ComponentMapper } from '@data-driven-forms/react-form-renderer';
12+
import { Field, FormRenderer, ComponentMapper, Schema } from '@data-driven-forms/react-form-renderer';
1313
import ContainerWrapper from './container-wrapper';
1414
import ComponentWrapper from './component-wrapper';
1515
import SubForm from './sub-form';
@@ -22,10 +22,10 @@ export interface EditorProps {
2222
componentMapper: ComponentMapper;
2323
componentInitialProps?: AnyObject;
2424
fields: Field[];
25+
initialSchema?: Schema;
2526
}
2627

27-
28-
const Editor = ({ componentMapper, componentInitialProps, fields }: EditorProps) => {
28+
const Editor = ({ componentMapper, componentInitialProps, fields, initialSchema }: EditorProps) => {
2929
return (
3030
<LocalizationProvider dateAdapter={AdapterDateFns}>
3131
<Pane
@@ -39,6 +39,7 @@ const Editor = ({ componentMapper, componentInitialProps, fields }: EditorProps)
3939
className: 'drop-cursor'
4040
}
4141
}}
42+
initialSchema={initialSchema}
4243
>
4344
<TopNav />
4445
<Pane flex="1" width="100%" display="flex">

0 commit comments

Comments
 (0)