fix: initial value (#39)

gravity-ui · May 17, 2023 · ce52d65 · ce52d65
1 parent ec823bf
commit ce52d65
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 31 deletions.
diff --git a/src/lib/core/components/Form/Controller.tsx b/src/lib/core/components/Form/Controller.tsx
@@ -17,7 +17,7 @@ import {ControllerMirror, FieldValue, ValidateError} from './types';
 export interface ControllerProps<Value extends FieldValue, SpecType extends Spec> {
     spec: SpecType;
     name: string;
-    initialValue: Value;
+    value: Value;
     parentOnChange:
         | ((
               childName: string,
@@ -31,7 +31,7 @@ export interface ControllerProps<Value extends FieldValue, SpecType extends Spec
 export const Controller = <Value extends FieldValue, SpecType extends Spec>({
     spec,
     name,
-    initialValue,
+    value,
     parentOnChange,
     parentOnUnmount,
 }: ControllerProps<Value, SpecType>) => {
@@ -41,7 +41,8 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
     const validate = useValidate(spec);
     const renderProps = useField({
         name,
-        initialValue,
+        initialValue: _.get(tools.initialValue, name),
+        value,
         spec,
         validate,
         tools,

diff --git a/src/lib/core/components/Form/DynamicField.tsx b/src/lib/core/components/Form/DynamicField.tsx
@@ -85,7 +85,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
                         name={name}
                         parentOnChange={null}
                         parentOnUnmount={null}
-                        initialValue={_.get(tools.initialValue, name)}
+                        value={_.get(store.values, name)}
                     />
                     {watcher}
                 </SearchContext.Provider>

diff --git a/src/lib/core/components/Form/hooks/useField.tsx b/src/lib/core/components/Form/hooks/useField.tsx
@@ -18,6 +18,7 @@ export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec>
     name: string;
     spec: SpecType;
     initialValue: Value;
+    value: Value;
     validate?: (value?: Value) => ValidateError;
     tools: DynamicFormsContext['tools'];
     parentOnChange:
@@ -34,6 +35,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
     name,
     spec,
     initialValue,
+    value: externalValue,
     validate: propsValidate,
     tools,
     parentOnChange,
@@ -53,7 +55,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
     );
 
     const [state, setState] = React.useState(() => {
-        let value = _.cloneDeep(initialValue);
+        let value = _.cloneDeep(externalValue);
 
         if (_.isNil(value)) {
             if (spec.defaultValue) {
@@ -71,18 +73,20 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
         }
 
         const error = validate?.(value);
+        const dirty = !_.isEqual(value, initialValue);
+        const pristine = value === initialValue;
 
         return {
             active: false,
-            dirty: false,
+            dirty,
             error,
             invalid: Boolean(error),
-            modified: false,
-            pristine: false,
-            touched: false,
+            modified: dirty || !pristine,
+            pristine,
+            touched: dirty || !pristine,
             valid: !error,
             value,
-            visited: false,
+            visited: dirty || !pristine,
             childErrors: {},
         };
     });
@@ -243,7 +247,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
     ]);
 
     React.useEffect(() => {
-        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value) || state.error) {
+        if (!firstRenderRef.current || !_.isEqual(externalValue, state.value) || state.error) {
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, {
                 ...state.childErrors,
                 [name]: state.error,

diff --git a/src/lib/core/components/Form/hooks/useStore.tsx b/src/lib/core/components/Form/hooks/useStore.tsx
@@ -10,14 +10,18 @@ export const useStore = (name: string) => {
     const form = useForm();
     const firstRenderRef = React.useRef(true);
     const [store, setStore] = React.useState<DynamicFieldStore>(() => {
-        const initialValue: FieldObjectValue = transformArrIn({
+        const values: FieldObjectValue = transformArrIn({
             [name]: _.get(form.getState().values, name),
         });
 
+        const initialValue = transformArrIn({
+            [name]: _.get(form.getState().initialValues, name),
+        });
+
         return {
             name,
-            initialValue,
-            values: _.cloneDeep(initialValue),
+            initialValue: _.cloneDeep(initialValue),
+            values: _.cloneDeep(values),
             errors: {},
         };
     });
@@ -49,14 +53,18 @@ export const useStore = (name: string) => {
 
     React.useEffect(() => {
         if (!firstRenderRef.current) {
-            const initialValue: FieldObjectValue = transformArrIn({
+            const values: FieldObjectValue = transformArrIn({
                 [name]: _.get(form.getState().values, name),
             });
 
+            const initialValue = transformArrIn({
+                [name]: _.get(form.getState().initialValues, name),
+            });
+
             setStore({
                 name: name,
-                initialValue,
-                values: _.cloneDeep(initialValue),
+                initialValue: _.cloneDeep(initialValue),
+                values: _.cloneDeep(values),
                 errors: {},
             });
         }

diff --git a/src/lib/core/components/Form/types/context.ts b/src/lib/core/components/Form/types/context.ts
@@ -2,13 +2,13 @@ import React from 'react';
 
 import type {MonacoEditorProps} from 'react-monaco-editor/lib/types';
 
-import {DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError, WonderMirror} from './';
+import {DynamicFormConfig, FieldValue, ValidateError, WonderMirror} from './';
 
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     tools: {
-        initialValue: FieldObjectValue;
+        initialValue: FieldValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
         onUnmount: (name: string) => void;
         submitFailed: boolean;

diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx
@@ -102,7 +102,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
 
                 return (
                     <Controller
-                        initialValue={input.value?.[`<${key}>`]}
+                        value={input.value?.[`<${key}>`]}
                         parentOnChange={parentOnChange}
                         parentOnUnmount={parentOnUnmount}
                         spec={itemSpec}

diff --git a/src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx b/src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx
@@ -76,7 +76,7 @@ export const CardOneOf: ObjectIndependentInput = (props) => {
         >
             {specProperties[oneOfValue] ? (
                 <Controller
-                    initialValue={input.value?.[oneOfValue]}
+                    value={input.value?.[oneOfValue]}
                     spec={specProperties[oneOfValue]}
                     name={`${name}.${oneOfValue}`}
                     parentOnChange={parentOnChange}

diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
@@ -69,7 +69,7 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
                 {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
                     specProperties[property] ? (
                         <Controller
-                            initialValue={restProps.input.value?.[property]}
+                            value={restProps.input.value?.[property]}
                             spec={specProperties[property]}
                             name={`${name ? name + '.' : ''}${property}`}
                             parentOnChange={parentOnChange}

diff --git a/src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx b/src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx
@@ -42,7 +42,7 @@ export const ObjectValueInput: ObjectIndependentInput = (props) => {
 
     const content = (
         <Controller
-            initialValue={input.value?.[OBJECT_VALUE_PROPERTY_NAME]}
+            value={input.value?.[OBJECT_VALUE_PROPERTY_NAME]}
             spec={childSpec}
             name={`${name}.${OBJECT_VALUE_PROPERTY_NAME}`}
             key={`${name}.${OBJECT_VALUE_PROPERTY_NAME}`}

diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.tsx b/src/lib/kit/components/Inputs/OneOf/OneOf.tsx
@@ -39,7 +39,7 @@ export const OneOf: ObjectIndependentInput = (props) => {
             {specProperties[oneOfValue] ? (
                 <GroupIndent>
                     <Controller
-                        initialValue={props.input.value?.[oneOfValue]}
+                        value={props.input.value?.[oneOfValue]}
                         spec={specProperties[oneOfValue]}
                         name={`${props.name}.${oneOfValue}`}
                         parentOnChange={parentOnChange}

diff --git a/src/lib/kit/components/Inputs/OneOfCard/OneOfCard.tsx b/src/lib/kit/components/Inputs/OneOfCard/OneOfCard.tsx
@@ -94,7 +94,7 @@ export const OneOfCard: ObjectIndependentInput = (props) => {
         >
             {specProperties[oneOfValue] ? (
                 <Controller
-                    initialValue={props.input.value?.[oneOfValue]}
+                    value={props.input.value?.[oneOfValue]}
                     spec={specProperties[oneOfValue]}
                     name={`${name}.${oneOfValue}`}
                     parentOnChange={parentOnChange}

diff --git a/src/lib/kit/components/Inputs/Secret/Secret.tsx b/src/lib/kit/components/Inputs/Secret/Secret.tsx
@@ -46,7 +46,7 @@ export const Secret: ObjectIndependentInput = (props) => {
 
     const content = (
         <Controller
-            initialValue={input.value?.[SECRET_PROPERTY_NAME]}
+            value={input.value?.[SECRET_PROPERTY_NAME]}
             spec={childSpec}
             name={`${name}.${SECRET_PROPERTY_NAME}`}
             parentOnChange={parentOnChange}

diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
@@ -150,9 +150,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                         key={`${name}.<${key}>.${property}`}
                     >
                         <Controller
-                            initialValue={
-                                (input.value?.[`<${key}>`] as FieldObjectValue)?.[property]
-                            }
+                            value={(input.value?.[`<${key}>`] as FieldObjectValue)?.[property]}
                             spec={preparedEntitySpec}
                             name={`${name}.<${key}>.${property}`}
                             parentOnChange={parentOnChange}

diff --git a/src/lib/kit/components/Inputs/TextLink/TextLink.tsx b/src/lib/kit/components/Inputs/TextLink/TextLink.tsx
@@ -51,7 +51,7 @@ export const TextLink: ObjectIndependentInput = (props) => {
 
     const content = (
         <Controller
-            initialValue={input.value?.[TEXT_LINK_PROPERTY_NAME]}
+            value={input.value?.[TEXT_LINK_PROPERTY_NAME]}
             spec={childSpec}
             name={`${name}.${TEXT_LINK_PROPERTY_NAME}`}
             key={`${name}.${TEXT_LINK_PROPERTY_NAME}`}

diff --git a/src/stories/components/InputPreview/SpecSelector.tsx b/src/stories/components/InputPreview/SpecSelector.tsx
@@ -89,7 +89,7 @@ export const SpecSelector: ObjectIndependentInput = (props) => {
                     <Select width="max" value={[type]} options={options} onUpdate={handleUpdate} />
                 </Row>
                 <Controller
-                    initialValue={props.input.value?.[type]}
+                    value={props.input.value?.[type]}
                     spec={optionsSpec}
                     name={`${props.name}.${type}`}
                     parentOnChange={parentOnChange}