Merge pull request #655 from raheeliftikhar5/antd-upgrade-5.13.2

upgrade antd to v5.13.2

Author: FalkWolsky

client/packages/lowcoder/package.json

@@ -38,7 +38,7 @@
     "agora-access-token": "^2.0.4",
     "agora-rtc-sdk-ng": "^4.19.0",
     "agora-rtm-sdk": "^1.5.1",
-    "antd": "^5.12.5",
+    "antd": "^5.13.2",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",

client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx

@@ -369,10 +369,10 @@ const PermissionSelector = (props: {
             width: "fit-content",
           }}
           $isVisible={roleSelectVisible}
-          bordered={false}
+          variant="borderless"
           defaultValue={props.supportRoles[0]}
           optionLabelProp="label"
-          onChange={(value) => setSelectRole(value)}
+          onChange={(value: string) => setSelectRole(value as ApplicationRoleType)}
         >
           {props.supportRoles.map((role) => (
             <CustomSelect.Option key={role.value} value={role.value} label={role.label}>

client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx

@@ -119,7 +119,7 @@ function PermissionLiItem(props: {
             width: "100px",
           }}
           defaultValue={permissionItem.role}
-          bordered={false}
+          variant="borderless"
           optionLabelProp="label"
           onSelect={(value: any, option: any) => {
             if (option.key === "delete") {

client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx

@@ -13,7 +13,7 @@ import { omit } from "lodash";
 
 const { RangePicker } = DatePicker;
 
-const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $style: DateTimeStyleType }>`
+const RangePickerStyled = styled(RangePicker)<{ $style: DateTimeStyleType }>`
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;

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

@@ -509,8 +509,11 @@ let MTComp = (function () {
                   ? { overflow: "auto", pointerEvents: "auto" }
                   : {}
               }
-              contentWrapperStyle={{ maxHeight: "100%", maxWidth: "100%" }}
               styles={{
+                wrapper: {
+                  maxHeight: "100%",
+                  maxWidth: "100%"
+                }, 
                 body: {
                   padding: 0,
                   backgroundColor: props.style.background,

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

@@ -65,7 +65,7 @@ export const ColumnNumberComp = (function () {
           step={step}
           defaultValue={props.value}
           autoFocus
-          bordered={false}
+          variant="borderless"
           onChange={(value) => {
             value = value ?? 0;
             props.onChange(!float ? Math.floor(value) : value);

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx

@@ -170,7 +170,7 @@ export const DateEdit = (props: DateEditProps) => {
         superNextIcon={<IconSuperNext />}
         superPrevIcon={<SuperPrevIcon />}
         allowClear={false}
-        bordered={false}
+        variant="borderless"
         autoFocus
         defaultValue={value}
         showTime={props.showTime}

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx

@@ -31,7 +31,7 @@ export const ImageComp = (function () {
       <Input
         defaultValue={props.value}
         autoFocus
-        bordered={false}
+        variant="borderless"
         onChange={(e) => {
           const value = e.target.value;
           props.onChange(value);

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx

@@ -59,7 +59,7 @@ export const LinkComp = (function () {
       <Input
         defaultValue={props.value}
         autoFocus
-        bordered={false}
+        variant="borderless"
         onChange={(e) => {
           const value = e.target.value;
           props.onChange(value);

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx

@@ -45,7 +45,7 @@ export const ColumnMarkdownComp = (function () {
       <Input
         defaultValue={props.value}
         autoFocus
-        bordered={false}
+        variant="borderless"
         onChange={(e) => {
           const value = e.target.value;
           props.onChange(value);

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx

@@ -94,7 +94,7 @@ export const ProgressComp = (function () {
           max={100}
           defaultValue={props.value}
           autoFocus
-          bordered={false}
+          variant="borderless"
           controls={{ upIcon: <TablePlusIcon />, downIcon: <TableMinusIcon /> }}
           onChange={(value) => {
             props.onChange(Number(value));

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx

@@ -53,14 +53,14 @@ const StatusEdit = (props: StatusEditPropsType) => {
       <CustomSelect
         autoFocus
         defaultOpen
-        bordered={false}
+        variant="borderless"
         optionLabelProp="children"
         open={open}
         defaultValue={props.value.value}
         style={{ width: "100%" }}
         suffixIcon={<PackUpIcon />}
         showSearch
-        onSearch={(value) => {
+        onSearch={(value: string) => {
           if (defaultStatus.findIndex((item) => item.text.includes(value)) < 0) {
             setStatus([
               ...defaultStatus,
@@ -77,7 +77,7 @@ const StatusEdit = (props: StatusEditPropsType) => {
             status: status.find((item) => item.text === value)?.status || "none",
           });
         }}
-        onChange={(value) => {
+        onChange={(value: string) => {
           props.onChange({
             value,
             status: status.find((item) => item.text === value)?.status || "none",

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

@@ -170,22 +170,22 @@ const TagEdit = (props: TagEditPropsType) => {
       <CustomSelect
         autoFocus
         defaultOpen
-        bordered={false}
+        variant="borderless"
         optionLabelProp="children"
         showSearch
         defaultValue={props.value}
         style={{ width: "100%" }}
         open={open}
         suffixIcon={<PackUpIcon />}
-        onSearch={(value) => {
+        onSearch={(value: string) => {
           if (defaultTags.findIndex((item) => item.includes(value)) < 0) {
             setTags([...defaultTags, value]);
           } else {
             setTags(defaultTags);
           }
           props.onChange(value);
         }}
-        onChange={(value) => {
+        onChange={(value: string | string[]) => {
           props.onChange(value);
         }}
         dropdownRender={(originNode: ReactNode) => (

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx

@@ -26,7 +26,7 @@ export const SimpleTextComp = (function () {
       <Input
         defaultValue={props.value}
         autoFocus
-        bordered={false}
+        variant="borderless"
         onChange={(e) => {
           const value = e.target.value;
           props.onChange(value);

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

@@ -126,8 +126,11 @@ let TmpDrawerComp = (function () {
               resizable={resizable}
               onResizeStop={onResizeStop}
               rootStyle={props.visible.value ? { overflow: "auto", pointerEvents: "auto" } : {}}
-              contentWrapperStyle={{ maxHeight: "100%", maxWidth: "100%" }}
               styles={{
+                wrapper: {
+                  maxHeight: "100%",
+                  maxWidth: "100%",
+                },
                 body: {
                   padding: 0,
                   backgroundColor: props.style.background

client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx

@@ -365,17 +365,17 @@ export function HomeLayout(props: HomeLayoutProps) {
       <OperationWrapper>
         {mode !== "folders" && mode !== "module" && (
           <FilterDropdown
-            bordered={false}
+            variant="borderless"
             value={filterBy}
-            onChange={(value) => setFilterBy(value as HomeResKey)}
+            onChange={(value: any) => setFilterBy(value as HomeResKey)}
             options={[
               getFilterMenuItem(HomeResTypeEnum.All),
               getFilterMenuItem(HomeResTypeEnum.Application),
               getFilterMenuItem(HomeResTypeEnum.Module),
               getFilterMenuItem(HomeResTypeEnum.Navigation),
               ...(mode !== "trash" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
             ]}
-            getPopupContainer={(node) => node}
+            getPopupContainer={(node: any) => node}
             suffixIcon={<ArrowSolidIcon />}
           />
         )}

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

@@ -280,11 +280,6 @@ export default function BottomMetaDrawer(props: BottomMetaDrawerProps) {
       <Drawer
         $vis={visible}
         mask={false}
-        contentWrapperStyle={{
-          height: "100%",
-          boxShadow: "none",
-          borderRadius: "0",
-        }}
         rootStyle={{
           position: "absolute",
           height: "100%",
@@ -294,6 +289,11 @@ export default function BottomMetaDrawer(props: BottomMetaDrawerProps) {
         title={<DrawerTitleView />}
         styles={{
           header: headerWrapperStyle,
+          wrapper: {
+            height: "100%",
+            boxShadow: "none",
+            borderRadius: "0",
+          },
           body: {
             padding: "0 0 0 8px",
             overflowX: "hidden",