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

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

@@ -1,126 +1,128 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-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 _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 _utils = require("../../../../utils");
 var _FieldContext = _interopRequireDefault(require("../../../FieldContext"));
 var _grid = require("../../../helpers/grid");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var Group = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _React$useContext = _react.default.useContext(_FieldContext.default),
-    groupProps = _React$useContext.groupProps;
-  var _groupProps$props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 = (0, _utils.useMountMergeState)(function () {
-      return defaultCollapsed || false;
-    }, {
-      value: props.collapsed,
-      onChange: props.onCollapse
-    }),
-    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
-    collapsed = _useMountMergeState2[0],
-    setCollapsed = _useMountMergeState2[1];
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var _useGridHelpers = (0, _grid.useGridHelpers)(props),
-    ColWrapper = _useGridHelpers.ColWrapper,
-    RowWrapper = _useGridHelpers.RowWrapper;
-  var className = getPrefixCls('pro-form-group');
-  var _useStyle = (0, _style.useStyle)(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var collapsibleButton = collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
+const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    groupProps
+  } = _react.default.useContext(_FieldContext.default);
+  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] = (0, _util.useControlledState)(() => defaultCollapsed || false, props.collapsed);
+  const setCollapsed = (0, _react.useCallback)(updater => {
+    setCollapsedInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onCollapse?.(next);
+      return next;
+    });
+  }, [props.onCollapse]);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const {
+    ColWrapper,
+    RowWrapper
+  } = (0, _grid.useGridHelpers)(props);
+  const className = getPrefixCls('pro-form-group');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(className);
+  const collapsibleButton = collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
     style: {
       marginInlineEnd: 8
     },
     rotate: !collapsed ? 90 : undefined
   });
-  var label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
+  const label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
     label: collapsibleButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [collapsibleButton, title]
     }) : title,
     tooltip: tooltip
   });
-  var Wrapper = (0, _react.useCallback)(function (_ref) {
-    var dom = _ref.children;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, spaceProps), {}, {
-      className: (0, _classnames.default)("".concat(className, "-container ").concat(hashId), spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.className),
-      size: size,
-      align: align,
-      direction: direction,
-      style: (0, _objectSpread2.default)({
-        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 = (0, _react.useMemo)(function () {
-      var hiddenChildren = [];
-      var childrenList = _react.default.Children.toArray(children).map(function (element, index) {
-        var _element$props;
-        if ( /*#__PURE__*/_react.default.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.default.isValidElement(element) && autoFocus) {
-          return /*#__PURE__*/_react.default.cloneElement(element, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, element.props), {}, {
-            autoFocus: autoFocus
-          }));
-        }
-        return element;
-      });
-      return [/*#__PURE__*/(0, _jsxRuntime.jsx)(RowWrapper, {
-        Wrapper: Wrapper,
-        children: childrenList
-      }, "children"), hiddenChildren.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          display: 'none'
-        },
-        children: hiddenChildren
-      }) : null];
-    }, [children, RowWrapper, Wrapper, autoFocus]),
-    _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
-    childrenDoms = _useMemo2[0],
-    hiddenDoms = _useMemo2[1];
+  const Wrapper = (0, _react.useCallback)(({
+    children: dom
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+    ...spaceProps,
+    className: (0, _clsx.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] = (0, _react.useMemo)(() => {
+    const hiddenChildren = [];
+    const childrenList = _react.default.Children.toArray(children).map((element, index) => {
+      if ( /*#__PURE__*/_react.default.isValidElement(element) && element?.props?.hidden) {
+        hiddenChildren.push(element);
+        return null;
+      }
+      if (index === 0 && /*#__PURE__*/_react.default.isValidElement(element) && autoFocus) {
+        return /*#__PURE__*/_react.default.cloneElement(element, {
+          ...element.props,
+          autoFocus
+        });
+      }
+      return element;
+    });
+    return [/*#__PURE__*/(0, _jsxRuntime.jsx)(RowWrapper, {
+      Wrapper: Wrapper,
+      children: childrenList
+    }, "children"), hiddenChildren.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'none'
+      },
+      children: hiddenChildren
+    }) : null];
+  }, [children, RowWrapper, Wrapper, autoFocus]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(ColWrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(className, hashId, (0, _defineProperty2.default)({}, "".concat(className, "-twoLine"), labelLayout === 'twoLine')),
+      className: (0, _clsx.clsx)(className, hashId, {
+        [`${className}-twoLine`]: labelLayout === 'twoLine'
+      }),
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
@@ -131,9 +133,7 @@ var Group = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
             justifyContent: 'space-between'
           },
           children: [titleDom, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            onClick: function onClick(e) {
-              return e.stopPropagation();
-            },
+            onClick: e => e.stopPropagation(),
             children: extra
           })]
         }) : titleDom

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

@@ -1,56 +1,61 @@
 "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)({}, token.componentCls, {
-    '&-title': {
-      marginBlockEnd: token.marginXL,
-      fontWeight: 'bold'
-    },
-    '&-container': (0, _defineProperty2.default)({
-      flexWrap: 'wrap',
-      maxWidth: '100%'
-    }, "> div".concat(token.antCls, "-space-item"), {
-      maxWidth: '100%'
-    }),
-    '&-twoLine': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-      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'
+              }
+            }
           }
         }
       }
-    })
-  });
+    }
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProFormGroup', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProFormGroup', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }