All files / src/badge Badge.tsx

100% Statements 3/3
100% Branches 12/12
100% Functions 1/1
100% Lines 3/3

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                                                                                            19x 19x 19x                                    
import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
 
export interface BadgeProps extends StyledProps {
  /**
   * 颜色主题
   *
   * @default "default"
   */
  theme?: "default" | "success" | "warning" | "danger";
 
  /**
   * 是否为深色背景
   * @default false
   */
  dark?: boolean;
 
  /**
   * 是否展示为点的样式
   * @default false
   */
  dot?: boolean;
 
  /**
   * 是否展示为环的样式
   * @default false
   */
  ring?: boolean;
 
  /**
   * 徽章中内容
   */
  children?: React.ReactNode;
}
 
export function Badge({
  theme = "default",
  dot,
  ring,
  dark,
  children,
  className,
  style,
}: BadgeProps) {
  const { classPrefix } = useConfig();
  const classSuffix = dark || dot || ring ? "-dark" : "";
  return (
    <span
      className={classNames(`${classPrefix}-badge`, className, {
        [`${classPrefix}-badge--radius`]: !dot && !ring,
        [`${classPrefix}-badge--dot`]: dot && !ring,
        [`${classPrefix}-badge--ring`]: ring,
        [`is-blue${classSuffix}`]: theme === "default",
        [`is-success${classSuffix}`]: theme === "success",
        [`is-warning${classSuffix}`]: theme === "warning",
        // @ts-ignore
        [`is-error${classSuffix}`]: theme === "danger" || theme === "error",
      })}
      style={style}
    >
      {children}
    </span>
  );
}