upgrade antd version

Author: raheeliftikhar5

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

@@ -227,7 +227,7 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
           />
         </ModalHeaderWrapper>
 
-        <div style={{ padding: "0 16px", ...props.bodyStyle }}>{props.children}</div>
+        <div style={{ padding: "0 16px", ...props.styles?.body }}>{props.children}</div>
 
         {props.footer === null || props.footer ? (
           props.footer
@@ -280,13 +280,15 @@ CustomModal.confirm = (props: {
     ...DEFAULT_PROPS,
     okText: trans("ok"),
     cancelText: trans("cancel"),
-    bodyStyle: {
-      fontSize: "14px",
-      color: "#333333",
-      lineHeight: "22px",
-      minHeight: "72px",
-      marginTop: "24px",
-    },
+    styles: {
+      body: {
+        fontSize: "14px",
+        color: "#333333",
+        lineHeight: "22px",
+        minHeight: "72px",
+        marginTop: "24px",
+      }
+    }
   };
   // create model
   const model = modalInstance.confirm({
@@ -321,7 +323,12 @@ CustomModal.confirm = (props: {
         title={title}
         okButtonType={props.confirmBtnType}
         okText={props.okText}
-        bodyStyle={{ ...defaultConfirmProps.bodyStyle, ...props.bodyStyle }}
+        styles={{
+          body: {
+            ...defaultConfirmProps.styles?.body,
+            ...props.bodyStyle,
+          }
+        }}
         footer={props.footer}
         width={props.width}
       />

client/packages/lowcoder-design/src/components/Modal/index.tsx

@@ -32,7 +32,7 @@ export function Modal(props: ModalProps) {
     resizeHandles,
     width: modalWidth,
     height: modalHeight,
-    bodyStyle,
+    styles,
     children,
     ...otherProps
   } = props;
@@ -53,7 +53,12 @@ export function Modal(props: ModalProps) {
   return (
     <AntdModal
       width={width ?? modalWidth}
-      bodyStyle={{ height: height ?? modalHeight, ...bodyStyle }}
+      styles={{ 
+        body: {
+          height: height ?? modalHeight,
+          ...styles?.body,
+        }
+      }}
       {...otherProps}
     >
       <Resizable

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

@@ -188,7 +188,6 @@ function ToolTipLabel(
       placement="top"
       defaultOpen={false}
       trigger="hover"
-      popupVisible={!!title}
       style={tooltipStyle}
       {...restProps}
     >

client/packages/lowcoder/package.json

@@ -40,7 +40,7 @@
     "agora-rtc-sdk-ng": "^4.19.0",
     "agora-rtm-sdk": "^1.5.1",
     "ali-oss": "^6.17.1",
-    "antd": "5.7.2",
+    "antd": "^5.12.2",
     "antd-img-crop": "^4.12.2",
     "axios": "^0.21.1",
     "buffer": "^6.0.3",

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

@@ -210,7 +210,7 @@ export function resolveParsedValue(files: UploadFile[]) {
           .then((a) => {
             const ext = mime.getExtension(f.originFileObj?.type ?? "");
             if (ext === "xlsx" || ext === "csv") {
-              const workbook = XLSX.read(a, { raw: true });
+              const workbook = XLSX.read(a, { raw: true, codepage: 65001 });
               return XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {
                 raw: false,
               });

client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx

@@ -669,7 +669,7 @@ export const CreateForm = (props: { onCreate: CreateHandler }) => {
           onCancel={() => setVisible(false)}
           width="600px"
           children={<CreateFormBody {...props} />}
-          bodyStyle={{ padding: 0 }}
+          styles={{ body: {padding: 0} }}
         />
       </div>
     </>

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx

@@ -508,9 +508,11 @@ let MTComp = (function () {
                   : {}
               }
               contentWrapperStyle={{ maxHeight: "100%", maxWidth: "100%" }}
-              bodyStyle={{
-                padding: 0,
-                backgroundColor: props.style.background,
+              styles={{
+                body: {
+                  padding: 0,
+                  backgroundColor: props.style.background,
+                }
               }}
               closable={false}
               placement={props.placement}

client/packages/lowcoder/src/comps/controls/labelControl.tsx

@@ -178,7 +178,6 @@ export const LabelControl = (function () {
               }}
               placement="top"
               color="#2c2c2c"
-              popupVisible={!!props.tooltip}
               getPopupContainer={(node: any) => node.closest(".react-grid-item")}
             >
               <Label border={!!props.tooltip}>{props.text}</Label>

client/packages/lowcoder/src/comps/controls/slotControl.tsx

@@ -65,7 +65,7 @@ function ModalConfigView(props: {
         onCancel={onCancel}
         getContainer={() => document.querySelector(`#${CanvasContainerID}`) || document.body}
         footer={null}
-        bodyStyle={{ padding: "0" }}
+        styles={{ body: {padding: "0"} }}
         zIndex={Layers.modal}
         modalRender={(node) => (
           <ModalStyled $background={background} onClick={() => {}}>

client/packages/lowcoder/src/comps/hooks/drawerComp.tsx

@@ -127,7 +127,12 @@ let TmpDrawerComp = (function () {
               onResizeStop={onResizeStop}
               rootStyle={props.visible.value ? { overflow: "auto", pointerEvents: "auto" } : {}}
               contentWrapperStyle={{ maxHeight: "100%", maxWidth: "100%" }}
-              bodyStyle={{ padding: 0, backgroundColor: props.style.background }}
+              styles={{
+                body: {
+                  padding: 0,
+                  backgroundColor: props.style.background
+                }
+              }}
               closable={false}
               placement={props.placement}
               open={props.visible.value}

client/packages/lowcoder/src/comps/hooks/modalComp.tsx

@@ -113,7 +113,7 @@ let TmpModalComp = (function () {
               focusTriggerAfterClose={false}
               getContainer={() => document.querySelector(`#${CanvasContainerID}`) || document.body}
               footer={null}
-              bodyStyle={bodyStyle}
+              styles={{body: bodyStyle}}
               width={width}
               onCancel={(e) => {
                 props.visible.onChange(false);

client/packages/lowcoder/src/pages/common/copyModal.tsx

@@ -31,10 +31,11 @@ export function CopyModal(props: CopyModalProps) {
     )?.folderId || ""
   );
   const { visible, close, name, type, id } = props;
-
+  const appName = name.length > 25 ? `${name.substring(0, 25)}...` : name;
+  
   return (
     <CustomModal
-      title={trans("home.copyModalTitle", { name })}
+      title={trans("home.copyModalTitle", {name: appName})}
       open={visible}
       okButtonProps={{ disabled: !copyName }}
       destroyOnClose={true}

client/packages/lowcoder/src/pages/datasource/datasourceList.tsx

@@ -109,7 +109,7 @@ export const DatasourceList = () => {
   return (
     <DatasourceWrapper>
       <StepModal
-       open={isCreateFormShow}
+        open={isCreateFormShow}
         onCancel={() => showCreateForm(false)}
         activeStepKey={"type"}
         destroyOnClose={true}

client/packages/lowcoder/src/pages/editor/LeftContent.tsx

@@ -64,9 +64,10 @@ function toDataView(value: any, name: string, desc?: ReactNode) {
   } else if (_.isPlainObject(value)) {
     return <CollapseView name={name} desc={descRecord} data={value} key={name} />;
   }
+
   return (
     <PadDiv key={name}>
-      <Tooltip title={desc} placement={"right"} popupVisible={!!desc}>
+      <Tooltip title={desc} placement={"right"}>
         <Label label={name} />
         &#8203;
       </Tooltip>
@@ -150,7 +151,6 @@ const CollapseView = React.memo(
               <Tooltip
                 title={props.desc?.[props.name]}
                 placement={"right"}
-                popupVisible={!!props.desc?.[props.name]}
               >
                 <CollapseTitleWrapper onClick={() => props.onClick && props.onClick(props.name)}>
                   <Title

client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx

@@ -292,11 +292,13 @@ export default function BottomMetaDrawer(props: BottomMetaDrawerProps) {
           zIndex: 2,
         }}
         title={<DrawerTitleView />}
-        headerStyle={headerWrapperStyle}
-        bodyStyle={{
-          padding: "0 0 0 8px",
-          scrollbarGutter: "stable",
-          overflowX: "hidden",
+        styles={{
+          header: headerWrapperStyle,
+          body: {
+            padding: "0 0 0 8px",
+            overflowX: "hidden",
+            scrollbarGutter: "stable",
+          }
         }}
         placement="bottom"
         closable={false}

client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx

@@ -405,7 +405,14 @@ export function UserDetailPopup(props: { userId: string; title: string }) {
       </OperationLink>
       <CustomModal
         width={550}
-        bodyStyle={{ maxHeight: "500px", overflow: "auto", maxWidth: "550px", width: "550px" }}
+        styles={{ 
+          body: {
+            maxHeight: "500px",
+            overflow: "auto",
+            maxWidth: "550px",
+            width: "550px"
+          }
+        }}
         open={visible}
         onCancel={() => setVisible(false)}
         title={title}

client/packages/lowcoder/src/pages/setting/theme/createModal.tsx

@@ -121,7 +121,7 @@ function CreateModal(props: CreateModalProp) {
       <ScrollBarStyled
         style={{
           height: themeList?.length ? (themeList?.length > 3 ? "363px" : "313px") : "156px",
-          marginBottom: (!!themeList?.length && themeList?.length) > 3 ? "4px" : "0",
+          marginBottom: (!!themeList?.length && themeList?.length > 3) ? "4px" : "0",
         }}
       >
         <SelectTitle>{trans("theme.defaultThemeTip")}</SelectTitle>

client/packages/lowcoder/src/pages/setting/theme/themeList.tsx

@@ -39,6 +39,7 @@ function ThemeList(props: ThemeListProp) {
   }
   return (
     <TableStyled
+      id="theme-list-table"
       ref={tableRef}
       rowKey="id"
       pagination={false}
@@ -153,7 +154,7 @@ function ThemeList(props: ThemeListProp) {
               <ListDropdown onClick={(e) => e.stopPropagation()}>
                 <Dropdown
                   trigger={["click"]}
-                  getPopupContainer={() => tableRef.current!}
+                  getPopupContainer={() => document.getElementById("theme-list-table")!}
                   dropdownRender={() => (
                     <Menu
                       onClick={(params) => {