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

package/lib/field/components/Image/types.d.ts

@@ -0,0 +1,5 @@
+export type FieldImageProps = {
+    text: string;
+    width?: number;
+    placeholder?: string | string[];
+};

package/lib/field/components/Image/types.js

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

package/lib/field/components/Money/FieldMoneyEdit.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+import type { FieldMoneyProps } from './types';
+type Props = Omit<Parameters<ProFieldFC<FieldMoneyProps>>[0], 'moneySymbol'> & {
+    precision: number;
+    placeholderValue: string;
+    moneySymbol: string | undefined;
+    numberPopoverRender: FieldMoneyProps['numberPopoverRender'];
+    numberFormatOptions: FieldMoneyProps['numberFormatOptions'];
+    getFormateValue: (value?: string | number) => string;
+};
+export declare function FieldMoneyEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldMoneyEdit = FieldMoneyEdit;
+var _util = require("@rc-component/util");
+var _react = _interopRequireDefault(require("react"));
+var _InputNumberPopover = _interopRequireDefault(require("./InputNumberPopover"));
+var _moneyFormat = require("./moneyFormat");
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldMoneyEdit(props, ref) {
+  const {
+    text,
+    mode: type,
+    formItemRender,
+    fieldProps,
+    locale,
+    precision,
+    placeholderValue,
+    moneySymbol,
+    numberPopoverRender,
+    numberFormatOptions,
+    getFormateValue
+  } = props;
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputNumberPopover.default, {
+    contentRender: p => {
+      if (numberPopoverRender === false) return null;
+      if (!p.value) return null;
+      const localeText = (0, _moneyFormat.getTextByLocale)(moneySymbol || locale || false, `${getFormateValue(p.value)}`, precision, {
+        ...numberFormatOptions,
+        notation: 'compact'
+      }, moneySymbol);
+      if (typeof numberPopoverRender === 'function') {
+        return numberPopoverRender?.(p, String(localeText));
+      }
+      return localeText;
+    },
+    ref: ref,
+    precision: precision,
+    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;
+}

package/lib/field/components/Money/FieldMoneyRead.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+import type { FieldMoneyProps } from './types';
+type Props = Omit<Parameters<ProFieldFC<FieldMoneyProps>>[0], 'moneySymbol'> & {
+    precision: number;
+    moneySymbol: string | undefined;
+};
+export declare function FieldMoneyRead(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldMoneyRead = FieldMoneyRead;
+var _react = _interopRequireDefault(require("react"));
+var _moneyFormat = require("./moneyFormat");
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldMoneyRead(props, ref) {
+  const {
+    text,
+    mode: type,
+    render,
+    fieldProps,
+    locale,
+    precision,
+    numberFormatOptions,
+    moneySymbol
+  } = props;
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ref: ref,
+    children: (0, _moneyFormat.getTextByLocale)(locale || false, text, precision, numberFormatOptions ?? fieldProps.numberFormatOptions, moneySymbol)
+  });
+  if (render) {
+    return render(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/lib/field/components/Money/InputNumberPopover.d.ts

@@ -0,0 +1,11 @@
+import type { InputNumberProps } from 'antd';
+import React from 'react';
+export type InputNumberPopoverProps = InputNumberProps & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentRender?: (props: InputNumberProps) => React.ReactNode;
+    numberFormatOptions?: any;
+    numberPopoverRender?: any;
+};
+declare const InputNumberPopover: React.ForwardRefExoticComponent<InputNumberPopoverProps & React.RefAttributes<any>>;
+export default InputNumberPopover;

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

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 _jsxRuntime = require("react/jsx-runtime");
+const InputNumberPopover = /*#__PURE__*/_react.default.forwardRef(function InputNumberPopoverInner({
+  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 _default = exports.default = InputNumberPopover;

package/lib/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;