@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.2

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

@@ -1,118 +1,69 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/card/components/Card/index.tsx
-import { RightOutlined } from "@ant-design/icons";
-import { ConfigProvider, Tabs } from "antd";
-import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
-import classNames from "classnames";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
-import omit from "rc-util/lib/omit";
-import React, { useContext } from "react";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "style", "bodyStyle", "headStyle", "title", "subTitle", "extra", "wrap", "layout", "loading", "gutter", "tooltip", "split", "headerBordered", "variant", "boxShadow", "children", "size", "actions", "ghost", "hoverable", "direction", "collapsed", "collapsible", "collapsibleIconRender", "colStyle", "defaultCollapsed", "onCollapse", "checked", "onChecked", "tabs", "type"];
+import { RightOutlined } from '@ant-design/icons';
+import { ConfigProvider, Tabs } from 'antd';
+import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
+import classNames from 'classnames';
+import { useMergedState } from 'rc-util';
+import omit from 'rc-util/lib/omit';
+import React, { useContext } from 'react';
 import { LabelIconTip } from "../../../utils";
 import Actions from "../Actions";
 import Loading from "../Loading";
-import { useLegacyItems } from "../TabPane";
 import useStyle from "./style";
-var Card = React.forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    style,
-    bodyStyle,
-    headStyle,
-    title,
-    subTitle,
-    extra,
-    wrap = false,
-    layout,
-    loading,
-    gutter = 0,
-    tooltip,
-    split,
-    headerBordered = false,
-    variant = "outlined",
-    boxShadow = false,
-    children,
-    size,
-    actions,
-    ghost = false,
-    hoverable = false,
-    direction,
-    collapsed: controlCollapsed,
-    collapsible = false,
-    collapsibleIconRender,
-    colStyle,
-    defaultCollapsed = false,
-    onCollapse,
-    checked,
-    onChecked,
-    tabs,
-    type
-  } = _a, rest = __objRest(_a, [
-    "className",
-    "style",
-    "bodyStyle",
-    "headStyle",
-    "title",
-    "subTitle",
-    "extra",
-    "wrap",
-    "layout",
-    "loading",
-    "gutter",
-    "tooltip",
-    "split",
-    "headerBordered",
-    "variant",
-    "boxShadow",
-    "children",
-    "size",
-    "actions",
-    "ghost",
-    "hoverable",
-    "direction",
-    "collapsed",
-    "collapsible",
-    "collapsibleIconRender",
-    "colStyle",
-    "defaultCollapsed",
-    "onCollapse",
-    "checked",
-    "onChecked",
-    "tabs",
-    "type"
-  ]);
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const screens = useBreakpoint() || {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames2;
+  var className = props.className,
+    style = props.style,
+    bodyStyle = props.bodyStyle,
+    headStyle = props.headStyle,
+    title = props.title,
+    subTitle = props.subTitle,
+    extra = props.extra,
+    _props$wrap = props.wrap,
+    wrap = _props$wrap === void 0 ? false : _props$wrap,
+    layout = props.layout,
+    loading = props.loading,
+    _props$gutter = props.gutter,
+    gutter = _props$gutter === void 0 ? 0 : _props$gutter,
+    tooltip = props.tooltip,
+    split = props.split,
+    _props$headerBordered = props.headerBordered,
+    headerBordered = _props$headerBordered === void 0 ? false : _props$headerBordered,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
+    _props$boxShadow = props.boxShadow,
+    boxShadow = _props$boxShadow === void 0 ? false : _props$boxShadow,
+    children = props.children,
+    size = props.size,
+    actions = props.actions,
+    _props$ghost = props.ghost,
+    ghost = _props$ghost === void 0 ? false : _props$ghost,
+    _props$hoverable = props.hoverable,
+    hoverable = _props$hoverable === void 0 ? false : _props$hoverable,
+    direction = props.direction,
+    controlCollapsed = props.collapsed,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    collapsibleIconRender = props.collapsibleIconRender,
+    colStyle = props.colStyle,
+    _props$defaultCollaps = props.defaultCollapsed,
+    defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
+    onCollapse = props.onCollapse,
+    checked = props.checked,
+    onChecked = props.onChecked,
+    tabs = props.tabs,
+    type = props.type,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var screens = useBreakpoint() || {
     lg: true,
     md: true,
     sm: true,
@@ -120,20 +71,32 @@ var Card = React.forwardRef((props, ref) => {
     xs: false,
     xxl: false
   };
-  const [collapsed, setCollapsed] = useMergedState(defaultCollapsed, {
-    value: controlCollapsed,
-    onChange: onCollapse
-  });
-  const responsiveArray = ["xxl", "xl", "lg", "md", "sm", "xs"];
-  const ModifyTabItemsContent = useLegacyItems(tabs == null ? void 0 : tabs.items, children, tabs);
-  const getNormalizedGutter = (gut) => {
-    const results = [0, 0];
-    const normalizedGutter = Array.isArray(gut) ? gut : [gut, 0];
-    normalizedGutter.forEach((g, index) => {
-      if (typeof g === "object") {
-        for (let i = 0; i < responsiveArray.length; i += 1) {
-          const breakpoint = responsiveArray[i];
-          if (screens[breakpoint] && g[breakpoint] !== void 0) {
+  var _useMergedState = useMergedState(defaultCollapsed, {
+      value: controlCollapsed,
+      onChange: onCollapse
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    collapsed = _useMergedState2[0],
+    setCollapsed = _useMergedState2[1];
+
+  // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。
+  var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+  // 直接使用 tabs.items，不再支持旧的 TabPane 写法
+  var ModifyTabItemsContent = tabs === null || tabs === void 0 ? void 0 : tabs.items;
+
+  /**
+   * 根据响应式获取 gutter, 参考 antd 实现
+   *
+   * @param gutter Gutter
+   */
+  var getNormalizedGutter = function getNormalizedGutter(gut) {
+    var results = [0, 0];
+    var normalizedGutter = Array.isArray(gut) ? gut : [gut, 0];
+    normalizedGutter.forEach(function (g, index) {
+      if (_typeof(g) === 'object') {
+        for (var i = 0; i < responsiveArray.length; i += 1) {
+          var breakpoint = responsiveArray[i];
+          if (screens[breakpoint] && g[breakpoint] !== undefined) {
             results[index] = g[breakpoint];
             break;
           }
@@ -144,154 +107,146 @@ var Card = React.forwardRef((props, ref) => {
     });
     return results;
   };
-  const getStyle = (withStyle, appendStyle) => {
+
+  /**
+   * 根据条件返回 style，负责返回空对象
+   *
+   * @param withStyle 是否符合条件
+   * @param appendStyle 如果符合条件要返回的 style 属性
+   */
+  var getStyle = function getStyle(withStyle, appendStyle) {
     return withStyle ? appendStyle : {};
   };
-  const getColSpanStyle = (colSpan) => {
-    let span = colSpan;
-    if (typeof colSpan === "object") {
-      for (let i = 0; i < responsiveArray.length; i += 1) {
-        const breakpoint = responsiveArray[i];
-        if ((screens == null ? void 0 : screens[breakpoint]) && (colSpan == null ? void 0 : colSpan[breakpoint]) !== void 0) {
+  var getColSpanStyle = function getColSpanStyle(colSpan) {
+    var span = colSpan;
+
+    // colSpan 响应式
+    if (_typeof(colSpan) === 'object') {
+      for (var i = 0; i < responsiveArray.length; i += 1) {
+        var breakpoint = responsiveArray[i];
+        if (screens !== null && screens !== void 0 && screens[breakpoint] && (colSpan === null || colSpan === void 0 ? void 0 : colSpan[breakpoint]) !== undefined) {
           span = colSpan[breakpoint];
           break;
         }
       }
     }
-    const colSpanStyle = getStyle(
-      typeof span === "string" && /\d%|\dpx/i.test(span),
-      {
-        width: span,
-        flexShrink: 0
-      }
-    );
-    return { span, colSpanStyle };
+
+    // 当 colSpan 为 30% 或 300px 时
+    var colSpanStyle = getStyle(typeof span === 'string' && /\d%|\dpx/i.test(span), {
+      width: span,
+      flexShrink: 0
+    });
+    return {
+      span: span,
+      colSpanStyle: colSpanStyle
+    };
   };
-  const prefixCls = getPrefixCls("pro-card");
-  const { wrapSSR, hashId } = useStyle(prefixCls);
-  const [horizontalGutter, verticalGutter] = getNormalizedGutter(gutter);
-  let containProCard = false;
-  const childrenArray = React.Children.toArray(children);
-  const childrenModified = childrenArray.map((element, index) => {
-    var _a2;
-    if ((_a2 = element == null ? void 0 : element.type) == null ? void 0 : _a2.isProCard) {
+  var prefixCls = getPrefixCls('pro-card');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var _getNormalizedGutter = getNormalizedGutter(gutter),
+    _getNormalizedGutter2 = _slicedToArray(_getNormalizedGutter, 2),
+    horizontalGutter = _getNormalizedGutter2[0],
+    verticalGutter = _getNormalizedGutter2[1];
+
+  // 判断是否套了卡片，如果套了的话将自身卡片内部内容的 padding 设置为0
+  var containProCard = false;
+  var childrenArray = React.Children.toArray(children);
+  var childrenModified = childrenArray.map(function (element, index) {
+    var _element$type;
+    if (element !== null && element !== void 0 && (_element$type = element.type) !== null && _element$type !== void 0 && _element$type.isProCard) {
       containProCard = true;
-      const { colSpan } = element.props;
-      const { span, colSpanStyle } = getColSpanStyle(colSpan);
-      const columnClassName = classNames([`${prefixCls}-col`], hashId, {
-        [`${prefixCls}-split-vertical`]: split === "vertical" && index !== childrenArray.length - 1,
-        [`${prefixCls}-split-horizontal`]: split === "horizontal" && index !== childrenArray.length - 1,
-        [`${prefixCls}-col-${span}`]: typeof span === "number" && span >= 0 && span <= 24
-      });
-      const wrappedElement = wrapSSR(
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, colSpanStyle), getStyle(horizontalGutter > 0, {
-              paddingInlineEnd: horizontalGutter / 2,
-              paddingInlineStart: horizontalGutter / 2
-            })), getStyle(verticalGutter > 0, {
-              paddingBlockStart: verticalGutter / 2,
-              paddingBlockEnd: verticalGutter / 2
-            })), colStyle),
-            className: columnClassName
-          },
-          React.cloneElement(element)
-        )
-      );
-      return React.cloneElement(wrappedElement, {
-        key: `pro-card-col-${(element == null ? void 0 : element.key) || index}`
+
+      // 宽度
+      var colSpan = element.props.colSpan;
+      var _getColSpanStyle = getColSpanStyle(colSpan),
+        span = _getColSpanStyle.span,
+        colSpanStyle = _getColSpanStyle.colSpanStyle;
+      var columnClassName = classNames(["".concat(prefixCls, "-col")], hashId, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-split-vertical"), split === 'vertical' && index !== childrenArray.length - 1), "".concat(prefixCls, "-split-horizontal"), split === 'horizontal' && index !== childrenArray.length - 1), "".concat(prefixCls, "-col-").concat(span), typeof span === 'number' && span >= 0 && span <= 24));
+      var wrappedElement = wrapSSR( /*#__PURE__*/_jsx("div", {
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colSpanStyle), getStyle(horizontalGutter > 0, {
+          paddingInlineEnd: horizontalGutter / 2,
+          paddingInlineStart: horizontalGutter / 2
+        })), getStyle(verticalGutter > 0, {
+          paddingBlockStart: verticalGutter / 2,
+          paddingBlockEnd: verticalGutter / 2
+        })), colStyle),
+        className: columnClassName,
+        children: /*#__PURE__*/React.cloneElement(element)
+      }));
+      return /*#__PURE__*/React.cloneElement(wrappedElement, {
+        key: "pro-card-col-".concat((element === null || element === void 0 ? void 0 : element.key) || index)
       });
     }
     return element;
   });
-  const cardCls = classNames(`${prefixCls}`, className, hashId, {
-    [`${prefixCls}-border`]: variant === "outlined",
-    [`${prefixCls}-box-shadow`]: boxShadow,
-    [`${prefixCls}-contain-card`]: containProCard,
-    [`${prefixCls}-loading`]: loading,
-    [`${prefixCls}-split`]: split === "vertical" || split === "horizontal",
-    [`${prefixCls}-ghost`]: ghost,
-    [`${prefixCls}-hoverable`]: hoverable,
-    [`${prefixCls}-size-${size}`]: size,
-    [`${prefixCls}-type-${type}`]: type,
-    [`${prefixCls}-collapse`]: collapsed,
-    [`${prefixCls}-checked`]: checked
+  var cardCls = classNames("".concat(prefixCls), className, hashId, (_classNames2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames2, "".concat(prefixCls, "-border"), variant === 'outlined'), "".concat(prefixCls, "-box-shadow"), boxShadow), "".concat(prefixCls, "-contain-card"), containProCard), "".concat(prefixCls, "-loading"), loading), "".concat(prefixCls, "-split"), split === 'vertical' || split === 'horizontal'), "".concat(prefixCls, "-ghost"), ghost), "".concat(prefixCls, "-hoverable"), hoverable), "".concat(prefixCls, "-size-").concat(size), size), "".concat(prefixCls, "-type-").concat(type), type), "".concat(prefixCls, "-collapse"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-checked"), checked)));
+  var bodyCls = classNames("".concat(prefixCls, "-body"), hashId, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-body-center"), layout === 'center'), "".concat(prefixCls, "-body-direction-column"), split === 'horizontal' || direction === 'column'), "".concat(prefixCls, "-body-wrap"), wrap && containProCard));
+  var cardBodyStyle = bodyStyle;
+  var loadingDOM = /*#__PURE__*/React.isValidElement(loading) ? loading : /*#__PURE__*/_jsx(Loading, {
+    prefix: prefixCls,
+    style: (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) === 0 || (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) === '0px' ? {
+      padding: 24
+    } : undefined
   });
-  const bodyCls = classNames(`${prefixCls}-body`, hashId, {
-    [`${prefixCls}-body-center`]: layout === "center",
-    [`${prefixCls}-body-direction-column`]: split === "horizontal" || direction === "column",
-    [`${prefixCls}-body-wrap`]: wrap && containProCard
-  });
-  const cardBodyStyle = bodyStyle;
-  const loadingDOM = React.isValidElement(loading) ? loading : /* @__PURE__ */ React.createElement(
-    Loading,
-    {
-      prefix: prefixCls,
-      style: (bodyStyle == null ? void 0 : bodyStyle.padding) === 0 || (bodyStyle == null ? void 0 : bodyStyle.padding) === "0px" ? { padding: 24 } : void 0
+  // 非受控情况下展示
+  var collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? collapsibleIconRender({
+    collapsed: collapsed
+  }) : /*#__PURE__*/_jsx(RightOutlined, {
+    onClick: function onClick() {
+      if (collapsible === 'icon') setCollapsed(!collapsed);
+    },
+    rotate: !collapsed ? 90 : undefined,
+    className: "".concat(prefixCls, "-collapsible-icon ").concat(hashId).trim()
+  }));
+  return wrapSSR( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cardCls,
+    style: style,
+    ref: ref,
+    onClick: function onClick(e) {
+      var _rest$onClick;
+      onChecked === null || onChecked === void 0 || onChecked(e);
+      rest === null || rest === void 0 || (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
     }
-  );
-  const collapsibleButton = collapsible && controlCollapsed === void 0 && (collapsibleIconRender ? collapsibleIconRender({ collapsed }) : /* @__PURE__ */ React.createElement(
-    RightOutlined,
-    {
-      onClick: () => {
-        if (collapsible === "icon")
-          setCollapsed(!collapsed);
+  }, omit(rest, ['prefixCls', 'colSpan'])), {}, {
+    children: [(title || extra || collapsibleButton) && /*#__PURE__*/_jsxs("div", {
+      className: classNames("".concat(prefixCls, "-header"), hashId, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-header-border"), headerBordered || type === 'inner'), "".concat(prefixCls, "-header-collapsible"), collapsibleButton)),
+      style: headStyle,
+      onClick: function onClick() {
+        if (collapsible === 'header' || collapsible === true) setCollapsed(!collapsed);
       },
-      rotate: !collapsed ? 90 : void 0,
-      className: `${prefixCls}-collapsible-icon ${hashId}`.trim()
-    }
-  ));
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      "div",
-      __spreadValues({
-        className: cardCls,
-        style,
-        ref,
-        onClick: (e) => {
-          var _a2;
-          onChecked == null ? void 0 : onChecked(e);
-          (_a2 = rest == null ? void 0 : rest.onClick) == null ? void 0 : _a2.call(rest, e);
-        }
-      }, omit(rest, ["prefixCls", "colSpan"])),
-      (title || extra || collapsibleButton) && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${prefixCls}-header`, hashId, {
-            [`${prefixCls}-header-border`]: headerBordered || type === "inner",
-            [`${prefixCls}-header-collapsible`]: collapsibleButton
-          }),
-          style: headStyle,
-          onClick: () => {
-            if (collapsible === "header" || collapsible === true)
-              setCollapsed(!collapsed);
-          }
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefixCls, "-title ").concat(hashId).trim(),
+        children: [collapsibleButton, /*#__PURE__*/_jsx(LabelIconTip, {
+          label: title,
+          tooltip: tooltip,
+          subTitle: subTitle
+        })]
+      }), extra && /*#__PURE__*/_jsx("div", {
+        className: "".concat(prefixCls, "-extra ").concat(hashId).trim(),
+        onClick: function onClick(e) {
+          return e.stopPropagation();
         },
-        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title ${hashId}`.trim() }, collapsibleButton, /* @__PURE__ */ React.createElement(LabelIconTip, { label: title, tooltip, subTitle })),
-        extra && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${prefixCls}-extra ${hashId}`.trim(),
-            onClick: (e) => e.stopPropagation()
-          },
-          extra
-        )
-      ),
-      tabs ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-tabs ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
-        Tabs,
-        __spreadProps(__spreadValues({
-          onChange: tabs.onChange
-        }, omit(tabs, ["cardProps"])), {
-          items: ModifyTabItemsContent
-        }),
-        loading ? loadingDOM : children
-      )) : /* @__PURE__ */ React.createElement("div", { className: bodyCls, style: cardBodyStyle }, loading ? loadingDOM : childrenModified),
-      actions ? /* @__PURE__ */ React.createElement(Actions, { actions, prefixCls }) : null
-    )
-  );
+        children: extra
+      })]
+    }), tabs ? /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-tabs ").concat(hashId).trim(),
+      children: /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
+        onChange: tabs.onChange
+      }, omit(tabs, ['cardProps'])), {}, {
+        // @ts-ignore
+        items: ModifyTabItemsContent,
+        children: loading ? loadingDOM : children
+      }))
+    }) : /*#__PURE__*/_jsx("div", {
+      className: bodyCls,
+      style: cardBodyStyle,
+      children: loading ? loadingDOM : childrenModified
+    }), actions ? /*#__PURE__*/_jsx(Actions, {
+      actions: actions,
+      prefixCls: prefixCls
+    }) : null]
+  })));
 });
-var Card_default = Card;
-export {
-  Card_default as default
-};
+export default Card;