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

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

@@ -1,27 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cardLoading = void 0;
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _cssinjs = require("@ant-design/cssinjs");
 var _provider = require("../../../provider");
-var proCheckCardActive = function proCheckCardActive(token) {
-  return {
-    backgroundColor: token.colorPrimaryBg,
-    borderColor: token.colorPrimary
-  };
-};
-var proCheckCardDisabled = function proCheckCardDisabled(token) {
-  return (0, _defineProperty2.default)({
-    backgroundColor: token.colorBgContainerDisabled,
-    borderColor: token.colorBorder,
-    cursor: 'not-allowed'
-  }, token.componentCls, {
+const proCheckCardActive = token => ({
+  backgroundColor: token.colorPrimaryBg,
+  borderColor: token.colorPrimary
+});
+const proCheckCardDisabled = token => ({
+  backgroundColor: token.colorBgContainerDisabled,
+  borderColor: token.colorBorder,
+  cursor: 'not-allowed',
+  [token.componentCls]: {
     '&-description': {
       color: token.colorTextDisabled
     },
@@ -31,9 +25,9 @@ var proCheckCardDisabled = function proCheckCardDisabled(token) {
     '&-avatar': {
       opacity: '0.25'
     }
-  });
-};
-var cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
+  }
+});
+const cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
   '0%': {
     backgroundPosition: '0 50%'
   },
@@ -44,165 +38,186 @@ var cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
     backgroundPosition: '0 50%'
   }
 });
-var genProStyle = function genProStyle(token) {
-  var _token$componentCls;
-  return (0, _defineProperty2.default)({}, token.componentCls, (_token$componentCls = {
-    position: 'relative',
-    display: 'inline-block',
-    width: '320px',
-    marginInlineEnd: '16px',
-    marginBlockEnd: '16px',
-    color: token.colorText,
-    fontSize: token.fontSize,
-    lineHeight: token.lineHeight,
-    verticalAlign: 'top',
-    backgroundColor: token.colorBgContainer,
-    borderRadius: token.borderRadius,
-    overflow: 'auto',
-    cursor: 'pointer',
-    transition: "all 0.3s",
-    '&:after': {
-      position: 'absolute',
-      insetBlockStart: 2,
-      insetInlineEnd: 2,
-      width: 0,
-      height: 0,
-      opacity: 0,
-      transition: 'all 0.3s ' + token.motionEaseInOut,
-      borderBlockEnd: "".concat(token.borderRadius + 4, "px  solid transparent"),
-      borderInlineStart: "".concat(token.borderRadius + 4, "px  solid transparent"),
-      borderStartEndRadius: "".concat(token.borderRadius, "px"),
-      content: "''"
-    },
-    '&:last-child': {
-      marginInlineEnd: 0
-    },
-    '& + &': {
-      marginInlineStart: '0 !important'
-    },
-    '&-bordered': {
-      border: "".concat(token.lineWidth, "px solid ").concat(token.colorBorder)
-    },
-    '&-group': {
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'relative',
       display: 'inline-block',
-      '&-sub-check-card': {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        '&-title': {
-          cursor: 'pointer',
-          paddingBlock: token.paddingXS,
+      width: '320px',
+      marginInlineEnd: '16px',
+      marginBlockEnd: '16px',
+      color: token.colorText,
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
+      verticalAlign: 'top',
+      backgroundColor: token.colorBgContainer,
+      borderRadius: token.borderRadius,
+      overflow: 'auto',
+      cursor: 'pointer',
+      transition: `all 0.3s`,
+      '&:after': {
+        position: 'absolute',
+        insetBlockStart: 2,
+        insetInlineEnd: 2,
+        width: 0,
+        height: 0,
+        opacity: 0,
+        transition: 'all 0.3s ' + token.motionEaseInOut,
+        borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+        borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+        borderStartEndRadius: `${token.borderRadius}px`,
+        content: "''"
+      },
+      '&:last-child': {
+        marginInlineEnd: 0
+      },
+      '& + &': {
+        marginInlineStart: '0 !important'
+      },
+      '&-bordered': {
+        border: `${token.lineWidth}px solid ${token.colorBorder}`
+      },
+      '&-group': {
+        display: 'inline-block',
+        '&-sub-check-card': {
           display: 'flex',
-          gap: 4,
-          alignItems: 'center'
-        },
-        '&-panel': {
-          visibility: 'initial',
-          transition: 'all 0.3s',
-          opacity: 1,
-          '&-collapse': {
-            display: 'none',
-            visibility: 'hidden',
-            opacity: 0
+          flexDirection: 'column',
+          gap: '8px',
+          '&-title': {
+            cursor: 'pointer',
+            paddingBlock: token.paddingXS,
+            display: 'flex',
+            gap: 4,
+            alignItems: 'center'
+          },
+          '&-panel': {
+            visibility: 'initial',
+            transition: 'all 0.3s',
+            opacity: 1,
+            '&-collapse': {
+              display: 'none',
+              visibility: 'hidden',
+              opacity: 0
+            }
           }
         }
+      },
+      [`${token.componentCls}-loading`]: {
+        overflow: 'hidden',
+        userSelect: 'none',
+        '&-content': {
+          padding: token.paddingMD
+        }
+      },
+      '&:focus': proCheckCardActive(token),
+      '&-checked': {
+        ...proCheckCardActive(token),
+        '&:after': {
+          opacity: 1,
+          border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
+          borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+          borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+          borderStartEndRadius: `${token.borderRadius}px`
+        }
+      },
+      '&-disabled': proCheckCardDisabled(token),
+      '&[disabled]': proCheckCardDisabled(token),
+      '&-checked&-disabled': {
+        '&:after': {
+          position: 'absolute',
+          insetBlockStart: 2,
+          insetInlineEnd: 2,
+          width: 0,
+          height: 0,
+          border: `${token.borderRadius + 4}px solid ${token.colorTextDisabled}`,
+          borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+          borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+          borderStartEndRadius: `${token.borderRadius}px`,
+          content: "''"
+        }
+      },
+      '&-lg': {
+        width: 440
+      },
+      '&-sm': {
+        width: 212
+      },
+      '&-cover': {
+        paddingInline: token.paddingXXS,
+        paddingBlock: token.paddingXXS,
+        img: {
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+          borderRadius: token.borderRadius
+        }
+      },
+      '&-content': {
+        display: 'flex',
+        paddingInline: token.paddingSM,
+        paddingBlock: token.padding
+      },
+      '&-body': {
+        paddingInline: token.paddingSM,
+        paddingBlock: token.padding
+      },
+      '&-avatar-header': {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      '&-avatar': {
+        paddingInlineEnd: 8
+      },
+      '&-detail': {
+        overflow: 'hidden',
+        width: '100%',
+        '> div:not(:last-child)': {
+          marginBlockEnd: 4
+        }
+      },
+      '&-header': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        lineHeight: token.lineHeight,
+        '&-left': {
+          display: 'flex',
+          alignItems: 'center',
+          gap: token.sizeSM,
+          minWidth: 0
+        }
+      },
+      '&-title': {
+        overflow: 'hidden',
+        color: token.colorTextHeading,
+        fontWeight: '500',
+        fontSize: token.fontSize,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        '&-with-ellipsis': {
+          display: 'inline-block'
+        }
+      },
+      '&-description': {
+        color: token.colorTextSecondary
+      },
+      [`&:not(${token.componentCls}-disabled)`]: {
+        '&:hover': {
+          borderColor: token.colorPrimary
+        }
       }
     }
-  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_token$componentCls, "".concat(token.componentCls, "-loading"), {
-    overflow: 'hidden',
-    userSelect: 'none',
-    '&-content': {
-      padding: token.paddingMD
-    }
-  }), '&:focus', proCheckCardActive(token)), '&-checked', (0, _objectSpread2.default)((0, _objectSpread2.default)({}, proCheckCardActive(token)), {}, {
-    '&:after': {
-      opacity: 1,
-      border: "".concat(token.borderRadius + 4, "px solid ").concat(token.colorPrimary),
-      borderBlockEnd: "".concat(token.borderRadius + 4, "px  solid transparent"),
-      borderInlineStart: "".concat(token.borderRadius + 4, "px  solid transparent"),
-      borderStartEndRadius: "".concat(token.borderRadius, "px")
-    }
-  })), '&-disabled', proCheckCardDisabled(token)), '&[disabled]', proCheckCardDisabled(token)), '&-checked&-disabled', {
-    '&:after': {
-      position: 'absolute',
-      insetBlockStart: 2,
-      insetInlineEnd: 2,
-      width: 0,
-      height: 0,
-      border: "".concat(token.borderRadius + 4, "px solid ").concat(token.colorTextDisabled),
-      borderBlockEnd: "".concat(token.borderRadius + 4, "px  solid transparent"),
-      borderInlineStart: "".concat(token.borderRadius + 4, "px  solid transparent"),
-      borderStartEndRadius: "".concat(token.borderRadius, "px"),
-      content: "''"
-    }
-  }), '&-lg', {
-    width: 440
-  }), '&-sm', {
-    width: 212
-  }), '&-cover', {
-    paddingInline: token.paddingXXS,
-    paddingBlock: token.paddingXXS,
-    img: {
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      borderRadius: token.borderRadius
-    }
-  }), '&-content', {
-    display: 'flex',
-    paddingInline: token.paddingSM,
-    paddingBlock: token.padding
-  }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_token$componentCls, '&-body', {
-    paddingInline: token.paddingSM,
-    paddingBlock: token.padding
-  }), '&-avatar-header', {
-    display: 'flex',
-    alignItems: 'center'
-  }), '&-avatar', {
-    paddingInlineEnd: 8
-  }), '&-detail', {
-    overflow: 'hidden',
-    width: '100%',
-    '> div:not(:last-child)': {
-      marginBlockEnd: 4
-    }
-  }), '&-header', {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    lineHeight: token.lineHeight,
-    '&-left': {
-      display: 'flex',
-      alignItems: 'center',
-      gap: token.sizeSM,
-      minWidth: 0
-    }
-  }), '&-title', {
-    overflow: 'hidden',
-    color: token.colorTextHeading,
-    fontWeight: '500',
-    fontSize: token.fontSize,
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    '&-with-ellipsis': {
-      display: 'inline-block'
-    }
-  }), '&-description', {
-    color: token.colorTextSecondary
-  }), "&:not(".concat(token.componentCls, "-disabled)"), {
-    '&:hover': {
-      borderColor: token.colorPrimary
-    }
-  })));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('CheckCard', function (token) {
-    var proListToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('CheckCard', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proListToken)];
   });
 }

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

@@ -1,30 +1,34 @@
 "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 _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _style = _interopRequireDefault(require("./style"));
 var _jsxRuntime = require("react/jsx-runtime");
-var ProCardDivider = function ProCardDivider(props) {
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var proCardPrefixCls = getPrefixCls('pro-card');
-  var prefixCls = "".concat(proCardPrefixCls, "-divider");
-  var _useStyle = (0, _style.default)(proCardPrefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var className = props.className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    type = props.type;
-  var classString = (0, _classnames.default)(prefixCls, className, hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-").concat(type), type));
+const ProCardDivider = props => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const proCardPrefixCls = getPrefixCls('pro-card');
+  const prefixCls = `${proCardPrefixCls}-divider`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.default)(proCardPrefixCls);
+  const {
+    className,
+    style = {},
+    type
+  } = props;
+  const classString = (0, _clsx.clsx)(prefixCls, className, hashId, {
+    [`${prefixCls}-${type}`]: type
+  });
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classString,
     style: style

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default 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/card/components/Divider/style.js

@@ -1,44 +1,46 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genDividerStyle = function genDividerStyle(token) {
-  var componentCls = token.componentCls;
-  return (0, _defineProperty2.default)({}, componentCls, {
-    '&-divider': {
-      flex: 'none',
-      width: token.lineWidth,
-      marginInline: token.marginXS,
-      marginBlock: token.marginLG,
-      backgroundColor: token.colorSplit,
-      '&-horizontal': {
-        width: 'initial',
-        height: token.lineWidth,
-        marginInline: token.marginLG,
-        marginBlock: token.marginXS
-      }
-    },
-    '&&-size-small &-divider': {
-      marginBlock: token.marginLG,
-      marginInline: token.marginXS,
-      '&-horizontal': {
-        marginBlock: token.marginXS,
-        marginInline: token.marginLG
+const genDividerStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [componentCls]: {
+      '&-divider': {
+        flex: 'none',
+        width: token.lineWidth,
+        marginInline: token.marginXS,
+        marginBlock: token.marginLG,
+        backgroundColor: token.colorSplit,
+        '&-horizontal': {
+          width: 'initial',
+          height: token.lineWidth,
+          marginInline: token.marginLG,
+          marginBlock: token.marginXS
+        }
+      },
+      '&&-size-small &-divider': {
+        marginBlock: token.marginLG,
+        marginInline: token.marginXS,
+        '&-horizontal': {
+          marginBlock: token.marginXS,
+          marginInline: token.marginLG
+        }
       }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProCardDivider', function (token) {
-    var proCardDividerToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProCardDivider', token => {
+    const proCardDividerToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genDividerStyle(proCardDividerToken)];
   });
 }

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

@@ -9,20 +9,23 @@ var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var Loading = function Loading(props) {
-  var style = props.style,
-    prefix = props.prefix;
-  var _useStyle = (0, _style.useStyle)(prefix || 'ant-pro-card'),
-    wrapSSR = _useStyle.wrapSSR;
+const Loading = props => {
+  const {
+    style,
+    prefix
+  } = props;
+  const {
+    wrapSSR
+  } = (0, _style.useStyle)(prefix || 'ant-pro-card');
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "".concat(prefix, "-loading-content"),
+    className: `${prefix}-loading-content`,
     style: style,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, {
       gutter: 8,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 22,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
@@ -30,12 +33,12 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 8,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 15,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
@@ -43,12 +46,12 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 6,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 18,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
@@ -56,12 +59,12 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 13,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 9,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
@@ -69,17 +72,17 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 4,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 3,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: 16,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     })]

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

@@ -6,6 +6,6 @@ export interface ProToken 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;
 };