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

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

@@ -1,19 +1,14 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Keyframes } from '@ant-design/cssinjs';
 import { useStyle as useAntdStyle } from "../../../provider";
-var proCheckCardActive = function proCheckCardActive(token) {
-  return {
-    backgroundColor: token.colorPrimaryBg,
-    borderColor: token.colorPrimary
-  };
-};
-var proCheckCardDisabled = function proCheckCardDisabled(token) {
-  return _defineProperty({
-    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
     },
@@ -23,9 +18,9 @@ var proCheckCardDisabled = function proCheckCardDisabled(token) {
     '&-avatar': {
       opacity: '0.25'
     }
-  });
-};
-export var cardLoading = new Keyframes('card-loading', {
+  }
+});
+export const cardLoading = new Keyframes('card-loading', {
   '0%': {
     backgroundPosition: '0 50%'
   },
@@ -36,165 +31,186 @@ export var cardLoading = new Keyframes('card-loading', {
     backgroundPosition: '0 50%'
   }
 });
-var genProStyle = function genProStyle(token) {
-  var _token$componentCls;
-  return _defineProperty({}, 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
+        }
       }
     }
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_token$componentCls, "".concat(token.componentCls, "-loading"), {
-    overflow: 'hidden',
-    userSelect: 'none',
-    '&-content': {
-      padding: token.paddingMD
-    }
-  }), '&:focus', proCheckCardActive(token)), '&-checked', _objectSpread(_objectSpread({}, 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
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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
-    }
-  })));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('CheckCard', function (token) {
-    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('CheckCard', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proListToken)];
   });
 }

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

@@ -1,22 +1,26 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ProCardDivider = function ProCardDivider(props) {
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var proCardPrefixCls = getPrefixCls('pro-card');
-  var prefixCls = "".concat(proCardPrefixCls, "-divider");
-  var _useStyle = useStyle(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 = classNames(prefixCls, className, hashId, _defineProperty({}, "".concat(prefixCls, "-").concat(type), type));
+const ProCardDivider = props => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const proCardPrefixCls = getPrefixCls('pro-card');
+  const prefixCls = `${proCardPrefixCls}-divider`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(proCardPrefixCls);
+  const {
+    className,
+    style = {},
+    type
+  } = props;
+  const classString = clsx(prefixCls, className, hashId, {
+    [`${prefixCls}-${type}`]: type
+  });
   return wrapSSR( /*#__PURE__*/_jsx("div", {
     className: classString,
     style: style

package/es/card/components/Divider/style.js

@@ -1,37 +1,40 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genDividerStyle = function genDividerStyle(token) {
-  var componentCls = token.componentCls;
-  return _defineProperty({}, 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
+        }
       }
     }
-  });
+  };
 };
 export default function useStyle(prefixCls) {
-  return useAntdStyle('ProCardDivider', function (token) {
-    var proCardDividerToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProCardDivider', token => {
+    const proCardDividerToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genDividerStyle(proCardDividerToken)];
   });
 }

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

@@ -3,20 +3,23 @@ import React from 'react';
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Loading = function Loading(props) {
-  var style = props.style,
-    prefix = props.prefix;
-  var _useStyle = useStyle(prefix || 'ant-pro-card'),
-    wrapSSR = _useStyle.wrapSSR;
+const Loading = props => {
+  const {
+    style,
+    prefix
+  } = props;
+  const {
+    wrapSSR
+  } = useStyle(prefix || 'ant-pro-card');
   return wrapSSR( /*#__PURE__*/_jsxs("div", {
-    className: "".concat(prefix, "-loading-content"),
+    className: `${prefix}-loading-content`,
     style: style,
     children: [/*#__PURE__*/_jsx(Row, {
       gutter: 8,
       children: /*#__PURE__*/_jsx(Col, {
         span: 22,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })
     }), /*#__PURE__*/_jsxs(Row, {
@@ -24,12 +27,12 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/_jsx(Col, {
         span: 8,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/_jsx(Col, {
         span: 15,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     }), /*#__PURE__*/_jsxs(Row, {
@@ -37,12 +40,12 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/_jsx(Col, {
         span: 6,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/_jsx(Col, {
         span: 18,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     }), /*#__PURE__*/_jsxs(Row, {
@@ -50,12 +53,12 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/_jsx(Col, {
         span: 13,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/_jsx(Col, {
         span: 9,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     }), /*#__PURE__*/_jsxs(Row, {
@@ -63,17 +66,17 @@ var Loading = function Loading(props) {
       children: [/*#__PURE__*/_jsx(Col, {
         span: 4,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/_jsx(Col, {
         span: 3,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       }), /*#__PURE__*/_jsx(Col, {
         span: 16,
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-loading-block")
+          className: `${prefix}-loading-block`
         })
       })]
     })]

package/es/card/components/Loading/style.js

@@ -1,8 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Keyframes } from '@ant-design/cssinjs';
 import { useStyle as useAntdStyle } from "../../../provider";
-export var cardLoading = new Keyframes('card-loading', {
+export const cardLoading = new Keyframes('card-loading', {
   '0%': {
     backgroundPosition: '0 50%'
   },
@@ -13,37 +11,42 @@ export var cardLoading = new Keyframes('card-loading', {
     backgroundPosition: '0 50%'
   }
 });
-var genProStyle = function genProStyle(token) {
-  return _defineProperty({}, token.componentCls, _defineProperty(_defineProperty({
-    '&-loading': {
-      overflow: 'hidden'
-    },
-    '&-loading &-body': {
-      userSelect: 'none'
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-loading': {
+        overflow: 'hidden'
+      },
+      '&-loading &-body': {
+        userSelect: 'none'
+      },
+      [`${token.componentCls}-loading-content`]: {
+        width: '100%',
+        p: {
+          marginBlock: 0,
+          marginInline: 0
+        }
+      },
+      [`${token.componentCls}-loading-block`]: {
+        height: '14px',
+        marginBlock: '4px',
+        background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
+        backgroundSize: '600% 600%',
+        borderRadius: token.borderRadius,
+        animationName: cardLoading,
+        animationDuration: '1.4s',
+        animationTimingFunction: 'ease',
+        animationIterationCount: 'infinite'
+      }
     }
-  }, "".concat(token.componentCls, "-loading-content"), {
-    width: '100%',
-    p: {
-      marginBlock: 0,
-      marginInline: 0
-    }
-  }), "".concat(token.componentCls, "-loading-block"), {
-    height: '14px',
-    marginBlock: '4px',
-    background: "linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))",
-    backgroundSize: '600% 600%',
-    borderRadius: token.borderRadius,
-    animationName: cardLoading,
-    animationDuration: '1.4s',
-    animationTimingFunction: 'ease',
-    animationIterationCount: 'infinite'
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProCardLoading', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProCardLoading', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }