Skip to content

Commit

Permalink
Merge pull request #1309 from lowcoder-org/fixes/listview
Browse files Browse the repository at this point in the history 
Fixes/listview
  • Loading branch information
@FalkWolsky
FalkWolsky authored Nov 15, 2024
2 parents d11e2ec + 079e482 commit 32e8c4d
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 39 deletions.
86 changes: 68 additions & 18 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";



Expand Down Expand Up @@ -142,6 +144,7 @@ function validate(
}

const childrenMap = {
defaultValue: stringExposingStateControl("defaultValue"),
value: stringExposingStateControl("value"),
userTimeZone: stringExposingStateControl("userTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone),
...commonChildren,
Expand Down Expand Up @@ -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<dayjs.Dayjs | null>(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)
Expand Down Expand Up @@ -234,7 +244,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
return (
<>
<Section name={sectionNames.basic}>
{children.value.propertyView({
{children.defaultValue.propertyView({
label: trans("prop.defaultValue"),
placeholder: "2022-04-07 21:39:59",
tooltip: trans("date.formatTip")
Expand Down Expand Up @@ -304,38 +314,76 @@ 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,
...commonChildren,
};

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<dayjs.Dayjs | null>(start);
const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(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) => {
Expand Down Expand Up @@ -399,12 +447,12 @@ export const dateRangeControl = (function () {
return (
<>
<Section name={sectionNames.basic}>
{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"),
Expand Down Expand Up @@ -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;

Expand Down
68 changes: 49 additions & 19 deletions client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -124,6 +126,7 @@ function validate(
}

const childrenMap = {
defaultValue: stringExposingStateControl("defaultValue"),
value: stringExposingStateControl("value"),
userTimeZone: stringExposingStateControl("userTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone),
...commonChildren,
Expand All @@ -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<dayjs.Dayjs | null>(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)
Expand Down Expand Up @@ -205,7 +215,7 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
{children.value.propertyView({
{children.defaultValue.propertyView({
label: trans("prop.defaultValue"),
tooltip: trans("time.formatTip"),
})}
Expand Down Expand Up @@ -270,37 +280,55 @@ 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,
...commonChildren,
};

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<dayjs.Dayjs | null>(start);
const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(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)
Expand Down Expand Up @@ -354,11 +382,11 @@ export const timeRangeControl = (function () {
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
{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"),
})}
Expand Down Expand Up @@ -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;

Expand Down
15 changes: 13 additions & 2 deletions client/packages/lowcoder/src/comps/comps/switchComp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -88,6 +89,7 @@ function fixOldData(oldData: any) {
*/
let SwitchTmpComp = (function () {
const childrenMap = {
defaultValue: booleanExposingStateControl("defaultValue"),
value: booleanExposingStateControl("value"),
label: LabelControl,
onEvent: eventHandlerControl(EventOptions),
Expand All @@ -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,
Expand All @@ -113,7 +122,7 @@ let SwitchTmpComp = (function () {
children: (
<SwitchWrapper disabled={props.disabled} $style={props.inputFieldStyle}>
<Switch
checked={props.value.value}
checked={value}
disabled={props.disabled}
ref={props.viewRef}
onChange={(checked) => {
Expand All @@ -130,7 +139,7 @@ let SwitchTmpComp = (function () {
return (
<>
<Section name={sectionNames.basic}>
{children.value.propertyView({ label: trans("switchComp.defaultValue") })}
{children.defaultValue.propertyView({ label: trans("switchComp.defaultValue") })}
</Section>

<FormDataPropertyView {...children} />
Expand Down Expand Up @@ -170,6 +179,8 @@ let SwitchTmpComp = (function () {
.build();
})();

SwitchTmpComp = migrateOldData(SwitchTmpComp, fixOldInputCompData);

export const SwitchComp = withExposingConfigs(SwitchTmpComp, [
new NameConfig("value", trans("switchComp.valueDesc")),
...CommonNameConfig,
Expand Down

0 comments on commit 32e8c4d

Please sign in to comment.