@regenbio/regenbio-components-react 1.2.15 → 1.2.16

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

@@ -0,0 +1,64 @@
+import { Col, Row } from 'antd';
+import React from 'react';
+import { useStyle } from './style';
+
+type LoadingProps = {
+  /** 类名 */
+  className?: string;
+  /** 样式属性 */
+  style?: React.CSSProperties;
+  /** Prefix */
+  prefix?: string;
+};
+
+const Loading: React.FC<LoadingProps> = (props) => {
+  const { style, prefix } = props;
+  const { wrapSSR } = useStyle(prefix || 'ant-pro-card');
+
+  return wrapSSR(
+    <div className={`${prefix}-loading-content`} style={style}>
+      <Row gutter={8}>
+        <Col span={22}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+      </Row>
+      <Row gutter={8}>
+        <Col span={8}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+        <Col span={15}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+      </Row>
+      <Row gutter={8}>
+        <Col span={6}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+        <Col span={18}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+      </Row>
+      <Row gutter={8}>
+        <Col span={13}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+        <Col span={9}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+      </Row>
+      <Row gutter={8}>
+        <Col span={4}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+        <Col span={3}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+        <Col span={16}>
+          <div className={`${prefix}-loading-block`} />
+        </Col>
+      </Row>
+    </div>,
+  );
+};
+
+export default Loading;

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

@@ -0,0 +1,55 @@
+import { Keyframes } from '@ant-design/cssinjs';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+export interface ProToken extends ProAliasToken {
+  componentCls: string;
+}
+
+export const cardLoading = new Keyframes('card-loading', {
+  '0%': { backgroundPosition: '0 50%' },
+  '50%': { backgroundPosition: '100% 50%' },
+  '100%': { backgroundPosition: '0 50%' },
+});
+
+const genProStyle: GenerateStyle<ProToken> = (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 as unknown as string,
+        animationDuration: '1.4s',
+        animationTimingFunction: 'ease',
+        animationIterationCount: 'infinite',
+      },
+    },
+  };
+};
+
+export function useStyle(prefixCls: string) {
+  return useAntdStyle('ProCardLoading', (token) => {
+    const proToken: ProToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genProStyle(proToken)];
+  });
+}

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

@@ -0,0 +1,38 @@
+import { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { useStyle } from './style';
+
+export interface ProCardOperationProps {
+  /**
+   * 样式
+   *
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * ClassName
+   *
+   * @ignore
+   */
+  className?: string;
+
+  children?: any;
+}
+
+const ProCardOperation: React.FC<ProCardOperationProps> = (props) => {
+  const { className, style = {}, children } = props;
+
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-card-operation');
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const classString = classNames(prefixCls, className, hashId);
+
+  return wrapSSR(
+    <div className={classString} style={style}>
+      {children}
+    </div>,
+  );
+};
+
+export default ProCardOperation;

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

@@ -0,0 +1,33 @@
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+export interface ProToken extends ProAliasToken {
+  componentCls: string;
+}
+
+const genProStyle: GenerateStyle<ProToken> = (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: string) {
+  return useAntdStyle('ProCardOperation', (token) => {
+    const proToken: ProToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genProStyle(proToken)];
+  });
+}

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

@@ -0,0 +1,129 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import type { StatisticProps as AntdStatisticProps, BadgeProps } from 'antd';
+import {
+  Statistic as AntdStatistic,
+  Badge,
+  ConfigProvider,
+  Tooltip,
+} from 'antd';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { useStyle } from './style';
+
+export interface StatisticProps extends AntdStatisticProps {
+  /**
+   * 样式
+   *
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * ClassName
+   *
+   * @ignore
+   */
+  className?: string;
+  /** 描述性标签 */
+  description?: React.ReactNode;
+  /** 标题提示 */
+  tip?: React.ReactNode;
+  /** 当前项显示的状态 */
+  status?: BadgeProps['status'];
+  /** Icon 图标 */
+  icon?: React.ReactNode;
+  /** Layout 布局 */
+  layout?: 'horizontal' | 'vertical' | 'inline';
+  /** 趋势 */
+  trend?: 'up' | 'down';
+
+  children?: any;
+}
+
+const Statistic: React.FC<StatisticProps> = (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 = classNames(prefixCls, className, hashId);
+  const statusClass = classNames(`${prefixCls}-status`, hashId);
+  const iconClass = classNames(`${prefixCls}-icon`, hashId);
+  const wrapperClass = classNames(`${prefixCls}-wrapper`, hashId);
+  const contentClass = classNames(`${prefixCls}-content`, hashId);
+
+  const statisticClassName = classNames(hashId, {
+    [`${prefixCls}-layout-${layout}`]: layout,
+    [`${prefixCls}-trend-${trend}`]: trend,
+  });
+
+  const tipDom = tip && (
+    <Tooltip title={tip}>
+      <QuestionCircleOutlined className={`${prefixCls}-tip ${hashId}`.trim()} />
+    </Tooltip>
+  );
+
+  const trendIconClassName = classNames(`${prefixCls}-trend-icon`, hashId, {
+    [`${prefixCls}-trend-icon-${trend}`]: trend,
+  });
+
+  const trendDom = trend && <div className={trendIconClassName} />;
+
+  const statusDom = status && (
+    <div className={statusClass}>
+      <Badge status={status} text={null} />
+    </div>
+  );
+
+  const iconDom = icon && <div className={iconClass}>{icon}</div>;
+
+  return wrapSSR(
+    <div className={classString} style={style}>
+      {iconDom}
+      <div className={wrapperClass}>
+        {statusDom}
+        <div className={contentClass}>
+          <AntdStatistic
+            title={
+              (title || tipDom) && (
+                <>
+                  {title}
+                  {tipDom}
+                </>
+              )
+            }
+            prefix={
+              (trendDom || prefix) && (
+                <>
+                  {trendDom}
+                  {prefix}
+                </>
+              )
+            }
+            className={statisticClassName}
+            {...others}
+          />
+          {description && (
+            <div className={`${prefixCls}-description ${hashId}`.trim()}>
+              {description as React.ReactNode}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>,
+  );
+};
+
+export default Statistic;

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

@@ -0,0 +1,110 @@
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+export interface ProListToken extends ProAliasToken {
+  componentCls: string;
+}
+
+const genProStyle: GenerateStyle<ProListToken> = (token) => {
+  return {
+    [token.componentCls]: {
+      display: 'flex',
+      fontSize: token.fontSize,
+      '& + &': {
+        marginBlockStart: 4,
+      },
+      '&-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%',
+        [`${token.antCls}-statistic-content`]: {
+          '&-value-int': {
+            fontSize: token.fontSizeHeading3,
+          },
+        },
+      },
+      '&-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,
+          },
+      },
+    },
+  };
+};
+
+export function useStyle(prefixCls: string) {
+  return useAntdStyle('Statistic', (token) => {
+    const proListToken: ProListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genProStyle(proListToken)];
+  });
+}

package/packages/card/src/components/StatisticCard/demos/basic.tsx

@@ -0,0 +1,40 @@
+import { EllipsisOutlined, RightOutlined } from '@ant-design/icons';
+import { StatisticCard } from '@ant-design/pro-components';
+import { Space, theme } from 'antd';
+
+const { Statistic } = StatisticCard;
+
+export default () => {
+  const { token } = theme.useToken();
+  return (
+    <StatisticCard
+      title={
+        <Space>
+          <span>部门一</span>
+          <RightOutlined style={{ color: token.colorTextHeading }} />
+        </Space>
+      }
+      extra={<EllipsisOutlined />}
+      statistic={{
+        value: 1102893,
+        prefix: '¥',
+        description: (
+          <Space>
+            <Statistic title="实际完成度" value="82.3%" />
+            <Statistic title="当前目标" value="¥6000" />
+          </Space>
+        ),
+      }}
+      chart={
+        <>
+          <img
+            src="https://gw.alipayobjects.com/zos/alicdn/BA_R9SIAV/charts.svg"
+            alt="chart"
+            width="100%"
+          />
+        </>
+      }
+      style={{ width: 268 }}
+    />
+  );
+};

package/packages/card/src/components/StatisticCard/demos/chart.tsx

@@ -0,0 +1,20 @@
+import { EllipsisOutlined } from '@ant-design/icons';
+import { StatisticCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <StatisticCard
+      title="大盘趋势"
+      tooltip="大盘说明"
+      style={{ maxWidth: 480 }}
+      extra={<EllipsisOutlined />}
+      chart={
+        <img
+          src="https://gw.alipayobjects.com/zos/alicdn/a-LN9RTYq/zhuzhuangtu.svg"
+          alt="柱状图"
+          width="100%"
+        />
+      }
+    />
+  );
+};

package/packages/card/src/components/StatisticCard/demos/fomula.tsx

@@ -0,0 +1,37 @@
+import { StatisticCard } from '@ant-design/pro-components';
+
+const { Operation } = StatisticCard;
+
+export default () => {
+  return (
+    <StatisticCard.Group>
+      <StatisticCard
+        statistic={{
+          title: '服务网格数',
+          value: 500,
+        }}
+      />
+      <Operation>=</Operation>
+      <StatisticCard
+        statistic={{
+          title: '未发布',
+          value: 234,
+        }}
+      />
+      <Operation>+</Operation>
+      <StatisticCard
+        statistic={{
+          title: '发布中',
+          value: 112,
+        }}
+      />
+      <Operation>+</Operation>
+      <StatisticCard
+        statistic={{
+          title: '已发布',
+          value: 255,
+        }}
+      />
+    </StatisticCard.Group>
+  );
+};

package/packages/card/src/components/StatisticCard/demos/footer.tsx

@@ -0,0 +1,42 @@
+import { EllipsisOutlined } from '@ant-design/icons';
+import { StatisticCard } from '@ant-design/pro-components';
+
+const { Statistic } = StatisticCard;
+
+export default () => {
+  return (
+    <StatisticCard
+      title="整体流量评分"
+      extra={<EllipsisOutlined />}
+      statistic={{
+        value: 86.2,
+        suffix: '分',
+        description: <Statistic title="排名前" value="20%" />,
+      }}
+      chart={
+        <img
+          src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"
+          width="100%"
+          alt="进度条"
+        />
+      }
+      footer={
+        <>
+          <Statistic
+            value={15.1}
+            title="累计注册数"
+            suffix="万"
+            layout="horizontal"
+          />
+          <Statistic
+            value={15.1}
+            title="本月注册数"
+            suffix="万"
+            layout="horizontal"
+          />
+        </>
+      }
+      style={{ width: 250 }}
+    />
+  );
+};

package/packages/card/src/components/StatisticCard/demos/group-chart.tsx

@@ -0,0 +1,65 @@
+import { StatisticCard } from '@ant-design/pro-components';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+
+const { Divider } = StatisticCard;
+
+export default () => {
+  const [responsive, setResponsive] = useState(false);
+
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
+        <StatisticCard
+          statistic={{
+            title: '冻结金额',
+            value: 20190102,
+            precision: 2,
+            suffix: '元',
+          }}
+          chart={
+            <img
+              src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
+              alt="直方图"
+              width="100%"
+            />
+          }
+        />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <StatisticCard
+          statistic={{
+            title: '设计资源数',
+            value: 234,
+          }}
+          chart={
+            <img
+              src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
+              alt="直方图"
+              width="100%"
+            />
+          }
+        />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <StatisticCard
+          statistic={{
+            title: '信息完成度',
+            value: 5,
+            suffix: '/ 100',
+          }}
+          chart={
+            <img
+              src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
+              alt="直方图"
+              width="100%"
+            />
+          }
+        />
+      </StatisticCard.Group>
+    </RcResizeObserver>
+  );
+};

package/packages/card/src/components/StatisticCard/demos/group.tsx

@@ -0,0 +1,57 @@
+import { StatisticCard } from '@ant-design/pro-components';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+
+const { Divider } = StatisticCard;
+
+export default () => {
+  const [responsive, setResponsive] = useState(false);
+
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <StatisticCard.Group
+        title="核心指标"
+        direction={responsive ? 'column' : 'row'}
+      >
+        <StatisticCard
+          statistic={{
+            title: '今日UV',
+            tip: '供应商信息',
+            value: 79,
+            precision: 2,
+          }}
+        />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <StatisticCard
+          statistic={{
+            title: '冻结金额',
+            value: 112893,
+            precision: 2,
+            suffix: '元',
+          }}
+        />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <StatisticCard
+          statistic={{
+            title: '信息完整度',
+            value: 92,
+            suffix: '/ 100',
+          }}
+        />
+        <StatisticCard
+          statistic={{
+            title: '冻结金额',
+            value: 112893,
+            precision: 2,
+            suffix: '元',
+          }}
+        />
+      </StatisticCard.Group>
+    </RcResizeObserver>
+  );
+};