@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/form/BaseForm/EditOrReadOnlyContext.js

@@ -1,4 +1,4 @@
 import React from 'react';
-export var EditOrReadOnlyContext = /*#__PURE__*/React.createContext({
+export const EditOrReadOnlyContext = /*#__PURE__*/React.createContext({
   mode: 'edit'
 });

package/es/form/BaseForm/LightWrapper/index.js

@@ -1,66 +1,54 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "size", "disabled", "onChange", "className", "style", "children", "valuePropName", "placeholder", "labelFormatter", "variant", "footerRender", "allowClear", "otherFieldProps", "valueType", "placement"];
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useMemo, useState } from 'react';
-import { dateArrayFormatter, dateFormatterMap, FieldLabel, FilterDropdown, useMountMergeState } from "../../../utils";
+import { dateArrayFormatter, dateFormatterMap, FieldLabel, FilterDropdown } from "../../../utils";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var LightWrapper = function LightWrapper(props) {
-  var label = props.label,
-    size = props.size,
-    disabled = props.disabled,
-    propsOnChange = props.onChange,
-    className = props.className,
-    style = props.style,
-    children = props.children,
-    valuePropName = props.valuePropName,
-    placeholder = props.placeholder,
-    labelFormatter = props.labelFormatter,
-    variant = props.variant,
-    footerRender = props.footerRender,
-    allowClear = props.allowClear,
-    otherFieldProps = props.otherFieldProps,
-    valueType = props.valueType,
-    placement = props.placement,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-field-light-wrapper');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useState = useState(props[valuePropName]),
-    _useState2 = _slicedToArray(_useState, 2),
-    tempValue = _useState2[0],
-    setTempValue = _useState2[1];
-  var _useMountMergeState = useMountMergeState(false),
-    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
-    open = _useMountMergeState2[0],
-    setOpen = _useMountMergeState2[1];
-  var onChange = function onChange() {
-    var _otherFieldProps$onCh;
-    for (var _len = arguments.length, restParams = new Array(_len), _key = 0; _key < _len; _key++) {
-      restParams[_key] = arguments[_key];
-    }
-    otherFieldProps === null || otherFieldProps === void 0 || (_otherFieldProps$onCh = otherFieldProps.onChange) === null || _otherFieldProps$onCh === void 0 || _otherFieldProps$onCh.call.apply(_otherFieldProps$onCh, [otherFieldProps].concat(restParams));
-    propsOnChange === null || propsOnChange === void 0 || propsOnChange.apply(void 0, restParams);
+const LightWrapper = props => {
+  const {
+    label,
+    size,
+    disabled,
+    onChange: propsOnChange,
+    className,
+    style,
+    children,
+    valuePropName,
+    placeholder,
+    labelFormatter,
+    variant,
+    footerRender,
+    allowClear,
+    otherFieldProps,
+    valueType,
+    placement,
+    ...rest
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-light-wrapper');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const [tempValue, setTempValue] = useState(props[valuePropName]);
+  const [open, setOpen] = useState(false);
+  const onChange = (...restParams) => {
+    otherFieldProps?.onChange?.(...restParams);
+    propsOnChange?.(...restParams);
   };
-  var labelValue = props[valuePropName];
+  const labelValue = props[valuePropName];
 
   /** DateRange的转化，dayjs 的 toString 有点不好用 */
-  var labelValueText = useMemo(function () {
-    var _valueType$toLowerCas;
+  const labelValueText = useMemo(() => {
     if (!labelValue) return labelValue;
-    if (valueType !== null && valueType !== void 0 && (_valueType$toLowerCas = valueType.toLowerCase()) !== null && _valueType$toLowerCas !== void 0 && _valueType$toLowerCas.endsWith('range') && valueType !== 'digitRange' && !labelFormatter) {
-      return dateArrayFormatter(labelValue, dateFormatterMap[valueType] || 'YYYY-MM-DD');
+    const lowerValueType = valueType?.toLowerCase?.();
+    if (lowerValueType?.endsWith('range') && lowerValueType !== 'digitrange' && !labelFormatter) {
+      return dateArrayFormatter(labelValue, valueType && dateFormatterMap[valueType] || 'YYYY-MM-DD');
     }
-    if (Array.isArray(labelValue)) return labelValue.map(function (item) {
-      if (_typeof(item) === 'object' && item.label && item.value) {
+    if (Array.isArray(labelValue)) return labelValue.map(item => {
+      if (typeof item === 'object' && item.label && item.value) {
         return item.label;
       }
       return item;
@@ -75,8 +63,8 @@ var LightWrapper = function LightWrapper(props) {
     label: /*#__PURE__*/_jsx(FieldLabel, {
       ellipsis: true,
       size: size,
-      onClear: function onClear() {
-        onChange === null || onChange === void 0 || onChange();
+      onClear: () => {
+        onChange?.();
         setTempValue(null);
       },
       variant: variant,
@@ -90,21 +78,24 @@ var LightWrapper = function LightWrapper(props) {
       allowClear: allowClear
     }),
     footer: {
-      onClear: function onClear() {
-        return setTempValue(null);
-      },
-      onConfirm: function onConfirm() {
-        onChange === null || onChange === void 0 || onChange(tempValue);
+      onClear: () => setTempValue(null),
+      onConfirm: () => {
+        onChange?.(tempValue);
         setOpen(false);
       }
     },
     footerRender: footerRender,
     children: /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(prefixCls, "-container"), hashId, className),
+      className: clsx(`${prefixCls}-container`, hashId, className),
       style: style,
-      children: /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, _defineProperty(_defineProperty({}, valuePropName, tempValue), "onChange", function onChange(e) {
-        setTempValue(e !== null && e !== void 0 && e.target ? e.target.value : e);
-      }), children.props))
+      children: /*#__PURE__*/React.cloneElement(children, {
+        ...rest,
+        [valuePropName]: tempValue,
+        onChange: e => {
+          setTempValue(e?.target ? e.target.value : e);
+        },
+        ...children.props
+      })
     })
   }));
 };

package/es/form/BaseForm/LightWrapper/style.d.ts

@@ -4,6 +4,6 @@ export interface ProToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/es/form/BaseForm/LightWrapper/style.js

@@ -1,19 +1,23 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty(_defineProperty({}, "".concat(token.componentCls, "-collapse-label"), {
-    paddingInline: 1,
-    paddingBlock: 1
-  }), "".concat(token.componentCls, "-container"), _defineProperty({}, "".concat(token.antCls, "-form-item"), {
-    marginBlockEnd: 0
-  }));
+const genProStyle = token => {
+  return {
+    [`${token.componentCls}-collapse-label`]: {
+      paddingInline: 1,
+      paddingBlock: 1
+    },
+    [`${token.componentCls}-container`]: {
+      [`${token.antCls}-form-item`]: {
+        marginBlockEnd: 0
+      }
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('LightWrapper', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('LightWrapper', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

package/es/form/BaseForm/Submitter/index.js

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { omit } from '@rc-component/util';
 import { Button, Form } from 'antd';
 import React from 'react';
@@ -13,70 +12,72 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param props
  */
 
-var Submitter = function Submitter(props) {
-  var intl = useIntl();
-  var form = Form.useFormInstance();
+const Submitter = props => {
+  const intl = useIntl();
+  const form = Form.useFormInstance();
   if (props.render === false) {
     return null;
   }
-  var onSubmit = props.onSubmit,
-    render = props.render,
-    onReset = props.onReset,
-    _props$searchConfig = props.searchConfig,
-    searchConfig = _props$searchConfig === void 0 ? {} : _props$searchConfig,
-    submitButtonProps = props.submitButtonProps,
-    resetButtonProps = props.resetButtonProps;
-  var _proTheme$useToken = proTheme.useToken(),
-    token = _proTheme$useToken.token;
-  var submit = function submit() {
+  const {
+    onSubmit,
+    render,
+    onReset,
+    searchConfig = {},
+    submitButtonProps,
+    resetButtonProps
+  } = props;
+  const {
+    token
+  } = proTheme.useToken();
+  const submit = () => {
     form.submit();
-    onSubmit === null || onSubmit === void 0 || onSubmit();
+    onSubmit?.();
   };
-  var reset = function reset() {
+  const reset = () => {
     form.resetFields();
-    onReset === null || onReset === void 0 || onReset();
+    onReset?.();
   };
-  var _searchConfig$submitT = searchConfig.submitText,
-    submitText = _searchConfig$submitT === void 0 ? intl.getMessage('tableForm.submit', '提交') : _searchConfig$submitT,
-    _searchConfig$resetTe = searchConfig.resetText,
-    resetText = _searchConfig$resetTe === void 0 ? intl.getMessage('tableForm.reset', '重置') : _searchConfig$resetTe;
+  const {
+    submitText = intl.getMessage('tableForm.submit', '提交'),
+    resetText = intl.getMessage('tableForm.reset', '重置')
+  } = searchConfig;
   /** 默认的操作的逻辑 */
-  var dom = [];
+  const dom = [];
   if (resetButtonProps !== false) {
-    dom.push( /*#__PURE__*/_createElement(Button, _objectSpread(_objectSpread({}, omit(resetButtonProps !== null && resetButtonProps !== void 0 ? resetButtonProps : {}, ['preventDefault'])), {}, {
+    dom.push( /*#__PURE__*/_createElement(Button, {
+      ...omit(resetButtonProps ?? {}, ['preventDefault']),
       key: "rest",
-      onClick: function onClick(e) {
-        var _resetButtonProps$onC;
-        if (!(resetButtonProps !== null && resetButtonProps !== void 0 && resetButtonProps.preventDefault)) reset();
-        resetButtonProps === null || resetButtonProps === void 0 || (_resetButtonProps$onC = resetButtonProps.onClick) === null || _resetButtonProps$onC === void 0 || _resetButtonProps$onC.call(resetButtonProps, e);
+      onClick: e => {
+        if (!resetButtonProps?.preventDefault) reset();
+        resetButtonProps?.onClick?.(e);
       }
-    }), resetText));
+    }, resetText));
   }
   if (submitButtonProps !== false) {
-    dom.push( /*#__PURE__*/_createElement(Button, _objectSpread(_objectSpread({
-      type: "primary"
-    }, omit(submitButtonProps || {}, ['preventDefault'])), {}, {
+    dom.push( /*#__PURE__*/_createElement(Button, {
+      type: "primary",
+      ...omit(submitButtonProps || {}, ['preventDefault']),
       key: "submit",
-      onClick: function onClick(e) {
-        var _submitButtonProps$on;
-        if (!(submitButtonProps !== null && submitButtonProps !== void 0 && submitButtonProps.preventDefault)) submit();
-        submitButtonProps === null || submitButtonProps === void 0 || (_submitButtonProps$on = submitButtonProps.onClick) === null || _submitButtonProps$on === void 0 || _submitButtonProps$on.call(submitButtonProps, e);
+      onClick: e => {
+        if (!submitButtonProps?.preventDefault) submit();
+        submitButtonProps?.onClick?.(e);
       }
-    }), submitText));
+    }, submitText));
   }
-  var renderDom = render ? render(_objectSpread(_objectSpread({}, props), {}, {
-    form: form,
-    submit: submit,
-    reset: reset
-  }), dom) : dom;
+  const renderDom = render ? render({
+    ...props,
+    form,
+    submit,
+    reset
+  }, dom) : dom;
   if (!renderDom) {
     return null;
   }
   if (Array.isArray(renderDom)) {
-    if ((renderDom === null || renderDom === void 0 ? void 0 : renderDom.length) < 1) {
+    if (renderDom?.length < 1) {
       return null;
     }
-    if ((renderDom === null || renderDom === void 0 ? void 0 : renderDom.length) === 1) {
+    if (renderDom?.length === 1) {
       return renderDom[0];
     }
     return /*#__PURE__*/_jsx("div", {

package/es/form/FieldContext.js

@@ -1,4 +1,4 @@
 import React from 'react';
-var FieldContext = /*#__PURE__*/React.createContext({});
+const FieldContext = /*#__PURE__*/React.createContext({});
 export { FieldContext };
 export default FieldContext;

package/es/form/components/Captcha/index.d.ts

@@ -19,8 +19,14 @@ export type ProFormCaptchaProps = ProFormFieldItemProps<InputProps> & {
     onChange?: any;
 };
 export type CaptFieldRef = {
-    startTiming: () => never;
-    endTiming: () => never;
+    /** 原生 DOM 元素引用 */
+    nativeElement: HTMLDivElement;
+    /** 聚焦方法 */
+    focus: () => void;
+    /** 开始计时 */
+    startTiming: () => void;
+    /** 结束计时 */
+    endTiming: () => void;
 };
 declare const ProFormCaptcha: React.FC<ProFormCaptchaProps>;
 export default ProFormCaptcha;

package/es/form/components/Captcha/index.js

@@ -1,90 +1,58 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["rules", "name", "phoneName", "fieldProps", "onTiming", "captchaTextRender", "captchaProps"];
 import { Button, Form, Input } from 'antd';
 import React, { useEffect, useImperativeHandle, useState } from 'react';
 import { warpField } from "../FormItem/warpField";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BaseProFormCaptcha = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var form = Form.useFormInstance();
-  var _useState = useState(props.countDown || 60),
-    _useState2 = _slicedToArray(_useState, 2),
-    count = _useState2[0],
-    setCount = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    timing = _useState4[0],
-    setTiming = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
+const BaseProFormCaptcha = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const form = Form.useFormInstance();
+  const [count, setCount] = useState(props.countDown || 60);
+  const [timing, setTiming] = useState(false);
+  const [loading, setLoading] = useState();
+  const containerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
   // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props tabUtil
-  var rules = props.rules,
-    name = props.name,
-    phoneName = props.phoneName,
-    fieldProps = props.fieldProps,
-    onTiming = props.onTiming,
-    _props$captchaTextRen = props.captchaTextRender,
-    captchaTextRender = _props$captchaTextRen === void 0 ? function (paramsTiming, paramsCount) {
-      return paramsTiming ? "".concat(paramsCount, " \u79D2\u540E\u91CD\u65B0\u83B7\u53D6") : '获取验证码';
-    } : _props$captchaTextRen,
-    captchaProps = props.captchaProps,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var onGetCaptcha = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(mobile) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            setLoading(true);
-            _context.next = 4;
-            return restProps.onGetCaptcha(mobile);
-          case 4:
-            setLoading(false);
-            setTiming(true);
-            _context.next = 13;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](0);
-            setTiming(false);
-            setLoading(false);
-            // eslint-disable-next-line no-console
-            console.log(_context.t0);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 8]]);
-    }));
-    return function onGetCaptcha(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+  const {
+    rules,
+    name,
+    phoneName,
+    fieldProps,
+    onTiming,
+    captchaTextRender = (paramsTiming, paramsCount) => {
+      return paramsTiming ? `${paramsCount} 秒后重新获取` : '获取验证码';
+    },
+    captchaProps,
+    ...restProps
+  } = props;
+  const onGetCaptcha = async mobile => {
+    try {
+      setLoading(true);
+      await restProps.onGetCaptcha(mobile);
+      setLoading(false);
+      setTiming(true);
+    } catch (error) {
+      setTiming(false);
+      setLoading(false);
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
   /**
    * 暴露ref方法
    */
-  useImperativeHandle(ref, function () {
-    return {
-      startTiming: function startTiming() {
-        return setTiming(true);
-      },
-      endTiming: function endTiming() {
-        return setTiming(false);
-      }
-    };
-  });
-  useEffect(function () {
-    var interval = 0;
-    var countDown = props.countDown;
+  useImperativeHandle(ref, () => ({
+    nativeElement: containerRef.current,
+    focus: () => inputRef.current?.focus(),
+    startTiming: () => setTiming(true),
+    endTiming: () => setTiming(false)
+  }));
+  useEffect(() => {
+    let interval = 0;
+    const {
+      countDown
+    } = props;
     if (timing) {
-      interval = setInterval(function () {
-        setCount(function (preSecond) {
+      interval = setInterval(() => {
+        setCount(preSecond => {
           if (preSecond <= 1) {
             setTiming(false);
             clearInterval(interval);
@@ -95,74 +63,54 @@ var BaseProFormCaptcha = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
       }, 1000);
     }
-    return function () {
-      return clearInterval(interval);
-    };
+    return () => clearInterval(interval);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timing]);
-  useEffect(function () {
+  useEffect(() => {
     if (onTiming) {
       onTiming(count);
     }
   }, [count, onTiming]);
   return /*#__PURE__*/_jsxs("div", {
-    style: _objectSpread(_objectSpread({}, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style), {}, {
+    ref: containerRef,
+    style: {
+      ...fieldProps?.style,
       display: 'flex',
       alignItems: 'center'
-    }),
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, fieldProps), {}, {
-      style: _objectSpread({
+    },
+    children: [/*#__PURE__*/_jsx(Input, {
+      ...fieldProps,
+      ref: inputRef,
+      style: {
         flex: 1,
         transition: 'width .3s',
-        marginRight: 8
-      }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style)
-    })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        marginRight: 8,
+        ...fieldProps?.style
+      }
+    }), /*#__PURE__*/_jsx(Button, {
       style: {
         display: 'block'
       },
       disabled: timing,
-      loading: loading
-    }, captchaProps), {}, {
-      onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-        var _mobile;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.prev = 0;
-              if (!phoneName) {
-                _context2.next = 9;
-                break;
-              }
-              _context2.next = 4;
-              return form.validateFields([phoneName].flat(1));
-            case 4:
-              _mobile = form.getFieldValue([phoneName].flat(1));
-              _context2.next = 7;
-              return onGetCaptcha(_mobile);
-            case 7:
-              _context2.next = 11;
-              break;
-            case 9:
-              _context2.next = 11;
-              return onGetCaptcha('');
-            case 11:
-              _context2.next = 16;
-              break;
-            case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](0);
-              // eslint-disable-next-line no-console
-              console.log(_context2.t0);
-            case 16:
-            case "end":
-              return _context2.stop();
+      loading: loading,
+      ...captchaProps,
+      onClick: async () => {
+        try {
+          if (phoneName) {
+            await form.validateFields([phoneName].flat(1));
+            const mobile = form.getFieldValue([phoneName].flat(1));
+            await onGetCaptcha(mobile);
+          } else {
+            await onGetCaptcha('');
           }
-        }, _callee2, null, [[0, 13]]);
-      })),
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        }
+      },
       children: captchaTextRender(timing, count)
-    }))]
+    })]
   });
 });
-var ProFormCaptcha = warpField(BaseProFormCaptcha);
+const ProFormCaptcha = warpField(BaseProFormCaptcha);
 export default ProFormCaptcha;