2019-08-15 09:28:15 +08:00
|
|
|
import * as React from 'react';
|
2016-03-28 23:21:47 +08:00
|
|
|
import RcTooltip from 'rc-tooltip';
|
2020-03-11 21:10:40 +08:00
|
|
|
import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
|
2016-08-24 16:09:55 +08:00
|
|
|
import classNames from 'classnames';
|
2020-11-14 00:43:12 +08:00
|
|
|
import { placements as Placements } from 'rc-tooltip/lib/placements';
|
2018-11-26 12:06:42 +08:00
|
|
|
import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements';
|
2020-05-14 20:54:49 +08:00
|
|
|
import { cloneElement, isValidElement } from '../_util/reactNode';
|
2020-05-15 10:47:03 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2020-05-25 18:59:00 +08:00
|
|
|
import { PresetColorType, PresetColorTypes } from '../_util/colors';
|
2020-07-01 10:47:26 +08:00
|
|
|
import { LiteralUnion } from '../_util/type';
|
2017-09-25 22:14:49 +08:00
|
|
|
|
|
|
|
export { AdjustOverflow, PlacementsConfig };
|
2016-03-09 17:23:10 +08:00
|
|
|
|
2016-11-30 15:46:50 +08:00
|
|
|
export type TooltipPlacement =
|
2018-12-07 20:02:01 +08:00
|
|
|
| 'top'
|
|
|
|
| 'left'
|
|
|
|
| 'right'
|
|
|
|
| 'bottom'
|
|
|
|
| 'topLeft'
|
|
|
|
| 'topRight'
|
|
|
|
| 'bottomLeft'
|
|
|
|
| 'bottomRight'
|
|
|
|
| 'leftTop'
|
|
|
|
| 'leftBottom'
|
|
|
|
| 'rightTop'
|
|
|
|
| 'rightBottom';
|
2015-06-03 17:08:43 +08:00
|
|
|
|
2018-09-23 14:01:06 +08:00
|
|
|
// https://github.com/react-component/tooltip
|
|
|
|
// https://github.com/yiminghe/dom-align
|
|
|
|
export interface TooltipAlignConfig {
|
2018-12-07 20:02:01 +08:00
|
|
|
points?: [string, string];
|
|
|
|
offset?: [number | string, number | string];
|
|
|
|
targetOffset?: [number | string, number | string];
|
|
|
|
overflow?: { adjustX: boolean; adjustY: boolean };
|
|
|
|
useCssRight?: boolean;
|
|
|
|
useCssBottom?: boolean;
|
|
|
|
useCssTransform?: boolean;
|
2018-09-23 14:01:06 +08:00
|
|
|
}
|
|
|
|
|
2020-09-02 15:35:49 +08:00
|
|
|
export interface AbstractTooltipProps extends Partial<Omit<RcTooltipProps, 'children'>> {
|
2016-07-13 11:14:24 +08:00
|
|
|
style?: React.CSSProperties;
|
2019-04-26 17:12:19 +08:00
|
|
|
className?: string;
|
2020-07-01 10:47:26 +08:00
|
|
|
color?: LiteralUnion<PresetColorType, string>;
|
2016-11-30 16:43:35 +08:00
|
|
|
placement?: TooltipPlacement;
|
2020-11-14 00:43:12 +08:00
|
|
|
builtinPlacements?: typeof Placements;
|
2016-08-22 17:26:14 +08:00
|
|
|
openClassName?: string;
|
2016-08-31 15:00:13 +08:00
|
|
|
arrowPointAtCenter?: boolean;
|
2017-06-30 17:22:01 +08:00
|
|
|
autoAdjustOverflow?: boolean | AdjustOverflow;
|
2019-04-28 11:47:22 +08:00
|
|
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
2020-09-02 15:35:49 +08:00
|
|
|
children?: React.ReactNode;
|
2016-11-30 16:43:35 +08:00
|
|
|
}
|
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
export type RenderFunction = () => React.ReactNode;
|
|
|
|
|
2019-11-21 11:56:21 +08:00
|
|
|
export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
|
2017-11-11 00:07:03 +08:00
|
|
|
title?: React.ReactNode | RenderFunction;
|
2019-08-27 22:30:52 +08:00
|
|
|
overlay: React.ReactNode | RenderFunction;
|
|
|
|
}
|
|
|
|
|
2019-11-21 11:56:21 +08:00
|
|
|
export interface TooltipPropsWithTitle extends AbstractTooltipProps {
|
2019-08-27 22:30:52 +08:00
|
|
|
title: React.ReactNode | RenderFunction;
|
2017-11-11 00:07:03 +08:00
|
|
|
overlay?: React.ReactNode | RenderFunction;
|
2016-07-09 10:54:21 +08:00
|
|
|
}
|
2016-07-13 11:14:24 +08:00
|
|
|
|
2019-08-27 22:30:52 +08:00
|
|
|
export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;
|
|
|
|
|
2017-11-20 18:20:16 +08:00
|
|
|
const splitObject = (obj: any, keys: string[]) => {
|
|
|
|
const picked: any = {};
|
2018-04-23 16:00:24 +08:00
|
|
|
const omitted: any = { ...obj };
|
2017-03-10 14:13:12 +08:00
|
|
|
keys.forEach(key => {
|
|
|
|
if (obj && key in obj) {
|
|
|
|
picked[key] = obj[key];
|
2018-04-23 16:00:24 +08:00
|
|
|
delete omitted[key];
|
2017-03-10 14:13:12 +08:00
|
|
|
}
|
|
|
|
});
|
2018-04-23 16:00:24 +08:00
|
|
|
return { picked, omitted };
|
2017-03-10 14:13:12 +08:00
|
|
|
};
|
2020-05-25 18:59:00 +08:00
|
|
|
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
2017-03-10 14:13:12 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
// Fix Tooltip won't hide at disabled button
|
|
|
|
// mouse events don't trigger at disabled button in Chrome
|
|
|
|
// https://github.com/react-component/tooltip/issues/18
|
2020-03-21 14:30:40 +08:00
|
|
|
function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {
|
2019-08-05 18:38:10 +08:00
|
|
|
const elementType = element.type as any;
|
|
|
|
if (
|
2019-10-27 11:43:48 +08:00
|
|
|
(elementType.__ANT_BUTTON === true ||
|
|
|
|
elementType.__ANT_SWITCH === true ||
|
|
|
|
elementType.__ANT_CHECKBOX === true ||
|
2019-08-07 14:33:01 +08:00
|
|
|
element.type === 'button') &&
|
2019-08-05 18:38:10 +08:00
|
|
|
element.props.disabled
|
|
|
|
) {
|
|
|
|
// Pick some layout related style properties up to span
|
|
|
|
// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
|
|
|
|
const { 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',
|
|
|
|
};
|
2020-05-14 20:54:49 +08:00
|
|
|
const child = cloneElement(element, {
|
2019-08-05 18:38:10 +08:00
|
|
|
style: buttonStyle,
|
|
|
|
className: null,
|
|
|
|
});
|
|
|
|
return (
|
2020-03-21 14:30:40 +08:00
|
|
|
<span
|
|
|
|
style={spanStyle}
|
|
|
|
className={classNames(element.props.className, `${prefixCls}-disabled-compatible-wrapper`)}
|
|
|
|
>
|
2019-08-05 18:38:10 +08:00
|
|
|
{child}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return element;
|
|
|
|
}
|
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
|
|
|
const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction } = React.useContext(
|
|
|
|
ConfigContext,
|
|
|
|
);
|
2018-08-10 17:04:40 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const [visible, setVisible] = React.useState(!!props.visible || !!props.defaultVisible);
|
2016-08-24 16:09:55 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
React.useEffect(() => {
|
|
|
|
if ('visible' in props) {
|
|
|
|
setVisible(props.visible!);
|
|
|
|
}
|
|
|
|
}, [props.visible]);
|
2016-11-30 16:43:35 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const isNoTitle = () => {
|
|
|
|
const { title, overlay } = props;
|
|
|
|
return !title && !overlay && title !== 0; // overlay for old version compatibility
|
|
|
|
};
|
2016-11-30 16:43:35 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const onVisibleChange = (vis: boolean) => {
|
|
|
|
if (!('visible' in props)) {
|
|
|
|
setVisible(isNoTitle() ? false : vis);
|
2017-01-15 00:27:02 +08:00
|
|
|
}
|
2020-05-15 10:47:03 +08:00
|
|
|
if (props.onVisibleChange && !isNoTitle()) {
|
|
|
|
props.onVisibleChange(vis);
|
2016-10-24 16:30:38 +08:00
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2015-10-26 16:30:27 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const getTooltipPlacements = () => {
|
|
|
|
const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = props;
|
2018-12-07 20:02:01 +08:00
|
|
|
return (
|
|
|
|
builtinPlacements ||
|
|
|
|
getPlacements({
|
|
|
|
arrowPointAtCenter,
|
|
|
|
autoAdjustOverflow,
|
|
|
|
})
|
|
|
|
);
|
2019-08-05 18:38:10 +08:00
|
|
|
};
|
2017-01-15 00:27:02 +08:00
|
|
|
|
2016-04-07 16:43:00 +08:00
|
|
|
// 动态设置动画点
|
2020-05-15 10:47:03 +08:00
|
|
|
const onPopupAlign = (domNode: HTMLElement, align: any) => {
|
|
|
|
const placements: any = getTooltipPlacements();
|
2016-04-07 16:43:00 +08:00
|
|
|
// 当前返回的位置
|
|
|
|
const placement = Object.keys(placements).filter(
|
2018-12-07 20:02:01 +08:00
|
|
|
key =>
|
2016-04-07 16:43:00 +08:00
|
|
|
placements[key].points[0] === align.points[0] &&
|
2018-12-07 20:02:01 +08:00
|
|
|
placements[key].points[1] === align.points[1],
|
2016-04-07 16:43:00 +08:00
|
|
|
)[0];
|
2020-04-29 21:30:36 +08:00
|
|
|
if (!placement) {
|
|
|
|
return;
|
|
|
|
}
|
2016-04-07 16:43:00 +08:00
|
|
|
// 根据当前坐标设置动画点
|
2016-04-07 15:02:22 +08:00
|
|
|
const rect = domNode.getBoundingClientRect();
|
2016-04-07 16:43:00 +08:00
|
|
|
const transformOrigin = {
|
|
|
|
top: '50%',
|
|
|
|
left: '50%',
|
|
|
|
};
|
2016-04-07 15:02:22 +08:00
|
|
|
if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
|
2016-04-07 16:43:00 +08:00
|
|
|
transformOrigin.top = `${rect.height - align.offset[1]}px`;
|
2016-04-07 15:02:22 +08:00
|
|
|
} else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
|
2016-04-07 16:43:00 +08:00
|
|
|
transformOrigin.top = `${-align.offset[1]}px`;
|
2016-04-07 15:02:22 +08:00
|
|
|
}
|
|
|
|
if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
|
2016-04-07 16:43:00 +08:00
|
|
|
transformOrigin.left = `${rect.width - align.offset[0]}px`;
|
2016-04-07 15:02:22 +08:00
|
|
|
} else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
|
2016-04-07 16:43:00 +08:00
|
|
|
transformOrigin.left = `${-align.offset[0]}px`;
|
2016-04-07 15:02:22 +08:00
|
|
|
}
|
2016-04-07 16:43:00 +08:00
|
|
|
domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-04-07 15:02:22 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const getOverlay = () => {
|
|
|
|
const { title, overlay } = props;
|
2020-01-14 17:55:40 +08:00
|
|
|
if (title === 0) {
|
|
|
|
return title;
|
|
|
|
}
|
|
|
|
return overlay || title || '';
|
2020-05-15 10:47:03 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
openClassName,
|
|
|
|
getPopupContainer,
|
|
|
|
getTooltipContainer,
|
|
|
|
overlayClassName,
|
2020-05-25 18:59:00 +08:00
|
|
|
color,
|
|
|
|
overlayInnerStyle,
|
2020-09-02 15:35:49 +08:00
|
|
|
children,
|
2020-05-15 10:47:03 +08:00
|
|
|
} = props;
|
|
|
|
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
|
|
|
|
let tempVisible = visible;
|
|
|
|
// Hide tooltip when there is no title
|
|
|
|
if (!('visible' in props) && isNoTitle()) {
|
|
|
|
tempVisible = false;
|
2019-08-05 18:38:10 +08:00
|
|
|
}
|
2017-09-08 09:45:34 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const child = getDisabledCompatibleChildren(
|
|
|
|
isValidElement(children) ? children : <span>{children}</span>,
|
|
|
|
prefixCls,
|
|
|
|
);
|
|
|
|
const childProps = child.props;
|
|
|
|
const childCls = classNames(childProps.className, {
|
|
|
|
[openClassName || `${prefixCls}-open`]: true,
|
|
|
|
});
|
2016-08-24 16:09:55 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
const customOverlayClassName = classNames(overlayClassName, {
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
2020-05-25 18:59:00 +08:00
|
|
|
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
|
2020-05-15 10:47:03 +08:00
|
|
|
});
|
2018-11-14 04:58:31 +08:00
|
|
|
|
2020-12-03 11:25:25 +08:00
|
|
|
let formattedOverlayInnerStyle = overlayInnerStyle;
|
2020-05-25 18:59:00 +08:00
|
|
|
let arrowContentStyle;
|
|
|
|
if (color && !PresetColorRegex.test(color)) {
|
|
|
|
formattedOverlayInnerStyle = { ...overlayInnerStyle, background: color };
|
|
|
|
arrowContentStyle = { background: color };
|
|
|
|
}
|
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
return (
|
|
|
|
<RcTooltip
|
|
|
|
{...props}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
overlayClassName={customOverlayClassName}
|
|
|
|
getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
|
|
|
|
ref={ref}
|
|
|
|
builtinPlacements={getTooltipPlacements()}
|
|
|
|
overlay={getOverlay()}
|
|
|
|
visible={tempVisible}
|
|
|
|
onVisibleChange={onVisibleChange}
|
|
|
|
onPopupAlign={onPopupAlign}
|
2020-05-25 18:59:00 +08:00
|
|
|
overlayInnerStyle={formattedOverlayInnerStyle}
|
|
|
|
arrowContent={<span className={`${prefixCls}-arrow-content`} style={arrowContentStyle} />}
|
2020-05-15 10:47:03 +08:00
|
|
|
>
|
|
|
|
{tempVisible ? cloneElement(child, { className: childCls }) : child}
|
|
|
|
</RcTooltip>
|
|
|
|
);
|
|
|
|
});
|
2016-08-24 16:09:55 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
Tooltip.displayName = 'Tooltip';
|
2018-11-26 12:06:42 +08:00
|
|
|
|
2020-05-15 10:47:03 +08:00
|
|
|
Tooltip.defaultProps = {
|
|
|
|
placement: 'top' as TooltipPlacement,
|
|
|
|
transitionName: 'zoom-big-fast',
|
|
|
|
mouseEnterDelay: 0.1,
|
|
|
|
mouseLeaveDelay: 0.1,
|
|
|
|
arrowPointAtCenter: false,
|
|
|
|
autoAdjustOverflow: true,
|
|
|
|
};
|
2018-08-10 17:04:40 +08:00
|
|
|
|
|
|
|
export default Tooltip;
|