All files / src/metricsboard MetricsBoard.tsx

85.71% Statements 6/7
66.67% Branches 2/3
66.67% Functions 2/3
85.71% Lines 6/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103                                                                        1x                         4x 4x 4x                                                   8x                                               1x  
import classNames from "classnames";
import React, { Ref } from "react";
import { useConfig } from "../_util/config-context";
import { StyledProps } from "../_type";
import { createRocket } from "../_util/create-rocket";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";
 
export interface MetricsBoardProps extends StyledProps {
  /**
   * 标题
   */
  title: React.ReactNode;
 
  /**
   * 统计数值
   */
  value: React.ReactNode;
 
  /**
   * 统计数值单位
   */
  unit?: React.ReactNode;
 
  /**
   * 统计信息
   */
  infos?: React.ReactNode[];
 
  /**
   * 点击回调
   *
   * **当传递该回调函数后,组件会变为可点击的样式**
   */
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}
 
export const MetricsBoard = forwardRefWithStatics(
  (
    {
      title,
      value,
      unit,
      infos = [],
      onClick,
      className,
      style,
    }: MetricsBoardProps,
    ref: Ref<HTMLDivElement>
  ) => {
    const { classPrefix } = useConfig();
    const hasOnClick = typeof onClick === "function";
    return (
      <div
        className={classNames(`${classPrefix}-metrics-board`, className, {
          [`${classPrefix}-metrics-board--link`]: hasOnClick,
        })}
        style={style}
        onClick={hasOnClick ? onClick : () => null}
        ref={ref}
      >
        <div className={`${classPrefix}-metrics-board__header`}>
          <div className={`${classPrefix}-metrics-board__header-title`}>
            {title}
          </div>
        </div>
        <div className={`${classPrefix}-metrics-board__body`}>
          <div className={`${classPrefix}-metrics-board__value`}>
            <span className={`${classPrefix}-metrics-board__number`}>
              {value}
            </span>
            <span className={`${classPrefix}-metrics-board__unit`}>
              {" "}
              {unit}
            </span>
          </div>
          <div className={`${classPrefix}-metrics-board__info`}>
            {infos.map((info, index) => (
              <div
                className={`${classPrefix}-metrics-board__info-item`}
                key={index}
              >
                {info}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  },
  {
    InfoLabel: createRocket(
      "MetricsBoardInfoLabel",
      "label.@{prefix}-metrics-board__info-label"
    ),
    InfoKey: createRocket(
      "MetricsBoardInfoKey",
      "label.@{prefix}-metrics-board__info-key"
    ),
  }
);
 
MetricsBoard.displayName = "MetricsBoard";