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

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

@@ -5,213 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _util = require("@rc-component/util");
-var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
-var _jsxRuntime = require("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.default.forwardRef(({
-  contentRender: content,
-  numberFormatOptions,
-  numberPopoverRender,
-  open,
-  onOpenChange,
-  ...rest
-}, ref) => {
-  const [value, setValueInner] = (0, _util.useControlledState)(() => rest.defaultValue, rest.value);
-
-  // 使用本地状态管理 Popover 显示，同时支持受控模式
-  const [localOpen, setLocalOpen] = (0, _react.useState)(open ?? false);
-
-  // 跟踪组件挂载状态，防止在卸载后执行状态更新
-  const mountedRef = (0, _react.useRef)(true);
-  (0, _react.useEffect)(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  // 同步外部 open 属性到本地状态，支持受控模式
-  (0, _react.useEffect)(() => {
-    if (open !== undefined) {
-      setLocalOpen(open);
-    }
-  }, [open]);
-  const onChange = (0, _react.useCallback)(updater => {
-    setValueInner(prev => {
-      const next = typeof updater === 'function' ? updater(prev) : updater;
-      rest.onChange?.(next);
-      return next;
-    });
-  }, [rest.onChange, setValueInner]);
-
-  // 优化的 onOpenChange 处理器
-  const handleOpenChange = (0, _react.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__*/(0, _jsxRuntime.jsx)(_antd.InputNumber, {
-      ref: ref,
-      ...rest,
-      value: value,
-      onChange: onChange
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
-    placement: "topLeft",
-    open: localOpen,
-    onOpenChange: handleOpenChange,
-    trigger: ['focus', 'click'],
-    content: dom,
-    getPopupContainer: triggerNode => {
-      return triggerNode?.parentElement || document.body;
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.InputNumber, {
-      ref: ref,
-      ...rest,
-      value: value,
-      onChange: onChange
-    })
-  });
-});
-
+var _fieldMode = require("../../internal/fieldMode");
+var _FieldMoneyEdit = require("./FieldMoneyEdit");
+var _FieldMoneyRead = require("./FieldMoneyRead");
+var _moneyFormat = require("./moneyFormat");
 /**
  * 金额组件
- *
- * @param FieldMoneyProps {
- *     text: number;
- *     moneySymbol?: string; }
  */
 const FieldMoney = ({
   text,
@@ -228,20 +29,12 @@ const FieldMoney = ({
   numberPopoverRender = fieldProps?.numberPopoverRender || false,
   ...rest
 }, ref) => {
-  const precision = fieldProps?.precision ?? DefaultPrecisionCont;
+  const precision = fieldProps?.precision ?? _moneyFormat.DefaultPrecisionCont;
   let intl = (0, _provider.useIntl)();
-  // 当手动传入locale时，应该以传入的locale为准，未传入时则根据全局的locale进行国际化
   if (locale && _provider.intlMap[locale]) {
     intl = _provider.intlMap[locale];
   }
   const placeholderValue = placeholder || intl.getMessage('tableForm.inputPlaceholder', '请输入');
-
-  /**
-   * 获取货币的符号
-   * 如果 customSymbol 存在直接使用 customSymbol
-   * 如果 moneySymbol 为 false，返回空
-   * 如果没有配置使用默认的
-   */
   const moneySymbol = (0, _react.useMemo)(() => {
     if (customSymbol) {
       return customSymbol;
@@ -251,91 +44,55 @@ const FieldMoney = ({
     }
     return intl.getMessage('moneySymbol', '¥');
   }, [customSymbol, fieldProps.moneySymbol, intl, rest.moneySymbol]);
-
-  /*
-   * A function that formats the number.
-   * 1000 -> 1,000
-   */
   const getFormateValue = (0, _react.useCallback)(value => {
-    // 新建数字正则，需要配置小数点
-    const reg = new RegExp(`\\B(?=(\\d{${3 + Math.max(precision - DefaultPrecisionCont, 0)}})+(?!\\d))`, 'g');
-    // 切分为 整数 和 小数 不同
+    const reg = new RegExp(`\\B(?=(\\d{${3 + Math.max(precision - _moneyFormat.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)}`;
+      resultFloat = `.${floatStr.slice(0, precision === undefined ? _moneyFormat.DefaultPrecisionCont : precision)}`;
     }
     return `${resultInt}${resultFloat}`;
   }, [precision]);
-
-  // 如果是阅读模式，直接返回字符串
-  if (type === 'read') {
-    const dom = /*#__PURE__*/(0, _jsxRuntime.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 ((0, _fieldMode.isProFieldReadMode)(type)) {
+    return (0, _FieldMoneyRead.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__*/(0, _jsxRuntime.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,
-      ...(0, _util.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 ((0, _fieldMode.isProFieldEditOrUpdateMode)(type)) {
+    return (0, _FieldMoneyEdit.FieldMoneyEdit)({
+      text,
+      mode: type,
+      render,
+      formItemRender,
+      fieldProps,
+      proFieldKey,
+      valueEnum,
+      placeholder,
+      locale,
+      customSymbol,
+      numberFormatOptions,
+      numberPopoverRender,
+      ...rest,
+      precision,
+      placeholderValue,
+      moneySymbol,
+      getFormateValue
+    }, ref);
   }
   return null;
 };

package/lib/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/lib/field/components/Money/moneyFormat.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextByLocale = exports.DefaultPrecisionCont = void 0;
+/** Default fraction digits for money input */
+const DefaultPrecisionCont = exports.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.
+ */
+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;
+  }
+};
+exports.getTextByLocale = getTextByLocale;

package/lib/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/lib/field/components/Money/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/field/components/Password/FieldPasswordEdit.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}>>[0] & {
+    intl: IntlType;
+};
+export declare function FieldPasswordEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/lib/field/components/Password/FieldPasswordEdit.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldPasswordEdit = FieldPasswordEdit;
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldPasswordEdit(props, ref) {
+  const {
+    text,
+    mode,
+    formItemRender,
+    fieldProps,
+    intl
+  } = props;
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.Password, {
+    placeholder: intl.getMessage('tableForm.inputPlaceholder', '请输入'),
+    ref: ref,
+    ...fieldProps
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/lib/field/components/Password/FieldPasswordRead.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}>>[0] & {
+    open: boolean;
+    setOpen: (updater: boolean | ((prev: boolean) => boolean)) => void;
+};
+export declare function FieldPasswordRead(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/lib/field/components/Password/FieldPasswordRead.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldPasswordRead = FieldPasswordRead;
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldPasswordRead(props, ref) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps,
+    open,
+    setOpen
+  } = props;
+  let dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: "-"
+  });
+  if (text) {
+    dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        ref: ref,
+        children: open ? text : '********'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        onClick: () => setOpen(!open),
+        children: open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EyeOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EyeInvisibleOutlined, {})
+      })]
+    });
+  }
+  if (render) {
+    return render(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}