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

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

@@ -1,16 +1,9 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["prefixCls", "className", "style", "options", "loading", "multiple", "bordered", "onChange"];
 import { RightOutlined } from '@ant-design/icons';
-import { omit } from '@rc-component/util';
+import { omit, useControlledState } from '@rc-component/util';
 import { ConfigProvider, Skeleton } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { ProConfigProvider, proTheme } from "../../../provider";
-import { useMountMergeState } from "../../../utils";
 import CheckCard from "./index";
 import { useStyle } from "./style";
 
@@ -24,11 +17,12 @@ import { useStyle } from "./style";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardLoading = function CardLoading(_ref) {
-  var prefixCls = _ref.prefixCls,
-    hashId = _ref.hashId;
+export const CardLoading = ({
+  prefixCls,
+  hashId
+}) => {
   return /*#__PURE__*/_jsx("div", {
-    className: classNames("".concat(prefixCls, "-loading-content"), hashId),
+    className: clsx(`${prefixCls}-loading-content`, hashId),
     children: /*#__PURE__*/_jsx(Skeleton, {
       loading: true,
       active: true,
@@ -48,7 +42,7 @@ export var CardLoading = function CardLoading(_ref) {
  * Represents the props for the CheckCardGroup component.
  */
 
-export var CheckCardGroupConnext = /*#__PURE__*/createContext(null);
+export const CheckCardGroupConnext = /*#__PURE__*/createContext(null);
 
 /**
  * SubCheckCardGroup component.
@@ -59,50 +53,48 @@ export var CheckCardGroupConnext = /*#__PURE__*/createContext(null);
  * @param {string} prefix - The prefix for CSS class names.
  * @returns {React.ReactNode} The rendered SubCheckCardGroup component.
  */
-var SubCheckCardGroup = function SubCheckCardGroup(props) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    collapse = _useState2[0],
-    setCollapse = _useState2[1];
-  var _proTheme$useToken = proTheme.useToken(),
-    hashId = _proTheme$useToken.hashId;
-  var baseCls = "".concat(props.prefix, "-sub-check-card");
+const SubCheckCardGroup = props => {
+  const [collapse, setCollapse] = useState(false);
+  const {
+    hashId
+  } = proTheme.useToken();
+  const baseCls = `${props.prefix}-sub-check-card`;
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames(baseCls, hashId),
+    className: clsx(baseCls, hashId),
     children: [/*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(baseCls, "-title"), hashId),
-      onClick: function onClick() {
+      className: clsx(`${baseCls}-title`, hashId),
+      onClick: () => {
         setCollapse(!collapse);
       },
       children: [/*#__PURE__*/_jsx(RightOutlined, {
         style: {
-          transform: "rotate(".concat(collapse ? 90 : 0, "deg)"),
+          transform: `rotate(${collapse ? 90 : 0}deg)`,
           transition: 'transform 0.3s'
         }
       }), props.title]
     }), /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(baseCls, "-panel"), hashId, _defineProperty({}, "".concat(baseCls, "-panel-collapse"), collapse)),
+      className: 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 = _objectWithoutProperties(props, _excluded);
-  var antdContext = useContext(ConfigProvider.ConfigContext);
-  var getOptions = 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 = useContext(ConfigProvider.ConfigContext);
+  const getOptions = useCallback(() => {
+    return options?.map(option => {
       if (typeof option === 'string') {
         return {
           title: option,
@@ -112,31 +104,31 @@ var CheckCardGroup = function CheckCardGroup(props) {
       return option;
     });
   }, [options]);
-  var prefixCls = antdContext.getPrefixCls('pro-checkcard', customizePrefixCls);
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var groupPrefixCls = "".concat(prefixCls, "-group");
-  var domProps = omit(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
-  var _useMountMergeState = useMountMergeState(props.defaultValue, {
-      value: props.value,
-      onChange: props.onChange
-    }),
-    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
-    stateValue = _useMountMergeState2[0],
-    setStateValue = _useMountMergeState2[1];
-  var registerValueMap = 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
+  } = useStyle(prefixCls);
+  const groupPrefixCls = `${prefixCls}-group`;
+  const domProps = omit(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
+  const [stateValue, setStateValueInner] = useControlledState(props.defaultValue, props.value);
+  const setStateValue = useCallback(updater => {
+    setStateValueInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onChange?.(next);
+      return next;
+    });
+  }, [onChange]);
+  const registerValueMap = 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) {
@@ -144,65 +136,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 = _toConsumableArray(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 = useMemo(function () {
+  const children = useMemo(() => {
     if (loading) {
       return new Array(options.length || React.Children.toArray(props.children).length || 1).fill(0)
       // eslint-disable-next-line react/no-array-index-key
-      .map(function (_, index) {
-        return /*#__PURE__*/_jsx(CheckCard, {
-          loading: true
-        }, index);
-      });
+      .map((_, index) => /*#__PURE__*/_jsx(CheckCard, {
+        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__*/_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__*/_jsx(CheckCard, {
             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,
@@ -215,31 +194,31 @@ var CheckCardGroup = function CheckCardGroup(props) {
     }
     return props.children;
   }, [getOptions, loading, multiple, options, props.children, props.size, stateValue]);
-  var classString = classNames(groupPrefixCls, className, hashId);
+  const classString = clsx(groupPrefixCls, className, hashId);
   return wrapSSR( /*#__PURE__*/_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__*/_jsx("div", _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx("div", {
       className: classString,
-      style: style
-    }, domProps), {}, {
+      style: style,
+      ...domProps,
       children: children
-    }))
+    })
   }));
 };
-export default (function (props) {
-  return /*#__PURE__*/_jsx(ProConfigProvider, {
-    needDeps: true,
-    children: /*#__PURE__*/_jsx(CheckCardGroup, _objectSpread({}, props))
-  });
-});
+export default (props => /*#__PURE__*/_jsx(ProConfigProvider, {
+  needDeps: true,
+  children: /*#__PURE__*/_jsx(CheckCardGroup, {
+    ...props
+  })
+}));

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

@@ -1,12 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["prefixCls", "className", "avatar", "title", "description", "cover", "extra", "style"];
+import { useControlledState } from '@rc-component/util';
 import { Avatar, ConfigProvider } from 'antd';
-import classNames from 'classnames';
-import React, { useContext, useEffect, useMemo } from 'react';
-import { useMountMergeState } from "../../../utils";
+import { clsx } from 'clsx';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import ProCardActions from "../Actions";
 import CheckCardGroup, { CardLoading, CheckCardGroupConnext } from "./Group";
 import { useStyle } from "./style";
@@ -16,58 +11,58 @@ import { useStyle } from "./style";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var CheckCard = function CheckCard(props) {
-  var _props$styles;
-  var _useMountMergeState = useMountMergeState(props.defaultChecked || false, {
-      value: props.checked,
-      onChange: props.onChange
-    }),
-    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
-    stateChecked = _useMountMergeState2[0],
-    setStateChecked = _useMountMergeState2[1];
-  var checkCardGroup = useContext(CheckCardGroupConnext);
-  var _useContext = useContext(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] = useControlledState(props.defaultChecked || false, props.checked);
+  const setStateChecked = useCallback(updater => {
+    setStateCheckedInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onChange?.(next);
+      return next;
+    });
+  }, [props.onChange]);
+  const checkCardGroup = useContext(CheckCardGroupConnext);
+  const {
+    getPrefixCls
+  } = useContext(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 '';
   };
-  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);
-    };
+  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 = _objectWithoutProperties(props, _excluded);
-  var checkCardProps = _objectSpread({}, others);
-  var prefixCls = getPrefixCls('pro-checkcard', customizePrefixCls);
-  var _useStyle = 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
+  } = useStyle(prefixCls);
 
   /**
    * 头像自定义
@@ -76,9 +71,9 @@ var CheckCard = function CheckCard(props) {
    * @param coverDom
    * @returns
    */
-  var renderCover = function renderCover(cls, coverDom) {
+  const renderCover = (cls, coverDom) => {
     return /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(cls, "-cover"), hashId),
+      className: clsx(`${cls}-cover`, hashId),
       children: typeof coverDom === 'string' ? /*#__PURE__*/_jsx("img", {
         src: coverDom,
         alt: "checkcard"
@@ -86,30 +81,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 = classNames(prefixCls, className, hashId, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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 = useMemo(function () {
+  const {
+    disabled = false,
+    size,
+    loading: cardLoading,
+    bordered = true,
+    checked
+  } = checkCardProps;
+  const sizeCls = getSizeCls(size);
+  const classString = 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 = useMemo(() => {
     if (cardLoading) {
       return /*#__PURE__*/_jsx(CardLoading, {
         prefixCls: prefixCls || '',
@@ -119,39 +121,43 @@ var CheckCard = function CheckCard(props) {
     if (cover) {
       return renderCover(prefixCls || '', cover);
     }
-    var avatarDom = avatar ? /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(prefixCls, "-avatar"), hashId),
+    const avatarDom = avatar ? /*#__PURE__*/_jsx("div", {
+      className: clsx(`${prefixCls}-avatar`, hashId),
       children: typeof avatar === 'string' ? /*#__PURE__*/_jsx(Avatar, {
         size: 48,
         shape: "square",
         src: avatar
       }) : avatar
     }) : null;
-    var headerDom = (title !== null && title !== void 0 ? title : extra) != null && /*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(prefixCls, "-header"), hashId),
+    const headerDom = (title ?? extra) != null && /*#__PURE__*/_jsxs("div", {
+      className: clsx(`${prefixCls}-header`, hashId),
       children: [/*#__PURE__*/_jsxs("div", {
-        className: classNames("".concat(prefixCls, "-header-left"), hashId),
+        className: clsx(`${prefixCls}-header-left`, hashId),
         children: [/*#__PURE__*/_jsx("div", {
-          className: classNames("".concat(prefixCls, "-title"), hashId, _defineProperty({}, "".concat(prefixCls, "-title-with-ellipsis"), typeof title === 'string')),
+          className: clsx(`${prefixCls}-title`, hashId, {
+            [`${prefixCls}-title-with-ellipsis`]: typeof title === 'string'
+          }),
           children: title
         }), props.subTitle ? /*#__PURE__*/_jsx("div", {
-          className: classNames("".concat(prefixCls, "-subTitle"), hashId),
+          className: clsx(`${prefixCls}-subTitle`, hashId),
           children: props.subTitle
         }) : null]
       }), extra && /*#__PURE__*/_jsx("div", {
-        className: classNames("".concat(prefixCls, "-extra"), hashId),
+        className: clsx(`${prefixCls}-extra`, hashId),
         children: extra
       })]
     });
-    var descriptionDom = description ? /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(prefixCls, "-description"), hashId),
+    const descriptionDom = description ? /*#__PURE__*/_jsx("div", {
+      className: clsx(`${prefixCls}-description`, hashId),
       children: description
     }) : null;
-    var metaClass = classNames("".concat(prefixCls, "-content"), hashId, _defineProperty({}, "".concat(prefixCls, "-avatar-header"), avatarDom && headerDom && !descriptionDom));
+    const metaClass = clsx(`${prefixCls}-content`, hashId, {
+      [`${prefixCls}-avatar-header`]: avatarDom && headerDom && !descriptionDom
+    });
     return /*#__PURE__*/_jsxs("div", {
       className: metaClass,
       children: [avatarDom, headerDom || descriptionDom ? /*#__PURE__*/_jsxs("div", {
-        className: classNames("".concat(prefixCls, "-detail"), hashId),
+        className: clsx(`${prefixCls}-detail`, hashId),
         children: [headerDom, descriptionDom]
       }) : null]
     });
@@ -159,15 +165,15 @@ var CheckCard = function CheckCard(props) {
   return wrapSSR( /*#__PURE__*/_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__*/_jsx("div", {
-      className: classNames("".concat(prefixCls, "-body"), hashId),
-      style: ((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.body) || props.bodyStyle,
+      className: clsx(`${prefixCls}-body`, hashId),
+      style: props.styles?.body || props.bodyStyle,
       children: props.children
     }) : null, props.actions ? /*#__PURE__*/_jsx(ProCardActions, {
       actions: props.actions,