All files / src/text Text.tsx

100% Statements 7/7
100% Branches 8/8
100% Functions 1/1
100% Lines 7/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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150                                                                                                                                                                                                    391x                                 391x   391x                                               391x 2x     391x     37x  
import React, { forwardRef, Ref } from "react";
import classNames from "classnames";
import { Tooltip } from "../tooltip";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
 
/**
 * 支持当前 `parent` 标签原生支持的属性
 */
export interface TextProps<P extends keyof JSX.IntrinsicElements>
  extends StyledProps {
  /**
   * 使用什么标签来渲染文本,对应标签原生属性可透传至组件
   * @default span
   */
  parent?: P;
 
  /**
   * 文本的水平居中方式
   */
  align?: "left" | "center" | "right" | "justify";
 
  /**
   * 文本的垂直居中方式
   */
  verticalAlign?:
    | "baseline"
    | "top"
    | "middle"
    | "bottom"
    | "text-top"
    | "text-bottom";
 
  /**
   * 指定 `overflow` 为 `true` 对文本进行单行溢出控制,宽度溢出的文本会以 ... 显示
   */
  overflow?: boolean;
 
  /**
   * 指定 `nowrap` 为 `true` 强制文本不换行,超长溢出
   */
  nowrap?: boolean;
 
  /**
   * 指定 `underline` 为 `true` 显示虚下划线
   */
  underline?: boolean;
 
  /**
   * 内容所使用的 `tooltip`
   */
  tooltip?: React.ReactNode;
 
  /**
   * 文本的颜色主题
   */
  theme?:
    | "text"
    | "label"
    | "weak"
    | "strong"
    | "primary"
    | "success"
    | "warning"
    | "danger"
    | "cost";
 
  /**
   * 文本的背景颜色主题
   */
  bgTheme?: "success" | "warning" | "danger";
 
  /**
   * 文本浮动方式,配置 `clear` 以清除浮动
   */
  float?: "left" | "right" | "clear";
 
  /**
   * 重置文字 fontSize
   *
   * @default false
   */
  reset?: boolean;
 
  /**
   * 文本内容
   */
  children?: React.ReactNode;
}
 
export type TextPropsType<
  P extends keyof JSX.IntrinsicElements
> = JSX.IntrinsicElements[P] & TextProps<P>;
 
function TextRaw<P extends keyof JSX.IntrinsicElements = "span">(
  props: TextPropsType<P>,
  ref: Ref<JSX.IntrinsicElements[P]>
) {
  const { classPrefix } = useConfig();
  const {
    parent,
    align,
    verticalAlign,
    overflow,
    nowrap,
    underline,
    tooltip,
    className,
    style,
    theme,
    bgTheme,
    float,
    reset,
    children,
    ...htmlProps
  } = props;
 
  let element: JSX.Element = React.createElement(
    parent || "span",
    {
      ref,
      className: classNames(className, {
        [`${classPrefix}-bg-${bgTheme}`]: bgTheme,
        [`${classPrefix}-text`]: theme === "text",
        [`${classPrefix}-text-${theme}`]: theme && theme !== "text",
        [`${classPrefix}-text-${align}`]: align,
        [`${classPrefix}-align-${verticalAlign}`]: verticalAlign,
        [`${classPrefix}-text-overflow`]: overflow,
        [`${classPrefix}-text-nowrap`]: nowrap,
        [`${classPrefix}-text-underline`]: underline,
        [`${classPrefix}-float-${float}`]: float && float !== "clear",
        [`${classPrefix}-fz-reset`]: reset,
        [`clearfix`]: float === "clear",
      }),
      style,
      ...htmlProps,
    },
    children
  );
 
  // 提供快捷 tooltip 使用方式
  if (tooltip) {
    element = <Tooltip title={tooltip}>{element}</Tooltip>;
  }
 
  return element;
}
 
export const Text = (forwardRef(TextRaw) as any) as typeof TextRaw;