refactor: antd component changes

Author: raheeliftikhar5

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/TriggeredDialog.tsx

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

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

@@ -1,5 +1,6 @@
 import { RgbaStringColorPicker } from "react-colorful";
 import { Popover } from "antd";
+import { ActionType } from '@rc-component/trigger/lib/interface';
 import {
   alphaOfRgba,
   toRGBA,
@@ -14,7 +15,7 @@ import { changeValueAction } from "lowcoder-core";
 
 interface ColorSelectProps {
   color: string;
-  trigger?: string;
+  trigger?: ActionType;
   dispatch?: (value: any) => void;
   changeColor?: (value: any) => void;
 }
@@ -35,7 +36,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
     <Popover
       trigger={trigger}
       destroyTooltipOnHide={true}
-      onVisibleChange={(value) => {
+      onOpenChange={(value) => {
         pickerColor.current = toRGBA(color);
         setVisible(value);
       }}

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

@@ -83,14 +83,14 @@ function CustomSelect(props: CustomSelectProps & AntdSelectProps) {
     innerRef,
     className,
     border,
-    dropdownClassName = "custom-ant-select-dropdown",
+    popupClassName = "custom-ant-select-dropdown",
     ...restProps
   } = props;
   return (
     <SelectWrapper className={className} ref={innerRef} border={border}>
       <AntdSelect
-        dropdownClassName={dropdownClassName}
-        dropdownMatchSelectWidth={false}
+        popupClassName={popupClassName}
+        popupMatchSelectWidth={false}
         suffixIcon={<PackUpIcon />}
         {...restProps}
       >

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

@@ -335,7 +335,7 @@ const FormSelect = (props: any) => {
           onChange(x);
           props.afterChange && props.afterChange(x);
         }}
-        dropdownMatchSelectWidth={false}
+        popupMatchSelectWidth={false}
         placeholder={props.placeholder}
         dropdownRender={props.dropdownRender}
       >

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

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
 import { Popover } from "antd";
+import { ActionType } from '@rc-component/trigger/lib/interface';
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
 import { trans } from "i18n/design";
@@ -274,7 +275,7 @@ export const IconSelectBase = (props: {
   children?: ReactNode;
   visible?: boolean;
   setVisible?: (v: boolean) => void;
-  trigger?: string;
+  trigger?: ActionType;
   leftOffset?: number;
   parent?: HTMLElement | null;
   searchKeywords?: Record<string, string>;
@@ -285,8 +286,8 @@ export const IconSelectBase = (props: {
       trigger={props.trigger}
       placement="left"
       align={{ offset: [props.leftOffset ?? 0, 0, 0, 0] }}
-      visible={props.visible}
-      onVisibleChange={setVisible}
+      open={props.visible}
+      onOpenChange={setVisible}
       getPopupContainer={parent ? () => parent : undefined}
       // hide the original background when dragging the popover is allowed
       overlayInnerStyle={{ border: "none", boxShadow: "none", background: "transparent" }}

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

@@ -68,8 +68,8 @@ const SimplePopover = (props: {
       destroyTooltipOnHide
       content={contentWithBox}
       trigger="click"
-      visible={visible}
-      onVisibleChange={setVisible}
+      open={visible}
+      onOpenChange={setVisible}
       placement="left"
       overlayStyle={{ width: "310px" }}
     >
@@ -100,8 +100,8 @@ const CustomPopover = (props: {
     <Popover
       content={contentWithBox}
       trigger="click"
-      visible={visible}
-      onVisibleChange={setVisible}
+      open={visible}
+      onOpenChange={setVisible}
       placement={props.type === "query" ? "top" : "left"}
       overlayStyle={{ width: "310px" }}
       align={{
@@ -225,8 +225,8 @@ const EditPopover = (props: EditPopoverProps) => {
         </>
       )}
       trigger="click"
-      visible={visible}
-      onVisibleChange={setVisible}
+      open={visible}
+      onOpenChange={setVisible}
       placement="bottomRight"
       // overlayStyle={{ width: "88px" }}
       align={{

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

@@ -182,9 +182,11 @@ function ToolTipLabel(
       color="#2c2c2c"
       title={title && <TooltipTitleWrapper>{title}</TooltipTitleWrapper>}
       overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
-      arrowPointAtCenter={true}
+      arrow={{
+        pointAtCenter: true
+      }}
       placement="top"
-      defaultVisible={false}
+      defaultOpen={false}
       trigger="hover"
       popupVisible={!!title}
       style={tooltipStyle}

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

@@ -64,7 +64,7 @@ export const PermissionDialog = (props: {
 
   return (
     <StepModal
-      visible={visible}
+      open={visible}
       destroyOnClose
       onCancel={() => {
         setActiveStepKey("view");

client/packages/lowcoder/src/components/ResCreatePanel.tsx

@@ -341,7 +341,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
         </ScrollBar>
       </Content>
       <CreateDataSourceModal
-        visible={visible}
+       open={visible}
         onCancel={() => setVisible(false)}
         onCreated={() => setVisible(false)}
       />