@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/field/components/DatePicker/index.js

@@ -1,37 +1,16 @@
-import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import React, { useState } from 'react';
 import { useIntl } from "../../../provider";
-import { FieldLabel, parseValueToDay } from "../../../utils";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldDatePickerEdit } from "./FieldDatePickerEdit";
+import { FieldDatePickerLightEdit } from "./FieldDatePickerLightEdit";
+import { FieldDatePickerRead } from "./FieldDatePickerRead";
 import { jsx as _jsx } from "react/jsx-runtime";
 dayjs.extend(weekOfYear);
-const formatDate = (text, format) => {
-  if (!text) return '-';
-  if (typeof format === 'function') {
-    return format(dayjs(text));
-  } else {
-    return dayjs(text).format((Array.isArray(format) ? format[0] : format) || 'YYYY-MM-DD');
-  }
-};
 
 /**
  * 日期选择组件
- *
- * @param text
- * @param mode
- * @param format
- * @param label
- * @param light
- * @param render
- * @param formItemRender
- * @param showTime
- * @param fieldProps
- * @param picker
- * @param lightLabel
- * @param variant
- * @param ref
  */
 const FieldDatePicker = ({
   text,
@@ -49,76 +28,45 @@ const FieldDatePicker = ({
 }, ref) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
-  if (mode === 'read') {
-    const dom = formatDate(text, fieldProps.format || format);
-    if (render) {
-      return render(text, {
-        mode,
-        ...fieldProps
-      }, /*#__PURE__*/_jsx(_Fragment, {
-        children: dom
-      }));
-    }
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: dom
+  if (isProFieldReadMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldDatePickerRead, {
+      text: text,
+      mode: mode,
+      format: format,
+      label: label,
+      light: light,
+      render: render,
+      formItemRender: formItemRender,
+      showTime: showTime,
+      fieldProps: fieldProps,
+      picker: picker,
+      lightLabel: lightLabel,
+      variant: variant
     });
   }
-  if (mode === 'edit' || mode === 'update') {
-    let dom;
-    const {
-      disabled,
-      value,
-      placeholder = intl.getMessage('tableForm.selectPlaceholder', '请选择')
-    } = fieldProps;
-    const dayValue = parseValueToDay(value);
+  if (isProFieldEditOrUpdateMode(mode)) {
+    const editProps = {
+      text,
+      mode,
+      format,
+      label,
+      render,
+      formItemRender,
+      showTime,
+      fieldProps,
+      picker,
+      variant,
+      intl
+    };
     if (light) {
-      dom = /*#__PURE__*/_jsx(FieldLabel, {
-        label: label,
-        onClick: () => {
-          fieldProps?.onOpenChange?.(true);
-          setOpen(true);
-        },
-        style: dayValue ? {
-          paddingInlineEnd: 0
-        } : undefined,
-        disabled: disabled,
-        value: dayValue || open ? /*#__PURE__*/_jsx(DatePicker, {
-          picker: picker,
-          showTime: showTime,
-          format: format,
-          ref: ref,
-          ...fieldProps,
-          value: dayValue,
-          onOpenChange: isOpen => {
-            setOpen(isOpen);
-            fieldProps?.onOpenChange?.(isOpen);
-          },
-          open: open
-        }) : undefined,
-        allowClear: false,
-        downIcon: dayValue || open ? false : undefined,
-        variant: variant,
-        ref: lightLabel
-      });
-    } else {
-      dom = /*#__PURE__*/_jsx(DatePicker, {
-        picker: picker,
-        showTime: showTime,
-        format: format,
-        placeholder: placeholder,
-        variant: variant,
-        ref: ref,
-        ...fieldProps,
-        value: dayValue
-      });
-    }
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode,
-        ...fieldProps
-      }, dom);
+      return FieldDatePickerLightEdit({
+        ...editProps,
+        lightLabel,
+        open,
+        setOpen
+      }, ref);
     }
-    return dom;
+    return FieldDatePickerEdit(editProps, ref);
   }
   return null;
 };

package/es/field/components/Digit/FieldDigitEdit.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+import type { FieldDigitProps } from './types';
+type Props = Parameters<ProFieldFC<FieldDigitProps>>[0] & {
+    placeholderValue: string;
+};
+export declare function FieldDigitEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/Digit/FieldDigitEdit.js

@@ -0,0 +1,25 @@
+import { InputNumber } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldDigitEdit(props, ref) {
+  const {
+    text,
+    mode: type,
+    formItemRender,
+    fieldProps,
+    placeholderValue
+  } = props;
+  const dom = /*#__PURE__*/_jsx(InputNumber, {
+    ref: ref,
+    min: 0,
+    placeholder: placeholderValue,
+    ...fieldProps
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/Digit/FieldDigitRead.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+import type { FieldDigitProps } from './types';
+export declare function FieldDigitRead(props: Parameters<ProFieldFC<FieldDigitProps>>[0], ref: React.Ref<unknown>): React.JSX.Element;

package/es/field/components/Digit/FieldDigitRead.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldDigitRead(props, ref) {
+  const {
+    text,
+    mode: type,
+    render,
+    fieldProps
+  } = props;
+  let fractionDigits = {};
+  if (fieldProps?.precision) {
+    fractionDigits = {
+      minimumFractionDigits: Number(fieldProps.precision),
+      maximumFractionDigits: Number(fieldProps.precision)
+    };
+  }
+  const digit = new Intl.NumberFormat(undefined, {
+    ...fractionDigits,
+    ...(fieldProps?.intlProps || {})
+  }).format(Number(text));
+  const dom = !fieldProps?.stringMode ? /*#__PURE__*/_jsx("span", {
+    ref: ref,
+    children: fieldProps?.formatter?.(digit) || digit
+  }) : /*#__PURE__*/_jsx("span", {
+    children: text
+  });
+  if (render) {
+    return render(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/Digit/index.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-export type FieldDigitProps = {
-    text: number;
-    placeholder?: string;
-};
+import type { FieldDigitProps } from './types';
+export type { FieldDigitProps };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & FieldDigitProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Digit/index.js

@@ -1,28 +1,10 @@
-import { omit } from '@rc-component/util';
-import { InputNumber } from 'antd';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useIntl } from "../../../provider";
-import { isNil } from "../../../utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 判断字符串是否为空或仅包含空白字符
- * @param {string} str - 要检查的字符串
- * @returns {boolean} - 如果为空或仅包含空白字符返回 true，否则返回 false
- */
-function isEmptyOrWhitespace(str) {
-  return isNil(str) || str === '' || str?.trim() === '';
-}
-
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldDigitEdit } from "./FieldDigitEdit";
+import { FieldDigitRead } from "./FieldDigitRead";
 /**
  * 数字组件
- *
- * @param text
- * @param type
- * @param render
- * @param placeholder
- * @param formItemRender
- * @param fieldProps
- * @param ref
  */
 const FieldDigit = ({
   text,
@@ -34,86 +16,26 @@ const FieldDigit = ({
 }, ref) => {
   const intl = useIntl();
   const placeholderValue = placeholder || intl.getMessage('tableForm.inputPlaceholder', '请输入');
-  const proxyChange = useCallback(value => {
-    let val = value ?? undefined;
-    if (!fieldProps.stringMode && typeof val === 'string') {
-      // 处理无效输入，如 '22.22.22'
-      const numVal = Number(val);
-      if (isNaN(numVal)) {
-        // 如果转换失败，尝试提取第一个有效的数字
-        const match = val.match(/^(\d+(?:\.\d+)?)/);
-        if (match) {
-          val = Number(match[1]);
-        } else {
-          val = undefined;
-        }
-      } else {
-        val = numVal;
-      }
-    }
-    if (typeof val === 'number' && !isNil(val) && !isNil(fieldProps.precision)) {
-      val = Number(val.toFixed(fieldProps.precision));
-    }
-    return val;
-  }, [fieldProps]);
-  if (type === 'read') {
-    let fractionDigits = {};
-    if (fieldProps?.precision) {
-      fractionDigits = {
-        minimumFractionDigits: Number(fieldProps.precision),
-        maximumFractionDigits: Number(fieldProps.precision)
-      };
-    }
-    const digit = new Intl.NumberFormat(undefined, {
-      ...fractionDigits,
-      ...(fieldProps?.intlProps || {})
-    }).format(Number(text));
-
-    // 如果是 string 模式，什么都不要处理了
-    const dom = !fieldProps?.stringMode ? /*#__PURE__*/_jsx("span", {
-      ref: ref,
-      children: fieldProps?.formatter?.(digit) || digit
-    }) : /*#__PURE__*/_jsx("span", {
-      children: text
-    });
-    if (render) {
-      return render(text, {
-        mode: type,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+  if (isProFieldReadMode(type)) {
+    return FieldDigitRead({
+      text,
+      mode: type,
+      render,
+      placeholder,
+      formItemRender,
+      fieldProps
+    }, ref);
   }
-  if (type === 'edit' || type === 'update') {
-    const dom = /*#__PURE__*/_jsx(InputNumber, {
-      ref: ref,
-      min: 0,
-      placeholder: placeholderValue,
-      ...omit(fieldProps, ['onChange', 'onBlur']),
-      onChange: e => fieldProps?.onChange?.(proxyChange(e)),
-      onBlur: e => {
-        const value = e.target.value;
-        if (isEmptyOrWhitespace(value)) {
-          fieldProps?.onBlur?.(e);
-          return;
-        }
-        const processedValue = proxyChange(value);
-        // 更新输入框的值
-        if (e.target && typeof processedValue === 'number') {
-          e.target.value = processedValue.toString();
-          // 触发 onChange 事件以更新表单值
-          fieldProps?.onChange?.(processedValue);
-        }
-        fieldProps?.onBlur?.(e);
-      }
-    });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode: type,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+  if (isProFieldEditOrUpdateMode(type)) {
+    return FieldDigitEdit({
+      text,
+      mode: type,
+      render,
+      placeholder,
+      formItemRender,
+      fieldProps,
+      placeholderValue
+    }, ref);
   }
   return null;
 };

package/es/field/components/Digit/types.d.ts

@@ -0,0 +1,4 @@
+export type FieldDigitProps = {
+    text: number;
+    placeholder?: string;
+};

package/es/field/components/Digit/types.js

@@ -0,0 +1 @@
+export {};

package/es/field/components/DigitRange/FieldDigitRangeEdit.d.ts

@@ -0,0 +1,16 @@
+import React, { MutableRefObject } from 'react';
+import type { ProFieldFC } from '../../types';
+import type { FieldDigitRangeProps, ValuePair } from './types';
+type Props = Parameters<ProFieldFC<FieldDigitRangeProps>>[0] & {
+    valuePair: ValuePair | undefined;
+    valuePairRef: MutableRefObject<ValuePair | undefined>;
+    setValuePair: (updater: ValuePair | undefined | ((prev: ValuePair | undefined) => ValuePair | undefined)) => void;
+    token: {
+        colorBgContainer?: string;
+        colorBorder?: string;
+        colorTextSecondary?: string;
+    };
+    placeholderValue: string | string[];
+};
+export declare function FieldDigitRangeEdit(props: Props, _ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/DigitRange/FieldDigitRangeEdit.js

@@ -0,0 +1,87 @@
+import { InputNumber, Space } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function FieldDigitRangeEdit(props, _ref) {
+  const {
+    text,
+    mode: type,
+    formItemRender,
+    fieldProps,
+    separator = '~',
+    separatorWidth = 30,
+    valuePair,
+    valuePairRef,
+    setValuePair,
+    token,
+    placeholderValue
+  } = props;
+  const {
+    defaultValue
+  } = fieldProps;
+  const handleGroupBlur = () => {
+    if (Array.isArray(valuePairRef.current)) {
+      const [value0, value1] = valuePairRef.current;
+      if (typeof value0 === 'number' && typeof value1 === 'number' && value0 > value1) {
+        setValuePair([value1, value0]);
+        return;
+      }
+      if (value0 === undefined && value1 === undefined) {
+        setValuePair(undefined);
+      }
+    }
+  };
+  const handleChange = (index, changedValue) => {
+    const newValuePair = [...(valuePair || [])];
+    newValuePair[index] = changedValue === null ? undefined : changedValue;
+    valuePairRef.current = newValuePair;
+    setValuePair(newValuePair);
+  };
+  const getInputNumberPlaceholder = index => Array.isArray(placeholderValue) ? placeholderValue[index] : placeholderValue;
+  const dom = /*#__PURE__*/_jsxs(Space.Compact, {
+    block: true,
+    onBlur: handleGroupBlur,
+    children: [/*#__PURE__*/_jsx(InputNumber, {
+      ...fieldProps,
+      placeholder: getInputNumberPlaceholder(0),
+      style: {
+        width: `calc((100% - ${separatorWidth}px) / 2)`
+      },
+      value: valuePair?.[0],
+      defaultValue: defaultValue?.[0],
+      onChange: changedValue => handleChange(0, changedValue)
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: separatorWidth,
+        boxSizing: 'border-box',
+        border: `1px solid ${token?.colorBorder}`,
+        backgroundColor: token?.colorBgContainer,
+        color: token?.colorTextSecondary,
+        pointerEvents: 'none',
+        userSelect: 'none'
+      },
+      children: separator
+    }), /*#__PURE__*/_jsx(InputNumber, {
+      ...fieldProps,
+      placeholder: getInputNumberPlaceholder(1),
+      style: {
+        width: `calc((100% - ${separatorWidth}px) / 2)`,
+        borderInlineStart: 0
+      },
+      value: valuePair?.[1],
+      defaultValue: defaultValue?.[1],
+      onChange: changedValue => handleChange(1, changedValue)
+    })]
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/DigitRange/FieldDigitRangeRead.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+import type { FieldDigitRangeProps } from './types';
+export declare function FieldDigitRangeRead(props: Parameters<ProFieldFC<FieldDigitRangeProps>>[0], ref: React.Ref<unknown>): React.JSX.Element;

package/es/field/components/DigitRange/FieldDigitRangeRead.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function FieldDigitRangeRead(props, ref) {
+  const {
+    text,
+    mode: type,
+    render,
+    fieldProps,
+    separator = '~'
+  } = props;
+  const getContent = number => {
+    const digit = new Intl.NumberFormat(undefined, {
+      minimumSignificantDigits: 2,
+      ...(fieldProps?.intlProps || {})
+    }).format(Number(number));
+    return fieldProps?.formatter?.(digit) || digit;
+  };
+  const dom = /*#__PURE__*/_jsxs("span", {
+    ref: ref,
+    children: [getContent(text[0]), " ", separator, " ", getContent(text[1])]
+  });
+  if (render) {
+    return render(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/DigitRange/index.d.ts

@@ -1,11 +1,5 @@
 import React from 'react';
-export type Value = string | number | undefined | null;
-export type ValuePair = Value[];
-export type FieldDigitRangeProps = {
-    text: ValuePair;
-    placeholder?: string | string[];
-    separator?: string;
-    separatorWidth?: number;
-};
+import type { FieldDigitRangeProps } from './types';
+export type { FieldDigitRangeProps, Value, ValuePair } from './types';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & FieldDigitRangeProps & React.RefAttributes<any>>;
 export default _default;