Ant-design 源码分析之数据展示（十三）Tooltip

Ant-design 源码分析之数据展示（十三）Tooltip

2021SC@SDUSC

一、组件结构

1、ant代码结构

2、组件结构

ant中Tooltip的index.tsx中引入了placements.tsx。

二、antd组件调用关系

1、index.tsx
导入相应模块以及相应的ICON图标

import * as React from 'react';
import RcTooltip from 'rc-tooltip';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import {
   
    TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
import classNames from 'classnames';
import {
   
    placements as Placements } from 'rc-tooltip/lib/placements';
import getPlacements, {
   
    AdjustOverflow, PlacementsConfig } from './placements';
import {
   
    cloneElement, isValidElement } from '../_util/reactNode';
import {
   
    ConfigContext } from '../config-provider';
import {
   
    PresetColorType, PresetColorTypes } from '../_util/colors';
import {
   
    LiteralUnion } from '../_util/type';
import {
   
    getTransitionName } from '../_util/motion';

export {
   
    AdjustOverflow, PlacementsConfig };

//气泡框位置
export type TooltipPlacement =
  | 'top'
  | 'left'
  | 'right'
  | 'bottom'
  | 'topLeft'
  | 'topRight'
  | 'bottomLeft'
  | 'bottomRight'
  | 'leftTop'
  | 'leftBottom'
  | 'rightTop'
  | 'rightBottom';

// https://github.com/react-component/tooltip
// https://github.com/yiminghe/dom-align
export interface TooltipAlignConfig {
   
   
  points?: [string, string];
  offset?: [number | string, number | string];
  targetOffset?: [number | string, number | string];
  overflow?: {
   
    adjustX: boolean; adjustY: boolean };
  useCssRight?: boolean;
  useCssBottom?: boolean;
  useCssTransform?: boolean;
}

export interface AbstractTooltipProps extends Partial<Omit<RcTooltipProps, 'children'>> {
   
   
  style?: React.CSSProperties;
  className?: string;
  color?: LiteralUnion<PresetColorType, string>;
  placement?: TooltipPlacement;
  builtinPlacements?: typeof Placements;
  openClassName?: string;
  arrowPointAtCenter?: boolean;
  autoAdjustOverflow?: boolean | AdjustOverflow;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  children?: React.ReactNode;
}

export type RenderFunction = () => React.ReactNode;

align：该值将合并到 placement 的配置中，设置参考 rc-tooltip，类型为object
arrowPointAtCenter：箭头是否指向目标元素中心，类型为boolean
autoAdjustOverflow：气泡被遮挡时自动调整位置，类型为boolean
color：背景颜色，类型为string
defaultVisible：默认是否显隐，类型为boolean
destroyTooltipOnHide：关闭后是否销毁 Tooltip，当 keepParent 为 false 时销毁父容器，类型为boolean | { keepParent?: boolean }
getPopupContainer：浮层渲染父节点，默认渲染到 body 上，类型为function(triggerNode)
mouseEnterDelay：鼠标移入后延时多少才显示 Tooltip，单位：秒，类型为number
mouseLeaveDelay：鼠标移出后延时多少才隐藏 Tooltip，单位：秒，类型为number
overlayClassNam：卡片类名，类型为string
overlayStyle：卡片样式，类型为object
overlayInnerStyle：卡片内容区域的样式对象，类型为object
placement：气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom，类型为string
trigger：触发行为，可选 hover | focus | click | contextMenu，可使用数组设置多个触发行为，类型为string | string[]
visible：用于手动控制浮层显隐，类型为boolean
zIndex：设置 Tooltip 的 z-index，类型为number
onVisibleChange：显示隐藏的回调，类型为(visible) => void

export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
   
   
  title?: React.ReactNode | RenderFunction;
  overlay: React.ReactNode | RenderFunction;
}

export interface TooltipPropsWithTitle extends AbstractTooltipProps {
   
   
  title: React.ReactNode | RenderFunction;
  overlay?: React.ReactNode | RenderFunction;
}

export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;

title：提示文字，类型为ReactNode | () => ReactNode

const splitObject = (obj: any, keys: string[]) => {
   
   
  const picked: any = {
   
   };
  const omitted: any = {
   
    ...obj };
  keys.forEach(key => {
   
   
    if (obj && key in obj) {
   
   
      picked[key] = obj[key];
      delete omitted