ant-design/components/tooltip/index.tsx

277 lines
8.3 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import RcTooltip from 'rc-tooltip';
import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
2016-08-24 16:09:55 +08:00
import classNames from 'classnames';
import { placements as Placements } from 'rc-tooltip/lib/placements';
2018-11-26 12:06:42 +08:00
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';
export { AdjustOverflow, PlacementsConfig };
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
// 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;
}
export interface AbstractTooltipProps extends Partial<Omit<RcTooltipProps, 'children'>> {
2016-07-13 11:14:24 +08:00
style?: React.CSSProperties;
className?: string;
color?: LiteralUnion<PresetColorType, string>;
2016-11-30 16:43:35 +08:00
placement?: TooltipPlacement;
builtinPlacements?: typeof Placements;
2016-08-22 17:26:14 +08:00
openClassName?: string;
2016-08-31 15:00:13 +08:00
arrowPointAtCenter?: boolean;
autoAdjustOverflow?: boolean | AdjustOverflow;
2019-04-28 11:47:22 +08:00
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
children?: React.ReactNode;
2016-11-30 16:43:35 +08:00
}
export type RenderFunction = () => React.ReactNode;
export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
title?: React.ReactNode | RenderFunction;
2019-08-27 22:30:52 +08:00
overlay: React.ReactNode | RenderFunction;
}
export interface TooltipPropsWithTitle extends AbstractTooltipProps {
2019-08-27 22:30:52 +08:00
title: React.ReactNode | RenderFunction;
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 };
keys.forEach(key => {
if (obj && key in obj) {
picked[key] = obj[key];
2018-04-23 16:00:24 +08:00
delete omitted[key];
}
});
2018-04-23 16:00:24 +08:00
return { picked, omitted };
};
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
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
function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {
2019-08-05 18:38:10 +08:00
const elementType = element.type as any;
if (
(elementType.__ANT_BUTTON === true ||
elementType.__ANT_SWITCH === true ||
elementType.__ANT_CHECKBOX === true ||
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',
};
const child = cloneElement(element, {
2019-08-05 18:38:10 +08:00
style: buttonStyle,
className: null,
});
return (
<span
style={spanStyle}
className={classNames(element.props.className, `${prefixCls}-disabled-compatible-wrapper`)}
>
2019-08-05 18:38:10 +08:00
{child}
</span>
);
}
return element;
}
const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction } = React.useContext(
ConfigContext,
);
const [visible, setVisible] = React.useState(!!props.visible || !!props.defaultVisible);
2016-08-24 16:09:55 +08:00
React.useEffect(() => {
if ('visible' in props) {
setVisible(props.visible!);
}
}, [props.visible]);
2016-11-30 16:43:35 +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
const onVisibleChange = (vis: boolean) => {
if (!('visible' in props)) {
setVisible(isNoTitle() ? false : vis);
}
if (props.onVisibleChange && !isNoTitle()) {
props.onVisibleChange(vis);
2016-10-24 16:30:38 +08:00
}
2018-12-07 20:02:01 +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
};
2016-04-07 16:43:00 +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];
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
const getOverlay = () => {
const { title, overlay } = props;
if (title === 0) {
return title;
}
return overlay || title || '';
};
const {
prefixCls: customizePrefixCls,
openClassName,
getPopupContainer,
getTooltipContainer,
overlayClassName,
color,
overlayInnerStyle,
children,
} = 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
}
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
const customOverlayClassName = classNames(overlayClassName, {
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
});
2018-11-14 04:58:31 +08:00
let formattedOverlayInnerStyle = overlayInnerStyle;
let arrowContentStyle;
if (color && !PresetColorRegex.test(color)) {
formattedOverlayInnerStyle = { ...overlayInnerStyle, background: color };
arrowContentStyle = { background: color };
}
return (
<RcTooltip
{...props}
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} />}
>
{tempVisible ? cloneElement(child, { className: childCls }) : child}
</RcTooltip>
);
});
2016-08-24 16:09:55 +08:00
Tooltip.displayName = 'Tooltip';
2018-11-26 12:06:42 +08:00
Tooltip.defaultProps = {
placement: 'top' as TooltipPlacement,
transitionName: 'zoom-big-fast',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
arrowPointAtCenter: false,
autoAdjustOverflow: true,
};
export default Tooltip;