Skip to content

Commit 162616a

Browse files
DaffPunksDaffPunks
committed
feat: extract form-generator
1 parent 6aa3c47 commit 162616a

File tree

35 files changed

+78
-257
lines changed

35 files changed

+78
-257
lines changed

‎playground/src/pages/form/form.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1+
import * as React from 'react';
12
import {Button, Text, ThemeProvider} from '@gravity-ui/uikit';
23
import block from 'bem-cn-lite';
34
import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
45
import {useNavigate} from 'react-router';
56
import DynamicForm from '../../../../src/editor-v2/components/DynamicForm/DynamicForm';
6-
import {FormBuilder} from './components/FormBuilder/FormBuilder';
77
import {FormOutput} from './components/FormOutput/FormOutput';
8-
import {FormProvider, useFormContext} from './hooks/FormContext';
8+
import {FormBuilder, FormProvider, useFormContext} from '../../../../src/form-generator';
99

1010
import './form.scss';
1111

1212
const b = block('form');
1313

14-
// Компонент содержимого формы, использующий контекст
1514
const FormContent = () => {
16-
const {formFields, contentConfig, handleFormUpdate, resetForm} = useFormContext();
15+
const {formFields, resetForm} = useFormContext();
16+
const [contentConfig, setContentConfig] = React.useState({});
1717

1818
const navigate = useNavigate();
1919

@@ -72,7 +72,7 @@ const FormContent = () => {
7272
<DynamicForm
7373
contentConfig={contentConfig}
7474
blockConfig={formFields}
75-
onUpdate={handleFormUpdate}
75+
onUpdate={setContentConfig}
7676
/>
7777
</div>
7878
</Panel>

‎src/editor-v2/components/DynamicForm/DynamicForm.tsx‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as React from 'react';
44
import {ConfigInput, DynamicFormValue} from '../../../common/types';
55
import {editorCn} from '../../utils/cn';
66

7-
import './DynamicForm.scss';
87
import ArrayDynamicField from './Fields/Array/Array';
98
import BooleanDynamicField from './Fields/Boolean/Boolean';
109
import NumberDynamicField from './Fields/Number/Number';
@@ -16,18 +15,35 @@ import TextDynamicField from './Fields/Text/Text';
1615
import TextAreaDynamicField from './Fields/TextArea/TextArea';
1716
import {getContent, getFullPath} from './utils';
1817

18+
import './DynamicForm.scss';
19+
1920
const b = editorCn('dynamic-form');
2021

2122
interface DynamicFormProps {
2223
blockConfig: Array<ConfigInput>;
23-
contentConfig?: DynamicFormValue;
24-
onUpdate: (key: string, value: DynamicFormValue) => void;
24+
contentConfig?: object;
25+
onUpdateByKey?: (key: string, value: DynamicFormValue) => void;
26+
onUpdate?: (value: object) => void;
2527
className?: string;
2628
}
2729

28-
const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) => {
30+
const DynamicForm = ({blockConfig, onUpdateByKey, onUpdate, contentConfig}: DynamicFormProps) => {
2931
const inputs = blockConfig;
3032

33+
const onDataUpdate = React.useCallback(
34+
(key: string, value: DynamicFormValue) => {
35+
if (onUpdateByKey) {
36+
onUpdateByKey(key, value);
37+
}
38+
if (onUpdate && contentConfig) {
39+
const newContentConfig = _.cloneDeep(contentConfig);
40+
_.set(newContentConfig, key, value);
41+
onUpdate(newContentConfig);
42+
}
43+
},
44+
[onUpdateByKey, onUpdate, contentConfig],
45+
);
46+
3147
const getData = React.useCallback(
3248
(variable: string) => {
3349
if (variable.startsWith('block.')) {
@@ -87,19 +103,19 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
87103

88104
// Text, Select, Boolean and etc
89105
const onSimpleDynamicFieldUpdate = (value: DynamicFormValue) => {
90-
onUpdate(fieldPath, value);
106+
onDataUpdate(fieldPath, value);
91107
};
92108

93109
// Array and Objects
94110
const onComplexDynamicFieldUpdate = (key: string, value: DynamicFormValue) => {
95-
onUpdate(getFullPath(fieldPath, key), value);
111+
onDataUpdate(getFullPath(fieldPath, key), value);
96112
};
97113

98114
switch (input.type) {
99115
case 'text': {
100116
return (
101117
<TextDynamicField
102-
onRefresh={(value) => onUpdate(fieldPath, value)}
118+
onRefresh={(value) => onDataUpdate(fieldPath, value)}
103119
title={input.title}
104120
value={fieldValue}
105121
onUpdate={onSimpleDynamicFieldUpdate}
@@ -109,7 +125,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
109125
case 'boolean': {
110126
return (
111127
<BooleanDynamicField
112-
onRefresh={(value) => onUpdate(fieldPath, value)}
128+
onRefresh={(value) => onDataUpdate(fieldPath, value)}
113129
title={input.title}
114130
value={fieldValue}
115131
onUpdate={onSimpleDynamicFieldUpdate}
@@ -119,7 +135,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
119135
case 'textarea': {
120136
return (
121137
<TextAreaDynamicField
122-
onRefresh={(value) => onUpdate(fieldPath, value)}
138+
onRefresh={(value) => onDataUpdate(fieldPath, value)}
123139
title={input.title}
124140
value={fieldValue}
125141
onUpdate={onSimpleDynamicFieldUpdate}
@@ -129,7 +145,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
129145
case 'select': {
130146
return (
131147
<SelectDynamicField
132-
onRefresh={(value) => onUpdate(fieldPath, value)}
148+
onRefresh={(value) => onDataUpdate(fieldPath, value)}
133149
input={input}
134150
value={fieldValue}
135151
onUpdate={onSimpleDynamicFieldUpdate}
@@ -139,7 +155,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
139155
case 'number': {
140156
return (
141157
<NumberDynamicField
142-
onRefresh={(value) => onUpdate(fieldPath, value)}
158+
onRefresh={(value) => onDataUpdate(fieldPath, value)}
143159
title={input.title}
144160
value={fieldValue}
145161
onUpdate={onSimpleDynamicFieldUpdate}
@@ -153,7 +169,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
153169

154170
return (
155171
<ObjectDynamicField
156-
onRefresh={(value) => onUpdate(fieldPath, value)}
172+
onRefresh={(value) => onDataUpdate(fieldPath, value)}
157173
blockConfig={input.properties}
158174
title={input.title}
159175
value={fieldValue}
@@ -202,7 +218,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
202218
}
203219
}
204220
},
205-
[contentConfig, decide, onUpdate],
221+
[contentConfig, decide, onDataUpdate],
206222
);
207223

208224
const sortedInputs = inputs.sort((x, y) => {

‎src/editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const AnyOfDynamicField = ({
8181
<DynamicForm
8282
blockConfig={anyOfChosenOption.properties}
8383
contentConfig={anyOfContentConfig}
84-
onUpdate={onUpdate}
84+
onUpdateByKey={onUpdate}
8585
/>
8686
)}
8787
</Card>

‎src/editor-v2/components/DynamicForm/Fields/Array/Array.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@ const ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: Ar
9696
{arrayItemButton}
9797
</div>
9898
<DynamicForm
99-
contentConfig={value}
99+
contentConfig={value as object}
100100
blockConfig={blockConfig.properties}
101-
onUpdate={(key, updateValue) =>
101+
onUpdateByKey={(key, updateValue) =>
102102
onUpdate(`[${index}].${key}`, updateValue)
103103
}
104104
/>

‎src/editor-v2/components/DynamicForm/Fields/Object/Object.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DynamicForm from '../../DynamicForm';
33
import FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';
44

55
interface ObjectDynamicFieldProps extends FieldBaseParams {
6-
value: DynamicFormValue;
6+
value: object;
77
onUpdate: (key: string, value: DynamicFormValue) => void;
88
blockConfig: Array<ConfigInput>;
99
className?: string;
@@ -23,7 +23,7 @@ const ObjectDynamicField = ({
2323
onRefresh={(updatedValue) => onUpdate('', updatedValue)}
2424
expandable
2525
>
26-
<DynamicForm contentConfig={value} blockConfig={blockConfig} onUpdate={onUpdate} />
26+
<DynamicForm contentConfig={value} blockConfig={blockConfig} onUpdateByKey={onUpdate} />
2727
</FieldBase>
2828
);
2929
};

‎src/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const OneOfDynamicField = ({
8080
<DynamicForm
8181
blockConfig={oneOfChosenOption.properties}
8282
contentConfig={oneOfContentConfig}
83-
onUpdate={onUpdate}
83+
onUpdateByKey={onUpdate}
8484
/>
8585
)}
8686
</FieldBase>

‎src/editor-v2/components/Sidebar/Sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from 'react';
22

33
import {editorCn} from '../../utils/cn';
4-
import Tabs, {TabsItemProps} from '../Tabs/Tabs';
4+
import Tabs, {TabItemProps} from '../Tabs/Tabs';
55

66
import './Sidebar.scss';
77

88
const b = editorCn('sidebar');
99

1010
interface SidebarProps {
11-
tabs: TabsItemProps[];
11+
tabs: TabItemProps[];
1212
defaultTab?: string;
1313
top?: React.ElementType[];
1414
className?: string;

‎src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const BlockConfigForm = ({className}: BlockConfigFormProps) => {
5959
<DynamicForm
6060
contentConfig={currentConfig}
6161
blockConfig={currentSchema.schema.inputs}
62-
onUpdate={onUpdate}
62+
onUpdateByKey={onUpdate}
6363
/>
6464
</div>
6565
</div>

‎src/editor-v2/containers/GlobalConfig/GlobalConfig.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const GlobalConfig = ({className}: GlobalConfigProps) => {
2424
<DynamicForm
2525
contentConfig={content.navigation}
2626
blockConfig={global}
27-
onUpdate={onUpdate}
27+
onUpdateByKey={onUpdate}
2828
/>
2929
</div>
3030
);

‎playground/src/pages/form/components/AddPropertyButton/AddPropertyButton.scss‎ renamed to ‎src/form-generator/components/AddPropertyButton/AddPropertyButton.scss‎

File renamed without changes.

0 commit comments

Comments
 (0)