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

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

@@ -1,38 +1,42 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["children"],
-  _excluded2 = ["children"];
 import { Form } from 'antd';
 import React from 'react';
 import ProFormItem from "../index";
 import { jsx as _jsx } from "react/jsx-runtime";
-function getControlConfigProps() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var valuePropName = props.valuePropName || 'value';
-  var trigger = props.trigger || 'onChange';
-  var name = props.name;
+function getControlConfigProps(props = {}) {
+  const valuePropName = props.valuePropName || 'value';
+  const trigger = props.trigger || 'onChange';
+  const name = props.name;
   return {
-    valuePropName: valuePropName,
-    trigger: trigger,
-    name: name
+    valuePropName,
+    trigger,
+    name
   };
 }
-export function useControlModel(_ref, model) {
-  var value = _ref.value,
-    onChange = _ref.onChange;
+export function useControlModel({
+  value,
+  onChange
+}, model) {
   if (!Array.isArray(model)) {
-    var p = getControlConfigProps(model);
-    return _defineProperty(_defineProperty({}, p.valuePropName, value), p.trigger, function (e) {
-      onChange === null || onChange === void 0 || onChange(e !== null && e !== void 0 && e.target ? e.target[p.valuePropName] : e);
-    });
+    const p = getControlConfigProps(model);
+    return {
+      [p.valuePropName]: value,
+      [p.trigger]: e => {
+        onChange?.(e?.target ? e.target[p.valuePropName] : e);
+      }
+    };
   }
-  return model.reduce(function (acc, k) {
-    var p = getControlConfigProps(k);
-    var name = p.name || k;
-    acc[name] = _defineProperty(_defineProperty({}, p.valuePropName, value === null || value === void 0 ? void 0 : value[name]), p.trigger, function (v) {
-      onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, name, v !== null && v !== void 0 && v.target ? v.target[p.valuePropName] : v)));
-    });
+  return model.reduce((acc, k) => {
+    const p = getControlConfigProps(k);
+    const name = p.name || k;
+    acc[name] = {
+      [p.valuePropName]: value?.[name],
+      [p.trigger]: v => {
+        onChange?.({
+          ...value,
+          [name]: v?.target ? v.target[p.valuePropName] : v
+        });
+      }
+    };
     return acc;
   }, {});
 }
@@ -54,17 +58,21 @@ export function useControlModel(_ref, model) {
  * ```
  */
 export function FormControlRender(props) {
-  var children = props.children,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var _Form$Item$useStatus = Form.Item.useStatus(),
-    status = _Form$Item$useStatus.status,
-    errors = _Form$Item$useStatus.errors,
-    warnings = _Form$Item$useStatus.warnings;
-  return children(_objectSpread({
-    status: status,
-    errors: errors,
-    warnings: warnings
-  }, restProps));
+  const {
+    children,
+    ...restProps
+  } = props;
+  const {
+    status,
+    errors,
+    warnings
+  } = Form.Item.useStatus();
+  return children({
+    status,
+    errors,
+    warnings,
+    ...restProps
+  });
 }
 
 /**
@@ -73,9 +81,7 @@ export function FormControlRender(props) {
 export function pickControlProps(props) {
   return {
     value: props.value,
-    onChange: function onChange(value) {
-      return props.onChange(value !== null && value !== void 0 && value.target ? value.target.value : value);
-    }
+    onChange: value => props.onChange(value?.target ? value.target.value : value)
   };
 }
 
@@ -83,9 +89,10 @@ export function pickControlProps(props) {
  * 提取props中的 value、onChange 和 id 属性
  */
 export function pickControlPropsWithId(props) {
-  return _objectSpread(_objectSpread({}, pickControlProps(props)), {}, {
+  return {
+    ...pickControlProps(props),
     id: props.id
-  });
+  };
 }
 
 /**
@@ -107,13 +114,16 @@ export function pickControlPropsWithId(props) {
  */
 export function withFormItemRender(Comp) {
   return function (props) {
-    var children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded2);
-    return /*#__PURE__*/_jsx(Comp, _objectSpread(_objectSpread({}, restProps), {}, {
+    const {
+      children,
+      ...restProps
+    } = props;
+    return /*#__PURE__*/_jsx(Comp, {
+      ...restProps,
       children: /*#__PURE__*/_jsx(FormControlRender, {
         children: children
       })
-    }));
+    });
   };
 }
 
@@ -133,7 +143,7 @@ export function withFormItemRender(Comp) {
  *   </FormItemRender>
  * ```
  */
-export var FormItemRender = withFormItemRender(Form.Item);
+export const FormItemRender = withFormItemRender(Form.Item);
 
 /**
  * 用 withFormItemRender 加工 ProForm.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
@@ -150,4 +160,4 @@ export var FormItemRender = withFormItemRender(Form.Item);
  *   </ProFormItemRender>
  * ```
  */
-export var ProFormItemRender = withFormItemRender(ProFormItem);
+export const ProFormItemRender = withFormItemRender(ProFormItem);

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

@@ -1,119 +1,121 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { RightOutlined } from '@ant-design/icons';
+import { useControlledState } from '@rc-component/util';
 import { ConfigProvider, Space } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo } from 'react';
-import { LabelIconTip, useMountMergeState } from "../../../../utils";
+import { LabelIconTip } from "../../../../utils";
 import FieldContext from "../../../FieldContext";
 import { useGridHelpers } from "../../../helpers/grid";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Group = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _React$useContext = React.useContext(FieldContext),
-    groupProps = _React$useContext.groupProps;
-  var _groupProps$props = _objectSpread(_objectSpread({}, groupProps), props),
-    children = _groupProps$props.children,
-    collapsible = _groupProps$props.collapsible,
-    defaultCollapsed = _groupProps$props.defaultCollapsed,
-    style = _groupProps$props.style,
-    labelLayout = _groupProps$props.labelLayout,
-    _groupProps$props$tit = _groupProps$props.title,
-    title = _groupProps$props$tit === void 0 ? props.label : _groupProps$props$tit,
-    tooltip = _groupProps$props.tooltip,
-    _groupProps$props$ali = _groupProps$props.align,
-    align = _groupProps$props$ali === void 0 ? 'start' : _groupProps$props$ali,
-    direction = _groupProps$props.direction,
-    _groupProps$props$siz = _groupProps$props.size,
-    size = _groupProps$props$siz === void 0 ? 32 : _groupProps$props$siz,
-    titleStyle = _groupProps$props.titleStyle,
-    titleRender = _groupProps$props.titleRender,
-    spaceProps = _groupProps$props.spaceProps,
-    extra = _groupProps$props.extra,
-    autoFocus = _groupProps$props.autoFocus;
-  var _useMountMergeState = useMountMergeState(function () {
-      return defaultCollapsed || false;
-    }, {
-      value: props.collapsed,
-      onChange: props.onCollapse
-    }),
-    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
-    collapsed = _useMountMergeState2[0],
-    setCollapsed = _useMountMergeState2[1];
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var _useGridHelpers = useGridHelpers(props),
-    ColWrapper = _useGridHelpers.ColWrapper,
-    RowWrapper = _useGridHelpers.RowWrapper;
-  var className = getPrefixCls('pro-form-group');
-  var _useStyle = useStyle(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var collapsibleButton = collapsible && /*#__PURE__*/_jsx(RightOutlined, {
+const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    groupProps
+  } = React.useContext(FieldContext);
+  const {
+    children,
+    collapsible,
+    defaultCollapsed,
+    style,
+    labelLayout,
+    title = props.label,
+    tooltip,
+    align = 'start',
+    direction,
+    size = 32,
+    titleStyle,
+    titleRender,
+    spaceProps,
+    extra,
+    autoFocus
+  } = {
+    ...groupProps,
+    ...props
+  };
+  const [collapsed, setCollapsedInner] = useControlledState(() => defaultCollapsed || false, props.collapsed);
+  const setCollapsed = useCallback(updater => {
+    setCollapsedInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onCollapse?.(next);
+      return next;
+    });
+  }, [props.onCollapse]);
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const {
+    ColWrapper,
+    RowWrapper
+  } = useGridHelpers(props);
+  const className = getPrefixCls('pro-form-group');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(className);
+  const collapsibleButton = collapsible && /*#__PURE__*/_jsx(RightOutlined, {
     style: {
       marginInlineEnd: 8
     },
     rotate: !collapsed ? 90 : undefined
   });
-  var label = /*#__PURE__*/_jsx(LabelIconTip, {
+  const label = /*#__PURE__*/_jsx(LabelIconTip, {
     label: collapsibleButton ? /*#__PURE__*/_jsxs("div", {
       children: [collapsibleButton, title]
     }) : title,
     tooltip: tooltip
   });
-  var Wrapper = useCallback(function (_ref) {
-    var dom = _ref.children;
-    return /*#__PURE__*/_jsx(Space, _objectSpread(_objectSpread({}, spaceProps), {}, {
-      className: classNames("".concat(className, "-container ").concat(hashId), spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.className),
-      size: size,
-      align: align,
-      orientation: direction,
-      style: _objectSpread({
-        rowGap: 0
-      }, spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.style),
-      children: dom
-    }));
-  }, [align, className, direction, hashId, size, spaceProps]);
-  var titleDom = titleRender ? titleRender(label, props) : label;
-  var _useMemo = useMemo(function () {
-      var hiddenChildren = [];
-      var childrenList = React.Children.toArray(children).map(function (element, index) {
-        var _element$props;
-        if ( /*#__PURE__*/React.isValidElement(element) && element !== null && element !== void 0 && (_element$props = element.props) !== null && _element$props !== void 0 && _element$props.hidden) {
-          hiddenChildren.push(element);
-          return null;
-        }
-        if (index === 0 && /*#__PURE__*/React.isValidElement(element) && autoFocus) {
-          return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, element.props), {}, {
-            autoFocus: autoFocus
-          }));
-        }
-        return element;
-      });
-      return [/*#__PURE__*/_jsx(RowWrapper, {
-        Wrapper: Wrapper,
-        children: childrenList
-      }, "children"), hiddenChildren.length > 0 ? /*#__PURE__*/_jsx("div", {
-        style: {
-          display: 'none'
-        },
-        children: hiddenChildren
-      }) : null];
-    }, [children, RowWrapper, Wrapper, autoFocus]),
-    _useMemo2 = _slicedToArray(_useMemo, 2),
-    childrenDoms = _useMemo2[0],
-    hiddenDoms = _useMemo2[1];
+  const Wrapper = useCallback(({
+    children: dom
+  }) => /*#__PURE__*/_jsx(Space, {
+    ...spaceProps,
+    className: clsx(`${className}-container ${hashId}`, spaceProps?.className),
+    size: size,
+    align: align,
+    orientation: direction,
+    style: {
+      rowGap: 0,
+      ...spaceProps?.style
+    },
+    children: dom
+  }), [align, className, direction, hashId, size, spaceProps]);
+  const titleDom = titleRender ? titleRender(label, props) : label;
+  const [childrenDoms, hiddenDoms] = useMemo(() => {
+    const hiddenChildren = [];
+    const childrenList = React.Children.toArray(children).map((element, index) => {
+      if ( /*#__PURE__*/React.isValidElement(element) && element?.props?.hidden) {
+        hiddenChildren.push(element);
+        return null;
+      }
+      if (index === 0 && /*#__PURE__*/React.isValidElement(element) && autoFocus) {
+        return /*#__PURE__*/React.cloneElement(element, {
+          ...element.props,
+          autoFocus
+        });
+      }
+      return element;
+    });
+    return [/*#__PURE__*/_jsx(RowWrapper, {
+      Wrapper: Wrapper,
+      children: childrenList
+    }, "children"), hiddenChildren.length > 0 ? /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'none'
+      },
+      children: hiddenChildren
+    }) : null];
+  }, [children, RowWrapper, Wrapper, autoFocus]);
   return wrapSSR( /*#__PURE__*/_jsx(ColWrapper, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: classNames(className, hashId, _defineProperty({}, "".concat(className, "-twoLine"), labelLayout === 'twoLine')),
+      className: clsx(className, hashId, {
+        [`${className}-twoLine`]: labelLayout === 'twoLine'
+      }),
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/_jsx("div", {
-        className: "".concat(className, "-title ").concat(hashId).trim(),
+        className: `${className}-title ${hashId}`.trim(),
         style: titleStyle,
-        onClick: function onClick() {
+        onClick: () => {
           setCollapsed(!collapsed);
         },
         children: extra ? /*#__PURE__*/_jsxs("div", {
@@ -124,9 +126,7 @@ var Group = /*#__PURE__*/React.forwardRef(function (props, ref) {
             justifyContent: 'space-between'
           },
           children: [titleDom, /*#__PURE__*/_jsx("span", {
-            onClick: function onClick(e) {
-              return e.stopPropagation();
-            },
+            onClick: e => e.stopPropagation(),
             children: extra
           })]
         }) : titleDom

package/es/form/components/FormItem/Group/style.js

@@ -1,49 +1,55 @@
-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({}, token.componentCls, {
-    '&-title': {
-      marginBlockEnd: token.marginXL,
-      fontWeight: 'bold'
-    },
-    '&-container': _defineProperty({
-      flexWrap: 'wrap',
-      maxWidth: '100%'
-    }, "> div".concat(token.antCls, "-space-item"), {
-      maxWidth: '100%'
-    }),
-    '&-twoLine': _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      display: 'block',
-      width: '100%'
-    }, "".concat(token.componentCls, "-title"), {
-      width: '100%',
-      margin: '8px 0'
-    }), "".concat(token.componentCls, "-container"), {
-      paddingInlineStart: 16
-    }), "".concat(token.antCls, "-space-item,").concat(token.antCls, "-form-item"), {
-      width: '100%'
-    }), "".concat(token.antCls, "-form-item"), {
-      '&-control': {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        '&-input': {
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          '&-content': {
-            flex: 'none'
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-title': {
+        marginBlockEnd: token.marginXL,
+        fontWeight: 'bold'
+      },
+      '&-container': {
+        flexWrap: 'wrap',
+        maxWidth: '100%',
+        [`> div${token.antCls}-space-item`]: {
+          maxWidth: '100%'
+        }
+      },
+      '&-twoLine': {
+        display: 'block',
+        width: '100%',
+        [`${token.componentCls}-title`]: {
+          width: '100%',
+          margin: '8px 0'
+        },
+        [`${token.componentCls}-container`]: {
+          paddingInlineStart: 16
+        },
+        [`${token.antCls}-space-item,${token.antCls}-form-item`]: {
+          width: '100%'
+        },
+        [`${token.antCls}-form-item`]: {
+          '&-control': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            '&-input': {
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              '&-content': {
+                flex: 'none'
+              }
+            }
           }
         }
       }
-    })
-  });
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProFormGroup', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProFormGroup', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }