@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/card/README.md

@@ -0,0 +1,19 @@
+# @ant-design/pro-card
+
+> @ant-design/pro-card.
+
+See our website [@ant-design/pro-card](https://procomponent.ant.design/) for more information.
+
+## Install
+
+Using npm:
+
+```bash
+$ npm install --save  @ant-design/pro-card
+```
+
+or using yarn:
+
+```bash
+$ yarn add @ant-design/pro-card
+```

package/packages/card/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ant-design/pro-card",
+  "version": "2.9.2",
+  "description": "@ant-design/pro-card",
+  "keywords": [
+    "antd",
+    "admin",
+    "ant-design",
+    "ant-design-pro"
+  ],
+  "homepage": "https://github.com/ant-design/pro-components/tree/master/packages/card#readme",
+  "bugs": "http://github.com/umijs/plugins/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ant-design/pro-components.git"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "dist"
+  ],
+  "scripts": {
+    "build": "father build"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 11"
+  ],
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.21.1",
+    "@ant-design/icons": "^5.0.0",
+    "@ant-design/pro-provider": "2.15.2",
+    "@ant-design/pro-utils": "2.16.2",
+    "@babel/runtime": "^7.18.0",
+    "classnames": "^2.3.2",
+    "omit.js": "^2.0.2",
+    "rc-resize-observer": "^1.0.0",
+    "rc-util": "^5.4.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "antd": "^4.24.15 || ^5.11.2",
+    "react": ">=17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "rdmclin2 <rdmclin2@gmail.com> (https://github.com/rdmclin2)",
+    "chenshuai2144 <qixian.cs@outlook.com> (https://github.com/chenshuai2144)"
+  ]
+}

package/packages/card/src/ProCard.tsx

@@ -0,0 +1,29 @@
+import type { PropsWithChildren } from 'react';
+import Card from './components/Card';
+import Divider from './components/Divider';
+import TabPane from './components/TabPane';
+import type { CardProps, CardType } from './typing';
+
+export type ProCardProps = CardProps;
+
+export type ProCardType = CardType & {
+  isProCard: boolean;
+  Divider: typeof Divider;
+  TabPane: typeof TabPane;
+  Group: typeof Group;
+};
+
+const Group = (props: PropsWithChildren<CardProps>) => (
+  <Card bodyStyle={{ padding: 0 }} {...props} />
+);
+
+// 当前不对底层 Card 做封装，仅挂载子组件，直接导出
+// @ts-ignore
+const ProCard: ProCardType = Card;
+
+ProCard.isProCard = true;
+ProCard.Divider = Divider;
+ProCard.TabPane = TabPane;
+ProCard.Group = Group;
+
+export default ProCard;

package/packages/card/src/components/Actions/index.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React from 'react';
+import useStyle from './style';
+
+export type ProCardActionsProps = {
+  /**
+   * 自定义前缀
+   *
+   * @ignore
+   */
+  prefixCls?: string;
+  /** 操作按钮 */
+  actions?: React.ReactNode[] | React.ReactNode;
+};
+
+const ProCardActions: React.FC<ProCardActionsProps> = (props) => {
+  const { actions, prefixCls } = props;
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  if (Array.isArray(actions) && actions?.length) {
+    return wrapSSR(
+      <ul className={classNames(`${prefixCls}-actions`, hashId)}>
+        {actions.map((action, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <li
+            style={{ width: `${100 / actions.length}%`, padding: 0, margin: 0 }}
+            key={`action-${index}`}
+            className={classNames(`${prefixCls}-actions-item`, hashId)}
+          >
+            {action}
+          </li>
+        ))}
+      </ul>,
+    );
+  }
+  return wrapSSR(
+    <ul className={classNames(`${prefixCls}-actions`, hashId)}>{actions}</ul>,
+  );
+};
+
+export default ProCardActions;

package/packages/card/src/components/Actions/style.ts

@@ -0,0 +1,102 @@
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+interface ProCardActionsToken extends ProAliasToken {
+  antCls: string;
+  componentCls: string;
+  cardActionIconSize: number;
+}
+
+const genActionsStyle: GenerateStyle<ProCardActionsToken> = (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}`,
+        },
+      },
+    },
+  };
+};
+
+export default function useStyle(prefixCls?: string) {
+  return useAntdStyle('ProCardActions', (token) => {
+    const proCardActionsToken: ProCardActionsToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      cardActionIconSize: 16,
+    };
+
+    return [genActionsStyle(proCardActionsToken)];
+  });
+}

package/packages/card/src/components/Card/index.tsx

@@ -0,0 +1,293 @@
+import { RightOutlined } from '@ant-design/icons';
+import { LabelIconTip } from '@ant-design/pro-utils';
+import { ConfigProvider, Tabs } from 'antd';
+
+import useBreakpoint from 'antd/es/grid/hooks/useBreakpoint';
+import classNames from 'classnames';
+import omit from 'omit.js';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import React, { useContext } from 'react';
+import type { Breakpoint, CardProps, Gutter } from '../../typing';
+import Actions from '../Actions';
+import Loading from '../Loading';
+import { useLegacyItems } from '../TabPane';
+import useStyle from './style';
+
+type ProCardChildType = React.ReactElement<CardProps, any>;
+
+const Card = React.forwardRef((props: CardProps, ref: any) => {
+  const {
+    className,
+    style,
+    bodyStyle,
+    headStyle,
+    title,
+    subTitle,
+    extra,
+    wrap = false,
+    layout,
+    loading,
+    gutter = 0,
+    tooltip,
+    split,
+    headerBordered = false,
+    bordered = false,
+    boxShadow = false,
+    children,
+    size,
+    actions,
+    ghost = false,
+    hoverable = false,
+    direction,
+    collapsed: controlCollapsed,
+    collapsible = false,
+    collapsibleIconRender,
+    colStyle,
+    defaultCollapsed = false,
+    onCollapse,
+    checked,
+    onChecked,
+    tabs,
+    type,
+    ...rest
+  } = props;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  const screens = useBreakpoint() || {
+    lg: true,
+    md: true,
+    sm: true,
+    xl: false,
+    xs: false,
+    xxl: false,
+  };
+
+  const [collapsed, setCollapsed] = useMergedState<boolean>(defaultCollapsed, {
+    value: controlCollapsed,
+    onChange: onCollapse,
+  });
+
+  // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。
+  const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+  // 修改组合传给antd tabs的参数
+  // @ts-ignore
+  const ModifyTabItemsContent = useLegacyItems(tabs?.items, children, tabs);
+
+  /**
+   * 根据响应式获取 gutter, 参考 antd 实现
+   *
+   * @param gutter Gutter
+   */
+  const getNormalizedGutter = (gut: Gutter | Gutter[]) => {
+    const results: [number, number] = [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: Breakpoint = responsiveArray[i];
+          if (screens[breakpoint] && g[breakpoint] !== undefined) {
+            results[index] = g[breakpoint] as number;
+            break;
+          }
+        }
+      } else {
+        results[index] = g || 0;
+      }
+    });
+    return results;
+  };
+
+  /**
+   * 根据条件返回 style，负责返回空对象
+   *
+   * @param withStyle 是否符合条件
+   * @param appendStyle 如果符合条件要返回的 style 属性
+   */
+  const getStyle = (withStyle: boolean, appendStyle: React.CSSProperties) => {
+    return withStyle ? appendStyle : {};
+  };
+
+  const getColSpanStyle = (colSpan: CardProps['colSpan']) => {
+    let span = colSpan;
+
+    // colSpan 响应式
+    if (typeof colSpan === 'object') {
+      for (let i = 0; i < responsiveArray.length; i += 1) {
+        const breakpoint: Breakpoint = responsiveArray[i];
+        if (screens?.[breakpoint] && colSpan?.[breakpoint] !== undefined) {
+          span = colSpan[breakpoint];
+          break;
+        }
+      }
+    }
+
+    // 当 colSpan 为 30% 或 300px 时
+    const colSpanStyle = getStyle(
+      typeof span === 'string' && /\d%|\dpx/i.test(span),
+      {
+        width: span as string,
+        flexShrink: 0,
+      },
+    );
+
+    return { span, colSpanStyle };
+  };
+
+  const prefixCls = getPrefixCls('pro-card');
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+
+  const [horizontalGutter, verticalGutter] = getNormalizedGutter(gutter);
+
+  // 判断是否套了卡片，如果套了的话将自身卡片内部内容的 padding 设置为0
+  let containProCard = false;
+  const childrenArray = React.Children.toArray(children) as ProCardChildType[];
+
+  const childrenModified = childrenArray.map((element, index) => {
+    if (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(
+        <div
+          style={{
+            ...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)}
+        </div>,
+      );
+      return React.cloneElement(wrappedElement, {
+        key: `pro-card-col-${element?.key || index}`,
+      });
+    }
+    return element;
+  });
+
+  const cardCls = classNames(`${prefixCls}`, className, hashId, {
+    [`${prefixCls}-border`]: bordered,
+    [`${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
+  ) : (
+    <Loading
+      prefix={prefixCls}
+      style={
+        bodyStyle?.padding === 0 || bodyStyle?.padding === '0px'
+          ? { padding: 24 }
+          : undefined
+      }
+    />
+  );
+  // 非受控情况下展示
+  const collapsibleButton =
+    collapsible &&
+    controlCollapsed === undefined &&
+    (collapsibleIconRender ? (
+      collapsibleIconRender({ collapsed })
+    ) : (
+      <RightOutlined
+        rotate={!collapsed ? 90 : undefined}
+        className={`${prefixCls}-collapsible-icon ${hashId}`.trim()}
+      />
+    ));
+
+  return wrapSSR(
+    <div
+      className={cardCls}
+      style={style}
+      ref={ref}
+      onClick={(e) => {
+        onChecked?.(e);
+        rest?.onClick?.(e);
+      }}
+      {...omit(rest, ['prefixCls', 'colSpan'])}
+    >
+      {(title || extra || collapsibleButton) && (
+        <div
+          className={classNames(`${prefixCls}-header`, hashId, {
+            [`${prefixCls}-header-border`]: headerBordered || type === 'inner',
+            [`${prefixCls}-header-collapsible`]: collapsibleButton,
+          })}
+          style={headStyle}
+          onClick={() => {
+            if (collapsibleButton) setCollapsed(!collapsed);
+          }}
+        >
+          <div className={`${prefixCls}-title ${hashId}`.trim()}>
+            {collapsibleButton}
+            <LabelIconTip label={title} tooltip={tooltip} subTitle={subTitle} />
+          </div>
+          {extra && (
+            <div
+              className={`${prefixCls}-extra ${hashId}`.trim()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {extra}
+            </div>
+          )}
+        </div>
+      )}
+      {tabs ? (
+        <div className={`${prefixCls}-tabs ${hashId}`.trim()}>
+          <Tabs
+            onChange={tabs.onChange}
+            {...omit(tabs, ['cardProps'])}
+            // @ts-ignore
+            items={ModifyTabItemsContent}
+          >
+            {loading ? loadingDOM : children}
+          </Tabs>
+        </div>
+      ) : (
+        <div className={bodyCls} style={cardBodyStyle}>
+          {loading ? loadingDOM : childrenModified}
+        </div>
+      )}
+      {actions ? <Actions actions={actions} prefixCls={prefixCls} /> : null}
+    </div>,
+  );
+});
+
+export default Card;