mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
cbcfd38ca7
* 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>
356 lines
11 KiB
TypeScript
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;
|