All files / src/tag Tag.tsx

100% Statements 6/6
100% Branches 6/6
100% Functions 1/1
100% Lines 6/6

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                                                                      3x                   13x 13x 13x 13x                                     3x  
import React from "react";
import classNames from "classnames";
import { Icon } from "../icon";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
import { createRocket } from "../_util/create-rocket";
 
export interface TagProps extends StyledProps {
  /**
   * 标签内容
   */
  children: React.ReactNode;
 
  /**
   * 关闭时回调
   *
   * **传递该参数时将展示关闭按钮**
   */
  onClose?: (event: React.MouseEvent) => void;
 
  /**
   * 颜色主题
   *
   * @default "default"
   */
  theme?: "default" | "primary" | "success" | "warning" | "error";
 
  /**
   * 是否为深色背景
   *
   * @default false
   */
  dark?: boolean;
}
 
export const TagGroup = createRocket("TagGroup", "div.@{prefix}-tag-group");
 
export function Tag({
  children,
  onClose,
  className,
  theme,
  dark,
  ...props
}: TagProps) {
  const hasCloseHandler = typeof onClose === "function";
  const { classPrefix } = useConfig();
  const classSuffix = dark ? "-dark" : "";
  return (
    <div
      className={classNames(`${classPrefix}-tag`, className, {
        [`${classPrefix}-tag--unlimited-width`]: true,
        [`${classPrefix}-tag--edit`]: hasCloseHandler,
        [`is-blue${classSuffix}`]: theme === "primary",
        [`is-success${classSuffix}`]: theme === "success",
        [`is-warning${classSuffix}`]: theme === "warning",
        // @ts-ignore
        [`is-error${classSuffix}`]: theme === "danger" || theme === "error",
      })}
      {...props}
    >
      <span>{children}</span>
      {hasCloseHandler && <Icon link type="dismiss" onClick={onClose} />}
    </div>
  );
}
 
Tag.Group = TagGroup;