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

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

@@ -1,11 +1,7 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["transform", "actionRender", "creatorButtonProps", "label", "alwaysShowItemLabel", "tooltip", "creatorRecord", "itemRender", "rules", "itemContainerRender", "fieldExtraRender", "copyIconProps", "children", "deleteIconProps", "arrowSort", "upIconProps", "downIconProps", "actionRef", "style", "prefixCls", "actionGuard", "min", "max", "colProps", "wrapperCol", "rowProps", "onAfterAdd", "onAfterRemove", "isValidateList", "emptyListMessage", "className", "containerClassName", "containerStyle", "readonly"];
 import { ArrowDownOutlined, ArrowUpOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons';
 import { warning } from '@rc-component/util';
 import { ConfigProvider, Form } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useIntl } from "../../../provider";
 import { ProFormContext } from "../../../utils";
@@ -15,81 +11,81 @@ import { ProFormListContainer } from "./ListContainer";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var noteOnce = warning.noteOnce;
-var FormListContext = /*#__PURE__*/React.createContext({});
+const {
+  noteOnce
+} = warning;
+const FormListContext = /*#__PURE__*/React.createContext({});
 function ProFormList(props) {
-  var actionRefs = useRef();
-  var context = useContext(ConfigProvider.ConfigContext);
-  var listContext = useContext(FormListContext);
-  var baseClassName = context.getPrefixCls('pro-form-list');
+  const actionRefs = useRef();
+  const context = useContext(ConfigProvider.ConfigContext);
+  const listContext = useContext(FormListContext);
+  const baseClassName = context.getPrefixCls('pro-form-list');
   // Internationalization
-  var intl = useIntl();
+  const intl = useIntl();
   /** 从 context 中拿到的值 */
-  var _React$useContext = React.useContext(FieldContext),
-    setFieldValueType = _React$useContext.setFieldValueType;
-  var transform = props.transform,
-    actionRender = props.actionRender,
-    creatorButtonProps = props.creatorButtonProps,
-    label = props.label,
-    alwaysShowItemLabel = props.alwaysShowItemLabel,
-    tooltip = props.tooltip,
-    creatorRecord = props.creatorRecord,
-    itemRender = props.itemRender,
-    rules = props.rules,
-    itemContainerRender = props.itemContainerRender,
-    fieldExtraRender = props.fieldExtraRender,
-    _props$copyIconProps = props.copyIconProps,
-    copyIconProps = _props$copyIconProps === void 0 ? {
+  const {
+    setFieldValueType
+  } = React.useContext(FieldContext);
+  const {
+    transform,
+    actionRender,
+    creatorButtonProps,
+    label,
+    alwaysShowItemLabel,
+    tooltip,
+    creatorRecord,
+    itemRender,
+    rules,
+    itemContainerRender,
+    fieldExtraRender,
+    copyIconProps = {
       Icon: CopyOutlined,
       tooltipText: intl.getMessage('copyThisLine', '复制此项')
-    } : _props$copyIconProps,
-    _children = props.children,
-    _props$deleteIconProp = props.deleteIconProps,
-    deleteIconProps = _props$deleteIconProp === void 0 ? {
+    },
+    children,
+    deleteIconProps = {
       Icon: DeleteOutlined,
       tooltipText: intl.getMessage('deleteThisLine', '删除此项')
-    } : _props$deleteIconProp,
-    arrowSort = props.arrowSort,
-    _props$upIconProps = props.upIconProps,
-    upIconProps = _props$upIconProps === void 0 ? {
+    },
+    arrowSort,
+    upIconProps = {
       Icon: ArrowUpOutlined,
       tooltipText: intl.getMessage('sortUpThisLine', '向上排序')
-    } : _props$upIconProps,
-    _props$downIconProps = props.downIconProps,
-    downIconProps = _props$downIconProps === void 0 ? {
+    },
+    downIconProps = {
       Icon: ArrowDownOutlined,
       tooltipText: intl.getMessage('sortDownThisLine', '向下排序')
-    } : _props$downIconProps,
-    actionRef = props.actionRef,
-    style = props.style,
-    prefixCls = props.prefixCls,
-    actionGuard = props.actionGuard,
-    min = props.min,
-    max = props.max,
-    colProps = props.colProps,
-    wrapperCol = props.wrapperCol,
-    rowProps = props.rowProps,
-    _onAfterAdd = props.onAfterAdd,
-    _onAfterRemove = props.onAfterRemove,
-    _props$isValidateList = props.isValidateList,
-    isValidateList = _props$isValidateList === void 0 ? false : _props$isValidateList,
-    _props$emptyListMessa = props.emptyListMessage,
-    emptyListMessage = _props$emptyListMessa === void 0 ? '列表不能为空' : _props$emptyListMessa,
-    className = props.className,
-    containerClassName = props.containerClassName,
-    containerStyle = props.containerStyle,
-    readonly = props.readonly,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useGridHelpers = useGridHelpers({
-      colProps: colProps,
-      rowProps: rowProps
-    }),
-    ColWrapper = _useGridHelpers.ColWrapper,
-    RowWrapper = _useGridHelpers.RowWrapper;
-  var proFormContext = useContext(ProFormContext);
+    },
+    actionRef,
+    style,
+    prefixCls,
+    actionGuard,
+    min,
+    max,
+    colProps,
+    wrapperCol,
+    rowProps,
+    onAfterAdd,
+    onAfterRemove,
+    isValidateList = false,
+    emptyListMessage = '列表不能为空',
+    className,
+    containerClassName,
+    containerStyle,
+    readonly,
+    ...rest
+  } = props;
+  const {
+    ColWrapper,
+    RowWrapper
+  } = useGridHelpers({
+    colProps,
+    rowProps
+  });
+  const proFormContext = useContext(ProFormContext);
 
   // 处理 list 的嵌套
-  var name = useMemo(function () {
+  const name = useMemo(() => {
     if (listContext.name === undefined) {
       return [rest.name].flat(1);
     }
@@ -97,21 +93,18 @@ function ProFormList(props) {
   }, [listContext.name, rest.name]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useImperativeHandle(actionRef, function () {
-    return _objectSpread(_objectSpread({}, actionRefs.current), {}, {
-      get: function get(index) {
-        return proFormContext.formRef.current.getFieldValue([].concat(_toConsumableArray(name), [index]));
-      },
-      getList: function getList() {
-        return proFormContext.formRef.current.getFieldValue(_toConsumableArray(name));
-      }
-    });
-  }, [name, proFormContext.formRef]);
-  useEffect(function () {
-    noteOnce(!!proFormContext.formRef, "ProFormList \u5FC5\u987B\u8981\u653E\u5230 ProForm \u4E2D,\u5426\u5219\u4F1A\u9020\u6210\u884C\u4E3A\u5F02\u5E38\u3002");
-    noteOnce(!!proFormContext.formRef, "Proformlist must be placed in ProForm, otherwise it will cause abnormal behavior.");
+  useImperativeHandle(actionRef, () => ({
+    ...actionRefs.current,
+    get: index => {
+      return proFormContext.formRef.current.getFieldValue([...name, index]);
+    },
+    getList: () => proFormContext.formRef.current.getFieldValue([...name])
+  }), [name, proFormContext.formRef]);
+  useEffect(() => {
+    noteOnce(!!proFormContext.formRef, `ProFormList 必须要放到 ProForm 中,否则会造成行为异常。`);
+    noteOnce(!!proFormContext.formRef, `Proformlist must be placed in ProForm, otherwise it will cause abnormal behavior.`);
   }, [proFormContext.formRef]);
-  useEffect(function () {
+  useEffect(() => {
     // 如果 setFieldValueType 和 props.name 不存在不存入
     if (!setFieldValueType || !props.name) {
       return;
@@ -119,35 +112,32 @@ function ProFormList(props) {
 
     // Field.type === 'ProField' 时 props 里面是有 valueType 的，所以要设置一下
     // 写一个 ts 比较麻烦，用 any 顶一下
-    setFieldValueType([props.name].flat(1).filter(function (itemName) {
-      return itemName !== undefined;
-    }), {
+    setFieldValueType([props.name].flat(1).filter(itemName => itemName !== undefined), {
       valueType: 'formList',
-      transform: transform
+      transform
     });
   }, [props.name, setFieldValueType, transform]);
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
   if (!proFormContext.formRef) return null;
   return wrapSSR( /*#__PURE__*/_jsx(ColWrapper, {
     children: /*#__PURE__*/_jsx("div", {
-      className: classNames(baseClassName, hashId),
+      className: clsx(baseClassName, hashId),
       style: style,
-      children: /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(Form.Item, {
         label: label,
         prefixCls: prefixCls,
         tooltip: tooltip,
         style: style,
-        required: rules === null || rules === void 0 ? void 0 : rules.some(function (rule) {
-          return rule.required;
-        }),
+        required: rules?.some(rule => rule.required),
         wrapperCol: wrapperCol,
-        className: className
-      }, rest), {}, {
+        className: className,
+        ...rest,
         name: isValidateList ? name : undefined,
         rules: isValidateList ? [{
-          validator: function validator(rule, value) {
+          validator: (rule, value) => {
             if (!value || value.length === 0) {
               return Promise.reject(new Error(emptyListMessage));
             }
@@ -155,11 +145,11 @@ function ProFormList(props) {
           },
           required: true
         }] : undefined,
-        children: /*#__PURE__*/_jsx(Form.List, _objectSpread(_objectSpread({
-          rules: rules
-        }, rest), {}, {
+        children: /*#__PURE__*/_jsx(Form.List, {
+          rules: rules,
+          ...rest,
           name: name,
-          children: function children(fields, action, meta) {
+          children: (fields, action, meta) => {
             // 将 action 暴露给外部
             actionRefs.current = action;
             return /*#__PURE__*/_jsxs(RowWrapper, {
@@ -188,30 +178,30 @@ function ProFormList(props) {
                 min: min,
                 max: max,
                 count: fields.length,
-                onAfterAdd: function onAfterAdd(defaultValue, insertIndex, count) {
+                onAfterAdd: (defaultValue, insertIndex, count) => {
                   if (isValidateList) {
                     proFormContext.formRef.current.validateFields([name]);
                   }
-                  _onAfterAdd === null || _onAfterAdd === void 0 || _onAfterAdd(defaultValue, insertIndex, count);
+                  onAfterAdd?.(defaultValue, insertIndex, count);
                 },
-                onAfterRemove: function onAfterRemove(index, count) {
+                onAfterRemove: (index, count) => {
                   if (isValidateList) {
                     if (count === 0) {
                       proFormContext.formRef.current.validateFields([name]);
                     }
                   }
-                  _onAfterRemove === null || _onAfterRemove === void 0 || _onAfterRemove(index, count);
+                  onAfterRemove?.(index, count);
                 },
                 containerClassName: containerClassName,
                 containerStyle: containerStyle,
-                children: _children
+                children: children
               }), /*#__PURE__*/_jsx(Form.ErrorList, {
                 errors: meta.errors
               })]
             });
           }
-        }))
-      }))
+        })
+      })
     })
   }));
 }

package/es/form/components/List/style.js

@@ -1,57 +1,81 @@
-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.antCls, "-pro"), _defineProperty({}, "".concat(token.antCls, "-form:not(").concat(token.antCls, "-form-horizontal)"), _defineProperty({}, token.componentCls, _defineProperty({}, "&-item:not(".concat(token.componentCls, "-item-show-label)"), _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
-    display: 'none'
-  }))))), token.componentCls, _defineProperty(_defineProperty({
-    maxWidth: '100%',
-    '&-item': {
-      '&&-show-label': _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
-        display: 'inline-block'
-      }),
-      '&&-default:first-child': {
-        'div:first-of-type': _defineProperty({}, "".concat(token.antCls, "-form-item"), _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
-          display: 'inline-block'
-        }))
-      },
-      '&&-default:not(:first-child)': {
-        'div:first-of-type': _defineProperty({}, "".concat(token.antCls, "-form-item"), _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
-          display: 'none'
-        }))
-      }
-    },
-    '&-action': {
-      display: 'flex',
-      height: token.controlHeight,
-      marginBlockEnd: token.marginLG,
-      lineHeight: token.controlHeight + 'px',
-      '&-small': {
-        height: token.controlHeightSM,
-        lineHeight: token.controlHeightSM
+const genProStyle = token => {
+  return {
+    [`${token.antCls}-pro`]: {
+      [`${token.antCls}-form:not(${token.antCls}-form-horizontal)`]: {
+        [token.componentCls]: {
+          [`&-item:not(${token.componentCls}-item-show-label)`]: {
+            [`${token.antCls}-form-item-label`]: {
+              display: 'none'
+            }
+          }
+        }
       }
     },
-    '&-action-icon': {
-      marginInlineStart: 8,
-      cursor: 'pointer',
-      transition: 'color 0.3s ease-in-out',
-      '&:hover': {
-        color: token.colorPrimaryTextHover
+    [token.componentCls]: {
+      maxWidth: '100%',
+      '&-item': {
+        '&&-show-label': {
+          [`${token.antCls}-form-item-label`]: {
+            display: 'inline-block'
+          }
+        },
+        '&&-default:first-child': {
+          'div:first-of-type': {
+            [`${token.antCls}-form-item`]: {
+              [`${token.antCls}-form-item-label`]: {
+                display: 'inline-block'
+              }
+            }
+          }
+        },
+        '&&-default:not(:first-child)': {
+          'div:first-of-type': {
+            [`${token.antCls}-form-item`]: {
+              [`${token.antCls}-form-item-label`]: {
+                display: 'none'
+              }
+            }
+          }
+        }
+      },
+      '&-action': {
+        display: 'flex',
+        height: token.controlHeight,
+        marginBlockEnd: token.marginLG,
+        lineHeight: token.controlHeight + 'px',
+        '&-small': {
+          height: token.controlHeightSM,
+          lineHeight: token.controlHeightSM
+        }
+      },
+      '&-action-icon': {
+        marginInlineStart: 8,
+        cursor: 'pointer',
+        transition: 'color 0.3s ease-in-out',
+        '&:hover': {
+          color: token.colorPrimaryTextHover
+        }
+      },
+      [`${token.proComponentsCls}-card ${token.proComponentsCls}-card-extra`]: {
+        [token.componentCls]: {
+          '&-action': {
+            marginBlockEnd: 0
+          }
+        }
+      },
+      '&-creator-button-top': {
+        marginBlockEnd: 24
       }
     }
-  }, "".concat(token.proComponentsCls, "-card ").concat(token.proComponentsCls, "-card-extra"), _defineProperty({}, token.componentCls, {
-    '&-action': {
-      marginBlockEnd: 0
-    }
-  })), '&-creator-button-top', {
-    marginBlockEnd: 24
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProFormList', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProFormList', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

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

@@ -1,6 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["fieldProps", "proFieldProps", "locale", "min", "max"];
 import React from 'react';
 import { FieldMoney } from "../../../field";
 import { ProConfigProvider } from "../../../provider";
@@ -11,47 +8,48 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * @param
  */
-var ProFormMoney = function ProFormMoney(_ref, ref) {
-  var fieldProps = _ref.fieldProps,
-    proFieldProps = _ref.proFieldProps,
-    locale = _ref.locale,
-    min = _ref.min,
-    max = _ref.max,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const ProFormMoney = ({
+  fieldProps,
+  proFieldProps,
+  locale,
+  min,
+  max,
+  ...rest
+}, ref) => {
   return /*#__PURE__*/_jsx(ProConfigProvider, {
     valueTypeMap: {
       money: {
-        render: function render(text, props) {
-          return /*#__PURE__*/_jsx(FieldMoney, _objectSpread(_objectSpread({}, props), {}, {
-            placeholder: props.placeholder,
-            text: text
-          }));
-        },
-        formItemRender: function formItemRender(text, props) {
-          return /*#__PURE__*/_jsx(FieldMoney, _objectSpread(_objectSpread({}, props), {}, {
-            placeholder: props.placeholder,
-            text: text
-          }));
-        }
+        render: (text, props) => /*#__PURE__*/_jsx(FieldMoney, {
+          ...props,
+          placeholder: props.placeholder,
+          text: text
+        }),
+        formItemRender: (text, props) => /*#__PURE__*/_jsx(FieldMoney, {
+          ...props,
+          placeholder: props.placeholder,
+          text: text
+        })
       }
     },
-    children: /*#__PURE__*/_jsx(ProFormField, _objectSpread({
+    children: /*#__PURE__*/_jsx(ProFormField, {
       valueType: {
         type: 'money',
-        locale: locale
+        locale
+      },
+      fieldProps: {
+        min,
+        max,
+        ...fieldProps
       },
-      fieldProps: _objectSpread({
-        min: min,
-        max: max
-      }, fieldProps),
       ref: ref,
       fieldConfig: {
         defaultProps: {
           width: '100%'
         }
       },
-      proFieldProps: proFieldProps
-    }, rest))
+      proFieldProps: proFieldProps,
+      ...rest
+    })
   });
 };
 export default /*#__PURE__*/React.forwardRef(ProFormMoney);

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

@@ -1,7 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _ref3;
-var _excluded = ["fieldProps", "options", "radioType", "layout", "proFieldProps", "valueEnum"];
 import { Radio } from 'antd';
 import React from 'react';
 import FieldRadio from "../../../field/components/Radio";
@@ -10,60 +6,58 @@ import { runFunction } from "../../../utils";
 import ProField from "../Field";
 import warpField from "../FormItem/warpField";
 import { jsx as _jsx } from "react/jsx-runtime";
-var RadioGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var fieldProps = _ref.fieldProps,
-    options = _ref.options,
-    radioType = _ref.radioType,
-    layout = _ref.layout,
-    proFieldProps = _ref.proFieldProps,
-    valueEnum = _ref.valueEnum,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const RadioGroup = /*#__PURE__*/React.forwardRef(({
+  fieldProps,
+  options,
+  radioType,
+  layout,
+  proFieldProps,
+  valueEnum,
+  ...rest
+}, ref) => {
   return /*#__PURE__*/_jsx(ProConfigProvider, {
     valueTypeMap: {
       radio: {
-        render: function render(text, props) {
-          return /*#__PURE__*/_jsx(FieldRadio, _objectSpread(_objectSpread({}, props), {}, {
-            text: text
-          }));
-        },
-        formItemRender: function formItemRender(text, props) {
-          return /*#__PURE__*/_jsx(FieldRadio, _objectSpread(_objectSpread({}, props), {}, {
-            text: text
-          }));
-        }
+        render: (text, props) => /*#__PURE__*/_jsx(FieldRadio, {
+          ...props,
+          text: text
+        }),
+        formItemRender: (text, props) => /*#__PURE__*/_jsx(FieldRadio, {
+          ...props,
+          text: text
+        })
       },
       radioButton: {
-        render: function render(text, props) {
+        render: (text, props) => {
           console.log(props);
-          return /*#__PURE__*/_jsx(FieldRadio, _objectSpread(_objectSpread({
-            radioType: 'button'
-          }, props), {}, {
+          return /*#__PURE__*/_jsx(FieldRadio, {
+            radioType: 'button',
+            ...props,
             text: text
-          }));
+          });
         },
-        formItemRender: function formItemRender(text, props) {
-          return /*#__PURE__*/_jsx(FieldRadio, _objectSpread(_objectSpread({
-            radioType: 'button'
-          }, props), {}, {
-            text: text
-          }));
-        }
+        formItemRender: (text, props) => /*#__PURE__*/_jsx(FieldRadio, {
+          radioType: 'button',
+          ...props,
+          text: text
+        })
       }
     },
-    children: /*#__PURE__*/_jsx(ProField, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(ProField, {
       valueType: radioType === 'button' ? 'radioButton' : 'radio',
       ref: ref,
-      valueEnum: runFunction(valueEnum, undefined)
-    }, rest), {}, {
-      fieldProps: _objectSpread({
-        options: options,
-        layout: layout
-      }, fieldProps),
+      valueEnum: runFunction(valueEnum, undefined),
+      ...rest,
+      fieldProps: {
+        options,
+        layout,
+        ...fieldProps
+      },
       proFieldProps: proFieldProps,
       fieldConfig: {
         customLightMode: true
       }
-    }))
+    })
   });
 });
 
@@ -72,19 +66,21 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  *
  * @param
  */
-var ProFormRadioComponents = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var fieldProps = _ref2.fieldProps,
-    children = _ref2.children;
-  return /*#__PURE__*/_jsx(Radio, _objectSpread(_objectSpread({}, fieldProps), {}, {
+const ProFormRadioComponents = /*#__PURE__*/React.forwardRef(({
+  fieldProps,
+  children
+}, ref) => {
+  return /*#__PURE__*/_jsx(Radio, {
+    ...fieldProps,
     ref: ref,
     children: children
-  }));
+  });
 });
-var ProFormRadio = (_ref3 = warpField) === null || _ref3 === void 0 ? void 0 : _ref3(ProFormRadioComponents, {
+const ProFormRadio = warpField?.(ProFormRadioComponents, {
   valuePropName: 'checked',
   ignoreWidth: true
 });
-var WrappedProFormRadio = ProFormRadio;
+const WrappedProFormRadio = ProFormRadio;
 WrappedProFormRadio.Group = RadioGroup;
 WrappedProFormRadio.Button = Radio.Button;