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

package/es/card/ProCard.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+import Divider from './components/Divider';
+import type { CardProps, CardType } from './typing';
+export type ProCardProps = CardProps;
+export type ProCardType = CardType & {
+    isProCard: boolean;
+    Divider: typeof Divider;
+    TabPane: () => null;
+    Group: typeof Group;
+};
+declare const Group: (props: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+declare const ProCard: ProCardType;
+export default ProCard;

package/es/card/ProCard.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+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;
+};
+
+// src/card/ProCard.tsx
+import Card from "./components/Card";
+import Divider from "./components/Divider";
+var Group = (props) => /* @__PURE__ */ React.createElement(Card, __spreadValues({ bodyStyle: { padding: 0 } }, props));
+var ProCard = Card;
+ProCard.isProCard = true;
+ProCard.Divider = Divider;
+ProCard.TabPane = () => null;
+ProCard.Group = Group;
+var ProCard_default = ProCard;
+export {
+  ProCard_default as default
+};

package/es/card/components/Actions/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type ProCardActionsProps = {
+    /**
+     * 自定义前缀
+     *
+     * @ignore
+     */
+    prefixCls?: string;
+    /** 操作按钮 */
+    actions?: React.ReactNode[] | React.ReactNode;
+};
+declare const ProCardActions: React.FC<ProCardActionsProps>;
+export default ProCardActions;

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

@@ -0,0 +1,31 @@
+// src/card/components/Actions/index.tsx
+import classNames from "classnames";
+import React from "react";
+import useStyle from "./style";
+var ProCardActions = (props) => {
+  const { actions, prefixCls } = props;
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  if (Array.isArray(actions) && (actions == null ? void 0 : actions.length)) {
+    return wrapSSR(
+      /* @__PURE__ */ React.createElement("ul", { className: classNames(`${prefixCls}-actions`, hashId) }, actions.map((action, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            style: { width: `${100 / actions.length}%`, padding: 0, margin: 0 },
+            key: `action-${index}`,
+            className: classNames(`${prefixCls}-actions-item`, hashId)
+          },
+          action
+        )
+      )))
+    );
+  }
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement("ul", { className: classNames(`${prefixCls}-actions`, hashId) }, actions)
+  );
+};
+var Actions_default = ProCardActions;
+export {
+  Actions_default as default
+};

package/es/card/components/Actions/style.d.ts

@@ -0,0 +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;
+    hashId: string;
+};

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

@@ -0,0 +1,108 @@
+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));
+
+// src/card/components/Actions/style.ts
+import { useStyle as useAntdStyle } from "../../../provider";
+var genActionsStyle = (token) => {
+  const { componentCls, antCls } = token;
+  return {
+    [`${componentCls}-actions`]: {
+      marginBlock: 0,
+      marginInline: 0,
+      paddingBlock: 0,
+      paddingInline: 0,
+      listStyle: "none",
+      display: "flex",
+      gap: token.marginXS,
+      background: token.colorBgContainer,
+      borderBlockStart: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+      minHeight: 42,
+      [`& > *`]: {
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+        display: "flex",
+        cursor: "pointer",
+        color: token.colorTextSecondary,
+        transition: "color 0.3s",
+        "&:hover": {
+          color: token.colorPrimaryHover
+        }
+      },
+      [`& > li > div`]: {
+        flex: 1,
+        width: "100%",
+        marginBlock: token.marginSM,
+        marginInline: 0,
+        color: token.colorTextSecondary,
+        textAlign: "center",
+        a: {
+          color: token.colorTextSecondary,
+          transition: "color 0.3s",
+          "&:hover": {
+            color: token.colorPrimaryHover
+          }
+        },
+        div: {
+          position: "relative",
+          display: "block",
+          minWidth: 32,
+          fontSize: token.fontSize,
+          lineHeight: token.lineHeight,
+          cursor: "pointer",
+          "&:hover": {
+            color: token.colorPrimaryHover,
+            transition: "color 0.3s"
+          },
+          [`a:not(${antCls}-btn),
+            > .anticon`]: {
+            display: "inline-block",
+            width: "100%",
+            color: token.colorTextSecondary,
+            lineHeight: "22px",
+            transition: "color 0.3s",
+            "&:hover": {
+              color: token.colorPrimaryHover
+            }
+          },
+          ".anticon": {
+            fontSize: token.cardActionIconSize,
+            lineHeight: "22px"
+          }
+        },
+        "&:not(:last-child)": {
+          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProCardActions", (token) => {
+    const proCardActionsToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`,
+      cardActionIconSize: 16
+    });
+    return [genActionsStyle(proCardActionsToken)];
+  });
+}
+export {
+  useStyle as default
+};

package/es/card/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CardProps } from '../../typing';
+declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<unknown>>;
+export default Card;

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

@@ -0,0 +1,297 @@
+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 { 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() || {
+    lg: true,
+    md: true,
+    sm: true,
+    xl: false,
+    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) {
+            results[index] = g[breakpoint];
+            break;
+          }
+        }
+      } else {
+        results[index] = g || 0;
+      }
+    });
+    return results;
+  };
+  const 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) {
+          span = colSpan[breakpoint];
+          break;
+        }
+      }
+    }
+    const colSpanStyle = getStyle(
+      typeof span === "string" && /\d%|\dpx/i.test(span),
+      {
+        width: span,
+        flexShrink: 0
+      }
+    );
+    return { span, 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) {
+      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}`
+      });
+    }
+    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
+  });
+  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
+    }
+  );
+  const collapsibleButton = collapsible && controlCollapsed === void 0 && (collapsibleIconRender ? collapsibleIconRender({ collapsed }) : /* @__PURE__ */ React.createElement(
+    RightOutlined,
+    {
+      onClick: () => {
+        if (collapsible === "icon")
+          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);
+          }
+        },
+        /* @__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
+    )
+  );
+});
+var Card_default = Card;
+export {
+  Card_default as default
+};

package/es/card/components/Card/style.d.ts

@@ -0,0 +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;
+    hashId: string;
+};