From 67332c217e12ab0f01c9ff317e6c1c03333b84bc Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sat, 16 Nov 2024 01:49:25 +0500 Subject: [PATCH 1/3] separate defaultValue and value for switch comp --- .../lowcoder/src/comps/comps/switchComp.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 0d7b727b8..00c5abaef 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -16,6 +16,7 @@ import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; import { refMethods } from "comps/generators/withMethodExposing"; import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils"; +import { fixOldInputCompData } from "./textInputComp/textInputConstants"; import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; @@ -88,6 +89,7 @@ function fixOldData(oldData: any) { */ let SwitchTmpComp = (function () { const childrenMap = { + defaultValue: booleanExposingStateControl("defaultValue"), value: booleanExposingStateControl("value"), label: LabelControl, onEvent: eventHandlerControl(EventOptions), @@ -105,6 +107,13 @@ let SwitchTmpComp = (function () { ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { + const defaultValue = { ...props.defaultValue }.value; + const value = { ...props.value }.value; + + useEffect(() => { + props.value.onChange(defaultValue); + }, [defaultValue]); + return props.label({ style: props.style, labelStyle: props.labelStyle, @@ -113,7 +122,7 @@ let SwitchTmpComp = (function () { children: ( { @@ -130,7 +139,7 @@ let SwitchTmpComp = (function () { return ( <>
- {children.value.propertyView({ label: trans("switchComp.defaultValue") })} + {children.defaultValue.propertyView({ label: trans("switchComp.defaultValue") })}
@@ -170,6 +179,8 @@ let SwitchTmpComp = (function () { .build(); })(); +SwitchTmpComp = migrateOldData(SwitchTmpComp, fixOldInputCompData); + export const SwitchComp = withExposingConfigs(SwitchTmpComp, [ new NameConfig("value", trans("switchComp.valueDesc")), ...CommonNameConfig, From 8b22bef832442885b1a95942da4eaa881c3bb4d6 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sat, 16 Nov 2024 01:51:59 +0500 Subject: [PATCH 2/3] separate defaultValue and value for date comps --- .../src/comps/comps/dateComp/dateComp.tsx | 86 +++++++++++++++---- 1 file changed, 68 insertions(+), 18 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 62f84bf84..686153fd2 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -50,6 +50,8 @@ import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView"; import { EditorContext } from "comps/editorState"; import { dropdownControl } from "comps/controls/dropdownControl"; import { timeZoneOptions } from "./timeZone"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { fixOldInputCompData } from "../textInputComp/textInputConstants"; @@ -142,6 +144,7 @@ function validate( } const childrenMap = { + defaultValue: stringExposingStateControl("defaultValue"), value: stringExposingStateControl("value"), userTimeZone: stringExposingStateControl("userTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone), ...commonChildren, @@ -170,18 +173,25 @@ export type DateCompViewProps = Pick< placeholder?: string | [string, string]; }; -export const datePickerControl = new UICompBuilder(childrenMap, (props) => { +const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { + const defaultValue = { ...props.defaultValue }.value; + const value = { ...props.value }.value; + let time: dayjs.Dayjs | null = null; - if (props.value.value !== '') { - time = dayjs(props.value.value, DateParser); + if (value !== '') { + time = dayjs(value, DateParser); } const [tempValue, setTempValue] = useState(time); useEffect(() => { - const value = props.value.value ? dayjs(props.value.value, DateParser) : null; - setTempValue(value); - }, [props.value.value]) + props.value.onChange(defaultValue); + }, [defaultValue]); + + useEffect(() => { + const newValue = value ? dayjs(value, DateParser) : null; + setTempValue(newValue); + }, [value]) const handleDateZoneChange = (newTimeZone: any) => { props.userTimeZone.onChange(newTimeZone) @@ -234,7 +244,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { return ( <>
- {children.value.propertyView({ + {children.defaultValue.propertyView({ label: trans("prop.defaultValue"), placeholder: "2022-04-07 21:39:59", tooltip: trans("date.formatTip") @@ -304,9 +314,33 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { .setExposeMethodConfigs(dateRefMethods) .build(); -export const dateRangeControl = (function () { +export const datePickerControl = migrateOldData(DatePickerTmpCmp, fixOldInputCompData); + +export function fixOldDateOrTimeRangeData(oldData: any) { + if (!oldData) return oldData; + + let {defaultStart, defaultEnd} = oldData + if (Boolean(oldData.start) && !Boolean(oldData.defaultStart)) { + defaultStart = oldData.start; + } + if (Boolean(oldData.end) && !Boolean(oldData.defaultEnd)) { + defaultEnd = oldData.end; + } + return { + ...oldData, + defaultStart, + defaultEnd, + start: '', + end: '', + }; + // return oldData; +} + +let DateRangeTmpCmp = (function () { const childrenMap = { + defaultStart: stringExposingStateControl("defaultStart"), start: stringExposingStateControl("start"), + defaultEnd: stringExposingStateControl("defaultEnd"), end: stringExposingStateControl("end"), userRangeTimeZone: stringExposingStateControl("userRangeTimeZone" , Intl.DateTimeFormat().resolvedOptions().timeZone), ...formDataChildren, @@ -314,28 +348,42 @@ export const dateRangeControl = (function () { }; return new UICompBuilder(childrenMap, (props) => { + const defaultStart = { ...props.defaultStart }.value; + const startValue = { ...props.start }.value; + + const defaultEnd = { ...props.defaultEnd }.value; + const endValue = { ...props.end }.value; + let start: dayjs.Dayjs | null = null; - if (props.start.value !== '') { - start = dayjs(props.start.value, DateParser); + if (startValue !== '') { + start = dayjs(startValue, DateParser); } let end: dayjs.Dayjs | null = null; - if (props.end.value !== '') { - end = dayjs(props.end.value, DateParser); + if (endValue !== '') { + end = dayjs(endValue, DateParser); } const [tempStartValue, setTempStartValue] = useState(start); const [tempEndValue, setTempEndValue] = useState(end); useEffect(() => { - const value = props.start.value ? dayjs(props.start.value, DateParser) : null; + props.start.onChange(defaultStart); + }, [defaultStart]); + + useEffect(() => { + props.end.onChange(defaultEnd); + }, [defaultEnd]); + + useEffect(() => { + const value = startValue ? dayjs(startValue, DateParser) : null; setTempStartValue(value); - }, [props.start.value]) + }, [startValue]) useEffect(() => { - const value = props.end.value ? dayjs(props.end.value, DateParser) : null; + const value = endValue ? dayjs(endValue, DateParser) : null; setTempEndValue(value); - }, [props.end.value]) + }, [endValue]) const handleDateRangeZoneChange = (newTimeZone: any) => { @@ -399,12 +447,12 @@ export const dateRangeControl = (function () { return ( <>
- {children.start.propertyView({ + {children.defaultStart.propertyView({ label: trans("date.start"), placeholder: "2022-04-07 21:39:59", tooltip: trans("date.formatTip"), })} - {children.end.propertyView({ + {children.defaultEnd.propertyView({ label: trans("date.end"), placeholder: "2022-04-07 21:39:59", tooltip: trans("date.formatTip"), @@ -471,6 +519,8 @@ export const dateRangeControl = (function () { .build(); })(); +export const dateRangeControl = migrateOldData(DateRangeTmpCmp, fixOldDateOrTimeRangeData); + const getTimeZoneInfo = (timeZone: any, otherTimeZone: any) => { const tz = timeZone === 'UserChoice' ? otherTimeZone : timeZone; From 079e48213936f4ee90f32150686d00921c9c5d77 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sat, 16 Nov 2024 01:52:12 +0500 Subject: [PATCH 3/3] separate defaultValue and value for time comps --- .../src/comps/comps/dateComp/timeComp.tsx | 68 +++++++++++++------ 1 file changed, 49 insertions(+), 19 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx index 4d9f0a6e5..7a578f5a5 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx @@ -54,7 +54,9 @@ import { TimePickerProps } from "antd/es/time-picker"; import { EditorContext } from "comps/editorState"; import { dropdownControl } from "comps/controls/dropdownControl"; import { timeZoneOptions } from "./timeZone"; - +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import { fixOldDateOrTimeRangeData } from "./dateComp"; const EventOptions = [changeEvent, focusEvent, blurEvent] as const; @@ -124,6 +126,7 @@ function validate( } const childrenMap = { + defaultValue: stringExposingStateControl("defaultValue"), value: stringExposingStateControl("value"), userTimeZone: stringExposingStateControl("userTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone), ...commonChildren, @@ -149,18 +152,25 @@ export type TimeCompViewProps = Pick< timeZone:string }; -export const timePickerControl = new UICompBuilder(childrenMap, (props) => { +const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { + const defaultValue = { ...props.defaultValue }.value; + const value = { ...props.value }.value; + let time: dayjs.Dayjs | null = null; - if(props.value.value !== '') { - time = dayjs(props.value.value, TimeParser); + if(value !== '') { + time = dayjs(value, TimeParser); } const [tempValue, setTempValue] = useState(time); useEffect(() => { - const value = props.value.value ? dayjs(props.value.value, TimeParser) : null; - setTempValue(value); - }, [props.value.value]) + props.value.onChange(defaultValue); + }, [defaultValue]); + + useEffect(() => { + const newValue = value ? dayjs(value, TimeParser) : null; + setTempValue(newValue); + }, [value]) const handleTimeZoneChange = (newTimeZone: any) => { props.userTimeZone.onChange(newTimeZone) @@ -205,7 +215,7 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => { .setPropertyViewFn((children) => ( <>
- {children.value.propertyView({ + {children.defaultValue.propertyView({ label: trans("prop.defaultValue"), tooltip: trans("time.formatTip"), })} @@ -270,9 +280,13 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => { .setExposeMethodConfigs(dateRefMethods) .build(); -export const timeRangeControl = (function () { +export const timePickerControl = migrateOldData(TimePickerTmpCmp, fixOldInputCompData); + +const TimeRangeTmpCmp = (function () { const childrenMap = { + defaultStart: stringExposingStateControl("defaultStart"), start: stringExposingStateControl("start"), + defaultEnd: stringExposingStateControl("defaultEnd"), end: stringExposingStateControl("end"), userRangeTimeZone: stringExposingStateControl("userRangeTimeZone" , Intl.DateTimeFormat().resolvedOptions().timeZone), ...formDataChildren, @@ -280,27 +294,41 @@ export const timeRangeControl = (function () { }; return new UICompBuilder(childrenMap, (props) => { + const defaultStart = { ...props.defaultStart }.value; + const startValue = { ...props.start }.value; + + const defaultEnd = { ...props.defaultEnd }.value; + const endValue = { ...props.end }.value; + let start: dayjs.Dayjs | null = null; - if(props.start.value !== '') { - start = dayjs(props.start.value, TimeParser); + if(startValue !== '') { + start = dayjs(startValue, TimeParser); } let end: dayjs.Dayjs | null = null; - if(props.end.value !== '') { - end = dayjs(props.end.value, TimeParser); + if(endValue !== '') { + end = dayjs(endValue, TimeParser); } const [tempStartValue, setTempStartValue] = useState(start); const [tempEndValue, setTempEndValue] = useState(end); useEffect(() => { - const value = props.start.value ? dayjs(props.start.value, TimeParser) : null; + props.start.onChange(defaultStart); + }, [defaultStart]); + + useEffect(() => { + props.end.onChange(defaultEnd); + }, [defaultEnd]); + + useEffect(() => { + const value = startValue ? dayjs(startValue, TimeParser) : null; setTempStartValue(value); - }, [props.start.value]) + }, [startValue]) useEffect(() => { - const value = props.end.value ? dayjs(props.end.value, TimeParser) : null; + const value = endValue ? dayjs(endValue, TimeParser) : null; setTempEndValue(value); - }, [props.end.value]) + }, [endValue]) const handleTimeRangeZoneChange = (newTimeZone: any) => { props.userRangeTimeZone.onChange(newTimeZone) @@ -354,11 +382,11 @@ export const timeRangeControl = (function () { .setPropertyViewFn((children) => ( <>
- {children.start.propertyView({ + {children.defaultStart.propertyView({ label: trans("time.start"), tooltip: trans("time.formatTip"), })} - {children.end.propertyView({ + {children.defaultEnd.propertyView({ label: trans("time.end"), tooltip: trans("time.formatTip"), })} @@ -423,6 +451,8 @@ export const timeRangeControl = (function () { .build(); })(); +export const timeRangeControl = migrateOldData(TimeRangeTmpCmp, fixOldDateOrTimeRangeData); + const getTimeZoneInfo = (timeZone: any, otherTimeZone: any) => { const tz = timeZone === 'UserChoice' ? otherTimeZone : timeZone;