import React from 'react'; import PropTypes from 'prop-types'; import Event from '@douyinfe/semi-foundation/lib/cjs/utils/Event'; import { ArrayElement } from '@douyinfe/semi-foundation/lib/cjs/utils/type'; import TooltipFoundation, { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/cjs/tooltip/foundation'; import { strings } from '@douyinfe/semi-foundation/lib/cjs/tooltip/constants'; import '@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css'; import BaseComponent, { BaseProps } from '../_base/baseComponent'; import { ContextValue } from '../configProvider/context'; export type Trigger = ArrayElement; export type { Position }; export interface ArrowBounding { offsetX?: number; offsetY?: number; width?: number; height?: number; } export interface RenderContentProps { initialFocusRef?: React.RefObject; } export type RenderContent = (props: RenderContentProps) => React.ReactNode; export interface TooltipProps extends BaseProps { children?: React.ReactNode; motion?: boolean; autoAdjustOverflow?: boolean; position?: Position; getPopupContainer?: () => HTMLElement; mouseEnterDelay?: number; mouseLeaveDelay?: number; trigger?: Trigger; className?: string; clickToHide?: boolean; visible?: boolean; style?: React.CSSProperties; content?: React.ReactNode | RenderContent; prefixCls?: string; onVisibleChange?: (visible: boolean) => void; onClickOutSide?: (e: React.MouseEvent) => void; spacing?: number | { x: number; y: number; }; margin?: number | { marginLeft: number; marginTop: number; marginRight: number; marginBottom: number; }; showArrow?: boolean | React.ReactNode; zIndex?: number; rePosKey?: string | number; role?: string; arrowBounding?: ArrowBounding; transformFromCenter?: boolean; arrowPointAtCenter?: boolean; wrapWhenSpecial?: boolean; stopPropagation?: boolean; clickTriggerToHide?: boolean; wrapperClassName?: string; closeOnEsc?: boolean; guardFocus?: boolean; returnFocusOnClose?: boolean; onEscKeyDown?: (e: React.KeyboardEvent) => void; disableArrowKeyDown?: boolean; wrapperId?: string; preventScroll?: boolean; disableFocusListener?: boolean; afterClose?: () => void; keepDOM?: boolean; /** * Whether to allow the tooltip to show * When set to false, the tooltip will not show when triggered * @default true */ condition?: boolean; } interface TooltipState { visible: boolean; transitionState: string; triggerEventSet: { [key: string]: any; }; portalEventSet: { [key: string]: any; }; containerStyle: React.CSSProperties; isInsert: boolean; placement: Position; transitionStyle: Record; isPositionUpdated: boolean; id: string; displayNone: boolean; } export default class Tooltip extends BaseComponent { static contextType: React.Context; static propTypes: { children: PropTypes.Requireable; motion: PropTypes.Requireable; autoAdjustOverflow: PropTypes.Requireable; position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">; getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>; mouseEnterDelay: PropTypes.Requireable; mouseLeaveDelay: PropTypes.Requireable; trigger: PropTypes.Validator>; className: PropTypes.Requireable; wrapperClassName: PropTypes.Requireable; clickToHide: PropTypes.Requireable; clickTriggerToHide: PropTypes.Requireable; visible: PropTypes.Requireable; style: PropTypes.Requireable; content: PropTypes.Requireable any)>>; prefixCls: PropTypes.Requireable; onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>; onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>; spacing: PropTypes.Requireable>; margin: PropTypes.Requireable>; showArrow: PropTypes.Requireable>; zIndex: PropTypes.Requireable; rePosKey: PropTypes.Requireable>; arrowBounding: PropTypes.Requireable; offsetY: PropTypes.Requireable; width: PropTypes.Requireable; height: PropTypes.Requireable; }>>; transformFromCenter: PropTypes.Requireable; arrowPointAtCenter: PropTypes.Requireable; stopPropagation: PropTypes.Requireable; role: PropTypes.Requireable; wrapWhenSpecial: PropTypes.Requireable; guardFocus: PropTypes.Requireable; returnFocusOnClose: PropTypes.Requireable; preventScroll: PropTypes.Requireable; keepDOM: PropTypes.Requireable; condition: PropTypes.Requireable; }; static __SemiComponentName__: string; static defaultProps: any; eventManager: Event; triggerEl: React.RefObject; containerEl: React.RefObject; initialFocusRef: React.RefObject; clickOutsideHandler: any; resizeHandler: any; isWrapped: boolean; mounted: any; scrollHandler: any; getPopupContainer: () => HTMLElement; containerPosition: string; foundation: TooltipFoundation; context: ContextValue; isAnimating: boolean; cachedLatestTransitionState: "leave" | "enter"; constructor(props: TooltipProps); setContainerEl: (node: HTMLDivElement) => { current: HTMLDivElement; }; get adapter(): TooltipAdapter; componentDidMount(): void; componentWillUnmount(): void; /** * focus on tooltip trigger */ focusTrigger(): void; isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading"; didLeave: () => void; /** for transition - end */ rePosition(): Record; componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void; renderIcon: () => any; handlePortalInnerClick: (e: React.MouseEvent) => void; handlePortalMouseDown: (e: React.MouseEvent) => void; handlePortalFocus: (e: React.FocusEvent) => void; handlePortalBlur: (e: React.FocusEvent) => void; handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void; renderContentNode: (content: TooltipProps['content']) => React.ReactNode; renderPortal: () => React.JSX.Element; wrapSpan: (elem: React.ReactNode | React.ReactElement) => React.JSX.Element; mergeEvents: (rawEvents: Record, events: Record) => {}; getPopupId: () => string; render(): React.JSX.Element; }