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[key];}});return {
     picked, omitted };
};
const PresetColorRegex = new RegExp(`^(${
      PresetColorTypes.join('|')})(-inverse)?$`);

function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {
    const elementType = element.type as any;if ((elementType.__ANT_BUTTON === true ||elementType.__ANT_SWITCH === true ||elementType.__ANT_CHECKBOX === true ||element.type === 'button') &&element.props.disabled) {
    // Pick some layout related style properties up to span// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254const {
     picked, omitted } = splitObject(element.props.style, ['position','left','right','top','bottom','float','display','zIndex',]);const spanStyle = {
    display: 'inline-block', // default inline-block is important...picked,cursor: 'not-allowed',width: element.props.block ? '100%' : null,};const buttonStyle = {
    ...omitted,pointerEvents: 'none',};const child = cloneElement(element, {
    style: buttonStyle,className: null,});return (<spanstyle={
    spanStyle}className={
    classNames(element.props.className, `${
      prefixCls}-disabled-compatible-wrapper`)}>{
    child}</span>);}return element;
}

const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
    const {
     getPopupContainer: getContextPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext,);const [visible, setVisible] = useMergedState(false, {
    value: props.visible,defaultValue: props.defaultVisible,});
//判断有无标题const isNoTitle = () => {
    const {
     title, overlay } = props;return !title && !overlay && title !== 0; // overlay for old version compatibility};
//显示隐藏的回调const onVisibleChange = (vis: boolean) => {
    setVisible(isNoTitle() ? false : vis);if (!isNoTitle()) {
    props.onVisibleChange?.(vis);}};
//获得气泡框位置const getTooltipPlacements = () => {
    const {
     builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = props;return (builtinPlacements ||getPlacements({
    arrowPointAtCenter,autoAdjustOverflow,}));};

  // 动态设置动画点const onPopupAlign = (domNode: HTMLElement, align: any) => {
    const placements: any = getTooltipPlacements();// 当前返回的位置const placement = Object.keys(placements).filter(key =>placements[key].points[0] === align.points[0] &&placements[key].points[1] === align.points[1],)[0];if (!placement) {
    return;}// 根据当前坐标设置动画点const rect = domNode.getBoundingClientRect();const transformOrigin = {
    top: '50%',left: '50%',};if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
    transformOrigin.top = `${
      rect.height - align.offset[1]}px`;} else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
    transformOrigin.top = `${
      -align.offset[1]}px`;}if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
    transformOrigin.left = `${
      rect.width - align.offset[0]}px`;} else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
    transformOrigin.left = `${
      -align.offset[0]}px`;}domNode.style.transformOrigin = `${
      transformOrigin.left} ${
      transformOrigin.top}`;};

//获得卡片const getOverlay = () => {
    const {
     title, overlay } = props;if (title === 0) {
    return title;}return overlay || title || '';};const {
     getPopupContainer, ...otherProps } = props;const {
    prefixCls: customizePrefixCls,openClassName,getTooltipContainer,overlayClassName,color,overlayInnerStyle,children,} = props;const prefixCls = getPrefixCls('tooltip', customizePrefixCls);const rootPrefixCls = getPrefixCls();let tempVisible = visible;// Hide tooltip when there is no titleif (!('visible' in props) && isNoTitle()) {
    tempVisible = false;}

//有子卡片则返回子卡片const child = getDisabledCompatibleChildren(isValidElement(children) ? children : <span>{
    children}</span>,prefixCls,);const childProps = child.props;const childCls = classNames(childProps.className, {
    [openClassName || `${
      prefixCls}-open`]: true,});const customOverlayClassName = classNames(overlayClassName, {
    [`${
      prefixCls}-rtl`]: direction === 'rtl',[`${
      prefixCls}-${
      color}`]: color && PresetColorRegex.test(color),});let formattedOverlayInnerStyle = overlayInnerStyle;let arrowContentStyle;if (color && !PresetColorRegex.test(color)) {
    formattedOverlayInnerStyle = {
     ...overlayInnerStyle, background: color };arrowContentStyle = {
     background: color };}

  return (<RcTooltip{
    ...otherProps}prefixCls={
    prefixCls}overlayClassName={
    customOverlayClassName}getTooltipContainer={
    getPopupContainer || getTooltipContainer || getContextPopupContainer}ref={
    ref}builtinPlacements={
    getTooltipPlacements()}overlay={
    getOverlay()}visible={
    tempVisible}onVisibleChange={
    onVisibleChange}onPopupAlign={
    onPopupAlign}overlayInnerStyle={
    formattedOverlayInnerStyle}arrowContent={
    <span className={
    `${
      prefixCls}-arrow-content`} style={
    arrowContentStyle} />}motion={
    {
    motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),motionDeadline: 1000,}}>{
    tempVisible ? cloneElement(child, {
     className: childCls }) : child}</RcTooltip>);
});Tooltip.displayName = 'Tooltip';Tooltip.defaultProps = {
    placement: 'top' as TooltipPlacement,mouseEnterDelay: 0.1,mouseLeaveDelay: 0.1,arrowPointAtCenter: false,autoAdjustOverflow: true,
};export default Tooltip;

2、placements.tsx

导入相应模块以及相应的ICON图标

import {
     placements } from 'rc-tooltip/lib/placements';
import {
     BuildInPlacements } from 'rc-trigger';const autoAdjustOverflowEnabled = {
    adjustX: 1,adjustY: 1,
};const autoAdjustOverflowDisabled = {
    adjustX: 0,adjustY: 0,
};const targetOffset = [0, 0];export interface AdjustOverflow {
    adjustX?: 0 | 1;adjustY?: 0 | 1;
}

export interface PlacementsConfig {
    arrowWidth?: number;horizontalArrowShift?: number;verticalArrowShift?: number;arrowPointAtCenter?: boolean;autoAdjustOverflow?: boolean | AdjustOverflow;
}export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
    if (typeof autoAdjustOverflow === 'boolean') {
    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;}return {
    ...autoAdjustOverflowDisabled,...autoAdjustOverflow,};
}

arrowWidth：剪头宽度，类型为number
horizontalArrowShift：水平箭头移动，类型为number
verticalArrowShift：竖直箭头移动，类型为number

export default function getPlacements(config: PlacementsConfig) {
    const {
    arrowWidth = 4,horizontalArrowShift = 16,verticalArrowShift = 8,autoAdjustOverflow,} = config;//设置初始位置const placementMap: BuildInPlacements = {
    left: {
    points: ['cr', 'cl'],offset: [-4, 0],},right: {
    points: ['cl', 'cr'],offset: [4, 0],},top: {
    points: ['bc', 'tc'],offset: [0, -4],},bottom: {
    points: ['tc', 'bc'],offset: [0, 4],},topLeft: {
    points: ['bl', 'tc'],offset: [-(horizontalArrowShift + arrowWidth), -4],},leftTop: {
    points: ['tr', 'cl'],offset: [-4, -(verticalArrowShift + arrowWidth)],},topRight: {
    points: ['br', 'tc'],offset: [horizontalArrowShift + arrowWidth, -4],},rightTop: {
    points: ['tl', 'cr'],offset: [4, -(verticalArrowShift + arrowWidth)],},bottomRight: {
    points: ['tr', 'bc'],offset: [horizontalArrowShift + arrowWidth, 4],},rightBottom: {
    points: ['bl', 'cr'],offset: [4, verticalArrowShift + arrowWidth],},bottomLeft: {
    points: ['tl', 'bc'],offset: [-(horizontalArrowShift + arrowWidth), 4],},leftBottom: {
    points: ['br', 'cl'],offset: [-4, verticalArrowShift + arrowWidth],},};Object.keys(placementMap).forEach(key => {
    placementMap[key] = config.arrowPointAtCenter? {
    ...placementMap[key],overflow: getOverflowOptions(autoAdjustOverflow),targetOffset,}: {
    ...placements[key],overflow: getOverflowOptions(autoAdjustOverflow),};placementMap[key].ignoreShake = true;});return placementMap;
}