Merge pull request #307 from raheeliftikhar5/antd-upgrade

Antd Upgrade

Author: FalkWolsky

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

@@ -49,7 +49,7 @@ import {
   viewClassNames,
   FormWrapper,
 } from "./calendarConstants";
-import moment from "moment";
+import dayjs from "dayjs";
 
 const childrenMap = {
   events: jsonValueExposingStateControl("events", defaultData),
@@ -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),
@@ -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) {
@@ -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"
           : "";
@@ -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) ||
@@ -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 ||

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

@@ -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,
@@ -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,
   },
 ];
@@ -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 {
@@ -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";
     }
   }

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

@@ -1,4 +1,4 @@
-import { Collapse as AntdCollapse } from "antd";
+import { Collapse as AntdCollapse, CollapseProps } from "antd";
 import { ReactComponent as UnFold } from "icons/icon-unfold.svg";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
 import { ReactComponent as Omit } from "icons/icon-omit.svg";
@@ -98,6 +98,12 @@ export const Collapse = (props: Iprops) => {
   //   setColor(keys.length ? "#F2F7FC" : "");
   //   onChange && onChange(keys);
   // };
+  const collapseItems:CollapseProps['items'] = config.map((item) => ({
+      key: item.key,
+      label: item.title,
+      children: item.data,
+  }))
+
   return (
     // <Contain $color={props.isSelected || Color!==""}>
     <Container optColor={props.isSelected} simple={props.simple} className={props.className}>
@@ -106,19 +112,8 @@ export const Collapse = (props: Iprops) => {
         expandIcon={getExpandIcon}
         defaultActiveKey={props.isOpen ? [props.config[0].key] : []}
         // onChange={handlechange}
-      >
-        {config && config.length > 0
-          ? config.map((item, index) => {
-              return (
-                <React.Fragment key={index}>
-                  <Panel header={item.title} key={item.key} showArrow={true}>
-                    {item.data}
-                  </Panel>
-                </React.Fragment>
-              );
-            })
-          : null}
-      </AntdCollapse>
+        items={collapseItems}
+      />
     </Container>
   );
 };

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

@@ -8,6 +8,7 @@ import Draggable from "react-draggable";
 import { DarkActiveTextColor, GreyTextColor } from "constants/style";
 import { CloseIcon, ErrorIcon, SuccessIcon, WarningIcon, WarningWhiteIcon } from "icons";
 import { trans } from "i18n/design";
+import { modalInstance } from "components/GlobalInstances";
 
 type ModalWrapperProps = {
   width?: string | number;
@@ -108,6 +109,7 @@ export const ModalFooterWrapper = styled.div`
   }
 `;
 
+
 function ModalHeader(props: {
   title?: React.ReactNode;
   onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -242,6 +244,7 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
 /**
  * an antd modal capsulation
  */
+
 function CustomModal(props: CustomModalProps) {
   return (
     <AntdModal
@@ -272,6 +275,7 @@ CustomModal.confirm = (props: {
   type?: "info" | "warn" | "error" | "success";
   width?: number | string;
 }): any => {
+
   const defaultConfirmProps: ModalFuncProps = {
     ...DEFAULT_PROPS,
     okText: trans("ok"),
@@ -285,7 +289,7 @@ CustomModal.confirm = (props: {
     },
   };
   // create model
-  const model = AntdModal.confirm({
+  const model = modalInstance.confirm({
     width: "fit-content",
     style: props.style,
     centered: true,

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

@@ -170,7 +170,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
             <CustomSelect
               open={props.open}
               listHeight={props.lineHeight}
-              dropdownClassName="ob-dropdown-control-select"
+              popupClassName="ob-dropdown-control-select"
               showSearch={props.showSearch}
               filterOption={(input, option) => {
                 if (props.optionFilterProp) {

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

@@ -0,0 +1,18 @@
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+
+let messageInstance: MessageInstance;
+let notificationInstance: NotificationInstance;
+let modalInstance: Omit<ModalStaticFunctions, 'warn'>;
+
+export default () => {
+  const staticFunction = App.useApp();
+  messageInstance = staticFunction.message;
+  modalInstance = staticFunction.modal;
+  notificationInstance = staticFunction.notification;
+  return null;
+};
+
+export { messageInstance, notificationInstance, modalInstance };

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

@@ -140,11 +140,13 @@ const DropDownMenuItemCss = `
 `;
 
 const DropdownMenu = styled(AntdMenu)`
-  padding: 8px;
-  background: #ffffff;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  ${DropDownMenuItemCss}
+  &&& {
+    padding: 8px;
+    background: #ffffff;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    ${DropDownMenuItemCss}
+  }
 `;
 const StyleableDropDownSubMenu = (props: { className?: string } & SubMenuProps) => {
   const { className, ...restProps } = props;

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

@@ -38,7 +38,7 @@ export function TriggeredDialog(props: {
         </div>
       )}
       <CustomModal
-        visible={visible}
+        open={visible}
         title={modalTitle}
         destroyOnClose
         onCancel={() => setVisible(false)}