ant-design/components/tooltip/index.tsx
二货爱吃白萝卜 cbcfd38ca7
docs: v5 site upgrade (#38328)
* build: try to use dumi as doc tool

* docs: migrate demo structure to dumi way

* refactor: use type export & import

* docs: migrate demo previewer to dumi

* docs: create empty layout & components

* docs: apply custom rehype plugin

* docs: create empty extra pages

* docs: Add Banner component

* chore: move theme tsconfig.json

* docs: home page init

* docs: migrate header (#37896)

* docs: header

* docs: update

* docs: home init

* clean up

* test: fix site lint

* chore: tsc ignore demo

* chore: dumi demo migrate script

* chore: cards

* docs: home layout

* docs: Update locale logic

* docs: fix getLink logic

* chore: fix ci (#37899)

* chore: fix ci

* ci: remove check-ts-demo

* ci: preview build

* test: ignore demo.tsx

* chore: update script

* test: update snapshot

* test: update node and image test

* chore: add .surgeignore

* docs: layout providers (#37908)

* docs: add components sidebar (#37923)

* docs: sidebar

* docs: update docs title

* docs: update design doc

* chore: code clean

* docs: handle changelog page

* docs: add title

* docs: add subtitle

* docs: active header nav

* chore: code clean

* docs: overview

* chore: code clean

* docs: update intl (#37918)

* docs: update intl

* chore: code clean

* docs: update favicons

* chore: update testPathIgnorePatterns

* chore: code clean

* chore: code clean

* chore: copy 404.html (#37996)

* docs: Home page theme picker

* chore: Update migrate script

* docs: home page update

* docs: theme editor style

* docs: theme lang

* chore: update migrate.js

* docs: fix demo (#38094)

* chore: update migrate.js

* docs: update md

* docs: update demo

* test: fix snapshot

* chore: move debug to code attr in migrate script

* chore: update md

Co-authored-by: PeachScript <scdzwyxst@gmail.com>

* feat: overview page

* feat: Migrate `404` page (#38118)

* feat: migrate IconSearch component (#37916)

* feat<site/IconSearch>: copy IconDisplay from site to .dumi

* feat<site/IconSearch>: change docs of icon

* feat<site/IconSearch>: tweak

* feat<site/IconSearch>: use useIntl instead of injectIntl

* feat<site/IconSearch>: fix ts type error

* feat<site/IconSearch>: use intl.formatMessage to render text

* docs: Adjust home btn sizw

* docs: Update doc

* feat: v5 site overview page (#38131)

* feat: site

* fix: fix

* feat: v5 site overview page

* fix: fix path

* fix: fix

* fix: fix

* docs: fix margin logic

* feat: v5 site change-log page (#38137)

* feat: v5 site change-log page (#38162)

* docs: site redirect to home pag

* docs: theme picker

* docs: use react-intl from dumi (#38183)

* docs: Theme Picker

* docs: update dumi config

* docs: home back fix

* docs: picker colorful

* docs: locale of it

* docs: update components desc

* docs: site of links

* docs: update components list

* docs: update desc

* feat: Migrate `DemoWrapper` component (#38166)

* feat: Migrate `DemoWrapper` component

* feat: remove invalid comments and add comment for `key` prop

* docs: FloatButton pure panel

* chore: update demo

* chore: update dumi config

* Revert "chore: update demo"

This reverts commit 028265d3ba5987df5f13c3e9d42cf76cb1812b2e.

* chore: test logic adjust to support cnpm modules

* chore: add locale alias

* docs: /index to /

* docs: add locale redirect head script

* chore: adjust compact

* docs: fix missing token

* feat: compact switch

* chore: code clean

* docs: update home

* docs: fix radius token

* docs: hash of it

* chore: adjust home page

* docs: Add background map

* docs: site theme bac logic

* docs: avatar

* docs: update logo color

* docs: home banner

* docs: adjust tour size

* docs: purepanl update

* docs: transfooter

* docs: update banner gif

* docs: content (#38361)

* docs: title & EditButton

* docs: content

* chore: fix toc

* docs: resource page

* docs: transform resource data from hast

* docs: filename & Resource Card

* chore: enable prerender

* chore: remove less

* docs: toc style

* chore: fix lint

* docs: fix Layout page

* docs: fix CP page

* chore: update demos

* docs: workaround for export dynamic html

* chore: enable demo eslint

* docs: table style

* fix: header shadow

* chore: update snapshot

* fix: toc style

* docs: add title

* docs: Adjust site

* feat: helmet

* docs: site css

* fix: description

* feat: toc debug

* docs: update config-provider

* feat: use colorPanel

* fix: colorPanel value

* feat: anchor ink ball style

* feat: apply theme editor

* fix: code block style

* chore: update demo

* chore: fix lint

* chore: code clean

* chore: update snapshot

* feat: ts2js

* chore: description

* docs: site ready for ssr

includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion

* chore: bump testing lib

* docs: font size of title

* chore: remove react-sortable-hoc

* chore: update snapshot

* chore: update script

Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
2022-11-09 12:28:04 +08:00

356 lines
11 KiB
TypeScript

import classNames from 'classnames';
import RcTooltip from 'rc-tooltip';
import type { placements as Placements } from 'rc-tooltip/lib/placements';
import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
import type { AlignType } from 'rc-trigger/lib/interface';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { PresetColorType } from '../_util/colors';
import { getTransitionName } from '../_util/motion';
import type { AdjustOverflow, PlacementsConfig } from '../_util/placements';
import getPlacements from '../_util/placements';
import { cloneElement, isValidElement, isFragment } from '../_util/reactNode';
import type { LiteralUnion } from '../_util/type';
import warning from '../_util/warning';
import PurePanel from './PurePanel';
import useStyle from './style';
import { parseColor } from './util';
export type { 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;
}
// remove this after RcTooltip switch visible to open.
interface LegacyTooltipProps
extends Partial<
Omit<
RcTooltipProps,
'children' | 'visible' | 'defaultVisible' | 'onVisibleChange' | 'afterVisibleChange'
>
> {
open?: RcTooltipProps['visible'];
defaultOpen?: RcTooltipProps['defaultVisible'];
onOpenChange?: RcTooltipProps['onVisibleChange'];
afterOpenChange?: RcTooltipProps['afterVisibleChange'];
// Legacy
/** @deprecated Please use `open` instead. */
visible?: RcTooltipProps['visible'];
/** @deprecated Please use `defaultOpen` instead. */
defaultVisible?: RcTooltipProps['defaultVisible'];
/** @deprecated Please use `onOpenChange` instead. */
onVisibleChange?: RcTooltipProps['onVisibleChange'];
/** @deprecated Please use `afterOpenChange` instead. */
afterVisibleChange?: RcTooltipProps['afterVisibleChange'];
}
export interface AbstractTooltipProps extends LegacyTooltipProps {
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;
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;
const splitObject = <T extends React.CSSProperties>(
obj: T,
keys: (keyof T)[],
): Record<'picked' | 'omitted', T> => {
const picked: T = {} as T;
const omitted: T = { ...obj };
keys.forEach(key => {
if (obj && key in obj) {
picked[key] = obj[key];
delete omitted[key];
}
});
return { picked, omitted };
};
// 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) {
const elementType = element.type as any;
if (
((elementType.__ANT_BUTTON === true || element.type === 'button') && element.props.disabled) ||
(elementType.__ANT_SWITCH === true && (element.props.disabled || element.props.loading)) ||
(elementType.__ANT_RADIO === true && 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: React.CSSProperties = {
display: 'inline-block', // default inline-block is important
...picked,
cursor: 'not-allowed',
width: element.props.block ? '100%' : undefined,
};
const buttonStyle: React.CSSProperties = {
...omitted,
pointerEvents: 'none',
};
const child = cloneElement(element, {
style: buttonStyle,
className: null,
});
return (
<span
style={spanStyle}
className={classNames(element.props.className, `${prefixCls}-disabled-compatible-wrapper`)}
>
{child}
</span>
);
}
return element;
}
const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
openClassName,
getTooltipContainer,
overlayClassName,
color,
overlayInnerStyle,
children,
afterOpenChange,
afterVisibleChange,
} = props;
const {
getPopupContainer: getContextPopupContainer,
getPrefixCls,
direction,
} = React.useContext(ConfigContext);
if (process.env.NODE_ENV !== 'production') {
[
['visible', 'open'],
['defaultVisible', 'defaultOpen'],
['onVisibleChange', 'onOpenChange'],
['afterVisibleChange', 'afterOpenChange'],
].forEach(([deprecatedName, newName]) => {
warning(
!(deprecatedName in props),
'Tooltip',
`\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
);
});
}
const [open, setOpen] = useMergedState(false, {
value: props.open ?? props.visible,
defaultValue: props.defaultOpen ?? props.defaultVisible,
});
const isNoTitle = () => {
const { title, overlay } = props;
return !title && !overlay && title !== 0; // overlay for old version compatibility
};
const onOpenChange = (vis: boolean) => {
setOpen(isNoTitle() ? false : vis);
if (!isNoTitle()) {
props.onOpenChange?.(vis);
props.onVisibleChange?.(vis);
}
};
const getTooltipPlacements = () => {
const { builtinPlacements, arrowPointAtCenter = false, autoAdjustOverflow = true } = props;
return (
builtinPlacements ||
getPlacements({
arrowPointAtCenter,
autoAdjustOverflow,
})
);
};
// 动态设置动画点
const onPopupAlign = (domNode: HTMLElement, align: AlignType) => {
const placements = getTooltipPlacements();
// 当前返回的位置
const placement = Object.keys(placements).find(
key =>
placements[key].points![0] === align.points?.[0] &&
placements[key].points![1] === align.points?.[1],
);
if (!placement) {
return;
}
// 根据当前坐标设置动画点
const rect = domNode.getBoundingClientRect();
const transformOrigin = { top: '50%', left: '50%' };
if (/top|Bottom/.test(placement)) {
transformOrigin.top = `${rect.height - align.offset![1]}px`;
} else if (/Top|bottom/.test(placement)) {
transformOrigin.top = `${-align.offset![1]}px`;
}
if (/left|Right/.test(placement)) {
transformOrigin.left = `${rect.width - align.offset![0]}px`;
} else if (/right|Left/.test(placement)) {
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,
placement = 'top',
mouseEnterDelay = 0.1,
mouseLeaveDelay = 0.1,
overlayStyle,
...otherProps
} = props;
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const injectFromPopover = (props as any)['data-popover-inject'];
let tempOpen = open;
// Hide tooltip when there is no title
if (!('open' in props) && !('visible' in props) && isNoTitle()) {
tempOpen = false;
}
const child = getDisabledCompatibleChildren(
isValidElement(children) && !isFragment(children) ? children : <span>{children}</span>,
prefixCls,
);
const childProps = child.props;
const childCls =
!childProps.className || typeof childProps.className === 'string'
? classNames(childProps.className, {
[openClassName || `${prefixCls}-open`]: true,
})
: childProps.className;
// Style
const [wrapSSR, hashId] = useStyle(prefixCls, !injectFromPopover);
// Color
const colorInfo = parseColor(prefixCls, color);
const formattedOverlayInnerStyle = { ...overlayInnerStyle, ...colorInfo.overlayStyle };
const arrowContentStyle = colorInfo.arrowStyle;
const customOverlayClassName = classNames(
overlayClassName,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
colorInfo.className,
hashId,
);
return wrapSSR(
<RcTooltip
{...otherProps}
placement={placement}
mouseEnterDelay={mouseEnterDelay}
mouseLeaveDelay={mouseLeaveDelay}
prefixCls={prefixCls}
overlayClassName={customOverlayClassName}
overlayStyle={{
...arrowContentStyle,
...overlayStyle,
}}
getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
ref={ref}
builtinPlacements={getTooltipPlacements()}
overlay={getOverlay()}
visible={tempOpen}
onVisibleChange={onOpenChange}
afterVisibleChange={afterOpenChange ?? afterVisibleChange}
onPopupAlign={onPopupAlign}
overlayInnerStyle={formattedOverlayInnerStyle}
arrowContent={<span className={`${prefixCls}-arrow-content`} />}
motion={{
motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),
motionDeadline: 1000,
}}
>
{tempOpen ? cloneElement(child, { className: childCls }) : child}
</RcTooltip>,
);
}) as React.ForwardRefExoticComponent<
React.PropsWithoutRef<TooltipProps> & React.RefAttributes<unknown>
> & {
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
};
if (process.env.NODE_ENV !== 'production') {
Tooltip.displayName = 'Tooltip';
}
Tooltip._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
export default Tooltip;