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

package/es/field/components/Money/InputNumberPopover.js

@@ -0,0 +1,92 @@
+import { useControlledState } from '@rc-component/util';
+import { InputNumber, Popover } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const InputNumberPopover = /*#__PURE__*/React.forwardRef(function InputNumberPopoverInner({
+  contentRender: content,
+  numberFormatOptions,
+  numberPopoverRender,
+  open,
+  onOpenChange,
+  ...rest
+}, ref) {
+  const [value, setValueInner] = useControlledState(() => rest.defaultValue, rest.value);
+
+  // 使用本地状态管理 Popover 显示，同时支持受控模式
+  const [localOpen, setLocalOpen] = useState(open ?? false);
+
+  // 跟踪组件挂载状态，防止在卸载后执行状态更新
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // 同步外部 open 属性到本地状态，支持受控模式
+  useEffect(() => {
+    if (open !== undefined) {
+      setLocalOpen(open);
+    }
+  }, [open]);
+  const onChange = useCallback(updater => {
+    setValueInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      rest.onChange?.(next);
+      return next;
+    });
+  }, [rest.onChange, setValueInner]);
+
+  // 优化的 onOpenChange 处理器
+  const handleOpenChange = useCallback(visible => {
+    // 通知父组件状态变化
+    onOpenChange?.(visible);
+
+    // 如果是受控模式（传入了 open prop），不更新本地状态
+    if (open === undefined) {
+      // 使用 queueMicrotask 延迟状态更新，避免在渲染期间触发 flushSync
+      queueMicrotask(() => {
+        // 检查组件是否仍然挂载，避免在卸载后更新状态
+        if (mountedRef.current) {
+          setLocalOpen(visible);
+        }
+      });
+    }
+  }, [open, onOpenChange]);
+
+  /**
+   * 如果content 存在要根据 content 渲染一下
+   */
+  const dom = content?.({
+    ...rest,
+    value
+  });
+
+  // 没有 dom 时不显示 Popover
+  if (!dom) {
+    return /*#__PURE__*/_jsx(InputNumber, {
+      ref: ref,
+      ...rest,
+      value: value,
+      onChange: onChange
+    });
+  }
+  return /*#__PURE__*/_jsx(Popover, {
+    placement: "topLeft",
+    open: localOpen,
+    onOpenChange: handleOpenChange,
+    trigger: ['focus', 'click'],
+    content: dom,
+    getPopupContainer: triggerNode => {
+      return triggerNode?.parentElement || document.body;
+    },
+    children: /*#__PURE__*/_jsx(InputNumber, {
+      ref: ref,
+      ...rest,
+      value: value,
+      onChange: onChange
+    })
+  });
+});
+export default InputNumberPopover;

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

@@ -1,72 +1,5 @@
-import type { InputNumberProps } from 'antd';
 import React from 'react';
-export type FieldMoneyProps = {
-    text: number;
-    moneySymbol?: boolean;
-    locale?: string;
-    /**
-     * 输入框内容为空的提示内容
-     */
-    placeholder?: string;
-    /**
-     * 自定义 money 的 Symbol
-     */
-    customSymbol?: string;
-    /**
-     * 自定义 Popover 的值，false 可以关闭他
-     */
-    numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => React.ReactNode) | boolean;
-    /**
-     * NumberFormat 的配置，文档可以查看 mdn
-     *
-     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-     */
-    numberFormatOptions?: {
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        localeMatcher?: string;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        style?: string;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        currency?: string;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        currencyDisplay?: string;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        currencySign?: string;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        useGrouping?: boolean;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        minimumIntegerDigits?: number;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        minimumFractionDigits?: number;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        maximumFractionDigits?: number;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        minimumSignificantDigits?: number;
-        /**
-         * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-         */
-        maximumSignificantDigits?: number;
-    };
-};
+import type { FieldMoneyProps } from './types';
+export type { FieldMoneyProps };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & FieldMoneyProps & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,210 +1,11 @@
-import { omit, useControlledState } from '@rc-component/util';
-import { InputNumber, Popover } from 'antd';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { intlMap as allIntlMap, useIntl } from "../../../provider";
-import { jsx as _jsx } from "react/jsx-runtime";
-const defaultMoneyIntl = new Intl.NumberFormat('zh-Hans-CN', {
-  currency: 'CNY',
-  style: 'currency'
-});
-const enMoneyIntl = {
-  style: 'currency',
-  currency: 'USD'
-};
-const ruMoneyIntl = {
-  style: 'currency',
-  currency: 'RUB'
-};
-const rsMoneyIntl = {
-  style: 'currency',
-  currency: 'RSD'
-};
-const msMoneyIntl = {
-  style: 'currency',
-  currency: 'MYR'
-};
-const ptMoneyIntl = {
-  style: 'currency',
-  currency: 'BRL'
-};
-const intlMap = {
-  default: defaultMoneyIntl,
-  'zh-Hans-CN': {
-    currency: 'CNY',
-    style: 'currency'
-  },
-  'en-US': enMoneyIntl,
-  'ru-RU': ruMoneyIntl,
-  'ms-MY': msMoneyIntl,
-  'sr-RS': rsMoneyIntl,
-  'pt-BR': ptMoneyIntl
-};
-
-/**
- * A function that formats the number.
- * @param {string | false} locale - The currency symbol, which is the first parameter of the
- * formatMoney function.
- * @param {number | string | undefined} paramsText - The text to be formatted
- * @param {number} precision - number, // decimal places
- * @param {any} [config] - the configuration of the number format, which is the same as the
- * configuration of the number format in the Intl.NumberFormat method.
- * @returns A function that takes in 4 parameters and returns a string.
- */
-const getTextByLocale = (locale, paramsText, precision, config, moneySymbol = '') => {
-  let moneyText = paramsText?.toString().replaceAll(',', '');
-  if (typeof moneyText === 'string') {
-    const parsedNum = Number(moneyText);
-    // 转换数字为NaN时，返回原始值展示
-    if (Number.isNaN(parsedNum)) return moneyText;
-    moneyText = parsedNum;
-  }
-  if (!moneyText && moneyText !== 0) return '';
-  let supportFormat = false;
-  try {
-    supportFormat = locale !== false && Intl.NumberFormat.supportedLocalesOf([locale.replace('_', '-')], {
-      localeMatcher: 'lookup'
-    }).length > 0;
-  } catch (error) {}
-  try {
-    // Formatting the number, when readonly moneySymbol = false, unused currency.
-    const initNumberFormatter = new Intl.NumberFormat(supportFormat && locale !== false ? locale?.replace('_', '-') || 'zh-Hans-CN' : 'zh-Hans-CN', {
-      ...(intlMap[locale || 'zh-Hans-CN'] || defaultMoneyIntl),
-      maximumFractionDigits: precision,
-      ...config
-    });
-    const finalMoneyText = initNumberFormatter.format(moneyText);
-
-    // 同时出现两个符号的情况需要处理
-    const doubleSymbolFormat = Text => {
-      const match = Text.match(/\d+/);
-      if (match) {
-        const number = match[0];
-        return Text.slice(Text.indexOf(number));
-      } else {
-        return Text;
-      }
-    };
-    // 过滤一下，只留下数字
-    const pureMoneyText = doubleSymbolFormat(finalMoneyText);
-
-    /**
-     * 首字母判断是否是正负符号
-     */
-    const [operatorSymbol] = finalMoneyText || '';
-
-    // 兼容正负号
-    if (['+', '-'].includes(operatorSymbol)) {
-      return `${moneySymbol || ''}${operatorSymbol}${pureMoneyText}`;
-    }
-    return `${moneySymbol || ''}${pureMoneyText}`;
-  } catch (error) {
-    return moneyText;
-  }
-};
-
-// 默认的代码类型
-const DefaultPrecisionCont = 2;
-
-/**
- * input 的弹框，用于显示格式化之后的内容
- *
- * @result 10,000 -> 一万
- * @result 10, 00, 000, 000 -> 一亿
- */
-const InputNumberPopover = /*#__PURE__*/React.forwardRef(({
-  contentRender: content,
-  numberFormatOptions,
-  numberPopoverRender,
-  open,
-  onOpenChange,
-  ...rest
-}, ref) => {
-  const [value, setValueInner] = useControlledState(() => rest.defaultValue, rest.value);
-
-  // 使用本地状态管理 Popover 显示，同时支持受控模式
-  const [localOpen, setLocalOpen] = useState(open ?? false);
-
-  // 跟踪组件挂载状态，防止在卸载后执行状态更新
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  // 同步外部 open 属性到本地状态，支持受控模式
-  useEffect(() => {
-    if (open !== undefined) {
-      setLocalOpen(open);
-    }
-  }, [open]);
-  const onChange = useCallback(updater => {
-    setValueInner(prev => {
-      const next = typeof updater === 'function' ? updater(prev) : updater;
-      rest.onChange?.(next);
-      return next;
-    });
-  }, [rest.onChange, setValueInner]);
-
-  // 优化的 onOpenChange 处理器
-  const handleOpenChange = useCallback(visible => {
-    // 通知父组件状态变化
-    onOpenChange?.(visible);
-
-    // 如果是受控模式（传入了 open prop），不更新本地状态
-    if (open === undefined) {
-      // 使用 queueMicrotask 延迟状态更新，避免在渲染期间触发 flushSync
-      queueMicrotask(() => {
-        // 检查组件是否仍然挂载，避免在卸载后更新状态
-        if (mountedRef.current) {
-          setLocalOpen(visible);
-        }
-      });
-    }
-  }, [open, onOpenChange]);
-
-  /**
-   * 如果content 存在要根据 content 渲染一下
-   */
-  const dom = content?.({
-    ...rest,
-    value
-  });
-
-  // 没有 dom 时不显示 Popover
-  if (!dom) {
-    return /*#__PURE__*/_jsx(InputNumber, {
-      ref: ref,
-      ...rest,
-      value: value,
-      onChange: onChange
-    });
-  }
-  return /*#__PURE__*/_jsx(Popover, {
-    placement: "topLeft",
-    open: localOpen,
-    onOpenChange: handleOpenChange,
-    trigger: ['focus', 'click'],
-    content: dom,
-    getPopupContainer: triggerNode => {
-      return triggerNode?.parentElement || document.body;
-    },
-    children: /*#__PURE__*/_jsx(InputNumber, {
-      ref: ref,
-      ...rest,
-      value: value,
-      onChange: onChange
-    })
-  });
-});
-
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldMoneyEdit } from "./FieldMoneyEdit";
+import { FieldMoneyRead } from "./FieldMoneyRead";
+import { DefaultPrecisionCont } from "./moneyFormat";
 /**
  * 金额组件
- *
- * @param FieldMoneyProps {
- *     text: number;
- *     moneySymbol?: string; }
  */
 const FieldMoney = ({
   text,
@@ -223,18 +24,10 @@ const FieldMoney = ({
 }, ref) => {
   const precision = fieldProps?.precision ?? DefaultPrecisionCont;
   let intl = useIntl();
-  // 当手动传入locale时，应该以传入的locale为准，未传入时则根据全局的locale进行国际化
   if (locale && allIntlMap[locale]) {
     intl = allIntlMap[locale];
   }
   const placeholderValue = placeholder || intl.getMessage('tableForm.inputPlaceholder', '请输入');
-
-  /**
-   * 获取货币的符号
-   * 如果 customSymbol 存在直接使用 customSymbol
-   * 如果 moneySymbol 为 false，返回空
-   * 如果没有配置使用默认的
-   */
   const moneySymbol = useMemo(() => {
     if (customSymbol) {
       return customSymbol;
@@ -244,91 +37,55 @@ const FieldMoney = ({
     }
     return intl.getMessage('moneySymbol', '¥');
   }, [customSymbol, fieldProps.moneySymbol, intl, rest.moneySymbol]);
-
-  /*
-   * A function that formats the number.
-   * 1000 -> 1,000
-   */
   const getFormateValue = useCallback(value => {
-    // 新建数字正则，需要配置小数点
     const reg = new RegExp(`\\B(?=(\\d{${3 + Math.max(precision - DefaultPrecisionCont, 0)}})+(?!\\d))`, 'g');
-    // 切分为 整数 和 小数 不同
     const [intStr, floatStr] = String(value).split('.');
-
-    // 最终的数据string，需要去掉 , 号。
     const resultInt = intStr.replace(reg, ',');
-
-    // 计算最终的小数点
     let resultFloat = '';
-
-    /* Taking the floatStr and slicing it to the precision. */
     if (floatStr && precision > 0) {
       resultFloat = `.${floatStr.slice(0, precision === undefined ? DefaultPrecisionCont : precision)}`;
     }
     return `${resultInt}${resultFloat}`;
   }, [precision]);
-
-  // 如果是阅读模式，直接返回字符串
-  if (type === 'read') {
-    const dom = /*#__PURE__*/_jsx("span", {
-      ref: ref,
-      children: getTextByLocale(locale || false, text, precision, numberFormatOptions ?? fieldProps.numberFormatOptions, moneySymbol)
-    });
-    if (render) {
-      return render(text, {
-        mode: type,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+  if (isProFieldReadMode(type)) {
+    return FieldMoneyRead({
+      text,
+      mode: type,
+      render,
+      formItemRender,
+      fieldProps,
+      proFieldKey,
+      valueEnum,
+      placeholder,
+      locale,
+      customSymbol,
+      numberFormatOptions,
+      numberPopoverRender,
+      ...rest,
+      precision,
+      moneySymbol
+    }, ref);
   }
-  if (type === 'edit' || type === 'update') {
-    const dom = /*#__PURE__*/_jsx(InputNumberPopover, {
-      contentRender: props => {
-        if (numberPopoverRender === false) return null;
-        if (!props.value) return null;
-        const localeText = getTextByLocale(moneySymbol || locale || false, `${getFormateValue(props.value)}`, precision, {
-          ...numberFormatOptions,
-          notation: 'compact'
-        }, moneySymbol);
-        if (typeof numberPopoverRender === 'function') {
-          return numberPopoverRender?.(props, localeText);
-        }
-        return localeText;
-      },
-      ref: ref,
-      precision: precision
-      // 删除默认min={0}，允许输入一个负数的金额，用户可自行配置min来限制是否允许小于0的金额
-      ,
-      formatter: value => {
-        if (value && moneySymbol) {
-          return `${moneySymbol} ${getFormateValue(value)}`;
-        }
-        return value?.toString() || value;
-      },
-      parser: value => {
-        if (moneySymbol && value) {
-          return value.replace(new RegExp(`\\${moneySymbol}\\s?|(,*)`, 'g'), '');
-        }
-        return value;
-      },
-      placeholder: placeholderValue,
-      ...omit(fieldProps, ['numberFormatOptions', 'precision', 'numberPopoverRender', 'customSymbol', 'moneySymbol', 'visible', 'open']),
-      onBlur: fieldProps.onBlur ? e => {
-        let value = e.target.value;
-        if (moneySymbol && value) {
-          value = value.replace(new RegExp(`\\${moneySymbol}\\s?|(,*)`, 'g'), '');
-        }
-        fieldProps.onBlur?.(value);
-      } : undefined
-    });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode: type,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+  if (isProFieldEditOrUpdateMode(type)) {
+    return FieldMoneyEdit({
+      text,
+      mode: type,
+      render,
+      formItemRender,
+      fieldProps,
+      proFieldKey,
+      valueEnum,
+      placeholder,
+      locale,
+      customSymbol,
+      numberFormatOptions,
+      numberPopoverRender,
+      ...rest,
+      precision,
+      placeholderValue,
+      moneySymbol,
+      getFormateValue
+    }, ref);
   }
   return null;
 };

package/es/field/components/Money/moneyFormat.d.ts

@@ -0,0 +1,13 @@
+/** Default fraction digits for money input */
+export declare const DefaultPrecisionCont = 2;
+/**
+ * A function that formats the number.
+ * @param {string | false} locale - The currency symbol, which is the first parameter of the
+ * formatMoney function.
+ * @param {number | string | undefined} paramsText - The text to be formatted
+ * @param {number} precision - number, // decimal places
+ * @param {any} [config] - the configuration of the number format, which is the same as the
+ * configuration of the number format in the Intl.NumberFormat method.
+ * @returns A function that takes in 4 parameters and returns a string.
+ */
+export declare const getTextByLocale: (locale: string | false, paramsText: number | string | undefined, precision: number, config?: any, moneySymbol?: string) => string | number;

package/es/field/components/Money/moneyFormat.js

@@ -0,0 +1,102 @@
+/** Default fraction digits for money input */
+export const DefaultPrecisionCont = 2;
+
+// Money locale formatting
+const defaultMoneyIntl = new Intl.NumberFormat('zh-Hans-CN', {
+  currency: 'CNY',
+  style: 'currency'
+});
+const enMoneyIntl = {
+  style: 'currency',
+  currency: 'USD'
+};
+const ruMoneyIntl = {
+  style: 'currency',
+  currency: 'RUB'
+};
+const rsMoneyIntl = {
+  style: 'currency',
+  currency: 'RSD'
+};
+const msMoneyIntl = {
+  style: 'currency',
+  currency: 'MYR'
+};
+const ptMoneyIntl = {
+  style: 'currency',
+  currency: 'BRL'
+};
+const intlMap = {
+  default: defaultMoneyIntl,
+  'zh-Hans-CN': {
+    currency: 'CNY',
+    style: 'currency'
+  },
+  'en-US': enMoneyIntl,
+  'ru-RU': ruMoneyIntl,
+  'ms-MY': msMoneyIntl,
+  'sr-RS': rsMoneyIntl,
+  'pt-BR': ptMoneyIntl
+};
+
+/**
+ * A function that formats the number.
+ * @param {string | false} locale - The currency symbol, which is the first parameter of the
+ * formatMoney function.
+ * @param {number | string | undefined} paramsText - The text to be formatted
+ * @param {number} precision - number, // decimal places
+ * @param {any} [config] - the configuration of the number format, which is the same as the
+ * configuration of the number format in the Intl.NumberFormat method.
+ * @returns A function that takes in 4 parameters and returns a string.
+ */
+export const getTextByLocale = (locale, paramsText, precision, config, moneySymbol = '') => {
+  let moneyText = paramsText?.toString().replaceAll(',', '');
+  if (typeof moneyText === 'string') {
+    const parsedNum = Number(moneyText);
+    // 转换数字为NaN时，返回原始值展示
+    if (Number.isNaN(parsedNum)) return moneyText;
+    moneyText = parsedNum;
+  }
+  if (!moneyText && moneyText !== 0) return '';
+  let supportFormat = false;
+  try {
+    supportFormat = locale !== false && Intl.NumberFormat.supportedLocalesOf([locale.replace('_', '-')], {
+      localeMatcher: 'lookup'
+    }).length > 0;
+  } catch (error) {}
+  try {
+    // Formatting the number, when readonly moneySymbol = false, unused currency.
+    const initNumberFormatter = new Intl.NumberFormat(supportFormat && locale !== false ? locale?.replace('_', '-') || 'zh-Hans-CN' : 'zh-Hans-CN', {
+      ...(intlMap[locale || 'zh-Hans-CN'] || defaultMoneyIntl),
+      maximumFractionDigits: precision,
+      ...config
+    });
+    const finalMoneyText = initNumberFormatter.format(moneyText);
+
+    // 同时出现两个符号的情况需要处理
+    const doubleSymbolFormat = Text => {
+      const match = Text.match(/\d+/);
+      if (match) {
+        const number = match[0];
+        return Text.slice(Text.indexOf(number));
+      } else {
+        return Text;
+      }
+    };
+    // 过滤一下，只留下数字
+    const pureMoneyText = doubleSymbolFormat(finalMoneyText);
+
+    /**
+     * 首字母判断是否是正负符号
+     */
+    const [operatorSymbol] = finalMoneyText || '';
+
+    // 兼容正负号
+    if (['+', '-'].includes(operatorSymbol)) {
+      return `${moneySymbol || ''}${operatorSymbol}${pureMoneyText}`;
+    }
+    return `${moneySymbol || ''}${pureMoneyText}`;
+  } catch (error) {
+    return moneyText;
+  }
+};

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { InputNumberProps } from 'antd';
+export type FieldMoneyProps = {
+    text: number;
+    moneySymbol?: boolean;
+    locale?: string;
+    /**
+     * 输入框内容为空的提示内容
+     */
+    placeholder?: string;
+    /**
+     * 自定义 money 的 Symbol
+     */
+    customSymbol?: string;
+    /**
+     * 自定义 Popover 的值，false 可以关闭他
+     */
+    numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => React.ReactNode) | boolean;
+    /**
+     * NumberFormat 的配置，文档可以查看 mdn
+     *
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    numberFormatOptions?: {
+        localeMatcher?: string;
+        style?: string;
+        currency?: string;
+        currencyDisplay?: string;
+        currencySign?: string;
+        useGrouping?: boolean;
+        minimumIntegerDigits?: number;
+        minimumFractionDigits?: number;
+        maximumFractionDigits?: number;
+        minimumSignificantDigits?: number;
+        maximumSignificantDigits?: number;
+    };
+};

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

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