diff --git a/src/lib/core/components/Form/Controller.tsx b/src/lib/core/components/Form/Controller.tsx index eb42bd45..c59eae74 100644 --- 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 { spec: SpecType; name: string; - initialValue: Value; + value: Value; parentOnChange: | (( childName: string, @@ -31,7 +31,7 @@ export interface ControllerProps({ spec, name, - initialValue, + value, parentOnChange, parentOnUnmount, }: ControllerProps) => { @@ -41,7 +41,8 @@ export const Controller = ({ 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 index 8ae75ce1..605281f7 100644 --- 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 = ({ name={name} parentOnChange={null} parentOnUnmount={null} - initialValue={_.get(tools.initialValue, name)} + value={_.get(store.values, name)} /> {watcher} diff --git a/src/lib/core/components/Form/hooks/useField.tsx b/src/lib/core/components/Form/hooks/useField.tsx index d3a01f01..28d25d93 100644 --- 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 name: string; spec: SpecType; initialValue: Value; + value: Value; validate?: (value?: Value) => ValidateError; tools: DynamicFormsContext['tools']; parentOnChange: @@ -34,6 +35,7 @@ export const useField = ({ name, spec, initialValue, + value: externalValue, validate: propsValidate, tools, parentOnChange, @@ -53,7 +55,7 @@ export const useField = ({ ); 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 = ({ } 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 = ({ ]); 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 index c954606b..b78eb6d0 100644 --- 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(() => { - 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 index 6f729173..f835673d 100644 --- 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; tools: { - initialValue: FieldObjectValue; + initialValue: FieldValue; onChange: (name: string, value: FieldValue, errors?: Record) => 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 index 111e0c44..de05d669 100644 --- 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 ( `]} + 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 index 99dc66bd..79ce75b8 100644 --- 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] ? ( specProperties[property] ? ( { const content = ( { {specProperties[oneOfValue] ? ( { > {specProperties[oneOfValue] ? ( { const content = ( key={`${name}.<${key}>.${property}`} > `] 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 index 89e235c0..ef9019ef 100644 --- 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 = ( {