Merge pull request #1102 from lowcoder-org/antd-upgrade-5.19.4

Antd upgrade 5.20.0

Author: FalkWolsky

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

@@ -235,7 +235,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
         <SegmentedWrapper $placement={placement}>
           <Segmented
             block={true}
-            onChange={(value) => props.onChange(value.toString())}
+            onChange={(value) => props.onChange(String(value))}
             defaultValue={props.defaultValue}
             value={props.value}
             options={props.options as any}

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

@@ -181,7 +181,7 @@ const TacoButton = forwardRef(
     props: Omit<ButtonProps, "type"> & {
       buttonType?: TacoButtonType;
     },
-    ref: React.Ref<HTMLElement>
+    ref: React.Ref<HTMLButtonElement>
   ) => {
     const { buttonType, ...restProps } = props;
     let loadingBackground;

client/packages/lowcoder/package.json

@@ -37,7 +37,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
     "animate.css": "^4.1.1",
-    "antd": "5.13.2",
+    "antd": "^5.20.0",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",

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

@@ -1,11 +1,12 @@
 import { default as AntdSegmented } from "antd/es/segmented";
+import type { SegmentedProps } from "antd/es/segmented";
 import styled from "styled-components";
 
-type PropsType<T extends React.ForwardRefExoticComponent<any>> =
-  T extends React.ForwardRefExoticComponent<infer R> ? R : never;
-type SegmentedProps = PropsType<typeof AntdSegmented>;
+// type PropsType<T extends React.ForwardRefExoticComponent<any>> =
+//   T extends React.ForwardRefExoticComponent<infer R> ? R : never;
+// type SegmentedProps = PropsType<typeof AntdSegmented>;
 
-const StyledSegmented = styled(AntdSegmented)<PropsType<typeof AntdSegmented>>`
+const StyledSegmented = styled(AntdSegmented)<SegmentedProps>`
   width: 100%;
   height: 28px;
   border-radius: 6px;

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -21,7 +21,7 @@ import { trans } from "i18n";
 import React, { Suspense, useEffect, useRef, useState, useContext } from "react";
 import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
-import type { ItemType } from "antd/es/menu/hooks/useItems";
+import type { ItemType } from "antd/es/menu/interface";
 import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState"; 
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";

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

@@ -37,24 +37,19 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
-import React, { ReactNode, useContext, useEffect } from "react";
+import React, { ReactNode, useContext, useEffect, useState } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
-import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
+import { CommonPickerMethods, dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
 import { DateUIView } from "./dateUIView";
 import { useIsMobile } from "util/hooks";
 import { RefControl } from "comps/controls/refControl";
-import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
 import { EditorContext } from "comps/editorState";
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
-const defaultStyle = {
-  borderStyle: 'solid',
-  borderWidth: '1px',
-}
-
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
 const validationChildren = {
@@ -169,30 +164,39 @@ export type DateCompViewProps = Pick<
 };
 
 export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
- useMergeCompStyles(props as Record<string, any>, dispatch);
-
-  let time = null;
+  useMergeCompStyles(props as Record<string, any>, dispatch);
+  
+  let time: dayjs.Dayjs | null = null;
   if (props.value.value !== '') {
     time = dayjs(props.value.value, DateParser);
   }
+  
+  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
+
+  useEffect(() => {
+    const value = props.value.value ? dayjs(props.value.value, DateParser) : null;
+    setTempValue(value);
+  }, [props.value.value])
 
   return props.label({
     required: props.required,
     style: props.style,
     labelStyle: props.labelStyle,
     inputFieldStyle:props.inputFieldStyle,
     animationStyle:props.animationStyle,
+    onMouseDown: (e) => e.stopPropagation(),
     children: (
       <DateUIView
         viewRef={props.viewRef}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         $style={props.inputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
+        hourStep={props.hourStep}
         minDate={props.minDate}
         maxDate={props.maxDate}
         placeholder={props.placeholder}
-        value={time?.isValid() ? time : null}
+        value={tempValue?.isValid() ? tempValue : null}
         onChange={(time) => {
           handleDateChange(
             time && time.isValid()
@@ -293,24 +297,37 @@ export const dateRangeControl = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     useMergeCompStyles(props as Record<string, any>, dispatch);
 
-    let start = null;
-    let end = null;
+    let start: dayjs.Dayjs | null = null;
     if (props.start.value !== '') {
       start = dayjs(props.start.value, DateParser);
     }
-
+    
+    let end: dayjs.Dayjs | null = null;
     if (props.end.value !== '') {
       end = dayjs(props.end.value, DateParser);
     }
 
+    const [tempStartValue, setTempStartValue] = useState<dayjs.Dayjs | null>(start);
+    const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(end);
+
+    useEffect(() => {
+      const value = props.start.value ? dayjs(props.start.value, DateParser) : null;
+      setTempStartValue(value);
+    }, [props.start.value])
+
+    useEffect(() => {
+      const value = props.end.value ? dayjs(props.end.value, DateParser) : null;
+      setTempEndValue(value);
+    }, [props.end.value])
+
     const children = (
       <DateRangeUIView
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
-        start={start?.isValid() ? start : null}
-        end={end?.isValid() ? end : null}
+        start={tempStartValue?.isValid() ? tempStartValue : null}
+        end={tempEndValue?.isValid() ? tempEndValue : null}
         minDate={props.minDate}
         maxDate={props.maxDate}
         placeholder={[props.placeholder, props.placeholder]}
@@ -345,6 +362,7 @@ export const dateRangeControl = (function () {
       labelStyle:props.labelStyle,
       children: children,
       inputFieldStyle:props.inputFieldStyle,
+      onMouseDown: (e) => e.stopPropagation(),
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"

client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

@@ -4,10 +4,15 @@ import { range } from "lodash";
 import { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { css } from "styled-components";
 import { isDarkColor, lightenColor } from "components/colorSelect/colorUtils";
-import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { refMethods } from "comps/generators/withMethodExposing";
 
+export interface CommonPickerMethods {
+  focus: (options?: FocusOptions) => void;
+  blur: VoidFunction;
+};
+
 export const handleDateChange = (
   time: string,
   onChange: (value: string) => Promise<unknown>,

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

@@ -10,14 +10,21 @@ import { DataUIViewProps } from "comps/comps/dateComp/dateUIView";
 import { default as SwapRightOutlined } from "@ant-design/icons/SwapRightOutlined"
 import { DateRangeUIViewProps } from "comps/comps/dateComp/dateRangeUIView";
 import { DateCompViewProps } from "comps/comps/dateComp/dateComp";
+import type { DatePickerProps } from "antd/es/date-picker";
+import type { Dayjs } from "dayjs";
+
+interface DateMobileUIViewProps extends Omit<DataUIViewProps, 'onChange'> {
+  onChange: (value: dayjs.Dayjs | null) => void;
+}
 
 const handleClick = async (
   params: Pick<
     DateCompViewProps,
     "showTime" | "minDate" | "maxDate" | "disabledTime" | "onFocus" | "onBlur"
   > & {
-    value: dayjs.Dayjs | null;
-    onChange: (value: dayjs.Dayjs | null) => void;
+    value?: dayjs.Dayjs | null;
+    // onChange: (value: dayjs.Dayjs | null) => void;
+    onChange: DatePickerProps<Dayjs>['onChange'];
   }
 ) => {
   const MobileDatePicker = (await import("antd-mobile/es/components/date-picker")).default;
@@ -45,7 +52,8 @@ const handleClick = async (
     },
     onConfirm: (value) => {
       const time = dayjs(value);
-      params.onChange(time);
+      const timeString = time.format(params.showTime ? DATE_TIME_FORMAT : DATE_FORMAT);
+      params.onChange?.(time, timeString);
     },
     onClose: params.onBlur,
   });

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

@@ -10,6 +10,7 @@ import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
+import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
 
 const { RangePicker } = DatePicker;
 
@@ -57,6 +58,11 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
       placeholder={placeholders}
+      minDate={props.minDate ? dayjs(props.minDate, DateParser) : undefined}
+      maxDate={props.maxDate ? dayjs(props.maxDate, DateParser) : undefined}
+      hourStep={props.hourStep as any}
+      minuteStep={props.minuteStep as any}
+      secondStep={props.secondStep as any}
     />
   );
 };

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

@@ -8,16 +8,20 @@ import styled from "styled-components";
 import type { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
+import type { DatePickerProps } from "antd/es/date-picker";
+import type { Dayjs } from 'dayjs';
+import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
 
-const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
+const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
   width: 100%;
   box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
+
 export interface DataUIViewProps extends DateCompViewProps {
-  value: dayjs.Dayjs | null;
-  onChange: (value: dayjs.Dayjs | null) => void;
+  value?: DatePickerProps<Dayjs>['value'];
+  onChange: DatePickerProps<Dayjs>['onChange'];
   onPanelChange: () => void;
 }
 
@@ -29,12 +33,17 @@ export const DateUIView = (props: DataUIViewProps) => {
   const editorState = useContext(EditorContext);
 
   const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder;
-
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
       {...props}
+      multiple={false}
       ref={props.viewRef as any}
+      minDate={props.minDate ? dayjs(props.minDate, DateParser) : undefined}
+      maxDate={props.maxDate ? dayjs(props.maxDate, DateParser) : undefined}
+      hourStep={props.hourStep as any}
+      minuteStep={props.minuteStep as any}
+      secondStep={props.secondStep as any}
       disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
       picker={"date"}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}

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

@@ -40,15 +40,15 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
-import React, { ReactNode, useContext, useEffect } from "react";
+import React, { ReactNode, useContext, useEffect, useState } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
-import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
+import { CommonPickerMethods, dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
 import { TimeUIView } from "./timeUIView";
 import { TimeRangeUIView } from "comps/comps/dateComp/timeRangeUIView";
 import { RefControl } from "comps/controls/refControl";
-import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { TimePickerProps } from "antd/es/time-picker";
 
 import { EditorContext } from "comps/editorState";
@@ -146,23 +146,31 @@ export type TimeCompViewProps = Pick<
 export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
   useMergeCompStyles(props as Record<string, any>, dispatch);
 
-  let time = null;
+  let time: dayjs.Dayjs | null = null;
   if(props.value.value !== '') {
     time = dayjs(props.value.value, TimeParser);
   }
+  
+  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
+
+  useEffect(() => {
+    const value = props.value.value ? dayjs(props.value.value, TimeParser) : null;
+    setTempValue(value);
+  }, [props.value.value])
 
   return props.label({
     required: props.required,
     style: props.style,
     labelStyle: props.labelStyle,
     inputFieldStyle:props.inputFieldStyle,
     animationStyle:props.animationStyle,
+    onMouseDown: (e) => e.stopPropagation(),
     children: (
       <TimeUIView
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
         disabled={props.disabled}
-        value={time?.isValid() ? time : null}
+        value={tempValue?.isValid() ? tempValue : null}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         {...timePickerComps(props)}
         hourStep={props.hourStep as hourStepType}
@@ -258,22 +266,35 @@ export const timeRangeControl = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     useMergeCompStyles(props as Record<string, any>, dispatch);
 
-    let start = null;
+    let start: dayjs.Dayjs | null = null;
     if(props.start.value !== '') {
       start = dayjs(props.start.value, TimeParser);
     }
-    let end = null;
+    let end: dayjs.Dayjs | null = null;
     if(props.end.value !== '') {
       end = dayjs(props.end.value, TimeParser);
     }
 
+    const [tempStartValue, setTempStartValue] = useState<dayjs.Dayjs | null>(start);
+    const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(end);
+
+    useEffect(() => {
+      const value = props.start.value ? dayjs(props.start.value, TimeParser) : null;
+      setTempStartValue(value);
+    }, [props.start.value])
+
+    useEffect(() => {
+      const value = props.end.value ? dayjs(props.end.value, TimeParser) : null;
+      setTempEndValue(value);
+    }, [props.end.value])
+    
     const children = (
       <TimeRangeUIView
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
         disabled={props.disabled}
-        start={start?.isValid() ? start : null}
-        end={end?.isValid() ? end : null}
+        start={tempStartValue?.isValid() ? tempStartValue : null}
+        end={tempEndValue?.isValid() ? tempEndValue : null}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         {...timePickerComps(props)}
         hourStep={props.hourStep as hourStepType}
@@ -301,6 +322,7 @@ export const timeRangeControl = (function () {
       inputFieldStyle:props.inputFieldStyle,
       animationStyle:props.animationStyle,
       children: children,
+      onMouseDown: (e) => e.stopPropagation(),
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"