Skip to content

Commit 70ea444

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #307 from raheeliftikhar5/antd-upgrade
Antd Upgrade
2 parents 9047441 + b025eba commit 70ea444

File tree

151 files changed

+1793
-1094
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

151 files changed

+1793
-1094
lines changed

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import {
4949
viewClassNames,
5050
FormWrapper,
5151
} from "./calendarConstants";
52-
import moment from "moment";
52+
import dayjs from "dayjs";
5353

5454
const childrenMap = {
5555
events: jsonValueExposingStateControl("events", defaultData),
@@ -79,8 +79,8 @@ let CalendarBasicComp = (function () {
7979
return {
8080
title: item.title,
8181
id: item.id,
82-
start: moment(item.start, DateParser).format(),
83-
end: moment(item.end, DateParser).format(),
82+
start: dayjs(item.start, DateParser).format(),
83+
end: dayjs(item.end, DateParser).format(),
8484
allDay: item.allDay,
8585
color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
8686
...(item.groupId ? { groupId: item.groupId } : null),
@@ -104,7 +104,7 @@ let CalendarBasicComp = (function () {
104104
const isList = eventInfo.view.type === "listWeek";
105105
let sizeClass = "";
106106
if ([ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)) {
107-
const duration = moment(eventInfo.event.end).diff(moment(eventInfo.event.start), "minutes");
107+
const duration = dayjs(eventInfo.event.end).diff(dayjs(eventInfo.event.start), "minutes");
108108
if (duration <= 30 || eventInfo.event.allDay) {
109109
sizeClass = "small";
110110
} else if (duration <= 60) {
@@ -114,7 +114,7 @@ let CalendarBasicComp = (function () {
114114
}
115115
}
116116
const stateClass =
117-
moment().isAfter(moment(eventInfo.event.end)) &&
117+
dayjs().isAfter(dayjs(eventInfo.event.end)) &&
118118
(eventInfo.view.type as ViewType) !== ViewType.MONTH
119119
? "past"
120120
: "";
@@ -177,7 +177,7 @@ let CalendarBasicComp = (function () {
177177
end: info.endStr,
178178
};
179179
const view = info.view.type as ViewType;
180-
const duration = moment(info.end).diff(moment(info.start), "minutes");
180+
const duration = dayjs(info.end).diff(dayjs(info.start), "minutes");
181181
const singleClick =
182182
(view === ViewType.MONTH && duration === 1440) ||
183183
([ViewType.WEEK, ViewType.DAY].includes(view) && duration === 30) ||
@@ -355,8 +355,8 @@ let CalendarBasicComp = (function () {
355355
let changeEvents: EventType[] = [];
356356
info.forEach((item) => {
357357
const event = events.find((i: EventType) => i.id === item.id);
358-
const start = moment(item.start, DateParser).format();
359-
const end = moment(item.end, DateParser).format();
358+
const start = dayjs(item.start, DateParser).format();
359+
const end = dayjs(item.end, DateParser).format();
360360
if (
361361
start !== event?.start ||
362362
end !== event?.end ||

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
UnderlineCss,
1818
} from "lowcoder-sdk";
1919
import styled from "styled-components";
20-
import moment from "moment";
20+
import dayjs from "dayjs";
2121
import {
2222
DayHeaderContentArg,
2323
FormatterInput,
@@ -813,15 +813,15 @@ export const defaultData = [
813813
{
814814
id: "1",
815815
title: "Coding",
816-
start: moment().hours(10).minutes(0).second(0).format(DATE_TIME_FORMAT),
817-
end: moment().hours(11).minutes(30).second(0).format(DATE_TIME_FORMAT),
816+
start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
817+
end: dayjs().hour(11).minute(30).second(0).format(DATE_TIME_FORMAT),
818818
color: "#079968",
819819
},
820820
{
821821
id: "2",
822822
title: "Rest",
823-
start: moment().hours(24).format(DATE_FORMAT),
824-
end: moment().hours(48).format(DATE_FORMAT),
823+
start: dayjs().hour(24).format(DATE_FORMAT),
824+
end: dayjs().hour(48).format(DATE_FORMAT),
825825
allDay: true,
826826
},
827827
];
@@ -852,10 +852,10 @@ const weekHeadContent = (info: DayHeaderContentArg) => {
852852
const leftTimeContent = (info: SlotLabelContentArg) => {
853853
let isPast = false;
854854
if (info.view.type === ViewType.WEEK) {
855-
isPast = moment().isAfter(moment(moment().format("YYYY MM DD " + info.text)));
855+
isPast = dayjs().isAfter(dayjs(dayjs().format("YYYY MM DD " + info.text)));
856856
} else if (info.view.type === ViewType.DAY) {
857-
isPast = moment().isAfter(
858-
moment(moment(info.view.activeStart).format("YYYY MM DD " + info.text))
857+
isPast = dayjs().isAfter(
858+
dayjs(dayjs(info.view.activeStart).format("YYYY MM DD " + info.text))
859859
);
860860
}
861861
return {
@@ -887,9 +887,9 @@ export const slotLabelFormat = [
887887
export const viewClassNames = (info: ViewContentArg) => {
888888
let className = "";
889889
if ([ViewType.WEEK, ViewType.DAY].includes(info.view.type as ViewType)) {
890-
if (moment().isAfter(info.view.activeEnd)) {
890+
if (dayjs().isAfter(info.view.activeEnd)) {
891891
className = "past";
892-
} else if (moment().isBefore(info.view.activeStart)) {
892+
} else if (dayjs().isBefore(info.view.activeStart)) {
893893
className = "future";
894894
}
895895
}

‎client/packages/lowcoder-design/src/components/Collapase.tsx

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Collapse as AntdCollapse } from "antd";
1+
import { Collapse as AntdCollapse, CollapseProps } from "antd";
22
import { ReactComponent as UnFold } from "icons/icon-unfold.svg";
33
import { ReactComponent as Folded } from "icons/icon-folded.svg";
44
import { ReactComponent as Omit } from "icons/icon-omit.svg";
@@ -98,6 +98,12 @@ export const Collapse = (props: Iprops) => {
9898
// setColor(keys.length ? "#F2F7FC" : "");
9999
// onChange && onChange(keys);
100100
// };
101+
const collapseItems:CollapseProps['items'] = config.map((item) => ({
102+
key: item.key,
103+
label: item.title,
104+
children: item.data,
105+
}))
106+
101107
return (
102108
// <Contain $color={props.isSelected || Color!==""}>
103109
<Container optColor={props.isSelected} simple={props.simple} className={props.className}>
@@ -106,19 +112,8 @@ export const Collapse = (props: Iprops) => {
106112
expandIcon={getExpandIcon}
107113
defaultActiveKey={props.isOpen ? [props.config[0].key] : []}
108114
// onChange={handlechange}
109-
>
110-
{config && config.length > 0
111-
? config.map((item, index) => {
112-
return (
113-
<React.Fragment key={index}>
114-
<Panel header={item.title} key={item.key} showArrow={true}>
115-
{item.data}
116-
</Panel>
117-
</React.Fragment>
118-
);
119-
})
120-
: null}
121-
</AntdCollapse>
115+
items={collapseItems}
116+
/>
122117
</Container>
123118
);
124119
};

‎client/packages/lowcoder-design/src/components/CustomModal.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Draggable from "react-draggable";
88
import { DarkActiveTextColor, GreyTextColor } from "constants/style";
99
import { CloseIcon, ErrorIcon, SuccessIcon, WarningIcon, WarningWhiteIcon } from "icons";
1010
import { trans } from "i18n/design";
11+
import { modalInstance } from "components/GlobalInstances";
1112

1213
type ModalWrapperProps = {
1314
width?: string | number;
@@ -108,6 +109,7 @@ export const ModalFooterWrapper = styled.div`
108109
}
109110
`;
110111

112+
111113
function ModalHeader(props: {
112114
title?: React.ReactNode;
113115
onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -242,6 +244,7 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
242244
/**
243245
* an antd modal capsulation
244246
*/
247+
245248
function CustomModal(props: CustomModalProps) {
246249
return (
247250
<AntdModal
@@ -272,6 +275,7 @@ CustomModal.confirm = (props: {
272275
type?: "info" | "warn" | "error" | "success";
273276
width?: number | string;
274277
}): any => {
278+
275279
const defaultConfirmProps: ModalFuncProps = {
276280
...DEFAULT_PROPS,
277281
okText: trans("ok"),
@@ -285,7 +289,7 @@ CustomModal.confirm = (props: {
285289
},
286290
};
287291
// create model
288-
const model = AntdModal.confirm({
292+
const model = modalInstance.confirm({
289293
width: "fit-content",
290294
style: props.style,
291295
centered: true,

‎client/packages/lowcoder-design/src/components/Dropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
170170
<CustomSelect
171171
open={props.open}
172172
listHeight={props.lineHeight}
173-
dropdownClassName="ob-dropdown-control-select"
173+
popupClassName="ob-dropdown-control-select"
174174
showSearch={props.showSearch}
175175
filterOption={(input, option) => {
176176
if (props.optionFilterProp) {

‎client/packages/lowcoder-design/src/components/GlobalInstances.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { App } from 'antd';
2+
import type { MessageInstance } from 'antd/es/message/interface';
3+
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
4+
import type { NotificationInstance } from 'antd/es/notification/interface';
5+
6+
let messageInstance: MessageInstance;
7+
let notificationInstance: NotificationInstance;
8+
let modalInstance: Omit<ModalStaticFunctions, 'warn'>;
9+
10+
export default () => {
11+
const staticFunction = App.useApp();
12+
messageInstance = staticFunction.message;
13+
modalInstance = staticFunction.modal;
14+
notificationInstance = staticFunction.notification;
15+
return null;
16+
};
17+
18+
export { messageInstance, notificationInstance, modalInstance };

‎client/packages/lowcoder-design/src/components/Menu.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,13 @@ const DropDownMenuItemCss = `
140140
`;
141141

142142
const DropdownMenu = styled(AntdMenu)`
143-
padding: 8px;
144-
background: #ffffff;
145-
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
146-
border-radius: 8px;
147-
${DropDownMenuItemCss}
143+
&&& {
144+
padding: 8px;
145+
background: #ffffff;
146+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
147+
border-radius: 8px;
148+
${DropDownMenuItemCss}
149+
}
148150
`;
149151
const StyleableDropDownSubMenu = (props: { className?: string } & SubMenuProps) => {
150152
const { className, ...restProps } = props;

‎client/packages/lowcoder-design/src/components/TriggeredDialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function TriggeredDialog(props: {
3838
</div>
3939
)}
4040
<CustomModal
41-
visible={visible}
41+
open={visible}
4242
title={modalTitle}
4343
destroyOnClose
4444
onCancel={() => setVisible(false)}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy