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

package/lib/card/components/CheckCard/Group.js

@@ -6,34 +6,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CheckCardGroupConnext = exports.CardLoading = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
 var _index = _interopRequireDefault(require("./index"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "style", "options", "loading", "multiple", "bordered", "onChange"];
 /**
  * Represents the possible value types for a CheckGroup.
  * It can be an array of CheckCardValueTypes, a single CheckCardValueType, or undefined.
  */
+
 /**
  * Represents an option for a CheckCard component.
  */
-var CardLoading = exports.CardLoading = function CardLoading(_ref) {
-  var prefixCls = _ref.prefixCls,
-    hashId = _ref.hashId;
+
+const CardLoading = ({
+  prefixCls,
+  hashId
+}) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-loading-content"), hashId),
+    className: (0, _clsx.clsx)(`${prefixCls}-loading-content`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
       loading: true,
       active: true,
@@ -52,8 +48,8 @@ var CardLoading = exports.CardLoading = function CardLoading(_ref) {
 /**
  * Represents the props for the CheckCardGroup component.
  */
-
-var CheckCardGroupConnext = exports.CheckCardGroupConnext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.CardLoading = CardLoading;
+const CheckCardGroupConnext = exports.CheckCardGroupConnext = /*#__PURE__*/(0, _react.createContext)(null);
 
 /**
  * SubCheckCardGroup component.
@@ -64,50 +60,48 @@ var CheckCardGroupConnext = exports.CheckCardGroupConnext = /*#__PURE__*/(0, _re
  * @param {string} prefix - The prefix for CSS class names.
  * @returns {React.ReactNode} The rendered SubCheckCardGroup component.
  */
-var SubCheckCardGroup = function SubCheckCardGroup(props) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    collapse = _useState2[0],
-    setCollapse = _useState2[1];
-  var _proTheme$useToken = _provider.proTheme.useToken(),
-    hashId = _proTheme$useToken.hashId;
-  var baseCls = "".concat(props.prefix, "-sub-check-card");
+const SubCheckCardGroup = props => {
+  const [collapse, setCollapse] = (0, _react.useState)(false);
+  const {
+    hashId
+  } = _provider.proTheme.useToken();
+  const baseCls = `${props.prefix}-sub-check-card`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)(baseCls, hashId),
+    className: (0, _clsx.clsx)(baseCls, hashId),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)("".concat(baseCls, "-title"), hashId),
-      onClick: function onClick() {
+      className: (0, _clsx.clsx)(`${baseCls}-title`, hashId),
+      onClick: () => {
         setCollapse(!collapse);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
         style: {
-          transform: "rotate(".concat(collapse ? 90 : 0, "deg)"),
+          transform: `rotate(${collapse ? 90 : 0}deg)`,
           transition: 'transform 0.3s'
         }
       }), props.title]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)("".concat(baseCls, "-panel"), hashId, (0, _defineProperty2.default)({}, "".concat(baseCls, "-panel-collapse"), collapse)),
+      className: (0, _clsx.clsx)(`${baseCls}-panel`, hashId, {
+        [`${baseCls}-panel-collapse`]: collapse
+      }),
       children: props.children
     })]
   });
 };
-var CheckCardGroup = function CheckCardGroup(props) {
-  var customizePrefixCls = props.prefixCls,
-    className = props.className,
-    style = props.style,
-    _props$options = props.options,
-    options = _props$options === void 0 ? [] : _props$options,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple,
-    _props$bordered = props.bordered,
-    bordered = _props$bordered === void 0 ? true : _props$bordered,
-    onChange = props.onChange,
-    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var antdContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var getOptions = (0, _react.useCallback)(function () {
-    return options === null || options === void 0 ? void 0 : options.map(function (option) {
+const CheckCardGroup = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    style,
+    options = [],
+    loading = false,
+    multiple = false,
+    bordered = true,
+    onChange,
+    ...restProps
+  } = props;
+  const antdContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const getOptions = (0, _react.useCallback)(() => {
+    return options?.map(option => {
       if (typeof option === 'string') {
         return {
           title: option,
@@ -117,31 +111,31 @@ var CheckCardGroup = function CheckCardGroup(props) {
       return option;
     });
   }, [options]);
-  var prefixCls = antdContext.getPrefixCls('pro-checkcard', customizePrefixCls);
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var groupPrefixCls = "".concat(prefixCls, "-group");
-  var domProps = (0, _util.omit)(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
-  var _useMountMergeState = (0, _utils.useMountMergeState)(props.defaultValue, {
-      value: props.value,
-      onChange: props.onChange
-    }),
-    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
-    stateValue = _useMountMergeState2[0],
-    setStateValue = _useMountMergeState2[1];
-  var registerValueMap = (0, _react.useRef)(new Map());
-  var registerValue = function registerValue(value) {
-    var _registerValueMap$cur;
-    (_registerValueMap$cur = registerValueMap.current) === null || _registerValueMap$cur === void 0 || _registerValueMap$cur.set(value, true);
+  const prefixCls = antdContext.getPrefixCls('pro-checkcard', customizePrefixCls);
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
+  const groupPrefixCls = `${prefixCls}-group`;
+  const domProps = (0, _util.omit)(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
+  const [stateValue, setStateValueInner] = (0, _util.useControlledState)(props.defaultValue, props.value);
+  const setStateValue = (0, _react.useCallback)(updater => {
+    setStateValueInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onChange?.(next);
+      return next;
+    });
+  }, [onChange]);
+  const registerValueMap = (0, _react.useRef)(new Map());
+  const registerValue = value => {
+    registerValueMap.current?.set(value, true);
   };
-  var cancelValue = function cancelValue(value) {
-    var _registerValueMap$cur2;
-    (_registerValueMap$cur2 = registerValueMap.current) === null || _registerValueMap$cur2 === void 0 || _registerValueMap$cur2.delete(value);
+  const cancelValue = value => {
+    registerValueMap.current?.delete(value);
   };
-  var toggleOption = function toggleOption(option) {
+  const toggleOption = option => {
     if (!multiple) {
-      var changeValue;
+      let changeValue;
       changeValue = stateValue;
       // 单选模式
       if (changeValue === option.value) {
@@ -149,65 +143,52 @@ var CheckCardGroup = function CheckCardGroup(props) {
       } else {
         changeValue = option.value;
       }
-      setStateValue === null || setStateValue === void 0 || setStateValue(changeValue);
+      setStateValue?.(changeValue);
     }
     if (multiple) {
-      var _changeValue2;
-      var _changeValue = [];
-      var stateValues = stateValue;
-      var hasOption = stateValues === null || stateValues === void 0 ? void 0 : stateValues.includes(option.value);
-      _changeValue = (0, _toConsumableArray2.default)(stateValues || []);
+      let changeValue = [];
+      const stateValues = stateValue;
+      const hasOption = stateValues?.includes(option.value);
+      changeValue = [...(stateValues || [])];
       if (!hasOption) {
-        _changeValue.push(option.value);
+        changeValue.push(option.value);
       }
       if (hasOption) {
-        _changeValue = _changeValue.filter(function (itemValue) {
-          return itemValue !== option.value;
-        });
+        changeValue = changeValue.filter(itemValue => itemValue !== option.value);
       }
-      var newOptions = getOptions();
-      var newValue = (_changeValue2 = _changeValue) === null || _changeValue2 === void 0 || (_changeValue2 = _changeValue2.filter(function (val) {
-        return registerValueMap.current.has(val);
-      })) === null || _changeValue2 === void 0 ? void 0 : _changeValue2.sort(function (a, b) {
-        var indexA = newOptions.findIndex(function (opt) {
-          return opt.value === a;
-        });
-        var indexB = newOptions.findIndex(function (opt) {
-          return opt.value === b;
-        });
+      const newOptions = getOptions();
+      const newValue = changeValue?.filter(val => registerValueMap.current.has(val))?.sort((a, b) => {
+        const indexA = newOptions.findIndex(opt => opt.value === a);
+        const indexB = newOptions.findIndex(opt => opt.value === b);
         return indexA - indexB;
       });
       setStateValue(newValue);
     }
   };
-  var children = (0, _react.useMemo)(function () {
+  const children = (0, _react.useMemo)(() => {
     if (loading) {
       return new Array(options.length || _react.default.Children.toArray(props.children).length || 1).fill(0)
       // eslint-disable-next-line react/no-array-index-key
-      .map(function (_, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
-          loading: true
-        }, index);
-      });
+      .map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+        loading: true
+      }, index));
     }
     if (options && options.length > 0) {
-      var optionValue = stateValue;
-      var renderOptions = function renderOptions(list) {
-        return list.map(function (option) {
-          var _option$size;
+      const optionValue = stateValue;
+      const renderOptions = list => {
+        return list.map(option => {
           if (option.children && option.children.length > 0) {
-            var _option$value, _option$title;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(SubCheckCardGroup, {
               title: option.title,
               prefix: groupPrefixCls,
               children: renderOptions(option.children)
-            }, ((_option$value = option.value) === null || _option$value === void 0 ? void 0 : _option$value.toString()) || ((_option$title = option.title) === null || _option$title === void 0 ? void 0 : _option$title.toString()));
+            }, option.value?.toString() || option.title?.toString());
           }
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
             disabled: option.disabled,
-            size: (_option$size = option.size) !== null && _option$size !== void 0 ? _option$size : props.size,
+            size: option.size ?? props.size,
             value: option.value,
-            checked: multiple ? optionValue === null || optionValue === void 0 ? void 0 : optionValue.includes(option.value) : optionValue === option.value,
+            checked: multiple ? optionValue?.includes(option.value) : optionValue === option.value,
             onChange: option.onChange,
             title: option.title,
             avatar: option.avatar,
@@ -220,31 +201,32 @@ var CheckCardGroup = function CheckCardGroup(props) {
     }
     return props.children;
   }, [getOptions, loading, multiple, options, props.children, props.size, stateValue]);
-  var classString = (0, _classnames.default)(groupPrefixCls, className, hashId);
+  const classString = (0, _clsx.clsx)(groupPrefixCls, className, hashId);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCardGroupConnext.Provider, {
     value: {
-      toggleOption: toggleOption,
-      bordered: bordered,
+      toggleOption,
+      bordered,
       value: stateValue,
       disabled: props.disabled,
       size: props.size,
       loading: props.loading,
       multiple: props.multiple,
       // https://github.com/ant-design/ant-design/issues/16376
-      registerValue: registerValue,
-      cancelValue: cancelValue
+      registerValue,
+      cancelValue
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classString,
-      style: style
-    }, domProps), {}, {
+      style: style,
+      ...domProps,
       children: children
-    }))
+    })
   }));
 };
-var _default = exports.default = function _default(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
-    needDeps: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCardGroup, (0, _objectSpread2.default)({}, props))
-  });
-};
+var _default = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
+  needDeps: true,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCardGroup, {
+    ...props
+  })
+});
+exports.default = _default;

package/lib/card/components/CheckCard/index.d.ts

@@ -140,6 +140,12 @@ interface CheckCardProps {
      * Custom style for the content area.
      */
     bodyStyle?: React.CSSProperties;
+    /**
+     * Styles configuration.
+     */
+    styles?: {
+        body?: React.CSSProperties;
+    };
     /**
      * The action area in the bottom right corner.
      */

package/lib/card/components/CheckCard/index.js

@@ -6,73 +6,70 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _Actions = _interopRequireDefault(require("../Actions"));
 var _Group = _interopRequireWildcard(require("./Group"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "avatar", "title", "description", "cover", "extra", "style"];
 /**
  * Props for the CheckCard component.
  */
-var CheckCard = function CheckCard(props) {
-  var _useMountMergeState = (0, _utils.useMountMergeState)(props.defaultChecked || false, {
-      value: props.checked,
-      onChange: props.onChange
-    }),
-    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
-    stateChecked = _useMountMergeState2[0],
-    setStateChecked = _useMountMergeState2[1];
-  var checkCardGroup = (0, _react.useContext)(_Group.CheckCardGroupConnext);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var handleClick = function handleClick(e) {
-    var _props$onClick, _checkCardGroup$toggl;
-    props === null || props === void 0 || (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
-    var newChecked = !stateChecked;
-    checkCardGroup === null || checkCardGroup === void 0 || (_checkCardGroup$toggl = checkCardGroup.toggleOption) === null || _checkCardGroup$toggl === void 0 || _checkCardGroup$toggl.call(checkCardGroup, {
+
+const CheckCard = props => {
+  const [stateChecked, setStateCheckedInner] = (0, _util.useControlledState)(props.defaultChecked || false, props.checked);
+  const setStateChecked = (0, _react.useCallback)(updater => {
+    setStateCheckedInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onChange?.(next);
+      return next;
+    });
+  }, [props.onChange]);
+  const checkCardGroup = (0, _react.useContext)(_Group.CheckCardGroupConnext);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const handleClick = e => {
+    props?.onClick?.(e);
+    const newChecked = !stateChecked;
+    checkCardGroup?.toggleOption?.({
       value: props.value
     });
-    setStateChecked === null || setStateChecked === void 0 || setStateChecked(newChecked);
+    setStateChecked?.(newChecked);
   };
 
   // small => sm large => lg
-  var getSizeCls = function getSizeCls(size) {
+  const getSizeCls = size => {
     if (size === 'large') return 'lg';
     if (size === 'small') return 'sm';
     return '';
   };
-  (0, _react.useEffect)(function () {
-    var _checkCardGroup$regis;
-    checkCardGroup === null || checkCardGroup === void 0 || (_checkCardGroup$regis = checkCardGroup.registerValue) === null || _checkCardGroup$regis === void 0 || _checkCardGroup$regis.call(checkCardGroup, props.value);
-    return function () {
-      var _checkCardGroup$cance;
-      return checkCardGroup === null || checkCardGroup === void 0 || (_checkCardGroup$cance = checkCardGroup.cancelValue) === null || _checkCardGroup$cance === void 0 ? void 0 : _checkCardGroup$cance.call(checkCardGroup, props.value);
-    };
+  (0, _react.useEffect)(() => {
+    checkCardGroup?.registerValue?.(props.value);
+    return () => checkCardGroup?.cancelValue?.(props.value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value]);
-  var customizePrefixCls = props.prefixCls,
-    className = props.className,
-    avatar = props.avatar,
-    title = props.title,
-    description = props.description,
-    cover = props.cover,
-    extra = props.extra,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    others = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var checkCardProps = (0, _objectSpread2.default)({}, others);
-  var prefixCls = getPrefixCls('pro-checkcard', customizePrefixCls);
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    avatar,
+    title,
+    description,
+    cover,
+    extra,
+    style = {},
+    ...others
+  } = props;
+  const checkCardProps = {
+    ...others
+  };
+  const prefixCls = getPrefixCls('pro-checkcard', customizePrefixCls);
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
 
   /**
    * 头像自定义
@@ -81,9 +78,9 @@ var CheckCard = function CheckCard(props) {
    * @param coverDom
    * @returns
    */
-  var renderCover = function renderCover(cls, coverDom) {
+  const renderCover = (cls, coverDom) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)("".concat(cls, "-cover"), hashId),
+      className: (0, _clsx.clsx)(`${cls}-cover`, hashId),
       children: typeof coverDom === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: coverDom,
         alt: "checkcard"
@@ -91,30 +88,37 @@ var CheckCard = function CheckCard(props) {
     });
   };
   checkCardProps.checked = stateChecked;
-  var multiple = false;
+  let multiple = false;
   if (checkCardGroup) {
-    var _checkCardGroup$value;
     // 受组控制模式
     checkCardProps.disabled = props.disabled || checkCardGroup.disabled;
     checkCardProps.loading = props.loading || checkCardGroup.loading;
     checkCardProps.bordered = props.bordered || checkCardGroup.bordered;
     multiple = checkCardGroup.multiple;
-    var isChecked = checkCardGroup.multiple ? (_checkCardGroup$value = checkCardGroup.value) === null || _checkCardGroup$value === void 0 ? void 0 : _checkCardGroup$value.includes(props.value) : checkCardGroup.value === props.value;
+    const isChecked = checkCardGroup.multiple ? checkCardGroup.value?.includes(props.value) : checkCardGroup.value === props.value;
 
     // loading时check为false
     checkCardProps.checked = checkCardProps.loading ? false : isChecked;
     checkCardProps.size = props.size || checkCardGroup.size;
   }
-  var _checkCardProps$disab = checkCardProps.disabled,
-    disabled = _checkCardProps$disab === void 0 ? false : _checkCardProps$disab,
-    size = checkCardProps.size,
-    cardLoading = checkCardProps.loading,
-    _checkCardProps$borde = checkCardProps.bordered,
-    bordered = _checkCardProps$borde === void 0 ? true : _checkCardProps$borde,
-    checked = checkCardProps.checked;
-  var sizeCls = getSizeCls(size);
-  var classString = (0, _classnames.default)(prefixCls, className, hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-loading"), cardLoading), "".concat(prefixCls, "-").concat(sizeCls), sizeCls), "".concat(prefixCls, "-checked"), checked), "".concat(prefixCls, "-multiple"), multiple), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-bordered"), bordered), "".concat(prefixCls, "-ghost"), props.ghost));
-  var metaDom = (0, _react.useMemo)(function () {
+  const {
+    disabled = false,
+    size,
+    loading: cardLoading,
+    bordered = true,
+    checked
+  } = checkCardProps;
+  const sizeCls = getSizeCls(size);
+  const classString = (0, _clsx.clsx)(prefixCls, className, hashId, {
+    [`${prefixCls}-loading`]: cardLoading,
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-checked`]: checked,
+    [`${prefixCls}-multiple`]: multiple,
+    [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-bordered`]: bordered,
+    [`${prefixCls}-ghost`]: props.ghost
+  });
+  const metaDom = (0, _react.useMemo)(() => {
     if (cardLoading) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Group.CardLoading, {
         prefixCls: prefixCls || '',
@@ -124,39 +128,43 @@ var CheckCard = function CheckCard(props) {
     if (cover) {
       return renderCover(prefixCls || '', cover);
     }
-    var avatarDom = avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-avatar"), hashId),
+    const avatarDom = avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.clsx)(`${prefixCls}-avatar`, hashId),
       children: typeof avatar === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
         size: 48,
         shape: "square",
         src: avatar
       }) : avatar
     }) : null;
-    var headerDom = (title !== null && title !== void 0 ? title : extra) != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-header"), hashId),
+    const headerDom = (title ?? extra) != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx.clsx)(`${prefixCls}-header`, hashId),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)("".concat(prefixCls, "-header-left"), hashId),
+        className: (0, _clsx.clsx)(`${prefixCls}-header-left`, hashId),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames.default)("".concat(prefixCls, "-title"), hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-title-with-ellipsis"), typeof title === 'string')),
+          className: (0, _clsx.clsx)(`${prefixCls}-title`, hashId, {
+            [`${prefixCls}-title-with-ellipsis`]: typeof title === 'string'
+          }),
           children: title
         }), props.subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames.default)("".concat(prefixCls, "-subTitle"), hashId),
+          className: (0, _clsx.clsx)(`${prefixCls}-subTitle`, hashId),
           children: props.subTitle
         }) : null]
       }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)("".concat(prefixCls, "-extra"), hashId),
+        className: (0, _clsx.clsx)(`${prefixCls}-extra`, hashId),
         children: extra
       })]
     });
-    var descriptionDom = description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-description"), hashId),
+    const descriptionDom = description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.clsx)(`${prefixCls}-description`, hashId),
       children: description
     }) : null;
-    var metaClass = (0, _classnames.default)("".concat(prefixCls, "-content"), hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-avatar-header"), avatarDom && headerDom && !descriptionDom));
+    const metaClass = (0, _clsx.clsx)(`${prefixCls}-content`, hashId, {
+      [`${prefixCls}-avatar-header`]: avatarDom && headerDom && !descriptionDom
+    });
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: metaClass,
       children: [avatarDom, headerDom || descriptionDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)("".concat(prefixCls, "-detail"), hashId),
+        className: (0, _clsx.clsx)(`${prefixCls}-detail`, hashId),
         children: [headerDom, descriptionDom]
       }) : null]
     });
@@ -164,15 +172,15 @@ var CheckCard = function CheckCard(props) {
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classString,
     style: style,
-    onClick: function onClick(e) {
+    onClick: e => {
       if (!cardLoading && !disabled) {
         handleClick(e);
       }
     },
     onMouseEnter: props.onMouseEnter,
     children: [metaDom, props.children ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-body"), hashId),
-      style: props.bodyStyle,
+      className: (0, _clsx.clsx)(`${prefixCls}-body`, hashId),
+      style: props.styles?.body || props.bodyStyle,
       children: props.children
     }) : null, props.actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
       actions: props.actions,

package/lib/card/components/CheckCard/style.d.ts

@@ -6,6 +6,6 @@ export interface ProListToken extends ProAliasToken {
 }
 export declare const cardLoading: Keyframes;
 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;
 };