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

package/lib/form/components/FormItem/warpField.js

@@ -7,12 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TYPE = void 0;
 exports.warpField = warpField;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classnames2 = _interopRequireDefault(require("classnames"));
-var _rcFieldForm = require("rc-field-form");
+var _form = require("@rc-component/form");
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../utils");
 var _FieldContext = _interopRequireDefault(require("../../FieldContext"));
@@ -20,10 +16,8 @@ var _helpers = require("../../helpers");
 var _Dependency = _interopRequireDefault(require("../Dependency"));
 var _index = _interopRequireDefault(require("./index"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["valueType", "customLightMode", "lightFilterLabelFormatter", "valuePropName", "ignoreWidth", "defaultProps"],
-  _excluded2 = ["label", "tooltip", "placeholder", "width", "bordered", "messageVariables", "ignoreFormItem", "transform", "convertValue", "readonly", "allowClear", "colSize", "getFormItemProps", "getFieldProps", "fieldConfig", "cacheForSwr", "proFieldProps"];
-var TYPE = exports.TYPE = Symbol('ProFormComponent');
-var WIDTH_SIZE_ENUM = {
+const TYPE = exports.TYPE = Symbol('ProFormComponent');
+const WIDTH_SIZE_ENUM = {
   // 适用于短数字，短文本或者选项
   xs: 104,
   s: 216,
@@ -38,7 +32,7 @@ var WIDTH_SIZE_ENUM = {
   // 适用于长文本录入，如长链接、描述、备注等，通常搭配自适应多行输入框或定高文本域使用。
   xl: 552
 };
-var ignoreWidthValueType = ['switch', 'radioButton', 'radio', 'rate'];
+const ignoreWidthValueType = ['switch', 'radioButton', 'radio', 'rate'];
 
 /**
  * 处理fieldProps和formItemProps为function时传进来的方法
@@ -56,209 +50,231 @@ function warpField(Field, config) {
   // @ts-ignore
   // eslint-disable-next-line no-param-reassign
   Field.displayName = 'ProFormComponent';
-  var FieldWithContext = function FieldWithContext(props) {
-    var _props$fieldConfig$co = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props === null || props === void 0 ? void 0 : props.fieldConfig), config),
-      tmpValueType = _props$fieldConfig$co.valueType,
-      customLightMode = _props$fieldConfig$co.customLightMode,
-      lightFilterLabelFormatter = _props$fieldConfig$co.lightFilterLabelFormatter,
-      _props$fieldConfig$co2 = _props$fieldConfig$co.valuePropName,
-      valuePropName = _props$fieldConfig$co2 === void 0 ? 'value' : _props$fieldConfig$co2,
-      ignoreWidth = _props$fieldConfig$co.ignoreWidth,
-      defaultProps = _props$fieldConfig$co.defaultProps,
-      defaultFormItemProps = (0, _objectWithoutProperties2.default)(_props$fieldConfig$co, _excluded);
-    var _defaultProps$props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), props),
-      label = _defaultProps$props.label,
-      tooltip = _defaultProps$props.tooltip,
-      placeholder = _defaultProps$props.placeholder,
-      width = _defaultProps$props.width,
-      bordered = _defaultProps$props.bordered,
-      messageVariables = _defaultProps$props.messageVariables,
-      ignoreFormItem = _defaultProps$props.ignoreFormItem,
-      transform = _defaultProps$props.transform,
-      convertValue = _defaultProps$props.convertValue,
-      readonly = _defaultProps$props.readonly,
-      allowClear = _defaultProps$props.allowClear,
-      colSize = _defaultProps$props.colSize,
-      getFormItemProps = _defaultProps$props.getFormItemProps,
-      getFieldProps = _defaultProps$props.getFieldProps,
-      fieldConfig = _defaultProps$props.fieldConfig,
-      cacheForSwr = _defaultProps$props.cacheForSwr,
-      proFieldProps = _defaultProps$props.proFieldProps,
-      rest = (0, _objectWithoutProperties2.default)(_defaultProps$props, _excluded2);
-    var valueType = tmpValueType || rest.valueType;
+  const FieldWithContext = props => {
+    const {
+      valueType: tmpValueType,
+      customLightMode,
+      lightFilterLabelFormatter,
+      valuePropName = 'value',
+      ignoreWidth,
+      defaultProps,
+      ...defaultFormItemProps
+    } = {
+      ...props?.fieldConfig,
+      ...config
+    };
+    const {
+      label,
+      tooltip,
+      placeholder,
+      width,
+      bordered,
+      messageVariables,
+      ignoreFormItem,
+      transform,
+      convertValue,
+      readonly,
+      allowClear,
+      colSize,
+      getFormItemProps,
+      getFieldProps,
+      fieldConfig,
+      cacheForSwr,
+      proFieldProps,
+      ...rest
+    } = {
+      ...defaultProps,
+      ...props
+    };
+    const valueType = tmpValueType || rest.valueType;
 
     // 有些 valueType 不需要宽度
-    var isIgnoreWidth = (0, _react.useMemo)(function () {
-      return ignoreWidth || ignoreWidthValueType.includes(valueType);
-    }, [ignoreWidth, valueType]);
-    var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      forceUpdate = _useState2[1];
+    const isIgnoreWidth = (0, _react.useMemo)(() => ignoreWidth || ignoreWidthValueType.includes(valueType), [ignoreWidth, valueType]);
+    const [, forceUpdate] = (0, _react.useState)();
 
     // onChange触发fieldProps,formItemProps重新执行
-    var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      onlyChange = _useState4[0],
-      forceUpdateByOnChange = _useState4[1];
+    const [onlyChange, forceUpdateByOnChange] = (0, _react.useState)();
 
     /**
      * 从 context 中拿到的值
      */
-    var contextValue = _react.default.useContext(_FieldContext.default);
+    const contextValue = _react.default.useContext(_FieldContext.default);
 
     /**
      * dependenciesValues change to trigger re-execute of getFieldProps and getFormItemProps
      */
-    var changedProps = (0, _utils.useDeepCompareMemo)(function () {
+    const changedProps = (0, _utils.useDeepCompareMemo)(() => {
       return {
-        formItemProps: getFormItemProps === null || getFormItemProps === void 0 ? void 0 : getFormItemProps(),
-        fieldProps: getFieldProps === null || getFieldProps === void 0 ? void 0 : getFieldProps()
+        formItemProps: getFormItemProps?.(),
+        fieldProps: getFieldProps?.()
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange]);
-    var fieldProps = (0, _utils.useDeepCompareMemo)(function () {
-      var newFieldProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, ignoreFormItem ? (0, _utils.omitUndefined)({
-        value: rest.value
-      }) : {}), {}, {
-        placeholder: placeholder,
-        disabled: props.disabled
-      }, contextValue.fieldProps), changedProps.fieldProps), rest.fieldProps);
-      newFieldProps.style = (0, _utils.omitUndefined)(newFieldProps === null || newFieldProps === void 0 ? void 0 : newFieldProps.style);
+    const fieldProps = (0, _utils.useDeepCompareMemo)(() => {
+      const newFieldProps = {
+        ...(ignoreFormItem ? (0, _utils.omitUndefined)({
+          value: rest.value
+        }) : {}),
+        placeholder,
+        disabled: props.disabled,
+        ...contextValue.fieldProps,
+        ...changedProps.fieldProps,
+        // 支持未传递getFieldProps的情况
+        // 某些特殊hack情况下覆盖原来设置的fieldProps参数
+        ...rest.fieldProps
+      };
+      newFieldProps.style = (0, _utils.omitUndefined)(newFieldProps?.style);
       return newFieldProps;
     }, [ignoreFormItem, rest.value, rest.fieldProps, placeholder, props.disabled, contextValue.fieldProps, changedProps.fieldProps]);
 
     // restFormItemProps is user props pass to Form.Item
-    var restFormItemProps = (0, _utils.pickProFormItemProps)(rest);
-    var formItemProps = (0, _utils.useDeepCompareMemo)(function () {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, contextValue.formItemProps), restFormItemProps), changedProps.formItemProps), rest.formItemProps);
-    }, [changedProps.formItemProps, contextValue.formItemProps, rest.formItemProps, restFormItemProps]);
-    var otherProps = (0, _utils.useDeepCompareMemo)(function () {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        messageVariables: messageVariables
-      }, defaultFormItemProps), formItemProps);
-    }, [defaultFormItemProps, formItemProps, messageVariables]);
-    var _useContext = (0, _react.useContext)(_rcFieldForm.FieldContext),
-      prefixName = _useContext.prefixName;
-    var proFieldKey = (0, _utils.useDeepCompareMemo)(function () {
-      var _contextValue$formKey;
-      var name = otherProps === null || otherProps === void 0 ? void 0 : otherProps.name;
+    const restFormItemProps = (0, _utils.pickProFormItemProps)(rest);
+    const formItemProps = (0, _utils.useDeepCompareMemo)(() => ({
+      ...contextValue.formItemProps,
+      ...restFormItemProps,
+      ...changedProps.formItemProps,
+      // 支持未传递getFormItemProps的情况
+      // 某些特殊hack情况下覆盖原来设置的formItemProps参数
+      ...rest.formItemProps
+    }), [changedProps.formItemProps, contextValue.formItemProps, rest.formItemProps, restFormItemProps]);
+    const otherProps = (0, _utils.useDeepCompareMemo)(() => ({
+      messageVariables,
+      ...defaultFormItemProps,
+      ...formItemProps
+    }), [defaultFormItemProps, formItemProps, messageVariables]);
+    const {
+      prefixName
+    } = (0, _react.useContext)(_form.FieldContext);
+    const proFieldKey = (0, _utils.useDeepCompareMemo)(() => {
+      let name = otherProps?.name;
       if (Array.isArray(name)) name = name.join('_');
-      if (Array.isArray(prefixName) && name) name = "".concat(prefixName.join('.'), ".").concat(name);
-      var key = name && "form-".concat((_contextValue$formKey = contextValue.formKey) !== null && _contextValue$formKey !== void 0 ? _contextValue$formKey : '', "-field-").concat(name);
+      if (Array.isArray(prefixName) && name) name = `${prefixName.join('.')}.${name}`;
+      const key = name && `form-${contextValue.formKey ?? ''}-field-${name}`;
       return key;
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [(0, _utils.stringify)(otherProps === null || otherProps === void 0 ? void 0 : otherProps.name), prefixName, contextValue.formKey]);
-    var onChange = (0, _utils.useRefFunction)(function () {
-      var _fieldProps$onChange;
+    }, [(0, _utils.stringify)(otherProps?.name), prefixName, contextValue.formKey]);
+    const onChange = (0, _utils.useRefFunction)((...restParams) => {
       if (getFormItemProps || getFieldProps) {
         forceUpdateByOnChange([]);
       } else if (rest.formItemRender) {
         forceUpdate([]);
       }
-      for (var _len = arguments.length, restParams = new Array(_len), _key = 0; _key < _len; _key++) {
-        restParams[_key] = arguments[_key];
-      }
-      fieldProps === null || fieldProps === void 0 || (_fieldProps$onChange = fieldProps.onChange) === null || _fieldProps$onChange === void 0 || _fieldProps$onChange.call.apply(_fieldProps$onChange, [fieldProps].concat(restParams));
+      fieldProps?.onChange?.(...restParams);
     });
-    var style = (0, _utils.useDeepCompareMemo)(function () {
-      var newStyle = (0, _objectSpread2.default)({
-        width: width && !WIDTH_SIZE_ENUM[width] ? width : contextValue.grid ? '100%' : undefined
-      }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style);
+    const style = (0, _utils.useDeepCompareMemo)(() => {
+      const newStyle = {
+        width: width && !WIDTH_SIZE_ENUM[width] ? width : contextValue.grid ? '100%' : undefined,
+        ...fieldProps?.style
+      };
       if (isIgnoreWidth) Reflect.deleteProperty(newStyle, 'width');
       return (0, _utils.omitUndefined)(newStyle);
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [(0, _utils.stringify)(fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style), contextValue.grid, isIgnoreWidth, width]);
-    var className = (0, _utils.useDeepCompareMemo)(function () {
-      var isSizeEnum = width && WIDTH_SIZE_ENUM[width];
-      return (0, _classnames2.default)(fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className, (0, _defineProperty2.default)({
-        'pro-field': isSizeEnum
-      }, "pro-field-".concat(width), isSizeEnum && !isIgnoreWidth)) || undefined;
-    }, [width, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className, isIgnoreWidth]);
-    var fieldProFieldProps = (0, _utils.useDeepCompareMemo)(function () {
-      return (0, _utils.omitUndefined)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, contextValue.proFieldProps), {}, {
-        mode: rest === null || rest === void 0 ? void 0 : rest.mode,
-        readonly: readonly,
+    }, [(0, _utils.stringify)(fieldProps?.style), contextValue.grid, isIgnoreWidth, width]);
+    const className = (0, _utils.useDeepCompareMemo)(() => {
+      const isSizeEnum = width && WIDTH_SIZE_ENUM[width];
+      return (0, _clsx.clsx)(fieldProps?.className, {
+        'pro-field': isSizeEnum,
+        [`pro-field-${width}`]: isSizeEnum && !isIgnoreWidth
+      }) || undefined;
+    }, [width, fieldProps?.className, isIgnoreWidth]);
+    const fieldProFieldProps = (0, _utils.useDeepCompareMemo)(() => {
+      return (0, _utils.omitUndefined)({
+        ...contextValue.proFieldProps,
+        mode: rest?.mode,
+        readonly,
         params: rest.params,
         proFieldKey: proFieldKey,
-        cacheForSwr: cacheForSwr
-      }, proFieldProps));
-    }, [contextValue.proFieldProps, rest === null || rest === void 0 ? void 0 : rest.mode, rest.params, readonly, proFieldKey, cacheForSwr, proFieldProps]);
-    var fieldFieldProps = (0, _utils.useDeepCompareMemo)(function () {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        onChange: onChange,
-        allowClear: allowClear
-      }, fieldProps), {}, {
-        style: style,
-        className: className
+        cacheForSwr,
+        ...proFieldProps
       });
+    }, [contextValue.proFieldProps, rest?.mode, rest.params, readonly, proFieldKey, cacheForSwr, proFieldProps]);
+    const fieldFieldProps = (0, _utils.useDeepCompareMemo)(() => {
+      return {
+        onChange,
+        allowClear,
+        ...fieldProps,
+        style,
+        className
+      };
     }, [allowClear, className, onChange, fieldProps, style]);
-    var field = (0, _utils.useDeepCompareMemo)(function () {
+    const field = (0, _utils.useDeepCompareMemo)(() => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Field
       // @ts-ignore
-      , (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+      , {
+        ...rest,
         fieldProps: fieldFieldProps,
         proFieldProps: fieldProFieldProps,
-        ref: props === null || props === void 0 ? void 0 : props.fieldRef
-      }), props.proFormFieldKey || props.name);
+        ref: props?.fieldRef
+      }, props.proFormFieldKey || props.name);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fieldProFieldProps, fieldFieldProps, rest]);
 
     // 使用useMemo包裹避免不必要的re-render
-    var formItem = (0, _utils.useDeepCompareMemo)(function () {
-      var _otherProps$name, _field$props$allowCle, _field$props, _field$props2;
+    const formItem = (0, _utils.useDeepCompareMemo)(() => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default
       // 全局的提供一个 tip 功能，可以减少代码量
       // 轻量模式下不通过 FormItem 显示 label
-      , (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        label: label && (proFieldProps === null || proFieldProps === void 0 ? void 0 : proFieldProps.light) !== true ? label : undefined,
-        tooltip: (proFieldProps === null || proFieldProps === void 0 ? void 0 : proFieldProps.light) !== true && tooltip,
+      , {
+        label: label && proFieldProps?.light !== true ? label : undefined,
+        tooltip: proFieldProps?.light !== true && tooltip,
         valuePropName: valuePropName
         // @ts-ignore
-      }, otherProps), {}, {
+        ,
+        ...otherProps,
         ignoreFormItem: ignoreFormItem,
         transform: transform,
-        dataFormat: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.format,
+        dataFormat: fieldProps?.format,
         valueType: valueType,
-        messageVariables: (0, _objectSpread2.default)({
-          label: label || ''
-        }, otherProps === null || otherProps === void 0 ? void 0 : otherProps.messageVariables),
+        messageVariables: {
+          label: label || '',
+          ...otherProps?.messageVariables
+        },
         convertValue: convertValue,
-        lightProps: (0, _utils.omitUndefined)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldProps), {}, {
-          valueType: valueType,
-          bordered: bordered,
-          allowClear: (_field$props$allowCle = field === null || field === void 0 || (_field$props = field.props) === null || _field$props === void 0 ? void 0 : _field$props.allowClear) !== null && _field$props$allowCle !== void 0 ? _field$props$allowCle : allowClear,
-          light: proFieldProps === null || proFieldProps === void 0 ? void 0 : proFieldProps.light,
-          label: label,
-          customLightMode: customLightMode,
+        lightProps: (0, _utils.omitUndefined)({
+          ...fieldProps,
+          valueType,
+          bordered,
+          allowClear: field?.props?.allowClear ?? allowClear,
+          light: proFieldProps?.light,
+          label,
+          customLightMode,
           labelFormatter: lightFilterLabelFormatter,
-          valuePropName: valuePropName,
-          footerRender: field === null || field === void 0 || (_field$props2 = field.props) === null || _field$props2 === void 0 ? void 0 : _field$props2.footerRender
-        }, rest.lightProps), otherProps.lightProps)),
+          valuePropName,
+          footerRender: field?.props?.footerRender,
+          // 使用用户的配置覆盖默认的配置
+          ...rest.lightProps,
+          ...otherProps.lightProps
+        }),
         children: field
-      }), props.proFormFieldKey || ((_otherProps$name = otherProps.name) === null || _otherProps$name === void 0 ? void 0 : _otherProps$name.toString()));
-    }, [label, proFieldProps === null || proFieldProps === void 0 ? void 0 : proFieldProps.light, tooltip, valuePropName, props.proFormFieldKey, otherProps, ignoreFormItem, transform, fieldProps, valueType, convertValue, bordered, field, allowClear, customLightMode, lightFilterLabelFormatter, rest.lightProps]);
-    var _useGridHelpers = (0, _helpers.useGridHelpers)(rest),
-      ColWrapper = _useGridHelpers.ColWrapper;
+      }, props.proFormFieldKey || otherProps.name?.toString());
+    }, [label, proFieldProps?.light, tooltip, valuePropName, props.proFormFieldKey, otherProps, ignoreFormItem, transform, fieldProps, valueType, convertValue, bordered, field, allowClear, customLightMode, lightFilterLabelFormatter, rest.lightProps]);
+    const {
+      ColWrapper
+    } = (0, _helpers.useGridHelpers)(rest);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColWrapper, {
       children: formItem
     });
   };
-  var DependencyWrapper = function DependencyWrapper(props) {
-    var dependencies = props.dependencies;
+  const DependencyWrapper = props => {
+    const {
+      dependencies
+    } = props;
     return dependencies ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dependency.default, {
       name: dependencies,
-      originDependencies: props === null || props === void 0 ? void 0 : props.originDependencies,
-      children: function children(values) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldWithContext, (0, _objectSpread2.default)({
+      originDependencies: props?.originDependencies,
+      children: values => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldWithContext, {
           dependenciesValues: values,
-          dependencies: dependencies
-        }, props));
+          dependencies: dependencies,
+          ...props
+        });
       }
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldWithContext, (0, _objectSpread2.default)({
-      dependencies: dependencies
-    }, props));
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldWithContext, {
+      dependencies: dependencies,
+      ...props
+    });
   };
   return DependencyWrapper;
 }