Skip to content

Add/time zone #1151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 10, 2024
Merged

Add/time zone #1151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79dca8b
function calculation reverted
MenamAfzal Sep 6, 2024
56ebeae
missing timeZones added
MenamAfzal Sep 6, 2024
fd6ad1d
default values added
MenamAfzal Sep 6, 2024
056337c
pull from origin
MenamAfzal Sep 9, 2024
6de6379
formatted values with respect to selective timeZone
MenamAfzal Sep 10, 2024
286c500
Merge branch 'dev' into add/time-zone
FalkWolsky Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
334 changes: 89 additions & 245 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
<StyledAntdSelect
options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
placeholder="Select Time Zone"
defaultValue={'Etc/UTC'}
defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
onChange={props?.onClickDateRangeTimeZone}
/>
</StyledDiv>
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const DateUIView = (props: DataUIViewProps) => {
<StyledAntdSelect
options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
placeholder="Select Time Zone"
defaultValue={'Etc/UTC'}
defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
onChange={props.onClickDateTimeZone}
/>
</StyledDiv>
Expand Down
198 changes: 61 additions & 137 deletions client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import _ from "lodash";
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import {
BoolCodeControl,
Expand Down Expand Up @@ -58,9 +55,6 @@ import { EditorContext } from "comps/editorState";
import { dropdownControl } from "comps/controls/dropdownControl";
import { timeZoneOptions } from "./timeZone";

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(customParseFormat);

const EventOptions = [changeEvent, focusEvent, blurEvent] as const;

Expand Down Expand Up @@ -90,7 +84,7 @@ const commonChildren = {
),
inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
timeZone: dropdownControl(timeZoneOptions, "Etc/UTC"),
timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
viewRef: RefControl<CommonPickerMethods>,
...validationChildren,
};
Expand Down Expand Up @@ -130,7 +124,7 @@ function validate(

const childrenMap = {
value: stringExposingStateControl("value"),
userTimeZone: stringExposingStateControl("userTimeZone" , 'Etc/UTC'),
userTimeZone: stringExposingStateControl("userTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone),
...commonChildren,
...formDataChildren,
};
Expand Down Expand Up @@ -275,7 +269,7 @@ export const timeRangeControl = (function () {
const childrenMap = {
start: stringExposingStateControl("start"),
end: stringExposingStateControl("end"),
userRangeTimeZone: stringExposingStateControl("userRangeTimeZone" , 'Etc/UTC'),
userRangeTimeZone: stringExposingStateControl("userRangeTimeZone" , Intl.DateTimeFormat().resolvedOptions().timeZone),
...formDataChildren,
...commonChildren,
};
Expand Down Expand Up @@ -420,38 +414,39 @@ export const timeRangeControl = (function () {
.build();
})();

const getTimeZoneInfo = (timeZone: any, othereTimeZone: any) => {
const tz = timeZone === 'UserChoice' ? othereTimeZone : timeZone ;
return {
TimeZone: tz,
Offset: dayjs().tz(tz).format('Z') // Get the UTC offset for the selected timezone
};
};

export const TimePickerComp = withExposingConfigs(timePickerControl, [
new NameConfig("value", trans("export.timePickerValueDesc")),

depsConfig({
name: "formattedValue",
desc: trans("export.timePickerFormattedValueDesc"),
depKeys: ["value", "format", "timeZone", "userTimeZone"],
depKeys: ["value", "format", "timeZone", "userTimeZone"],
func: (input) => {
let mom = null;

// Loop through TimeParser to find a valid format
for (const format of TimeParser) {
if (dayjs.utc(input.value, format).isValid()) {
mom = dayjs.utc(input.value, format);
break;
}
}

const tz = input.timeZone === 'UserChoice' ? input.userTimeZone : input.timeZone || 'UTC';
return mom?.isValid() ? mom.tz(tz).format(input.format) : '';
const mom = Boolean(input.value) ? dayjs(input.value, TimeParser) : null;
const tz = input.timeZone === 'UserChoice' ? input.userTimeZone : input.timeZone; // Get the selected timezone
const timeInTz = mom?.clone().tz(tz, true); // Apply the selected timezone without altering the time itself (do not convert the time)
const formattedTimeWithoffset = timeInTz?.format(input?.format);
return mom?.isValid() ? (!input.format || input.format.includes('Z') || input.format.includes('z')) // Check if format is not available or contains 'Z'
? formattedTimeWithoffset // Return formattedDateWithoffset if format includes 'Z' or is not available
: mom.format(input.format) // Otherwise, return mom.format(input.format)
: "";
},
}),

depsConfig({
name: "timeZone",
desc: trans("export.timeZoneDesc"),
depKeys: ["timeZone", "userTimeZone"],
func: (input) => {
return input.timeZone === 'UserChoice' ? input.userTimeZone : input.timeZone || 'UTC';
},
func: (input: { timeZone: any; userTimeZone: any; }) => getTimeZoneInfo(input.timeZone, input.userTimeZone)
}),

depsConfig({
name: "invalid",
desc: trans("export.invalidDesc"),
Expand All @@ -460,158 +455,87 @@ export const TimePickerComp = withExposingConfigs(timePickerControl, [
validate({
...input,
value: { value: input.value },
}).validateStatus !== "success",
} as any).validateStatus !== "success",
}),

...CommonNameConfig,
]);


export let TimeRangeComp = withExposingConfigs(timeRangeControl, [
// new NameConfig("start", trans("export.timeRangeStartDesc")),
// new NameConfig("end", trans("export.timeRangeEndDesc")),
depsConfig({
name: "start",
desc: trans("export.timeRangeStartDesc"),
depKeys: ["start", "timeZone", "userRangeTimeZone"],
func: (input) => {
let start = null;

// Loop through TimeParser to find a valid format for start
for (const format of TimeParser) {
if (dayjs.utc(input.start, format).isValid()) {
start = dayjs.utc(input.start, format);
break;
}
}

if (start?.hour() === 0 && start?.minute() === 0 && start?.second() === 0) {
start = start?.hour(12);
}

// Apply timezone conversion if valid
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
return start?.isValid() ? start.tz(tz).format(input.format || "HH:mm:ss") : null;
},
}),

depsConfig({
name: "end",
desc: trans("export.timeRangeEndDesc"),
depKeys: ["end", "timeZone", "userRangeTimeZone"],
func: (input) => {
let end = null;

// Loop through TimeParser to find a valid format for end
for (const format of TimeParser) {
if (dayjs.utc(input.end, format).isValid()) {
end = dayjs.utc(input.end, format);
break;
}
}

// Apply timezone conversion if valid
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
return end?.isValid() ? end.tz(tz).format(input.format || "HH:mm:ss") : null;
},
}),

new NameConfig("start", trans("export.timeRangeStartDesc")),
new NameConfig("end", trans("export.timeRangeEndDesc")),
depsConfig({
name: "formattedValue",
desc: trans("export.timeRangeFormattedValueDesc"),
depKeys: ["start", "end", "format", "timeZone", "userRangeTimeZone"],
func: (input) => {
let start = null;
let end = null;
for (const format of TimeParser) {
if (dayjs.utc(input.start, format).isValid()) {
start = dayjs.utc(input.start, format);
break;
}
}
for (const format of TimeParser) {
if (dayjs.utc(input.end, format).isValid()) {
end = dayjs.utc(input.end, format);
break;
}
}

const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
const formattedStart = start?.isValid() ? start.tz(tz).format(input.format) : '';
const formattedEnd = end?.isValid() ? end.tz(tz).format(input.format) : '';

return [formattedStart, formattedEnd].filter(Boolean).join(" - ");
const start = Boolean(input.start) ? dayjs(input.start, TimeParser) : null;
const end = Boolean(input.end) ? dayjs(input.end, TimeParser) : null;
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone; // Get the selected timezone
const startTimeInTz = start?.clone().tz(tz, true); // Apply the selected timezone without altering the time itself (do not convert the time)
const endTimeInTz = end?.clone().tz(tz, true);
return [
start?.isValid() && (!input.format || input.format.includes('Z') || input.format.includes('z')) // Check if format is not available or contains 'Z'
? startTimeInTz?.format(input?.format) // Return formattedTimeWithoffset if format includes 'Z' or is not available
: start?.format(input.format),
end?.isValid() && (!input.format || input.format.includes('Z') || input.format.includes('z'))
? endTimeInTz?.format(input?.format)
: end?.format(input.format) ,
]
.filter((item) => item)
.join(" - ");
},
}),

depsConfig({
name: "formattedStartValue",
desc: trans("export.timeRangeFormattedStartValueDesc"),
depKeys: ["start", "format", "timeZone", "userRangeTimeZone"],
depKeys: ["start", "format" , "timeZone", "userRangeTimeZone"],
func: (input) => {
let start = null;
for (const format of TimeParser) {
if (dayjs.utc(input.start, format).isValid()) {
start = dayjs.utc(input.start, format);
break;
}
}

const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
return start?.isValid() ? start.tz(tz).format(input.format) : '';
const start = Boolean(input.start) ? dayjs(input.start, TimeParser) : null;
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone;
const startTimeInTz = start?.clone().tz(tz, true);
const formattedDate = startTimeInTz?.format(input?.format);
return start?.isValid() && (!input.format || input.format.includes('Z') || input.format.includes('z'))
? formattedDate
: start?.format(input.format);
},
}),

depsConfig({
name: "formattedEndValue",
desc: trans("export.timeRangeFormattedEndValueDesc"),
depKeys: ["end", "format", "timeZone", "userRangeTimeZone"],
func: (input) => {
let end = null;
for (const format of TimeParser) {
if (dayjs.utc(input.end, format).isValid()) {
end = dayjs.utc(input.end, format);
break;
}
}

const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
return end?.isValid() ? end.tz(tz).format(input.format) : '';
const end = Boolean(input.end) ? dayjs(input.end, TimeParser) : null;
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone;
const endTimeInTz = end?.clone().tz(tz, true);
return end?.isValid() && (!input.format || input.format.includes('Z') || input.format.includes('z'))
? endTimeInTz?.format(input?.format)
: end?.format(input.format);
},
}),

depsConfig({
name: "timeZone",
desc: trans("export.timeZoneDesc"),
depKeys: ["timeZone", "userRangeTimeZone"],
func: (input) => {
return input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
},
}),
func: (input:any) => getTimeZoneInfo(input.timeZone, input.userRangeTimeZone)

}),
depsConfig({
name: "invalid",
desc: trans("export.invalidDesc"),
depKeys: ["start", "end", "required", "minTime", "maxTime", "customRule"],
func: (input) => {
const startInvalid = validate({
func: (input) =>
validate({
...input,
value: { value: input.start },
}).validateStatus !== "success";

const endInvalid = validate({
}).validateStatus !== "success" ||
validate({
...input,
value: { value: input.end },
}).validateStatus !== "success";

return startInvalid || endInvalid;
},
}).validateStatus !== "success",
}),

...CommonNameConfig,
]);


TimeRangeComp = withMethodExposing(TimeRangeComp, [
...dateRefMethods,
{
Expand Down Expand Up @@ -653,4 +577,4 @@ TimeRangeComp = withMethodExposing(TimeRangeComp, [
comp.children.end.getView().onChange(data.end);
},
},
]);
]);
4 changes: 2 additions & 2 deletions client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $
`;

const StyledAntdSelect = styled(AntdSelect)`
width: 100%;
width: 300px;
margin: 10px 0px;
.ant-select-selector {
font-size: 14px;
Expand Down Expand Up @@ -71,7 +71,7 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
<StyledAntdSelect
placeholder="Select Time Zone"
options={timeZoneOptions.filter(option => option.value !== 'UserChoice')} // Filter out 'userChoice'
defaultValue={'Etc/UTC'}
defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
onChange={props.handleTimeRangeZoneChange}
/>
)
Expand Down
4 changes: 2 additions & 2 deletions client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const TimeMobileUIView = React.lazy(() =>
);

const StyledAntdSelect = styled(AntdSelect)`
width: 100%;
width: 300px;
margin: 10px 0;
.ant-select-selector {
font-size: 14px;
Expand Down Expand Up @@ -54,7 +54,7 @@ export const TimeUIView = (props: TimeUIViewProps) => {
placeholder="Select Time Zone"
options={timeZoneOptions.filter(option => option.value !== 'UserChoice')} // Filter out 'userChoice'
onChange={props?.handleTimeZoneChange}
defaultValue={'Etc/UTC'}
defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
/>
)
)}
Expand Down
14 changes: 10 additions & 4 deletions client/packages/lowcoder/src/comps/comps/dateComp/timeZone.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { trans } from "i18n";

export const timeZoneOptions = [
{ label: trans("timeZone.UTC-12:00"), value: "Etc/GMT+12" },
{ label: trans("timeZone.UTC-11:00"), value: "Etc/GMT+11" },
{ label: trans("timeZone.UserChoice"), value: "UserChoice" },
{ label: trans("timeZone.UTC-12:00"), value: "Pacific/Baker" },
{ label: trans("timeZone.UTC-11:00"), value: "Pacific/Niue" },
{ label: trans("timeZone.UTC-10:00"), value: "Pacific/Honolulu" },
{ label: trans("timeZone.UTC-09:00"), value: "America/Anchorage" },
{ label: trans("timeZone.UTC-08:00"), value: "America/Tijuana" },
Expand All @@ -11,7 +12,7 @@ export const timeZoneOptions = [
{ label: trans("timeZone.UTC-05:00"), value: "America/New_York" },
{ label: trans("timeZone.UTC-04:00"), value: "America/Halifax" },
{ label: trans("timeZone.UTC-03:00"), value: "America/Argentina/Buenos_Aires" },
{ label: trans("timeZone.UTC-02:00"), value: "Etc/GMT+2" },
{ label: trans("timeZone.UTC-02:00"), value: "Atlantic/South_Georgia" },
{ label: trans("timeZone.UTC-01:00"), value: "Atlantic/Cape_Verde" },
{ label: trans("timeZone.UTC+00:00"), value: "Etc/UTC" },
{ label: trans("timeZone.UTC+01:00"), value: "Europe/Berlin" },
Expand All @@ -20,10 +21,15 @@ export const timeZoneOptions = [
{ label: trans("timeZone.UTC+04:00"), value: "Asia/Dubai" },
{ label: trans("timeZone.UTC+05:00"), value: "Asia/Karachi" },
{ label: trans("timeZone.UTC+05:30"), value: "Asia/Kolkata" },
{ label: trans("timeZone.UTC+05:45"), value: "Asia/Kathmandu" },
{ label: trans("timeZone.UTC+06:00"), value: "Asia/Dhaka" },
{ label: trans("timeZone.UTC+06:30"), value: "Asia/Rangoon" },
{ label: trans("timeZone.UTC+07:00"), value: "Asia/Bangkok" },
{ label: trans("timeZone.UTC+08:00"), value: "Asia/Shanghai" },
{ label: trans("timeZone.UTC+09:00"), value: "Asia/Tokyo" },
{ label: trans("timeZone.UTC+09:30"), value: "Australia/Darwin" },
{ label: trans("timeZone.UTC+10:00"), value: "Australia/Sydney" },
{ label: trans("timeZone.UserChoice"), value: "UserChoice" },
{ label: trans("timeZone.UTC+11:00"), value: "Pacific/Guadalcanal" },
{ label: trans("timeZone.UTC+12:00"), value: "Pacific/Auckland" },
{ label: trans("timeZone.UTC+13:00"), value: "Pacific/Tongatapu" },
];
Loading
Loading