Skip to content

Commit 4d53662

Browse files
iamfaraniamfaran
committed
#2172 fix form components when using inital values from the form
1 parent 3db6ae4 commit 4d53662

17 files changed

Lines changed: 137 additions & 92 deletions

‎client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
focusEvent,
1717
} from "../../controls/eventHandlerControl";
1818
import { LabelControl } from "../../controls/labelControl";
19-
import { stringExposingStateControl } from "../../controls/codeStateControl";
19+
import { stringExposingStateControl, withLinkedDefaultValue } from "../../controls/codeStateControl";
2020
import { UICompBuilder, withDefault } from "../../generators";
2121
import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
2222
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
@@ -229,19 +229,14 @@ const getFormattedDate = (
229229
}
230230

231231
const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
232-
const defaultValue = { ...props.defaultValue }.value;
233232
const value = { ...props.value }.value;
234-
233+
235234
let time: dayjs.Dayjs | null = null;
236235
if (value !== '') {
237236
time = dayjs(value, DateParser);
238237
}
239-
240-
const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
241238

242-
useEffect(() => {
243-
props.value.onChange(defaultValue);
244-
}, [defaultValue]);
239+
const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
245240

246241
useEffect(() => {
247242
const newValue = value ? dayjs(value, DateParser) : null;
@@ -380,7 +375,10 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
380375
.setExposeMethodConfigs(dateRefMethods)
381376
.build();
382377

383-
export const datePickerControl = migrateOldData(DatePickerTmpCmp, fixOldInputCompData);
378+
export const datePickerControl = migrateOldData(
379+
withLinkedDefaultValue(DatePickerTmpCmp, "defaultValue", "value"),
380+
fixOldInputCompData
381+
);
384382

385383
export function fixOldDateOrTimeRangeData(oldData: any) {
386384
if (!oldData) return oldData;
@@ -414,17 +412,14 @@ let DateRangeTmpCmp = (function () {
414412
};
415413

416414
return new UICompBuilder(childrenMap, (props) => {
417-
const defaultStart = { ...props.defaultStart }.value;
418415
const startValue = { ...props.start }.value;
419-
420-
const defaultEnd = { ...props.defaultEnd }.value;
421416
const endValue = { ...props.end }.value;
422417

423418
let start: dayjs.Dayjs | null = null;
424419
if (startValue !== '') {
425420
start = dayjs(startValue, DateParser);
426421
}
427-
422+
428423
let end: dayjs.Dayjs | null = null;
429424
if (endValue !== '') {
430425
end = dayjs(endValue, DateParser);
@@ -433,14 +428,6 @@ let DateRangeTmpCmp = (function () {
433428
const [tempStartValue, setTempStartValue] = useState<dayjs.Dayjs | null>(start);
434429
const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(end);
435430

436-
useEffect(() => {
437-
props.start.onChange(defaultStart);
438-
}, [defaultStart]);
439-
440-
useEffect(() => {
441-
props.end.onChange(defaultEnd);
442-
}, [defaultEnd]);
443-
444431
useEffect(() => {
445432
const value = startValue ? dayjs(startValue, DateParser) : null;
446433
setTempStartValue(value);
@@ -600,7 +587,14 @@ let DateRangeTmpCmp = (function () {
600587
.build();
601588
})();
602589

603-
export const dateRangeControl = migrateOldData(DateRangeTmpCmp, fixOldDateOrTimeRangeData);
590+
export const dateRangeControl = migrateOldData(
591+
withLinkedDefaultValue(
592+
withLinkedDefaultValue(DateRangeTmpCmp, "defaultStart", "start"),
593+
"defaultEnd",
594+
"end"
595+
),
596+
fixOldDateOrTimeRangeData
597+
);
604598

605599
const getTimeZoneInfo = (timeZone: any, otherTimeZone: any) => {
606600
const tz = timeZone === 'UserChoice' ? otherTimeZone : timeZone;

‎client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
eventHandlerControl,
1616
focusEvent,
1717
} from "../../controls/eventHandlerControl";
18-
import { stringExposingStateControl } from "../../controls/codeStateControl";
18+
import { stringExposingStateControl, withLinkedDefaultValue } from "../../controls/codeStateControl";
1919
import { LabelControl } from "../../controls/labelControl";
2020
import { UICompBuilder, withDefault } from "../../generators";
2121
import {
@@ -160,19 +160,14 @@ export type TimeCompViewProps = Pick<
160160
};
161161

162162
const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
163-
const defaultValue = { ...props.defaultValue }.value;
164163
const value = { ...props.value }.value;
165164

166165
let time: dayjs.Dayjs | null = null;
167166
if(value !== '') {
168167
time = dayjs(value, TimeParser);
169168
}
170-
171-
const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
172169

173-
useEffect(() => {
174-
props.value.onChange(defaultValue);
175-
}, [defaultValue]);
170+
const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
176171

177172
useEffect(() => {
178173
const newValue = value ? dayjs(value, TimeParser) : null;
@@ -298,7 +293,10 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
298293
.setExposeMethodConfigs(dateRefMethods)
299294
.build();
300295

301-
export const timePickerControl = migrateOldData(TimePickerTmpCmp, fixOldInputCompData);
296+
export const timePickerControl = migrateOldData(
297+
withLinkedDefaultValue(TimePickerTmpCmp, "defaultValue", "value"),
298+
fixOldInputCompData
299+
);
302300

303301
const TimeRangeTmpCmp = (function () {
304302
const childrenMap = {
@@ -312,10 +310,7 @@ const TimeRangeTmpCmp = (function () {
312310
};
313311

314312
return new UICompBuilder(childrenMap, (props) => {
315-
const defaultStart = { ...props.defaultStart }.value;
316313
const startValue = { ...props.start }.value;
317-
318-
const defaultEnd = { ...props.defaultEnd }.value;
319314
const endValue = { ...props.end }.value;
320315

321316
let start: dayjs.Dayjs | null = null;
@@ -330,14 +325,6 @@ const TimeRangeTmpCmp = (function () {
330325
const [tempStartValue, setTempStartValue] = useState<dayjs.Dayjs | null>(start);
331326
const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(end);
332327

333-
useEffect(() => {
334-
props.start.onChange(defaultStart);
335-
}, [defaultStart]);
336-
337-
useEffect(() => {
338-
props.end.onChange(defaultEnd);
339-
}, [defaultEnd]);
340-
341328
useEffect(() => {
342329
const value = startValue ? dayjs(startValue, TimeParser) : null;
343330
setTempStartValue(value);
@@ -479,7 +466,14 @@ const TimeRangeTmpCmp = (function () {
479466
.build();
480467
})();
481468

482-
export const timeRangeControl = migrateOldData(TimeRangeTmpCmp, fixOldDateOrTimeRangeData);
469+
export const timeRangeControl = migrateOldData(
470+
withLinkedDefaultValue(
471+
withLinkedDefaultValue(TimeRangeTmpCmp, "defaultStart", "start"),
472+
"defaultEnd",
473+
"end"
474+
),
475+
fixOldDateOrTimeRangeData
476+
);
483477

484478
const getTimeZoneInfo = (timeZone: any, otherTimeZone: any) => {
485479
const tz = timeZone === 'UserChoice' ? otherTimeZone : timeZone;

‎client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import { useContext } from "react";
5454
import { EditorContext } from "comps/editorState";
5555
import { useEditorStore } from "comps/editorStore";
5656
import { migrateOldData } from "comps/generators/simpleGenerators";
57+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
5758
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
5859

5960
const getStyle = (style: InputLikeStyleType) => {
@@ -312,7 +313,6 @@ const childrenMap = {
312313

313314
const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) => {
314315
const ref = useRef<HTMLInputElement | null>(null);
315-
const defaultValue = props.defaultValue.value;
316316
const mountedRef = useRef(true);
317317

318318
// Cleanup on unmount
@@ -323,17 +323,6 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
323323
};
324324
}, []);
325325

326-
useEffect(() => {
327-
if (!mountedRef.current) return;
328-
let value = 0;
329-
if (defaultValue === 'null' && props.allowNull) {
330-
value = NaN;
331-
} else if (!isNaN(Number(defaultValue))) {
332-
value = Number(defaultValue);
333-
}
334-
props.value.onChange(value);
335-
}, [defaultValue, props.allowNull]);
336-
337326
const formatFn = (value: number) =>
338327
format(value, props.allowNull, props.formatter, props.precision, props.thousandsSeparator);
339328

@@ -522,7 +511,19 @@ let NumberInputTmpComp = (function () {
522511
.build();
523512
})();
524513

525-
NumberInputTmpComp = migrateOldData(NumberInputTmpComp, fixOldInputCompData);
514+
NumberInputTmpComp = migrateOldData(
515+
withLinkedDefaultValue(NumberInputTmpComp, "defaultValue", "value", (defaultValue: any, comp: any) => {
516+
const allowNull = comp.children.allowNull?.getView?.();
517+
if (defaultValue === "null" && allowNull) {
518+
return NaN;
519+
}
520+
if (!isNaN(Number(defaultValue))) {
521+
return Number(defaultValue);
522+
}
523+
return 0;
524+
}),
525+
fixOldInputCompData
526+
);
526527

527528
const NumberInputTmp2Comp = withMethodExposing(
528529
NumberInputTmpComp,

‎client/packages/lowcoder/src/comps/comps/ratingComp.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
1212
import { styleControl } from "comps/controls/styleControl";
1313
import { AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
1414
import { migrateOldData } from "comps/generators/simpleGenerators";
15+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
1516
import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
1617
import { trans } from "i18n";
1718

@@ -57,7 +58,6 @@ const RatingBasicComp = (function () {
5758
...formDataChildren,
5859
};
5960
return new UICompBuilder(childrenMap, (props) => {
60-
const defaultValue = { ...props.defaultValue }.value;
6161
const value = { ...props.value }.value;
6262
const changeRef = useRef(false);
6363
const mountedRef = useRef(true);
@@ -79,10 +79,6 @@ const RatingBasicComp = (function () {
7979
};
8080
}, []);
8181

82-
useEffect(() => {
83-
props.value.onChange(defaultValue);
84-
}, [defaultValue]);
85-
8682
useEffect(() => {
8783
if (!changeRef.current) return;
8884

@@ -168,11 +164,14 @@ const RatingBasicComp = (function () {
168164
.build();
169165
})();
170166

171-
export const RatingComp = withExposingConfigs(RatingBasicComp, [
172-
new NameConfig("value", trans("export.ratingValueDesc")),
173-
new NameConfig("max", trans("export.ratingMaxDesc")),
174-
...CommonNameConfig,
175-
]);
167+
export const RatingComp = withExposingConfigs(
168+
withLinkedDefaultValue(RatingBasicComp, "defaultValue", "value"),
169+
[
170+
new NameConfig("value", trans("export.ratingValueDesc")),
171+
new NameConfig("max", trans("export.ratingMaxDesc")),
172+
...CommonNameConfig,
173+
]
174+
);
176175

177176
const getStyle = (style: RatingStyleType) => {
178177
return css`

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { EllipsisTextCss } from "lowcoder-design";
2323
import { trans } from "i18n";
2424
import { RefControl } from "comps/controls/refControl";
2525
import { migrateOldData } from "comps/generators/simpleGenerators";
26+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
2627
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
2728
import Tooltip from "antd/es/tooltip";
2829
import { useCallback, useRef, useEffect, memo } from "react";
@@ -281,7 +282,10 @@ let CheckboxBasicComp = (function () {
281282
.build();
282283
})();
283284

284-
CheckboxBasicComp = migrateOldData(CheckboxBasicComp, fixOldInputCompData);
285+
CheckboxBasicComp = migrateOldData(
286+
withLinkedDefaultValue(CheckboxBasicComp, "defaultValue", "value"),
287+
fixOldInputCompData
288+
);
285289

286290
export const CheckboxComp = withExposingConfigs(CheckboxBasicComp, [
287291
new NameConfig("value", trans("selectInput.valueDesc")),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputC
1515
import { PaddingControl } from "../../controls/paddingControl";
1616
import { MarginControl } from "../../controls/marginControl";
1717
import { migrateOldData } from "comps/generators/simpleGenerators";
18+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
1819
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
1920

2021
let MultiSelectBasicComp = (function () {
@@ -63,7 +64,10 @@ let MultiSelectBasicComp = (function () {
6364
.build();
6465
})();
6566

66-
MultiSelectBasicComp = migrateOldData(MultiSelectBasicComp, fixOldInputCompData);
67+
MultiSelectBasicComp = migrateOldData(
68+
withLinkedDefaultValue(MultiSelectBasicComp, "defaultValue", "value"),
69+
fixOldInputCompData
70+
);
6771

6872
export const MultiSelectComp = withExposingConfigs(MultiSelectBasicComp, [
6973
new NameConfig("value", trans("selectInput.valueDesc")),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
1313
import { trans } from "i18n";
1414
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
1515
import { migrateOldData } from "comps/generators/simpleGenerators";
16+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
1617
import Tooltip from "antd/es/tooltip";
1718
import { useCallback, useRef, useEffect, memo } from "react";
1819

@@ -215,7 +216,10 @@ let RadioBasicComp = (function () {
215216
.build();
216217
})();
217218

218-
RadioBasicComp = migrateOldData(RadioBasicComp, fixOldInputCompData);
219+
RadioBasicComp = migrateOldData(
220+
withLinkedDefaultValue(RadioBasicComp, "defaultValue", "value"),
221+
fixOldInputCompData
222+
);
219223

220224
export const RadioComp = withExposingConfigs(RadioBasicComp, [
221225
new NameConfig("value", trans("selectInput.valueDesc")),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { useContext, useEffect } from "react";
2727
import { EditorContext } from "comps/editorState";
2828
import { useEditorStore } from "comps/editorStore";
2929
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
30+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
3031
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
3132

3233
const getStyle = (style: SegmentStyleType) => {
@@ -163,7 +164,10 @@ let SegmentedControlBasicComp = (function () {
163164
.build();
164165
})();
165166

166-
SegmentedControlBasicComp = migrateOldData(SegmentedControlBasicComp, fixOldInputCompData);
167+
SegmentedControlBasicComp = migrateOldData(
168+
withLinkedDefaultValue(SegmentedControlBasicComp, "defaultValue", "value"),
169+
fixOldInputCompData
170+
);
167171

168172
export const SegmentedControlComp = withExposingConfigs(SegmentedControlBasicComp, [
169173
new NameConfig("value", trans("selectInput.valueDesc")),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { useContext, useEffect, useRef } from "react";
1919
import { RecordConstructorToView } from "lowcoder-core";
2020
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
2121
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
22+
import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
2223

2324
let SelectBasicComp = (function () {
2425
const childrenMap = {
@@ -64,7 +65,10 @@ let SelectBasicComp = (function () {
6465
.build();
6566
})();
6667

67-
SelectBasicComp = migrateOldData(SelectBasicComp, fixOldInputCompData);
68+
SelectBasicComp = migrateOldData(
69+
withLinkedDefaultValue(SelectBasicComp, "defaultValue", "value"),
70+
fixOldInputCompData
71+
);
6872

6973
export const SelectComp = withExposingConfigs(SelectBasicComp, [
7074
new NameConfig("value", trans("selectInput.valueDesc")),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ export const useSelectInputValidate = (props: ValidationParams) => {
6161
propsRef.current = props;
6262

6363
const selectValue = props.value.value;
64-
const defaultValue = props.defaultValue?.value;
6564

6665
const handleValidate = (value: string | (string | number)[]) => {
6766
setValidateState(
@@ -74,10 +73,6 @@ export const useSelectInputValidate = (props: ValidationParams) => {
7473
);
7574
};
7675

77-
useEffect(() => {
78-
props.value.onChange?.(defaultValue)
79-
}, [defaultValue]);
80-
8176
useEffect(() => {
8277
if (!changeRef.current) return;
8378

0 commit comments

Comments
 (0)