All files / src/bubble BubbleContent.tsx

83.33% Statements 10/12
57.14% Branches 4/7
100% Functions 1/1
83.33% Lines 10/12

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                                                                59x             59x                   4x   4x     4x   4x       4x   4x               4x                                     59x  
import React, { forwardRef, Ref, HTMLAttributes } from "react";
import classNames from "classnames";
import { Placement } from "popper.js";
import { useConfig } from "../_util/config-context";
 
export interface BubbleContentProps extends HTMLAttributes<HTMLDivElement> {
  /**
   * Bubble 放置的位置,将影响三角的朝向和位置
   * @default "top"
   */
  placement?: Placement;
 
  /**
   * 指定 `error = true` 则渲染为红色,指示错误内容
   * @default false
   */
  error?: boolean;
 
  /**
   * 指定 `dark = true` 则渲染为黑色
   * @default false
   */
  dark?: boolean;
 
  /**
   * 指定 `tooltip = true` 则渲染为 Tooltip 样式
   * @default false
   */
  tooltip?: boolean;
}
 
// 三角朝向和 placement 位置是相对的
const POSITION_MAP = {
  top: "bottom",
  bottom: "top",
  left: "right",
  right: "left",
};
 
export const BubbleContent = forwardRef(
  (props: BubbleContentProps, ref: Ref<HTMLDivElement>) => {
    const {
      placement = "top",
      children,
      className,
      error,
      dark,
      tooltip,
      ...htmlProps
    } = props;
 
    const { classPrefix } = useConfig();
 
    // placement 可能是 "top-start" 的形式,需要拆成两个词来使用
    let [basePlacement, placementModifier] = placement.split("-"); // eslint-disable-line prefer-const
 
    Iif (basePlacement === "auto") {
      basePlacement = "top";
    }
 
    const focusPosition = POSITION_MAP[basePlacement] || "bottom";
 
    Iif (tooltip) {
      return (
        <div className={`${classPrefix}-tooltip`} ref={ref} {...htmlProps}>
          <div className={`${classPrefix}-tooltip__inner`}>{children}</div>
        </div>
      );
    }
 
    return (
      <div
        ref={ref}
        className={classNames({
          [`${classPrefix}-bubble`]: true,
          [`${classPrefix}-bubble--${focusPosition}`]: focusPosition,
          [`${classPrefix}-bubble--${placementModifier}`]: placementModifier,
          [`${classPrefix}-bubble--error`]: error,
          [`${classPrefix}-bubble--reverse`]: dark,
          [className]: className,
        })}
        {...htmlProps}
      >
        <div className={`${classPrefix}-bubble__inner`}>{children}</div>
      </div>
    );
  }
);
 
BubbleContent.displayName = "BubbleContent";