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

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

@@ -1,20 +1,23 @@
 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 ProCardOperation = function ProCardOperation(props) {
-  var className = props.className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    children = props.children;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-card-operation');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var classString = classNames(prefixCls, className, hashId);
+const ProCardOperation = props => {
+  const {
+    className,
+    style = {},
+    children
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-card-operation');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const classString = clsx(prefixCls, className, hashId);
   return wrapSSR( /*#__PURE__*/_jsx("div", {
     className: classString,
     style: style,

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

@@ -1,24 +1,25 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-    marginBlock: token.marginLG,
-    marginInline: 0,
-    color: token.colorText,
-    fontWeight: '500',
-    fontSize: '20px',
-    lineHeight: '38px'
-  });
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      marginBlock: token.marginLG,
+      marginInline: 0,
+      color: token.colorText,
+      fontWeight: '500',
+      fontSize: '20px',
+      lineHeight: '38px'
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProCardOperation', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProCardOperation', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

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

@@ -1,59 +1,63 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "layout", "style", "description", "children", "title", "tip", "status", "trend", "prefix", "icon"];
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Statistic as AntdStatistic, Badge, ConfigProvider, Tooltip } 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";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Statistic = function Statistic(props) {
-  var className = props.className,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'inline' : _props$layout,
-    style = props.style,
-    description = props.description,
-    children = props.children,
-    title = props.title,
-    tip = props.tip,
-    status = props.status,
-    trend = props.trend,
-    prefix = props.prefix,
-    icon = props.icon,
-    others = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-card-statistic');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var classString = classNames(prefixCls, className, hashId);
-  var statusClass = classNames("".concat(prefixCls, "-status"), hashId);
-  var iconClass = classNames("".concat(prefixCls, "-icon"), hashId);
-  var wrapperClass = classNames("".concat(prefixCls, "-wrapper"), hashId);
-  var contentClass = classNames("".concat(prefixCls, "-content"), hashId);
-  var statisticClassName = classNames(hashId, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-layout-").concat(layout), layout), "".concat(prefixCls, "-trend-").concat(trend), trend));
-  var tipDom = tip && /*#__PURE__*/_jsx(Tooltip, {
+const Statistic = props => {
+  const {
+    className,
+    layout = 'inline',
+    style,
+    description,
+    children,
+    title,
+    tip,
+    status,
+    trend,
+    prefix,
+    icon,
+    ...others
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-card-statistic');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const classString = clsx(prefixCls, className, hashId);
+  const statusClass = clsx(`${prefixCls}-status`, hashId);
+  const iconClass = clsx(`${prefixCls}-icon`, hashId);
+  const wrapperClass = clsx(`${prefixCls}-wrapper`, hashId);
+  const contentClass = clsx(`${prefixCls}-content`, hashId);
+  const statisticClassName = clsx(hashId, {
+    [`${prefixCls}-layout-${layout}`]: layout,
+    [`${prefixCls}-trend-${trend}`]: trend
+  });
+  const tipDom = tip && /*#__PURE__*/_jsx(Tooltip, {
     title: tip,
     children: /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-      className: "".concat(prefixCls, "-tip ").concat(hashId).trim()
+      className: `${prefixCls}-tip ${hashId}`.trim()
     })
   });
-  var trendIconClassName = classNames("".concat(prefixCls, "-trend-icon"), hashId, _defineProperty({}, "".concat(prefixCls, "-trend-icon-").concat(trend), trend));
-  var trendDom = trend && /*#__PURE__*/_jsx("div", {
+  const trendIconClassName = clsx(`${prefixCls}-trend-icon`, hashId, {
+    [`${prefixCls}-trend-icon-${trend}`]: trend
+  });
+  const trendDom = trend && /*#__PURE__*/_jsx("div", {
     className: trendIconClassName
   });
-  var statusDom = status && /*#__PURE__*/_jsx("div", {
+  const statusDom = status && /*#__PURE__*/_jsx("div", {
     className: statusClass,
     children: /*#__PURE__*/_jsx(Badge, {
       status: status,
       text: null
     })
   });
-  var iconDom = icon && /*#__PURE__*/_jsx("div", {
+  const iconDom = icon && /*#__PURE__*/_jsx("div", {
     className: iconClass,
     children: icon
   });
@@ -64,16 +68,17 @@ var Statistic = function Statistic(props) {
       className: wrapperClass,
       children: [statusDom, /*#__PURE__*/_jsxs("div", {
         className: contentClass,
-        children: [/*#__PURE__*/_jsx(AntdStatistic, _objectSpread({
+        children: [/*#__PURE__*/_jsx(AntdStatistic, {
           title: (title || tipDom) && /*#__PURE__*/_jsxs(_Fragment, {
             children: [title, tipDom]
           }),
           prefix: (trendDom || prefix) && /*#__PURE__*/_jsxs(_Fragment, {
             children: [trendDom, prefix]
           }),
-          className: statisticClassName
-        }, others)), description && /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefixCls, "-description ").concat(hashId).trim(),
+          className: statisticClassName,
+          ...others
+        }), description && /*#__PURE__*/_jsx("div", {
+          className: `${prefixCls}-description ${hashId}`.trim(),
           children: description
         })]
       })]

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

@@ -1,80 +1,99 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    display: 'flex',
-    fontSize: token.fontSize,
-    '& + &': {
-      marginBlockStart: 4
-    },
-    '&-tip': {
-      marginInlineStart: 4
-    },
-    '&-wrapper': _defineProperty({
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
       display: 'flex',
-      width: '100%'
-    }, "".concat(token.componentCls, "-status"), {
-      width: '14px'
-    }),
-    '&-icon': {
-      marginInlineEnd: 16
-    },
-    '&-trend-icon': {
-      width: 0,
-      height: 0,
-      borderInlineEnd: '3.5px solid transparent',
-      borderBlockEnd: '9px solid #000',
-      borderInlineStart: '3.5px solid transparent',
-      '&-up': {
-        transform: 'rotate(0deg)'
+      fontSize: token.fontSize,
+      '& + &': {
+        marginBlockStart: 4
       },
-      '&-down': {
-        transform: 'rotate(180deg)'
+      '&-tip': {
+        marginInlineStart: 4
+      },
+      '&-wrapper': {
+        display: 'flex',
+        width: '100%',
+        [`${token.componentCls}-status`]: {
+          width: '14px'
+        }
+      },
+      '&-icon': {
+        marginInlineEnd: 16
+      },
+      '&-trend-icon': {
+        width: 0,
+        height: 0,
+        borderInlineEnd: '3.5px solid transparent',
+        borderBlockEnd: '9px solid #000',
+        borderInlineStart: '3.5px solid transparent',
+        '&-up': {
+          transform: 'rotate(0deg)'
+        },
+        '&-down': {
+          transform: 'rotate(180deg)'
+        }
+      },
+      '&-content': {
+        width: '100%'
+      },
+      '&-description': {
+        width: '100%'
+      },
+      [`${token.antCls}-statistic-title`]: {
+        color: token.colorText
+      },
+      '&-trend-up': {
+        [`${token.antCls}-statistic-content`]: {
+          color: '#f5222d',
+          [`${token.componentCls}-trend-icon`]: {
+            borderBlockEndColor: '#f5222d'
+          }
+        }
+      },
+      '&-trend-down': {
+        [`${token.antCls}-statistic-content`]: {
+          color: '#389e0d',
+          [`${token.componentCls}-trend-icon`]: {
+            borderBlockEndColor: '#52c41a'
+          }
+        }
+      },
+      '& &-layout-horizontal': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        [`${token.antCls}-statistic-title`]: {
+          marginBlockEnd: 0
+        },
+        [`${token.antCls}-statistic-content-value`]: {
+          fontWeight: 500
+        },
+        [`${token.antCls}-statistic-title,${token.antCls}-statistic-content,${token.antCls}-statistic-content-suffix,${token.antCls}-statistic-content-prefix,${token.antCls}-statistic-content-value-decimal`]: {
+          fontSize: token.fontSize
+        }
+      },
+      '& &-layout-inline': {
+        display: 'inline-flex',
+        color: token.colorTextSecondary,
+        [`${token.antCls}-statistic-title`]: {
+          marginInlineEnd: '6px',
+          marginBlockEnd: 0
+        },
+        [`${token.antCls}-statistic-content`]: {
+          color: token.colorTextSecondary
+        },
+        [`${token.antCls}-statistic-title,${token.antCls}-statistic-content,${token.antCls}-statistic-content-suffix,${token.antCls}-statistic-content-prefix,${token.antCls}-statistic-content-value-decimal`]: {
+          fontSize: token.fontSizeSM
+        }
       }
-    },
-    '&-content': {
-      width: '100%'
-    },
-    '&-description': {
-      width: '100%'
     }
-  }, "".concat(token.antCls, "-statistic-title"), {
-    color: token.colorText
-  }), '&-trend-up', _defineProperty({}, "".concat(token.antCls, "-statistic-content"), _defineProperty({
-    color: '#f5222d'
-  }, "".concat(token.componentCls, "-trend-icon"), {
-    borderBlockEndColor: '#f5222d'
-  }))), '&-trend-down', _defineProperty({}, "".concat(token.antCls, "-statistic-content"), _defineProperty({
-    color: '#389e0d'
-  }, "".concat(token.componentCls, "-trend-icon"), {
-    borderBlockEndColor: '#52c41a'
-  }))), '& &-layout-horizontal', _defineProperty(_defineProperty(_defineProperty({
-    display: 'flex',
-    justifyContent: 'space-between'
-  }, "".concat(token.antCls, "-statistic-title"), {
-    marginBlockEnd: 0
-  }), "".concat(token.antCls, "-statistic-content-value"), {
-    fontWeight: 500
-  }), "".concat(token.antCls, "-statistic-title,").concat(token.antCls, "-statistic-content,").concat(token.antCls, "-statistic-content-suffix,").concat(token.antCls, "-statistic-content-prefix,").concat(token.antCls, "-statistic-content-value-decimal"), {
-    fontSize: token.fontSize
-  })), '& &-layout-inline', _defineProperty(_defineProperty(_defineProperty({
-    display: 'inline-flex',
-    color: token.colorTextSecondary
-  }, "".concat(token.antCls, "-statistic-title"), {
-    marginInlineEnd: '6px',
-    marginBlockEnd: 0
-  }), "".concat(token.antCls, "-statistic-content"), {
-    color: token.colorTextSecondary
-  }), "".concat(token.antCls, "-statistic-title,").concat(token.antCls, "-statistic-content,").concat(token.antCls, "-statistic-content-suffix,").concat(token.antCls, "-statistic-content-prefix,").concat(token.antCls, "-statistic-content-value-decimal"), {
-    fontSize: token.fontSizeSM
-  })));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('Statistic', function (token) {
-    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('Statistic', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proListToken)];
   });
 }

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

@@ -1,9 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "statistic", "className", "chart", "chartPlacement", "footer"];
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import Card from "../Card";
 import Divider from "../Divider";
@@ -12,60 +8,69 @@ import Statistic from "../Statistic";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var StatisticCard = function StatisticCard(props) {
-  var children = props.children,
-    statistic = props.statistic,
-    className = props.className,
-    chart = props.chart,
-    chartPlacement = props.chartPlacement,
-    footer = props.footer,
-    others = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-statistic-card');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var classString = classNames(prefixCls, className, hashId);
+const StatisticCard = props => {
+  const {
+    children,
+    statistic,
+    className,
+    chart,
+    chartPlacement,
+    footer,
+    ...others
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-statistic-card');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const classString = clsx(prefixCls, className, hashId);
 
   // 在 StatisticCard 中时默认为 vertical。
-  var statisticDom = statistic && /*#__PURE__*/_jsx(Statistic, _objectSpread({
-    layout: "vertical"
-  }, statistic));
-  var chartCls = classNames("".concat(prefixCls, "-chart"), hashId, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-chart-left"), chartPlacement === 'left' && chart && statistic), "".concat(prefixCls, "-chart-right"), chartPlacement === 'right' && chart && statistic));
-  var chartDom = chart && /*#__PURE__*/_jsx("div", {
+  const statisticDom = statistic && /*#__PURE__*/_jsx(Statistic, {
+    layout: "vertical",
+    ...statistic
+  });
+  const chartCls = clsx(`${prefixCls}-chart`, hashId, {
+    [`${prefixCls}-chart-left`]: chartPlacement === 'left' && chart && statistic,
+    [`${prefixCls}-chart-right`]: chartPlacement === 'right' && chart && statistic
+  });
+  const chartDom = chart && /*#__PURE__*/_jsx("div", {
     className: chartCls,
     children: chart
   });
-  var contentCls = classNames("".concat(prefixCls, "-content "), hashId, _defineProperty({}, "".concat(prefixCls, "-content-horizontal"), chartPlacement === 'left' || chartPlacement === 'right'));
+  const contentCls = clsx(`${prefixCls}-content `, hashId, {
+    [`${prefixCls}-content-horizontal`]: chartPlacement === 'left' || chartPlacement === 'right'
+  });
 
   // 默认上下结构
-  var contentDom = (chartDom || statisticDom) && (chartPlacement === 'left' ? /*#__PURE__*/_jsxs("div", {
+  const contentDom = (chartDom || statisticDom) && (chartPlacement === 'left' ? /*#__PURE__*/_jsxs("div", {
     className: contentCls,
     children: [chartDom, statisticDom]
   }) : /*#__PURE__*/_jsxs("div", {
     className: contentCls,
     children: [statisticDom, chartDom]
   }));
-  var footerDom = footer && /*#__PURE__*/_jsx("div", {
-    className: "".concat(prefixCls, "-footer ").concat(hashId).trim(),
+  const footerDom = footer && /*#__PURE__*/_jsx("div", {
+    className: `${prefixCls}-footer ${hashId}`.trim(),
     children: footer
   });
-  return wrapSSR( /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({
-    className: classString
-  }, others), {}, {
+  return wrapSSR( /*#__PURE__*/_jsxs(Card, {
+    className: classString,
+    ...others,
     children: [contentDom, children, footerDom]
-  })));
+  }));
 };
-var Group = function Group(props) {
-  return /*#__PURE__*/_jsx(StatisticCard, _objectSpread({
-    styles: {
-      body: {
-        padding: 0
-      }
+const Group = props => /*#__PURE__*/_jsx(StatisticCard, {
+  styles: {
+    body: {
+      padding: 0
     }
-  }, props));
-};
+  },
+  ...props
+});
 StatisticCard.Statistic = Statistic;
 StatisticCard.Divider = Divider;
 StatisticCard.Operation = Operation;

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

@@ -1,44 +1,46 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    '&-chart': {
-      display: 'flex',
-      flexDirection: 'column',
-      marginBlockStart: 8,
-      marginBlockEnd: 8,
-      '&-left': {
-        marginBlockStart: 0,
-        marginInlineEnd: '16px'
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-chart': {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBlockStart: 8,
+        marginBlockEnd: 8,
+        '&-left': {
+          marginBlockStart: 0,
+          marginInlineEnd: '16px'
+        },
+        '&-right': {
+          marginBlockStart: 0,
+          marginInlineStart: '16px'
+        }
       },
-      '&-right': {
-        marginBlockStart: 0,
-        marginInlineStart: '16px'
+      '&-content': {
+        display: 'flex',
+        flexDirection: 'column',
+        '&-horizontal': {
+          flexDirection: 'row',
+          [`${token.componentCls}-chart`]: {
+            alignItems: 'center',
+            alignSelf: 'flex-start'
+          }
+        }
+      },
+      '&-footer': {
+        marginBlockStart: 8,
+        paddingBlockStart: '16px',
+        borderBlockStart: `rgba(0, 0, 0, 0.08) solid ${token.colorBorder}`
       }
-    },
-    '&-content': {
-      display: 'flex',
-      flexDirection: 'column',
-      '&-horizontal': _defineProperty({
-        flexDirection: 'row'
-      }, "".concat(token.componentCls, "-chart"), {
-        alignItems: 'center',
-        alignSelf: 'flex-start'
-      })
-    },
-    '&-footer': {
-      marginBlockStart: 8,
-      paddingBlockStart: '16px',
-      borderBlockStart: "rgba(0, 0, 0, 0.08) solid ".concat(token.colorBorder)
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('StatisticCard', function (token) {
-    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('StatisticCard', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proListToken)];
   });
 }