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

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

@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FormListContext = void 0;
 exports.ProFormList = ProFormList;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -22,82 +19,81 @@ var _helpers = require("../../helpers");
 var _ListContainer = require("./ListContainer");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
-var noteOnce = _util.warning.noteOnce;
-var FormListContext = exports.FormListContext = /*#__PURE__*/_react.default.createContext({});
+const {
+  noteOnce
+} = _util.warning;
+const FormListContext = exports.FormListContext = /*#__PURE__*/_react.default.createContext({});
 function ProFormList(props) {
-  var actionRefs = (0, _react.useRef)();
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var listContext = (0, _react.useContext)(FormListContext);
-  var baseClassName = context.getPrefixCls('pro-form-list');
+  const actionRefs = (0, _react.useRef)();
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const listContext = (0, _react.useContext)(FormListContext);
+  const baseClassName = context.getPrefixCls('pro-form-list');
   // Internationalization
-  var intl = (0, _provider.useIntl)();
+  const intl = (0, _provider.useIntl)();
   /** 从 context 中拿到的值 */
-  var _React$useContext = _react.default.useContext(_FieldContext.default),
-    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.default.useContext(_FieldContext.default);
+  const {
+    transform,
+    actionRender,
+    creatorButtonProps,
+    label,
+    alwaysShowItemLabel,
+    tooltip,
+    creatorRecord,
+    itemRender,
+    rules,
+    itemContainerRender,
+    fieldExtraRender,
+    copyIconProps = {
       Icon: _icons.CopyOutlined,
       tooltipText: intl.getMessage('copyThisLine', '复制此项')
-    } : _props$copyIconProps,
-    _children = props.children,
-    _props$deleteIconProp = props.deleteIconProps,
-    deleteIconProps = _props$deleteIconProp === void 0 ? {
+    },
+    children,
+    deleteIconProps = {
       Icon: _icons.DeleteOutlined,
       tooltipText: intl.getMessage('deleteThisLine', '删除此项')
-    } : _props$deleteIconProp,
-    arrowSort = props.arrowSort,
-    _props$upIconProps = props.upIconProps,
-    upIconProps = _props$upIconProps === void 0 ? {
+    },
+    arrowSort,
+    upIconProps = {
       Icon: _icons.ArrowUpOutlined,
       tooltipText: intl.getMessage('sortUpThisLine', '向上排序')
-    } : _props$upIconProps,
-    _props$downIconProps = props.downIconProps,
-    downIconProps = _props$downIconProps === void 0 ? {
+    },
+    downIconProps = {
       Icon: _icons.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useGridHelpers = (0, _helpers.useGridHelpers)({
-      colProps: colProps,
-      rowProps: rowProps
-    }),
-    ColWrapper = _useGridHelpers.ColWrapper,
-    RowWrapper = _useGridHelpers.RowWrapper;
-  var proFormContext = (0, _react.useContext)(_utils.ProFormContext);
+    },
+    actionRef,
+    style,
+    prefixCls,
+    actionGuard,
+    min,
+    max,
+    colProps,
+    wrapperCol,
+    rowProps,
+    onAfterAdd,
+    onAfterRemove,
+    isValidateList = false,
+    emptyListMessage = '列表不能为空',
+    className,
+    containerClassName,
+    containerStyle,
+    readonly,
+    ...rest
+  } = props;
+  const {
+    ColWrapper,
+    RowWrapper
+  } = (0, _helpers.useGridHelpers)({
+    colProps,
+    rowProps
+  });
+  const proFormContext = (0, _react.useContext)(_utils.ProFormContext);
 
   // 处理 list 的嵌套
-  var name = (0, _react.useMemo)(function () {
+  const name = (0, _react.useMemo)(() => {
     if (listContext.name === undefined) {
       return [rest.name].flat(1);
     }
@@ -105,21 +101,18 @@ function ProFormList(props) {
   }, [listContext.name, rest.name]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  (0, _react.useImperativeHandle)(actionRef, function () {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionRefs.current), {}, {
-      get: function get(index) {
-        return proFormContext.formRef.current.getFieldValue([].concat((0, _toConsumableArray2.default)(name), [index]));
-      },
-      getList: function getList() {
-        return proFormContext.formRef.current.getFieldValue((0, _toConsumableArray2.default)(name));
-      }
-    });
-  }, [name, proFormContext.formRef]);
-  (0, _react.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.");
+  (0, _react.useImperativeHandle)(actionRef, () => ({
+    ...actionRefs.current,
+    get: index => {
+      return proFormContext.formRef.current.getFieldValue([...name, index]);
+    },
+    getList: () => proFormContext.formRef.current.getFieldValue([...name])
+  }), [name, proFormContext.formRef]);
+  (0, _react.useEffect)(() => {
+    noteOnce(!!proFormContext.formRef, `ProFormList 必须要放到 ProForm 中,否则会造成行为异常。`);
+    noteOnce(!!proFormContext.formRef, `Proformlist must be placed in ProForm, otherwise it will cause abnormal behavior.`);
   }, [proFormContext.formRef]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // 如果 setFieldValueType 和 props.name 不存在不存入
     if (!setFieldValueType || !props.name) {
       return;
@@ -127,35 +120,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 = (0, _style.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(baseClassName);
   if (!proFormContext.formRef) return null;
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(ColWrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(baseClassName, hashId),
+      className: (0, _clsx.clsx)(baseClassName, hashId),
       style: style,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.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));
             }
@@ -163,11 +153,11 @@ function ProFormList(props) {
           },
           required: true
         }] : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.List, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          rules: rules
-        }, rest), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.List, {
+          rules: rules,
+          ...rest,
           name: name,
-          children: function children(fields, action, meta) {
+          children: (fields, action, meta) => {
             // 将 action 暴露给外部
             actionRefs.current = action;
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RowWrapper, {
@@ -196,30 +186,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__*/(0, _jsxRuntime.jsx)(_antd.Form.ErrorList, {
                 errors: meta.errors
               })]
             });
           }
-        }))
-      }))
+        })
+      })
     })
   }));
 }

package/lib/form/components/List/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/lib/form/components/List/style.js

@@ -1,64 +1,87 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-pro"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-form:not(").concat(token.antCls, "-form-horizontal)"), (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)({}, "&-item:not(".concat(token.componentCls, "-item-show-label)"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-form-item-label"), {
-    display: 'none'
-  }))))), token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    maxWidth: '100%',
-    '&-item': {
-      '&&-show-label': (0, _defineProperty2.default)({}, "".concat(token.antCls, "-form-item-label"), {
-        display: 'inline-block'
-      }),
-      '&&-default:first-child': {
-        'div:first-of-type': (0, _defineProperty2.default)({}, "".concat(token.antCls, "-form-item"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-form-item-label"), {
-          display: 'inline-block'
-        }))
-      },
-      '&&-default:not(:first-child)': {
-        'div:first-of-type': (0, _defineProperty2.default)({}, "".concat(token.antCls, "-form-item"), (0, _defineProperty2.default)({}, "".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"), (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-action': {
-      marginBlockEnd: 0
-    }
-  })), '&-creator-button-top', {
-    marginBlockEnd: 24
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProFormList', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProFormList', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

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

@@ -5,60 +5,58 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _field = require("../../../field");
 var _provider = require("../../../provider");
 var _Field = _interopRequireDefault(require("../Field"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["fieldProps", "proFieldProps", "locale", "min", "max"];
 /**
  * 金额输入框
  *
  * @param
  */
-var ProFormMoney = function ProFormMoney(_ref, ref) {
-  var fieldProps = _ref.fieldProps,
-    proFieldProps = _ref.proFieldProps,
-    locale = _ref.locale,
-    min = _ref.min,
-    max = _ref.max,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const ProFormMoney = ({
+  fieldProps,
+  proFieldProps,
+  locale,
+  min,
+  max,
+  ...rest
+}, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     valueTypeMap: {
       money: {
-        render: function render(text, props) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldMoney, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-            placeholder: props.placeholder,
-            text: text
-          }));
-        },
-        formItemRender: function formItemRender(text, props) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldMoney, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-            placeholder: props.placeholder,
-            text: text
-          }));
-        }
+        render: (text, props) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldMoney, {
+          ...props,
+          placeholder: props.placeholder,
+          text: text
+        }),
+        formItemRender: (text, props) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldMoney, {
+          ...props,
+          placeholder: props.placeholder,
+          text: text
+        })
       }
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.default, (0, _objectSpread2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.default, {
       valueType: {
         type: 'money',
-        locale: locale
+        locale
+      },
+      fieldProps: {
+        min,
+        max,
+        ...fieldProps
       },
-      fieldProps: (0, _objectSpread2.default)({
-        min: min,
-        max: max
-      }, fieldProps),
       ref: ref,
       fieldConfig: {
         defaultProps: {
           width: '100%'
         }
       },
-      proFieldProps: proFieldProps
-    }, rest))
+      proFieldProps: proFieldProps,
+      ...rest
+    })
   });
 };
 var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(ProFormMoney);