feat: 更新antd库到6.0

Author: mousheng

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

@@ -216,6 +216,11 @@ const DEFAULT_PROPS = {
 function CustomModalRender(props: Omit<CustomModalProps & ModalFuncProps, 'width'> & { width?: string | number }) {
   const nodeRef = React.useRef(null);
   const [enableDrag, setEnableDrag] = useState(true)
+  
+  const bodyStyles = typeof props.styles === 'object' && props.styles !== null && 'body' in props.styles 
+    ? props.styles.body 
+    : undefined;
+  
   return (
     <Draggable nodeRef={nodeRef} disabled={enableDrag || !props.draggable}>
       <ModalWrapper $width={props.width} ref={nodeRef}>
@@ -234,7 +239,7 @@ function CustomModalRender(props: Omit<CustomModalProps & ModalFuncProps, 'width
             />
           </ModalHeaderWrapper>
 
-          <div style={{ padding: "0 16px", ...props.styles?.body }}>{props.children}</div>
+          <div style={{ padding: "0 16px", ...bodyStyles }}>{props.children}</div>
 
           {props.footer === null || props.footer ? (
             props.footer
@@ -331,7 +336,9 @@ CustomModal.confirm = (props: {
         okText={props.okText}
         styles={{
           body: {
-            ...defaultConfirmProps.styles?.body,
+            ...(typeof defaultConfirmProps.styles === 'object' && defaultConfirmProps.styles !== null && 'body' in defaultConfirmProps.styles
+              ? defaultConfirmProps.styles.body
+              : undefined),
             ...props.bodyStyle,
           }
         }}

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

@@ -173,28 +173,29 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
               open={props.open}
               listHeight={props.lineHeight}
               classNames={{ popup: { root: "ob-dropdown-control-select" } }}
-              showSearch={props.showSearch}
-              filterOption={(input, option) => {
-                if (props.optionFilterProp) {
-                  const value = (option as any)[props.optionFilterProp];
-                  if (value && typeof value === "string") {
-                    return value.toLowerCase().includes(input.toLowerCase());
+              showSearch={props.showSearch ? {
+                filterOption: (input, option) => {
+                  if (props.optionFilterProp && typeof props.optionFilterProp === "string") {
+                    const value = (option as any)[props.optionFilterProp];
+                    if (value && typeof value === "string") {
+                      return value.toLowerCase().includes(input.toLowerCase());
+                    }
                   }
-                }
 
-                if (!option?.value) {
+                  if (!option?.value) {
+                    return false;
+                  }
+                  const label = valueInfoMap[option.value].label;
+                  if (
+                    typeof label === "number" ||
+                    typeof label === "string" ||
+                    typeof label === "boolean"
+                  ) {
+                    return label.toString().toLowerCase().includes(input.toLowerCase());
+                  }
                   return false;
                 }
-                const label = valueInfoMap[option.value].label;
-                if (
-                  typeof label === "number" ||
-                  typeof label === "string" ||
-                  typeof label === "boolean"
-                ) {
-                  return label.toString().toLowerCase().includes(input.toLowerCase());
-                }
-                return false;
-              }}
+              } : false}
               border={props.border}
               defaultValue={props.defaultValue}
               value={props.value}

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

@@ -53,13 +53,18 @@ export function Modal(props: ModalProps) {
     refreshRate: 50
   });
   // log.info("Modal. modalWidth: ", modalWidth, " width: ", size?.w, " detectWidth: ", detectWidth);
+  
+  const bodyStyles = typeof styles === 'object' && styles !== null && 'body' in styles 
+    ? styles.body 
+    : undefined;
+  
   return (
     <AntdModal
       width={width ?? modalWidth}
       styles={{
         body: {
           height: height ?? modalHeight,
-          ...styles?.body,
+          ...bodyStyles,
         }
       }}
       {...otherProps}

client/packages/barda/package.json

@@ -37,7 +37,7 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
-    "antd": "^5.24.5",
+    "antd": "^6.1.2",
     "axios": "^1.6.2",
     "barda-core": "workspace:^",
     "barda-design": "workspace:^",
@@ -64,6 +64,7 @@
     "prettier": "2.7.0",
     "qrcode.react": "^3.1.0",
     "rc-trigger": "^5.3.1",
+    "rc-virtual-list": "^3.19.2",
     "react": "^18.2.0",
     "react-colorful": "^5.5.1",
     "react-countup": "6.5.3",

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

@@ -20,14 +20,21 @@ import {
   StyledRoleSelect,
 } from "./commonComponents";
 import { getInitialsAndColorCode } from "util/stringUtils";
-import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Tag } from "antd";
+import type { ReactNode, MouseEvent } from "react";
 import { User } from "constants/userConstants";
 import { getUser } from "redux/selectors/usersSelectors";
 import { EmptyContent } from "pages/common/styledComponent";
 import { trans } from "i18n";
 import { PermissionItem } from "./PermissionList";
 
+interface CustomTagProps {
+  label: ReactNode;
+  value: any;
+  closable: boolean;
+  onClose?: (event?: MouseEvent<HTMLElement>) => void;
+}
+
 const AddAppUserContent = styled.div`
   display: flex;
   flex-direction: column;

client/packages/barda/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx

@@ -2,7 +2,7 @@ import { getDayJSLocale } from "@barda/i18n/dayjsLocale";
 import { InputRef } from "antd";
 import { default as AntAutoComplete } from "antd/es/auto-complete";
 import { default as AntInput } from "antd/es/input";
-import { BaseOptionType, DefaultOptionType } from "antd/es/select";
+import { BaseOptionType } from "antd/es/select";
 import { Input, Section, sectionNames } from "barda-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { jsonControl } from "comps/controls/codeControl";
@@ -23,7 +23,6 @@ import { allowClearPropertyView, hiddenPropertyView } from "comps/utils/property
 import { trans } from "i18n";
 import _ from "lodash";
 import { pinyin } from "pinyin-pro";
-import { FilterFunc } from "rc-select/lib/Select";
 import { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
@@ -241,10 +240,10 @@ let AutoCompleteCompBase = (function () {
       props.onEvent("submit");
     };
 
-    const filterOption: FilterFunc<DefaultOptionType | BaseOptionType> = (
+    const filterOption = (
       inputValue: string,
       option?: BaseOptionType
-    ) => {
+    ): boolean => {
       var InputValueLowerCase = inputValue.toLowerCase();
       if (ignoreCase) {
         if (option!.label.toLowerCase().indexOf(InputValueLowerCase) !== -1) return true;

client/packages/barda/src/comps/comps/dateComp/dateUIView.tsx

@@ -16,7 +16,7 @@ const DatePickerStyled = styled(DatePicker) <{ $style: DateTimeStyleType }>`
 
 export interface DataUIViewProps extends DateCompViewProps {
   value: dayjs.Dayjs | null;
-  onChange: (date: unknown, dateString: string | string[]) => void;
+  onChange: (date: unknown, dateString: string | string[] | null) => void;
   onPanelChange: () => void;
 }
 

client/packages/barda/src/comps/comps/dividerComp.tsx

@@ -9,7 +9,6 @@ import _ from "lodash";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
 import { DividerStyle, DividerStyleType } from "comps/controls/styleControlConstants";
-import { migrateOldData } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
@@ -41,7 +40,7 @@ const childrenMap = {
 // Compatible with historical style data 2022-8-26
 export const DividerComp = new UICompBuilder(childrenMap, (props) => {
   return (
-    <StyledDivider orientation={props.align} $dashed={props.dashed} $style={props.style}>
+    <StyledDivider titlePlacement={props.align} $dashed={props.dashed} $style={props.style}>
       {props.title}
     </StyledDivider>
   );

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

@@ -21,7 +21,6 @@ import {
   RecordConstructorToComp,
   RecordConstructorToView,
 } from "barda-core";
-import { UploadRequestOption } from "rc-upload/lib/interface";
 import { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { JSONObject, JSONValue } from "../../../util/jsonTypes";
@@ -40,6 +39,8 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { messageInstance } from "barda-design";
 
+type UploadRequestOption = Parameters<NonNullable<UploadProps['customRequest']>>[0];
+
 const FileSizeControl = codeControl((value) => {
   if (typeof value === "number") {
     return value;

client/packages/barda/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -19,7 +19,7 @@ import { SelectOptionControl, optionsControl } from "../../controls/optionsContr
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Select as AntdSelect } from "antd";
 import { ControlParams } from "../../controls/controlParams";
-import { ReactNode } from "react";
+import { ReactNode, ComponentRef } from "react";
 import styled, { css } from "styled-components";
 import { MultiCompBuilder } from "../../generators";
 import { IconControl } from "../../controls/iconControl";
@@ -46,7 +46,6 @@ import {
 import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
-import { BaseSelectRef } from "rc-select";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { pinyin } from "pinyin-pro";
@@ -176,7 +175,7 @@ export const SelectChildrenMap = {
   allowClear: BoolControl,
   inputValue: stateComp<string>(""), // user's input value when search
   showSearch: BoolControl.DEFAULT_TRUE,
-  viewRef: RefControl<BaseSelectRef>,
+  viewRef: RefControl<ComponentRef<typeof AntdSelect>>,
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };
@@ -283,7 +282,7 @@ export const SelectPropertyView = (
   </>
 );
 
-export const baseSelectRefMethods = refMethods<BaseSelectRef>([focusMethod, blurMethod]);
+export const baseSelectRefMethods = refMethods<ComponentRef<typeof AntdSelect>>([focusMethod, blurMethod]);
 
 // ColorMapOption for color mapping
 let ColorMapOption = new MultiCompBuilder(