Skip to content

Antd Upgrade #307

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 14 commits into from
Jul 28, 2023
Merged

Antd Upgrade #307

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f582d37
feat: upgrade antd version from v4 to v5
raheeliftikhar5 Jul 21, 2023
d09ebc3
upgrade antd dependencies
raheeliftikhar5 Jul 24, 2023
9e60dc0
refactor: replace momentJS with dayJS
raheeliftikhar5 Jul 24, 2023
a3606cb
refactor: updated dropdown
raheeliftikhar5 Jul 24, 2023
e4996df
refactor: added global instances for message, modal and notification
raheeliftikhar5 Jul 24, 2023
5baddfe
refactor: use global instances of modal, message
raheeliftikhar5 Jul 24, 2023
47c1723
refactor: antd component changes
raheeliftikhar5 Jul 24, 2023
4dbbd23
fix: fixed unit test
raheeliftikhar5 Jul 24, 2023
020d569
fix: datepicker and timepicker issues fixed
raheeliftikhar5 Jul 25, 2023
4d93ea2
Merge branch 'lowcoder-org:main' into antd-upgrade
raheeliftikhar5 Jul 25, 2023
501e00d
fix: fixed popover and collapse
raheeliftikhar5 Jul 26, 2023
a19df59
fix: updated timeline
raheeliftikhar5 Jul 26, 2023
9f7a49b
fix: UI fixes
raheeliftikhar5 Jul 26, 2023
b025eba
Merge branch 'main' into antd-upgrade
FalkWolsky Jul 27, 2023
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
Prev Previous commit
Next Next commit
refactor: replace momentJS with dayJS
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Jul 24, 2023
commit 9e60dc04427f90ad9464fda348b5206489aaadb6
16 changes: 8 additions & 8 deletions client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import {
viewClassNames,
FormWrapper,
} from "./calendarConstants";
import moment from "moment";
import dayjs from "dayjs";

const childrenMap = {
events: jsonValueExposingStateControl("events", defaultData),
Expand Down Expand Up @@ -79,8 +79,8 @@ let CalendarBasicComp = (function () {
return {
title: item.title,
id: item.id,
start: moment(item.start, DateParser).format(),
end: moment(item.end, DateParser).format(),
start: dayjs(item.start, DateParser).format(),
end: dayjs(item.end, DateParser).format(),
allDay: item.allDay,
color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
...(item.groupId ? { groupId: item.groupId } : null),
Expand All @@ -104,7 +104,7 @@ let CalendarBasicComp = (function () {
const isList = eventInfo.view.type === "listWeek";
let sizeClass = "";
if ([ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)) {
const duration = moment(eventInfo.event.end).diff(moment(eventInfo.event.start), "minutes");
const duration = dayjs(eventInfo.event.end).diff(dayjs(eventInfo.event.start), "minutes");
if (duration <= 30 || eventInfo.event.allDay) {
sizeClass = "small";
} else if (duration <= 60) {
Expand All @@ -114,7 +114,7 @@ let CalendarBasicComp = (function () {
}
}
const stateClass =
moment().isAfter(moment(eventInfo.event.end)) &&
dayjs().isAfter(dayjs(eventInfo.event.end)) &&
(eventInfo.view.type as ViewType) !== ViewType.MONTH
? "past"
: "";
Expand Down Expand Up @@ -177,7 +177,7 @@ let CalendarBasicComp = (function () {
end: info.endStr,
};
const view = info.view.type as ViewType;
const duration = moment(info.end).diff(moment(info.start), "minutes");
const duration = dayjs(info.end).diff(dayjs(info.start), "minutes");
const singleClick =
(view === ViewType.MONTH && duration === 1440) ||
([ViewType.WEEK, ViewType.DAY].includes(view) && duration === 30) ||
Expand Down Expand Up @@ -355,8 +355,8 @@ let CalendarBasicComp = (function () {
let changeEvents: EventType[] = [];
info.forEach((item) => {
const event = events.find((i: EventType) => i.id === item.id);
const start = moment(item.start, DateParser).format();
const end = moment(item.end, DateParser).format();
const start = dayjs(item.start, DateParser).format();
const end = dayjs(item.end, DateParser).format();
if (
start !== event?.start ||
end !== event?.end ||
Expand Down
20 changes: 10 additions & 10 deletions client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
UnderlineCss,
} from "lowcoder-sdk";
import styled from "styled-components";
import moment from "moment";
import dayjs from "dayjs";
import {
DayHeaderContentArg,
FormatterInput,
Expand Down Expand Up @@ -813,15 +813,15 @@ export const defaultData = [
{
id: "1",
title: "Coding",
start: moment().hours(10).minutes(0).second(0).format(DATE_TIME_FORMAT),
end: moment().hours(11).minutes(30).second(0).format(DATE_TIME_FORMAT),
start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
end: dayjs().hour(11).minute(30).second(0).format(DATE_TIME_FORMAT),
color: "#079968",
},
{
id: "2",
title: "Rest",
start: moment().hours(24).format(DATE_FORMAT),
end: moment().hours(48).format(DATE_FORMAT),
start: dayjs().hour(24).format(DATE_FORMAT),
end: dayjs().hour(48).format(DATE_FORMAT),
allDay: true,
},
];
Expand Down Expand Up @@ -852,10 +852,10 @@ const weekHeadContent = (info: DayHeaderContentArg) => {
const leftTimeContent = (info: SlotLabelContentArg) => {
let isPast = false;
if (info.view.type === ViewType.WEEK) {
isPast = moment().isAfter(moment(moment().format("YYYY MM DD " + info.text)));
isPast = dayjs().isAfter(dayjs(dayjs().format("YYYY MM DD " + info.text)));
} else if (info.view.type === ViewType.DAY) {
isPast = moment().isAfter(
moment(moment(info.view.activeStart).format("YYYY MM DD " + info.text))
isPast = dayjs().isAfter(
dayjs(dayjs(info.view.activeStart).format("YYYY MM DD " + info.text))
);
}
return {
Expand Down Expand Up @@ -887,9 +887,9 @@ export const slotLabelFormat = [
export const viewClassNames = (info: ViewContentArg) => {
let className = "";
if ([ViewType.WEEK, ViewType.DAY].includes(info.view.type as ViewType)) {
if (moment().isAfter(info.view.activeEnd)) {
if (dayjs().isAfter(info.view.activeEnd)) {
className = "past";
} else if (moment().isBefore(info.view.activeStart)) {
} else if (dayjs().isBefore(info.view.activeStart)) {
className = "future";
}
}
Expand Down
32 changes: 16 additions & 16 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _, { noop } from "lodash";
import moment from "moment";
import dayjs from "dayjs";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import {
BoolCodeControl,
Expand Down Expand Up @@ -118,7 +118,7 @@ function validate(
return { validateStatus: "error", help: props.customRule };
}

const currentDateTime = moment(props.value.value, DATE_TIME_FORMAT);
const currentDateTime = dayjs(props.value.value, DATE_TIME_FORMAT);

if (props.required && !currentDateTime.isValid()) {
return { validateStatus: "error", help: trans("prop.required") };
Expand Down Expand Up @@ -154,7 +154,7 @@ export type DateCompViewProps = Pick<
};

export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
const time = moment(props.value.value, DateParser);
const time = dayjs(props.value.value, DateParser);

return props.label({
required: props.required,
Expand Down Expand Up @@ -242,8 +242,8 @@ export const dateRangeControl = (function () {
};

return new UICompBuilder(childrenMap, (props) => {
const start = moment(props.start.value, DateParser);
const end = moment(props.end.value, DateParser);
const start = dayjs(props.start.value, DateParser);
const end = dayjs(props.end.value, DateParser);

const children = (
<DateRangeUIView
Expand Down Expand Up @@ -344,7 +344,7 @@ export const DatePickerComp = withExposingConfigs(datePickerControl, [
desc: trans("export.datePickerValueDesc"),
depKeys: ["value", "showTime"],
func: (input) => {
const mom = moment(input.value, DateParser);
const mom = dayjs(input.value, DateParser);
return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : "";
},
}),
Expand All @@ -353,7 +353,7 @@ export const DatePickerComp = withExposingConfigs(datePickerControl, [
desc: trans("export.datePickerFormattedValueDesc"),
depKeys: ["value", "format"],
func: (input) => {
const mom = moment(input.value, DateParser);
const mom = dayjs(input.value, DateParser);
return mom.isValid() ? mom.format(input.format) : "";
},
}),
Expand All @@ -362,7 +362,7 @@ export const DatePickerComp = withExposingConfigs(datePickerControl, [
desc: trans("export.datePickerTimestampDesc"),
depKeys: ["value"],
func: (input) => {
const mom = moment(input.value, DateParser);
const mom = dayjs(input.value, DateParser);
return mom.isValid() ? mom.unix() : "";
},
}),
Expand All @@ -385,7 +385,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeStartDesc"),
depKeys: ["start", "showTime"],
func: (input) => {
const mom = moment(input.start, DateParser);
const mom = dayjs(input.start, DateParser);
return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : "";
},
}),
Expand All @@ -394,7 +394,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeEndDesc"),
depKeys: ["end", "showTime"],
func: (input) => {
const mom = moment(input.end, DateParser);
const mom = dayjs(input.end, DateParser);
return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : "";
},
}),
Expand All @@ -403,7 +403,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeStartTimestampDesc"),
depKeys: ["start"],
func: (input) => {
const mom = moment(input.start, DateParser);
const mom = dayjs(input.start, DateParser);
return mom.isValid() ? mom.unix() : "";
},
}),
Expand All @@ -412,7 +412,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeEndTimestampDesc"),
depKeys: ["end"],
func: (input) => {
const mom = moment(input.end, DateParser);
const mom = dayjs(input.end, DateParser);
return mom.isValid() ? mom.unix() : "";
},
}),
Expand All @@ -421,8 +421,8 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeFormattedValueDesc"),
depKeys: ["start", "end", "format"],
func: (input) => {
const start = moment(input.start, DateParser);
const end = moment(input.end, DateParser);
const start = dayjs(input.start, DateParser);
const end = dayjs(input.end, DateParser);
return [
start.isValid() && start.format(input.format),
end.isValid() && end.format(input.format),
Expand All @@ -436,7 +436,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeFormattedStartValueDesc"),
depKeys: ["start", "format"],
func: (input) => {
const start = moment(input.start, DateParser);
const start = dayjs(input.start, DateParser);
return start.isValid() && start.format(input.format);
},
}),
Expand All @@ -445,7 +445,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
desc: trans("export.dateRangeFormattedEndValueDesc"),
depKeys: ["end", "format"],
func: (input) => {
const end = moment(input.end, DateParser);
const end = dayjs(input.end, DateParser);
return end.isValid() && end.format(input.format);
},
}),
Expand Down
26 changes: 13 additions & 13 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import moment, { Moment } from "moment/moment";
import dayjs from "dayjs";
import { DateParser, TimeParser } from "util/dateTimeUtils";
import { range } from "lodash";
import { DateTimeStyleType } from "../../controls/styleControlConstants";
Expand All @@ -16,9 +16,9 @@ export const handleDateChange = (
onChange(time).then(() => onEvent("change"));
};

export const disabledDate = (current: Moment, min: string, max: string) => {
const maxDate = moment(max, DateParser);
const minDate = moment(min, DateParser);
export const disabledDate = (current: dayjs.Dayjs, min: string, max: string) => {
const maxDate = dayjs(max, DateParser);
const minDate = dayjs(min, DateParser);
return (
current &&
current.isValid() &&
Expand All @@ -27,34 +27,34 @@ export const disabledDate = (current: Moment, min: string, max: string) => {
};

export const disabledTime = (min: string, max: string) => {
const maxTime = moment(max, TimeParser);
const minTime = moment(min, TimeParser);
const maxTime = dayjs(max, TimeParser);
const minTime = dayjs(min, TimeParser);
return {
disabledHours: () => {
let disabledHours: number[] = [];
if (minTime.isValid()) {
disabledHours = [...disabledHours, ...range(0, minTime.hours())];
disabledHours = [...disabledHours, ...range(0, minTime.hour())];
}
if (maxTime.isValid()) {
disabledHours = [...disabledHours, ...range(maxTime.hours() + 1, 24)];
disabledHours = [...disabledHours, ...range(maxTime.hour() + 1, 24)];
}
return disabledHours;
},
disabledMinutes: (hour: number) => {
if (minTime.isValid() && minTime.hour() === hour) {
return range(0, minTime.minutes());
return range(0, minTime.minute());
}
if (maxTime.isValid() && maxTime.hour() === hour) {
return range(maxTime.minutes() + 1, 60);
return range(maxTime.minute() + 1, 60);
}
return [];
},
disabledSeconds: (hour: number, minute: number) => {
if (minTime.isValid() && minTime.hour() === hour && minTime.minute() === minute) {
return range(0, minTime.seconds());
return range(0, minTime.second());
}
if (maxTime.isValid() && maxTime.hours() === hour && maxTime.minute() === minute) {
return range(maxTime.seconds() + 1, 60);
if (maxTime.isValid() && maxTime.hour() === hour && maxTime.minute() === minute) {
return range(maxTime.second() + 1, 60);
}
return [];
},
Expand Down
12 changes: 6 additions & 6 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateMobileUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from "styled-components";
import { DateTimeStyleType } from "comps/controls/styleControlConstants";
import { getMobileStyle } from "comps/comps/dateComp/dateCompUtil";
import moment from "moment";
import dayjs from "dayjs";
import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser } from "util/dateTimeUtils";
import { CanvasContainerID } from "constants/domLocators";
import { trans } from "i18n";
Expand All @@ -16,14 +16,14 @@ const handleClick = async (
DateCompViewProps,
"showTime" | "minDate" | "maxDate" | "disabledTime" | "onFocus" | "onBlur"
> & {
value: moment.Moment | null;
onChange: (value: moment.Moment | null) => void;
value: dayjs.Dayjs | null;
onChange: (value: dayjs.Dayjs | null) => void;
}
) => {
const MobileDatePicker = (await import("antd-mobile/es/components/date-picker")).default;

const min = moment(params.minDate, DateParser);
const max = moment(params.maxDate, DateParser);
const min = dayjs(params.minDate, DateParser);
const max = dayjs(params.maxDate, DateParser);

const { disabledHours, disabledMinutes, disabledSeconds } = params.disabledTime();

Expand All @@ -42,7 +42,7 @@ const handleClick = async (
second: (val, { date }) => !disabledSeconds(date.getHours(), date.getMinutes()).includes(val),
},
onConfirm: (value) => {
const time = moment(value);
const time = dayjs(value);
params.onChange(time);
},
onClose: params.onBlur,
Expand Down
8 changes: 4 additions & 4 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import moment from "moment/moment";
import dayjs from "dayjs";
import type { DateCompViewProps } from "./dateComp";
import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil";
import { useUIView } from "../../utils/useUIView";
Expand All @@ -21,9 +21,9 @@ const DateRangeMobileUIView = React.lazy(() =>
);

export interface DateRangeUIViewProps extends DateCompViewProps {
start: moment.Moment | null;
end: moment.Moment | null;
onChange: (start?: moment.Moment | null, end?: moment.Moment | null) => void;
start: dayjs.Dayjs | null;
end: dayjs.Dayjs | null;
onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
onPanelChange: (value: any, mode: [string, string]) => void;
}

Expand Down
6 changes: 3 additions & 3 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import moment from "moment/moment";
import dayjs from "dayjs";
import type { DateCompViewProps } from "./dateComp";
import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil";
import { useUIView } from "../../utils/useUIView";
Expand All @@ -15,8 +15,8 @@ const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
`;

export interface DataUIViewProps extends DateCompViewProps {
value: moment.Moment | null;
onChange: (value: moment.Moment | null) => void;
value: dayjs.Dayjs | null;
onChange: (value: dayjs.Dayjs | null) => void;
onPanelChange: () => void;
}

Expand Down
Loading