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)}
       />

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

@@ -1,4 +1,7 @@
-import { AjvError, ErrorListProps, UISchemaSubmitButtonOptions, withTheme } from "@rjsf/core";
+import { withTheme } from '@rjsf/core';
+import { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
+// import Ajv from "@rjsf/validator-ajv8";
 import { Button } from "antd";
 import { BoolControl } from "comps/controls/boolControl";
 import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl";
@@ -107,7 +110,7 @@ function convertData(schema?: JSONSchema7, data?: any) {
 // refer to ajv-i18n, https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js
 // https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#Validation-keywords
 // JSON schema refer to https://json-schema.org/understanding-json-schema/reference/
-function getErrorMessage(error: AjvError): string {
+function getErrorMessage(error: RJSFValidationError): string {
   switch (error.name) {
     case "required":
       return trans("jsonSchemaForm.required");
@@ -133,7 +136,7 @@ function getErrorMessage(error: AjvError): string {
   return "";
 }
 
-function transformErrors(errors: AjvError[]): AjvError[] {
+function transformErrors(errors: RJSFValidationError[]): RJSFValidationError[] {
   return errors.map((error) => {
     const message = getErrorMessage(error);
     if (message) {
@@ -194,13 +197,14 @@ let FormBasicComp = (function () {
       <Container $style={props.style}>
         <ErrorBoundary>
           <Form
+            validator={validator}
             schema={props.schema}
             uiSchema={props.uiSchema}
             formData={convertData(props.schema, props.data.value)}
             onSubmit={() => onSubmit(props)}
             onChange={(e) => props.data.onChange(e.formData)}
             transformErrors={(errors) => transformErrors(errors)}
-            ErrorList={ErrorList}
+            // ErrorList={ErrorList}
             children={
               <Button
                 hidden={buttonOptions?.norender}

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

@@ -243,11 +243,24 @@ enum TabKey {
 function PreloadConfigModal(props: ChildrenInstance) {
   const [activeKey, setActiveKey] = useState(TabKey.JavaScript);
   const { showScriptsAndStyleModal, changeExternalState } = useContext(ExternalEditorContext);
+  
+  const tabItems = [
+    {
+      key: TabKey.JavaScript,
+      label: 'JavaScript',
+      children: <JavaScriptTabPane comp={props.script} />
+    },
+    {
+      key: TabKey.CSS,
+      label: 'CSS',
+      children: <CSSTabPane comp={props.css} />
+    },
+  ]
   return (
     <CustomModal
       draggable
       mask={activeKey !== TabKey.CSS}
-      visible={showScriptsAndStyleModal}
+      open={showScriptsAndStyleModal}
       title={trans("preLoad.scriptsAndStyles")}
       destroyOnClose
       onCancel={() => changeExternalState?.({ showScriptsAndStyleModal: false })}
@@ -259,13 +272,8 @@ function PreloadConfigModal(props: ChildrenInstance) {
         onChange={(k) => setActiveKey(k as TabKey)}
         style={{ marginBottom: 8, marginTop: 4 }}
         activeKey={activeKey}
+        items={ tabItems }
       >
-        <Tabs.TabPane key={TabKey.JavaScript} tab="JavaScript">
-          <JavaScriptTabPane comp={props.script} />
-        </Tabs.TabPane>
-        <Tabs.TabPane key={TabKey.CSS} tab="CSS">
-          <CSSTabPane comp={props.css} />
-        </Tabs.TabPane>
       </Tabs>
     </CustomModal>
   );

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

@@ -1,5 +1,5 @@
 import { Tag } from "antd";
-import { PresetColorTypes } from "antd/lib/_util/colors";
+import { PresetStatusColorTypes } from "antd/lib/_util/colors";
 import { TagsContext } from "components/table/EditableCell";
 import {
   ColumnTypeCompBuilder,
@@ -16,7 +16,7 @@ import { hashToNum } from "util/stringUtils";
 import { CustomSelect, PackUpIcon } from "lowcoder-design";
 import { ScrollBar } from "lowcoder-design";
 
-const colors = PresetColorTypes;
+const colors = PresetStatusColorTypes;
 
 const isStringArray = (value: any) => {
   return (

client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx

@@ -655,7 +655,7 @@ function ToolbarPopover(props: {
   const popOverRef = useRef<HTMLDivElement>(null);
   return (
     <Popover
-      visible={visible}
+      open={visible}
       overlayStyle={{ pointerEvents: "auto" }}
       content={
         <div

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -1,4 +1,4 @@
-import { message, Tabs } from "antd";
+import { Tabs } from "antd";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
@@ -32,8 +32,7 @@ import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
-
-const { TabPane } = Tabs;
+import { messageInstance } from "lowcoder-design";
 
 const EVENT_OPTIONS = [
   {
@@ -163,6 +162,56 @@ const TabbedContainer = (props: TabbedContainerProps) => {
 
   // log.debug("TabbedContainer. props: ", props);
 
+  const tabItems = visibleTabs.map((tab) => {
+    // log.debug("Tab. tab: ", tab, " containers: ", containers);
+    const id = String(tab.id);
+    const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
+    const containerProps = containers[id].children;
+    const hasIcon = tab.icon.props.value;
+    const label = (
+      <>
+        {tab.iconPosition === "left" && hasIcon && (
+          <span style={{ marginRight: "4px" }}>{tab.icon}</span>
+        )}
+        {tab.label}
+        {tab.iconPosition === "right" && hasIcon && (
+          <span style={{ marginLeft: "4px" }}>{tab.icon}</span>
+        )}
+      </>
+    );
+    return {
+      label,
+      key: tab.key,
+      forceRender: true,
+      children: (
+        <BackgroundColorContext.Provider value={props.style.background}>
+          <ContainerInTab
+            layout={containerProps.layout.getView()}
+            items={gridItemCompToGridItems(containerProps.items.getView())}
+            positionParams={containerProps.positionParams.getView()}
+            dispatch={childDispatch}
+            autoHeight={props.autoHeight}
+            containerPadding={[paddingWidth, 20]}
+          />
+        </BackgroundColorContext.Provider>
+      )
+    }
+    // return (
+    //   <TabPane tab={label} key={tab.key} forceRender>
+    //     <BackgroundColorContext.Provider value={props.style.background}>
+    //       <ContainerInTab
+    //         layout={containerProps.layout.getView()}
+    //         items={gridItemCompToGridItems(containerProps.items.getView())}
+    //         positionParams={containerProps.positionParams.getView()}
+    //         dispatch={childDispatch}
+    //         autoHeight={props.autoHeight}
+    //         containerPadding={[paddingWidth, 20]}
+    //       />
+    //     </BackgroundColorContext.Provider>
+    //   </TabPane>
+    // );
+  })
+
   return (
     <div style={{padding: props.style.margin}}>
     <StyledTabs
@@ -178,39 +227,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
       animated
       $isMobile={isMobile}
       // tabBarGutter={32}
+      items={tabItems}
     >
-      {visibleTabs.map((tab) => {
-        // log.debug("Tab. tab: ", tab, " containers: ", containers);
-        const id = String(tab.id);
-        const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
-        const containerProps = containers[id].children;
-        const hasIcon = tab.icon.props.value;
-        const label = (
-          <>
-            {tab.iconPosition === "left" && hasIcon && (
-              <span style={{ marginRight: "4px" }}>{tab.icon}</span>
-            )}
-            {tab.label}
-            {tab.iconPosition === "right" && hasIcon && (
-              <span style={{ marginLeft: "4px" }}>{tab.icon}</span>
-            )}
-          </>
-        );
-        return (
-          <TabPane tab={label} key={tab.key} forceRender>
-            <BackgroundColorContext.Provider value={props.style.background}>
-              <ContainerInTab
-                layout={containerProps.layout.getView()}
-                items={gridItemCompToGridItems(containerProps.items.getView())}
-                positionParams={containerProps.positionParams.getView()}
-                dispatch={childDispatch}
-                autoHeight={props.autoHeight}
-                containerPadding={[paddingWidth, 20]}
-              />
-            </BackgroundColorContext.Provider>
-          </TabPane>
-        );
-      })}
     </StyledTabs>
     </div>
   );
@@ -293,7 +311,7 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai
         } as CompAction;
       }
       if (value.type === "delete" && this.children.tabs.getView().length <= 1) {
-        message.warn(trans("tabbedContainer.atLeastOneTabError"));
+        messageInstance.warning(trans("tabbedContainer.atLeastOneTabError"));
         // at least one tab
         return this;
       }