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"; |