Skip to content

Commit 592652b

Browse files
bocembocembocembocem
authored
fix: fix incorrect unmount (#12)
1 parent cc498ff commit 592652b

File tree

13 files changed

+86
-6
lines changed

13 files changed

+86
-6
lines changed

‎src/lib/core/components/Form/Controller.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,29 @@ export interface ControllerProps<Value extends FieldValue, SpecType extends Spec
1717
childErrors: Record<string, ValidateError>,
1818
) => void)
1919
| null;
20+
parentOnUnmount: ((childName: string) => void) | null;
2021
}
2122

2223
export const Controller = <Value extends FieldValue, SpecType extends Spec>({
2324
spec,
2425
name,
2526
initialValue,
2627
parentOnChange,
28+
parentOnUnmount,
2729
}: ControllerProps<Value, SpecType>) => {
2830
const {tools} = useDynamicFormsCtx();
2931
const {inputEntity, Layout} = useComponents(spec);
3032
const render = useRender({name, spec, inputEntity, Layout});
3133
const validate = useValidate(spec);
32-
const renderProps = useField({name, initialValue, spec, validate, tools, parentOnChange});
34+
const renderProps = useField({
35+
name,
36+
initialValue,
37+
spec,
38+
validate,
39+
tools,
40+
parentOnChange,
41+
parentOnUnmount,
42+
});
3343

3444
if (_.isString(name) && isCorrectSpec(spec)) {
3545
return render(renderProps);

‎src/lib/core/components/Form/DynamicField.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, M
4444
spec={spec}
4545
name={name}
4646
parentOnChange={null}
47+
parentOnUnmount={null}
4748
initialValue={_.get(tools.initialValue, name)}
4849
/>
4950
{watcher}

‎src/lib/core/components/Form/hooks/useField.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface FieldProps<Value extends FieldValue, SpecType extends Spec> {
2727
childErrors: Record<string, ValidateError>,
2828
) => void)
2929
| null;
30+
parentOnUnmount: ((childName: string) => void) | null;
3031
}
3132

3233
export const useField = <Value extends FieldValue, SpecType extends Spec>({
@@ -36,6 +37,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
3637
validate: propsValidate,
3738
tools,
3839
parentOnChange,
40+
parentOnUnmount,
3941
}: FieldProps<Value, SpecType>): FieldRenderProps<Value> => {
4042
const firstRenderRef = React.useRef(true);
4143

@@ -249,7 +251,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
249251
firstRenderRef.current = false;
250252

251253
return () => {
252-
(parentOnChange ? parentOnChange : tools.onChange)(name, state.value, {[name]: false});
254+
(parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
253255
};
254256
}, []);
255257

‎src/lib/core/components/Form/hooks/useStore.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ export const useStore = (name: string) => {
7676
values: _.set({...store.values}, name, value),
7777
errors: errors || {},
7878
})),
79+
onUnmount: (name: string) =>
80+
setStore((store) => ({
81+
...store,
82+
errors: _.omit(
83+
store.errors,
84+
Object.keys(store.errors).filter((key) => key.startsWith(name)),
85+
),
86+
})),
7987
submitFailed,
8088
}),
8189
[store.initialValue, setStore, submitFailed],

‎src/lib/core/components/Form/types/context.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface DynamicFormsContext {
1010
tools: {
1111
initialValue: FieldObjectValue;
1212
onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
13+
onUnmount: (name: string) => void;
1314
submitFailed: boolean;
1415
};
1516
}

‎src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
4343

4444
if (!spec.items?.required) {
4545
if (isArraySpec(spec.items)) {
46-
item = {OBJECT_ARRAY_FLAG: true, OBJECT_ARRAY_CNT: 0};
46+
item = {[OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0};
4747
} else if (isObjectSpec(spec.items)) {
4848
item = {};
4949
}
@@ -86,6 +86,11 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
8686
[input.onChange, input.name],
8787
);
8888

89+
const parentOnUnmount = React.useCallback(
90+
(childName: string) => input.onChange((currentValue) => currentValue, {[childName]: false}),
91+
[input.onChange],
92+
);
93+
8994
const items = React.useMemo(
9095
() =>
9196
keys.map((key, idx) => {
@@ -99,13 +104,14 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
99104
<Controller
100105
initialValue={input.value?.[`<${key}>`]}
101106
parentOnChange={parentOnChange}
107+
parentOnUnmount={parentOnUnmount}
102108
spec={itemSpec}
103109
name={`${name}.<${key}>`}
104110
key={`${name}.<${key}>`}
105111
/>
106112
);
107113
}),
108-
[keys.join(''), name, getItemSpec, parentOnChange, input.value],
114+
[keys.join(''), name, getItemSpec, parentOnChange, parentOnUnmount, input.value],
109115
);
110116

111117
if (!itemSpecCorrect) {

‎src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ export const CardOneOf: ObjectIndependentInput = (props) => {
5757
[input.onChange, input.name],
5858
);
5959

60+
const parentOnUnmount = React.useCallback(
61+
(childName: string) => input.onChange((currentValue) => currentValue, {[childName]: false}),
62+
[input.onChange],
63+
);
64+
6065
useErrorChecker({name, meta, open, setOpen});
6166

6267
return (
@@ -74,6 +79,7 @@ export const CardOneOf: ObjectIndependentInput = (props) => {
7479
spec={specProperties[oneOfValue]}
7580
name={`${name}.${oneOfValue}`}
7681
parentOnChange={parentOnChange}
82+
parentOnUnmount={parentOnUnmount}
7783
key={`${name}.${oneOfValue}`}
7884
/>
7985
) : null}

‎src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
4747
[restProps.input.onChange, restProps.input.name],
4848
);
4949

50+
const parentOnUnmount = React.useCallback(
51+
(childName: string) =>
52+
restProps.input.onChange((currentValue) => currentValue, {[childName]: false}),
53+
[restProps.input.onChange],
54+
);
5055
const content = React.useMemo(() => {
5156
if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
5257
return null;
@@ -67,13 +72,22 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
6772
spec={specProperties[property]}
6873
name={`${name ? name + '.' : ''}${property}`}
6974
parentOnChange={parentOnChange}
75+
parentOnUnmount={parentOnUnmount}
7076
key={`${name ? name + '.' : ''}${property}`}
7177
/>
7278
) : null,
7379
)}
7480
</React.Fragment>
7581
);
76-
}, [spec.properties, spec.viewSpec.order, name, restProps.input.value, addBtn, parentOnChange]);
82+
}, [
83+
spec.properties,
84+
spec.viewSpec.order,
85+
name,
86+
restProps.input.value,
87+
addBtn,
88+
parentOnChange,
89+
parentOnUnmount,
90+
]);
7791

7892
if (!Layout || !content) {
7993
return content;

‎src/lib/kit/components/Inputs/OneOf/OneOf.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export const OneOf: ObjectIndependentInput = (props) => {
2727
[props.input.onChange, props.input.name],
2828
);
2929

30+
const parentOnUnmount = React.useCallback(
31+
(childName: string) =>
32+
props.input.onChange((currentValue) => currentValue, {[childName]: false}),
33+
[props.input.onChange],
34+
);
35+
3036
return (
3137
<div className={b()}>
3238
{specProperties[oneOfValue] ? (
@@ -36,6 +42,7 @@ export const OneOf: ObjectIndependentInput = (props) => {
3642
spec={specProperties[oneOfValue]}
3743
name={`${props.name}.${oneOfValue}`}
3844
parentOnChange={parentOnChange}
45+
parentOnUnmount={parentOnUnmount}
3946
key={`${props.name}.${oneOfValue}`}
4047
/>
4148
</GroupIndent>

‎src/lib/kit/components/Inputs/OneOfCard/OneOfCard.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,11 @@ export const OneOfCard: ObjectIndependentInput = (props) => {
7474
[input.onChange, input.name],
7575
);
7676

77+
const parentOnUnmount = React.useCallback(
78+
(childName: string) => input.onChange((currentValue) => currentValue, {[childName]: false}),
79+
[input.onChange],
80+
);
81+
7782
useErrorChecker({name, meta, open, setOpen});
7883

7984
return (
@@ -92,6 +97,7 @@ export const OneOfCard: ObjectIndependentInput = (props) => {
9297
spec={specProperties[oneOfValue]}
9398
name={`${name}.${oneOfValue}`}
9499
parentOnChange={parentOnChange}
100+
parentOnUnmount={parentOnUnmount}
95101
key={`${name}.${oneOfValue}`}
96102
/>
97103
) : null}

0 commit comments

Comments
 (0)