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

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

@@ -1,9 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "onChange", "onBlur", "ignoreFormItem", "valuePropName"],
-  _excluded2 = ["children", "addonAfter", "addonBefore", "valuePropName", "addonWarpStyle", "convertValue", "help"],
-  _excluded3 = ["valueType", "transform", "dataFormat", "ignoreFormItem", "lightProps", "children"];
 import { omit } from '@rc-component/util';
 import { ConfigProvider, Form } from 'antd';
 import React, { useContext, useEffect, useMemo } from 'react';
@@ -15,7 +9,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-var FormItemProvide = /*#__PURE__*/React.createContext({});
+const FormItemProvide = /*#__PURE__*/React.createContext({});
 
 /**
  * 把value扔给 fieldProps，方便给自定义用
@@ -23,82 +17,73 @@ var FormItemProvide = /*#__PURE__*/React.createContext({});
  * @param param0
  * @returns
  */
-var WithValueFomFiledProps = function WithValueFomFiledProps(formFieldProps) {
-  var _filedChildren$type, _filedChildren$props9;
-  var filedChildren = formFieldProps.children,
-    onChange = formFieldProps.onChange,
-    onBlur = formFieldProps.onBlur,
-    ignoreFormItem = formFieldProps.ignoreFormItem,
-    _formFieldProps$value = formFieldProps.valuePropName,
-    valuePropName = _formFieldProps$value === void 0 ? 'value' : _formFieldProps$value,
-    restProps = _objectWithoutProperties(formFieldProps, _excluded);
-  var isProFormComponent =
+const WithValueFomFiledProps = formFieldProps => {
+  const {
+    children: filedChildren,
+    onChange,
+    onBlur,
+    ignoreFormItem,
+    valuePropName = 'value',
+    ...restProps
+  } = formFieldProps;
+  const isProFormComponent =
   // @ts-ignore
-  (filedChildren === null || filedChildren === void 0 || (_filedChildren$type = filedChildren.type) === null || _filedChildren$type === void 0 ? void 0 : _filedChildren$type.displayName) !== 'ProFormComponent';
-  var isValidElementForFiledChildren = ! /*#__PURE__*/React.isValidElement(filedChildren);
-  var onChangeMemo = useRefFunction(function () {
-    var _filedChildren$props, _filedChildren$props$, _filedChildren$props2, _filedChildren$props3;
-    for (var _len = arguments.length, restParams = new Array(_len), _key = 0; _key < _len; _key++) {
-      restParams[_key] = arguments[_key];
-    }
-    onChange === null || onChange === void 0 || onChange.apply(void 0, restParams);
+  filedChildren?.type?.displayName !== 'ProFormComponent';
+  const isValidElementForFiledChildren = ! /*#__PURE__*/React.isValidElement(filedChildren);
+  const onChangeMemo = useRefFunction(function (...restParams) {
+    onChange?.(...restParams);
     if (isProFormComponent) return;
     if (isValidElementForFiledChildren) return undefined;
-    filedChildren === null || filedChildren === void 0 || (_filedChildren$props = filedChildren.props) === null || _filedChildren$props === void 0 || (_filedChildren$props$ = _filedChildren$props.onChange) === null || _filedChildren$props$ === void 0 || _filedChildren$props$.call.apply(_filedChildren$props$, [_filedChildren$props].concat(restParams));
-    filedChildren === null || filedChildren === void 0 || (_filedChildren$props2 = filedChildren.props) === null || _filedChildren$props2 === void 0 || (_filedChildren$props2 = _filedChildren$props2.fieldProps) === null || _filedChildren$props2 === void 0 || (_filedChildren$props3 = _filedChildren$props2.onChange) === null || _filedChildren$props3 === void 0 || _filedChildren$props3.call.apply(_filedChildren$props3, [_filedChildren$props2].concat(restParams));
+    filedChildren?.props?.onChange?.(...restParams);
+    filedChildren?.props?.fieldProps?.onChange?.(...restParams);
   });
-  var onBlurMemo = useRefFunction(function () {
-    var _filedChildren$props4, _filedChildren$props5, _filedChildren$props6, _filedChildren$props7;
+  const onBlurMemo = useRefFunction(function (...restParams) {
     if (isProFormComponent) return;
     if (isValidElementForFiledChildren) return;
-    for (var _len2 = arguments.length, restParams = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      restParams[_key2] = arguments[_key2];
-    }
-    onBlur === null || onBlur === void 0 || onBlur.apply(void 0, restParams);
-    filedChildren === null || filedChildren === void 0 || (_filedChildren$props4 = filedChildren.props) === null || _filedChildren$props4 === void 0 || (_filedChildren$props5 = _filedChildren$props4.onBlur) === null || _filedChildren$props5 === void 0 || _filedChildren$props5.call.apply(_filedChildren$props5, [_filedChildren$props4].concat(restParams));
-    filedChildren === null || filedChildren === void 0 || (_filedChildren$props6 = filedChildren.props) === null || _filedChildren$props6 === void 0 || (_filedChildren$props6 = _filedChildren$props6.fieldProps) === null || _filedChildren$props6 === void 0 || (_filedChildren$props7 = _filedChildren$props6.onBlur) === null || _filedChildren$props7 === void 0 || _filedChildren$props7.call.apply(_filedChildren$props7, [_filedChildren$props6].concat(restParams));
+    onBlur?.(...restParams);
+    filedChildren?.props?.onBlur?.(...restParams);
+    filedChildren?.props?.fieldProps?.onBlur?.(...restParams);
   });
-  var omitOnBlurAndOnChangeProps = useDeepCompareMemo(function () {
-    var _filedChildren$props8;
-    return omit(
-    // @ts-ignore
-    (filedChildren === null || filedChildren === void 0 || (_filedChildren$props8 = filedChildren.props) === null || _filedChildren$props8 === void 0 ? void 0 : _filedChildren$props8.fieldProps) || {}, ['onBlur', 'onChange']);
-  }, [omit(
+  const omitOnBlurAndOnChangeProps = useDeepCompareMemo(() => omit(
+  // @ts-ignore
+  filedChildren?.props?.fieldProps || {}, ['onBlur', 'onChange']), [omit(
   // @ts-ignore
-  (filedChildren === null || filedChildren === void 0 || (_filedChildren$props9 = filedChildren.props) === null || _filedChildren$props9 === void 0 ? void 0 : _filedChildren$props9.fieldProps) || {}, ['onBlur', 'onChange'])]);
-  var propsValuePropName = formFieldProps[valuePropName];
-  var fieldProps = useMemo(function () {
+  filedChildren?.props?.fieldProps || {}, ['onBlur', 'onChange'])]);
+  const propsValuePropName = formFieldProps[valuePropName];
+  const fieldProps = useMemo(() => {
     if (isProFormComponent) return undefined;
     if (isValidElementForFiledChildren) return undefined;
-    return omitUndefined(_objectSpread(_objectSpread(_defineProperty({
-      id: restProps.id
-    }, valuePropName, propsValuePropName), omitOnBlurAndOnChangeProps), {}, {
+    return omitUndefined({
+      id: restProps.id,
+      // 优先使用 children.props.fieldProps，
+      // 比如 LightFilter 中可能需要通过 fieldProps 覆盖 Form.Item 默认的 onChange
+      [valuePropName]: propsValuePropName,
+      ...omitOnBlurAndOnChangeProps,
       onBlur: onBlurMemo,
       // 这个 onChange 是 Form.Item 添加上的，
       // 要通过 fieldProps 透传给 ProField 调用
       onChange: onChangeMemo
-    }));
+    });
   }, [propsValuePropName, omitOnBlurAndOnChangeProps, onBlurMemo, onChangeMemo, restProps.id, valuePropName]);
-  var finalChange = useMemo(function () {
+  const finalChange = useMemo(() => {
     if (fieldProps) return undefined;
     if (! /*#__PURE__*/React.isValidElement(filedChildren)) return undefined;
-    return function () {
-      var _filedChildren$props10, _filedChildren$props11;
-      for (var _len3 = arguments.length, restParams = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        restParams[_key3] = arguments[_key3];
-      }
-      onChange === null || onChange === void 0 || onChange.apply(void 0, restParams);
-      filedChildren === null || filedChildren === void 0 || (_filedChildren$props10 = filedChildren.props) === null || _filedChildren$props10 === void 0 || (_filedChildren$props11 = _filedChildren$props10.onChange) === null || _filedChildren$props11 === void 0 || _filedChildren$props11.call.apply(_filedChildren$props11, [_filedChildren$props10].concat(restParams));
+    return (...restParams) => {
+      onChange?.(...restParams);
+      filedChildren?.props?.onChange?.(...restParams);
     };
   }, [fieldProps, filedChildren, onChange]);
   if (! /*#__PURE__*/React.isValidElement(filedChildren)) return /*#__PURE__*/_jsx(_Fragment, {
     children: filedChildren
   });
-  return /*#__PURE__*/React.cloneElement(filedChildren, omitUndefined(_objectSpread(_objectSpread(_objectSpread({}, restProps), {}, _defineProperty({}, valuePropName, formFieldProps[valuePropName]), filedChildren.props), {}, {
+  return /*#__PURE__*/React.cloneElement(filedChildren, omitUndefined({
+    ...restProps,
+    [valuePropName]: formFieldProps[valuePropName],
+    ...filedChildren.props,
     onChange: finalChange,
-    fieldProps: fieldProps,
+    fieldProps,
     onBlur: isProFormComponent && !isValidElementForFiledChildren && onBlur
-  })));
+  }));
 };
 /**
  * 支持了一下前置 dom 和后置的 dom 同时包一个provide
@@ -106,27 +91,30 @@ var WithValueFomFiledProps = function WithValueFomFiledProps(formFieldProps) {
  * @param WarpFormItemProps
  * @returns
  */
-var WarpFormItem = function WarpFormItem(_ref) {
-  var children = _ref.children,
-    addonAfter = _ref.addonAfter,
-    addonBefore = _ref.addonBefore,
-    valuePropName = _ref.valuePropName,
-    addonWarpStyle = _ref.addonWarpStyle,
-    convertValue = _ref.convertValue,
-    help = _ref.help,
-    props = _objectWithoutProperties(_ref, _excluded2);
-  var formDom = useMemo(function () {
-    var getValuePropsFunc = function getValuePropsFunc(value) {
-      var _convertValue;
-      var newValue = (_convertValue = convertValue === null || convertValue === void 0 ? void 0 : convertValue(value, props.name)) !== null && _convertValue !== void 0 ? _convertValue : value;
+const WarpFormItem = ({
+  children,
+  addonAfter,
+  addonBefore,
+  valuePropName,
+  addonWarpStyle,
+  convertValue,
+  help,
+  ...props
+}) => {
+  const formDom = useMemo(() => {
+    let getValuePropsFunc = value => {
+      const newValue = convertValue?.(value, props.name) ?? value;
       if (props.getValueProps) return props.getValueProps(newValue);
-      return _defineProperty({}, valuePropName || 'value', newValue);
+      return {
+        [valuePropName || 'value']: newValue
+      };
     };
     if (!convertValue && !props.getValueProps) {
       getValuePropsFunc = undefined;
     }
     if (!addonAfter && !addonBefore) {
-      return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, props), {}, {
+      return /*#__PURE__*/_jsx(Form.Item, {
+        ...props,
         //help={typeof help !== 'function' ? help : undefined}
         valuePropName: valuePropName,
         getValueProps: getValuePropsFunc
@@ -158,47 +146,47 @@ var WarpFormItem = function WarpFormItem(_ref) {
         // }}
         ,
         children: children
-      }));
+      });
     }
-    return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+    return /*#__PURE__*/_jsx(Form.Item, {
+      ...props,
       help: typeof help !== 'function' ? help : undefined,
       valuePropName: valuePropName
       // @ts-ignore
       ,
       _internalItemRender: {
         mark: 'pro_table_render',
-        render: function render(inputProps, doms) {
-          return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsxs("div", {
-              style: _objectSpread({
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap'
-              }, addonWarpStyle),
-              children: [addonBefore ? /*#__PURE__*/_jsx("div", {
-                style: {
-                  marginInlineEnd: 8
-                },
-                children: addonBefore
-              }) : null, doms.input, addonAfter ? /*#__PURE__*/_jsx("div", {
-                style: {
-                  marginInlineStart: 8
-                },
-                children: addonAfter
-              }) : null]
-            }), typeof help === 'function' ? help({
-              errors: inputProps.errors,
-              warnings: inputProps.warnings
-            }) : doms.errorList, doms.extra]
-          });
-        }
-      }
-    }, props), {}, {
+        render: (inputProps, doms) => /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs("div", {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              ...addonWarpStyle
+            },
+            children: [addonBefore ? /*#__PURE__*/_jsx("div", {
+              style: {
+                marginInlineEnd: 8
+              },
+              children: addonBefore
+            }) : null, doms.input, addonAfter ? /*#__PURE__*/_jsx("div", {
+              style: {
+                marginInlineStart: 8
+              },
+              children: addonAfter
+            }) : null]
+          }), typeof help === 'function' ? help({
+            errors: inputProps.errors,
+            warnings: inputProps.warnings
+          }) : doms.errorList, doms.extra]
+        })
+      },
+      ...props,
       getValueProps: getValuePropsFunc,
       children: children
-    }));
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [addonAfter, addonBefore, children, convertValue === null || convertValue === void 0 ? void 0 : convertValue.toString(), props]);
+  }, [addonAfter, addonBefore, children, convertValue?.toString(), props]);
   return /*#__PURE__*/_jsx(FormItemProvide.Provider, {
     value: {
       name: props.name,
@@ -207,26 +195,28 @@ var WarpFormItem = function WarpFormItem(_ref) {
     children: formDom
   });
 };
-var ProFormItem = function ProFormItem(props) {
-  var _ConfigProvider$useCo, _rest$name2, _rest$name3, _rest$name4;
+const ProFormItem = props => {
   /** 从 context 中拿到的值 */
-  var _ref3 = (ConfigProvider === null || ConfigProvider === void 0 || (_ConfigProvider$useCo = ConfigProvider.useConfig) === null || _ConfigProvider$useCo === void 0 ? void 0 : _ConfigProvider$useCo.call(ConfigProvider)) || {
-      componentSize: 'middle'
-    },
-    componentSize = _ref3.componentSize;
-  var size = componentSize;
-  var valueType = props.valueType,
-    transform = props.transform,
-    dataFormat = props.dataFormat,
-    ignoreFormItem = props.ignoreFormItem,
-    lightProps = props.lightProps,
-    unusedChildren = props.children,
-    rest = _objectWithoutProperties(props, _excluded3);
-  var formListField = useContext(FormListContext);
+  const {
+    componentSize
+  } = ConfigProvider?.useConfig?.() || {
+    componentSize: 'middle'
+  };
+  const size = componentSize;
+  const {
+    valueType,
+    transform,
+    dataFormat,
+    ignoreFormItem,
+    lightProps,
+    children: unusedChildren,
+    ...rest
+  } = props;
+  const formListField = useContext(FormListContext);
 
   // ProFromList 的 filed，里面有name和key
   /** 从 context 中拿到的值 */
-  var name = useMemo(function () {
+  const name = useMemo(() => {
     if (props.name === undefined) return props.name;
     if (formListField.name !== undefined) {
       return [formListField.name, props.name].flat(1);
@@ -236,10 +226,11 @@ var ProFormItem = function ProFormItem(props) {
   }, [formListField.name, props.name]);
 
   /** 从 context 中拿到的值 */
-  var _React$useContext = React.useContext(FieldContext),
-    setFieldValueType = _React$useContext.setFieldValueType,
-    formItemProps = _React$useContext.formItemProps;
-  useEffect(function () {
+  const {
+    setFieldValueType,
+    formItemProps
+  } = React.useContext(FieldContext);
+  useEffect(() => {
     // 如果 setFieldValueType 和 props.name 不存在不存入
     if (!setFieldValueType || !props.name) {
       return;
@@ -249,44 +240,47 @@ var ProFormItem = function ProFormItem(props) {
     setFieldValueType(name, {
       valueType: valueType || 'text',
       dateFormat: dataFormat,
-      transform: transform
+      transform
     });
   }, [name, dataFormat, props.name, setFieldValueType, transform, valueType]);
-  var isDropdown = /*#__PURE__*/React.isValidElement(props.children) && isDropdownValueType(valueType || props.children.props.valueType);
-  var noLightFormItem = useMemo(function () {
-    if (!(lightProps !== null && lightProps !== void 0 && lightProps.light) || lightProps !== null && lightProps !== void 0 && lightProps.customLightMode || isDropdown) {
+  const isDropdown = /*#__PURE__*/React.isValidElement(props.children) && isDropdownValueType(valueType || props.children.props.valueType);
+  const noLightFormItem = useMemo(() => {
+    if (!lightProps?.light || lightProps?.customLightMode || isDropdown) {
       return true;
     }
     return false;
-  }, [lightProps === null || lightProps === void 0 ? void 0 : lightProps.customLightMode, isDropdown, lightProps === null || lightProps === void 0 ? void 0 : lightProps.light]);
+  }, [lightProps?.customLightMode, isDropdown, lightProps?.light]);
 
   // formItem 支持function，如果是function 我就直接不管了
   if (typeof props.children === 'function') {
-    var _rest$name;
-    return /*#__PURE__*/_createElement(WarpFormItem, _objectSpread(_objectSpread({}, rest), {}, {
+    return /*#__PURE__*/_createElement(WarpFormItem, {
+      ...rest,
       name: name,
-      key: rest.proFormFieldKey || ((_rest$name = rest.name) === null || _rest$name === void 0 ? void 0 : _rest$name.toString())
-    }), props.children);
+      key: rest.proFormFieldKey || rest.name?.toString()
+    }, props.children);
   }
-  var children = /*#__PURE__*/_jsx(WithValueFomFiledProps, {
+  const children = /*#__PURE__*/_jsx(WithValueFomFiledProps, {
     valuePropName: props.valuePropName,
     children: props.children
-  }, rest.proFormFieldKey || ((_rest$name2 = rest.name) === null || _rest$name2 === void 0 ? void 0 : _rest$name2.toString()));
-  var lightDom = noLightFormItem ? children : /*#__PURE__*/_createElement(LightWrapper, _objectSpread(_objectSpread({}, lightProps), {}, {
-    key: rest.proFormFieldKey || ((_rest$name3 = rest.name) === null || _rest$name3 === void 0 ? void 0 : _rest$name3.toString()),
+  }, rest.proFormFieldKey || rest.name?.toString());
+  const lightDom = noLightFormItem ? children : /*#__PURE__*/_createElement(LightWrapper, {
+    ...lightProps,
+    key: rest.proFormFieldKey || rest.name?.toString(),
     size: size
-  }), children);
+  }, children);
   // 这里控制是否需要 LightWrapper，为了提升一点点性能
   if (ignoreFormItem) {
     return /*#__PURE__*/_jsx(_Fragment, {
       children: lightDom
     });
   }
-  return /*#__PURE__*/_jsx(WarpFormItem, _objectSpread(_objectSpread(_objectSpread({}, formItemProps), rest), {}, {
+  return /*#__PURE__*/_jsx(WarpFormItem, {
+    ...formItemProps,
+    ...rest,
     name: name,
     isListField: formListField.name !== undefined,
     children: lightDom
-  }), rest.proFormFieldKey || ((_rest$name4 = rest.name) === null || _rest$name4 === void 0 ? void 0 : _rest$name4.toString()));
+  }, rest.proFormFieldKey || rest.name?.toString());
 };
 export { FormItemProvide };
 export default ProFormItem;