This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+7
View File
@@ -0,0 +1,7 @@
import * as React from 'react';
import type { TooltipProps } from '.';
export interface PurePanelProps extends Omit<TooltipProps, 'children'> {
}
/** @private Internal Component. Do not use in your production. */
declare const PurePanel: React.FC<PurePanelProps>;
export default PurePanel;
+63
View File
@@ -0,0 +1,63 @@
"use client";
import * as React from 'react';
import { Popup } from '@rc-component/tooltip';
import { clsx } from 'clsx';
import { useMergeSemantic } from '../_util/hooks';
import { ConfigContext } from '../config-provider';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useStyle from './style';
import { parseColor } from './util';
/** @private Internal Component. Do not use in your production. */
const PurePanel = props => {
const {
prefixCls: customizePrefixCls,
className,
placement = 'top',
title,
color,
overlayInnerStyle,
classNames,
styles
} = props;
const {
getPrefixCls
} = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const rootCls = useCSSVarCls(prefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
// Color
const colorInfo = parseColor(rootPrefixCls, prefixCls, color);
const arrowContentStyle = colorInfo.arrowStyle;
const innerStyles = React.useMemo(() => {
const mergedStyle = {
...overlayInnerStyle,
...colorInfo.overlayStyle
};
return {
container: mergedStyle
};
}, [overlayInnerStyle, colorInfo.overlayStyle]);
const mergedProps = {
...props,
placement
};
const [mergedClassNames, mergedStyles] = useMergeSemantic([classNames], [innerStyles, styles], {
props: mergedProps
});
const rootClassName = clsx(rootCls, hashId, cssVarCls, prefixCls, `${prefixCls}-pure`, `${prefixCls}-placement-${placement}`, className, colorInfo.className);
return /*#__PURE__*/React.createElement("div", {
className: rootClassName,
style: arrowContentStyle
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-arrow`
}), /*#__PURE__*/React.createElement(Popup, {
...props,
className: hashId,
prefixCls: prefixCls,
classNames: mergedClassNames,
styles: mergedStyles
}, title));
};
export default PurePanel;
@@ -0,0 +1,3 @@
import React from 'react';
declare const MotionContent: React.FC<React.PropsWithChildren>;
export default MotionContent;
@@ -0,0 +1,40 @@
"use client";
import React from 'react';
import CSSMotion from '@rc-component/motion';
import { clsx } from 'clsx';
import { cloneElement } from '../../_util/reactNode';
import { ConfigContext } from '../../config-provider/context';
const MotionContent = ({
children
}) => {
const {
getPrefixCls
} = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
// This will never reach since we will not render this when no children
/* istanbul ignore next */
if (! /*#__PURE__*/React.isValidElement(children)) {
return children;
}
return /*#__PURE__*/React.createElement(CSSMotion, {
visible: true,
motionName: `${rootPrefixCls}-fade`,
motionAppear: true,
motionEnter: true,
motionLeave: false,
removeOnLeave: false
}, ({
style: motionStyle,
className: motionClassName
}) => {
return cloneElement(children, oriProps => ({
className: clsx(oriProps.className, motionClassName),
style: {
...oriProps.style,
...motionStyle
}
}));
});
};
export default MotionContent;
@@ -0,0 +1,3 @@
import React from 'react';
declare const UniqueProvider: React.FC<React.PropsWithChildren>;
export default UniqueProvider;
+46
View File
@@ -0,0 +1,46 @@
"use client";
import React from 'react';
import { UniqueProvider as RcUniqueProvider } from '@rc-component/trigger';
import MotionContent from './MotionContent';
const cachedPlacements = [null, null];
function uniqueBuiltinPlacements(ori) {
if (cachedPlacements[0] !== ori) {
const target = {};
Object.keys(ori).forEach(placement => {
target[placement] = {
...ori[placement],
dynamicInset: false
};
});
cachedPlacements[0] = ori;
cachedPlacements[1] = target;
}
return cachedPlacements[1];
}
const UniqueProvider = ({
children
}) => {
const renderPopup = options => {
const {
id,
builtinPlacements,
popup
} = options;
const popupEle = typeof popup === 'function' ? popup() : popup;
const parsedPlacements = uniqueBuiltinPlacements(builtinPlacements);
return {
...options,
getPopupContainer: null,
arrow: false,
popup: /*#__PURE__*/React.createElement(MotionContent, {
key: id
}, popupEle),
builtinPlacements: parsedPlacements
};
};
return /*#__PURE__*/React.createElement(RcUniqueProvider, {
postTriggerProps: renderPopup
}, children);
};
export default UniqueProvider;
@@ -0,0 +1,8 @@
import type { AbstractTooltipProps } from '..';
import type { TooltipConfig } from '../../config-provider/context';
interface MergedArrow {
show: boolean;
pointAtCenter?: boolean;
}
declare const useMergedArrow: (providedArrow?: AbstractTooltipProps["arrow"], providedContextArrow?: TooltipConfig["arrow"]) => MergedArrow;
export default useMergedArrow;
+16
View File
@@ -0,0 +1,16 @@
import React from 'react';
const useMergedArrow = (providedArrow, providedContextArrow) => {
const toConfig = arrow => typeof arrow === 'boolean' ? {
show: arrow
} : arrow || {};
return React.useMemo(() => {
const arrowConfig = toConfig(providedArrow);
const contextArrowConfig = toConfig(providedContextArrow);
return {
...contextArrowConfig,
...arrowConfig,
show: arrowConfig.show ?? contextArrowConfig.show ?? true
};
}, [providedArrow, providedContextArrow]);
};
export default useMergedArrow;
+94
View File
@@ -0,0 +1,94 @@
import * as React from 'react';
import type { placements as Placements } from '@rc-component/tooltip/lib/placements';
import type { TooltipProps as RcTooltipProps } from '@rc-component/tooltip/lib/Tooltip';
import type { PresetColorType } from '../_util/colors';
import type { RenderFunction } from '../_util/getRenderPropValue';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { AdjustOverflow, PlacementsConfig } from '../_util/placements';
import type { LiteralUnion } from '../_util/type';
import PurePanel from './PurePanel';
import UniqueProvider from './UniqueProvider';
export type { AdjustOverflow, PlacementsConfig };
export interface TooltipRef {
forceAlign: VoidFunction;
/** Wrapped dom element. Not promise valid if child not support ref */
nativeElement: HTMLElement;
/** Popup dom element */
popupElement: HTMLDivElement;
}
export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
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;
}
interface LegacyTooltipProps extends Partial<Omit<RcTooltipProps, 'children' | 'visible' | 'defaultVisible' | 'onVisibleChange' | 'afterVisibleChange' | 'destroyTooltipOnHide' | 'classNames' | 'styles'>> {
open?: RcTooltipProps['visible'];
defaultOpen?: RcTooltipProps['defaultVisible'];
onOpenChange?: RcTooltipProps['onVisibleChange'];
afterOpenChange?: RcTooltipProps['afterVisibleChange'];
}
export type TooltipSemanticName = keyof TooltipSemanticClassNames & keyof TooltipSemanticStyles;
export type TooltipSemanticClassNames = {
root?: string;
container?: string;
arrow?: string;
};
export type TooltipSemanticStyles = {
root?: React.CSSProperties;
container?: React.CSSProperties;
arrow?: React.CSSProperties;
};
export type TooltipClassNamesType = SemanticClassNamesType<TooltipProps, TooltipSemanticClassNames>;
export type TooltipStylesType = SemanticStylesType<TooltipProps, TooltipSemanticStyles>;
export interface AbstractTooltipProps extends LegacyTooltipProps {
style?: React.CSSProperties;
className?: string;
rootClassName?: string;
color?: LiteralUnion<PresetColorType>;
placement?: TooltipPlacement;
builtinPlacements?: typeof Placements;
openClassName?: string;
arrow?: boolean | {
pointAtCenter?: boolean;
};
autoAdjustOverflow?: boolean | AdjustOverflow;
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
children?: React.ReactNode;
/**
* @since 5.25.0
*/
destroyOnHidden?: boolean;
/** @deprecated Please use `destroyOnHidden` instead */
destroyTooltipOnHide?: boolean | {
keepParent?: boolean;
};
/** @deprecated Please use `styles.root` instead */
overlayStyle?: React.CSSProperties;
/** @deprecated Please use `styles.container` instead */
overlayInnerStyle?: React.CSSProperties;
/** @deprecated Please use `classNames.root` instead */
overlayClassName?: string;
}
export interface TooltipProps extends AbstractTooltipProps {
title?: React.ReactNode | RenderFunction;
overlay?: React.ReactNode | RenderFunction;
classNames?: TooltipClassNamesType;
styles?: TooltipStylesType;
}
interface InternalTooltipProps extends TooltipProps {
}
declare const InternalTooltip: React.ForwardRefExoticComponent<InternalTooltipProps & React.RefAttributes<TooltipRef>>;
type CompoundedComponent = typeof InternalTooltip & {
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
UniqueProvider: typeof UniqueProvider;
};
declare const Tooltip: CompoundedComponent;
export default Tooltip;
+219
View File
@@ -0,0 +1,219 @@
"use client";
import * as React from 'react';
import RcTooltip from '@rc-component/tooltip';
import { useControlledState } from '@rc-component/util';
import { clsx } from 'clsx';
import ContextIsolator from '../_util/ContextIsolator';
import { useMergeSemantic, useZIndex } from '../_util/hooks';
import { getTransitionName } from '../_util/motion';
import getPlacements from '../_util/placements';
import { cloneElement, isFragment } from '../_util/reactNode';
import { devUseWarning } from '../_util/warning';
import ZIndexContext from '../_util/zindexContext';
import { useComponentConfig } from '../config-provider/context';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import TableMeasureRowContext from '../table/TableMeasureRowContext';
import { useToken } from '../theme/internal';
import useMergedArrow from './hook/useMergedArrow';
import PurePanel from './PurePanel';
import useStyle from './style';
import UniqueProvider from './UniqueProvider';
import { parseColor } from './util';
const InternalTooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
prefixCls: customizePrefixCls,
openClassName,
getTooltipContainer,
color,
children,
afterOpenChange,
arrow: tooltipArrow,
destroyTooltipOnHide,
destroyOnHidden,
title,
overlay,
trigger,
builtinPlacements,
autoAdjustOverflow = true,
motion,
getPopupContainer,
placement = 'top',
mouseEnterDelay = 0.1,
mouseLeaveDelay = 0.1,
rootClassName,
styles,
classNames,
onOpenChange,
// Legacy
overlayInnerStyle,
overlayStyle,
overlayClassName,
...restProps
} = props;
const [, token] = useToken();
const injectFromPopover = props['data-popover-inject'];
const {
getPopupContainer: getContextPopupContainer,
getPrefixCls,
direction,
...semanticConfig
} = useComponentConfig('tooltip');
// When injected from Popover/Popconfirm, skip tooltip-specific semantic config
// to prevent ConfigProvider tooltip config from leaking into those components
const {
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles,
arrow: contextArrow,
trigger: contextTrigger
} = injectFromPopover ? {} : semanticConfig;
const mergedArrow = useMergedArrow(tooltipArrow, contextArrow);
const mergedShowArrow = mergedArrow.show;
const mergedTrigger = trigger || contextTrigger || 'hover';
const mergedGetPopupContainer = getPopupContainer || getContextPopupContainer;
const mergedDestroyOnHidden = destroyOnHidden ?? !!destroyTooltipOnHide;
const inTableMeasureRow = React.useContext(TableMeasureRowContext);
// ============================== Ref ===============================
const warning = devUseWarning('Tooltip');
const tooltipRef = React.useRef(null);
const forceAlign = () => {
tooltipRef.current?.forceAlign();
};
React.useImperativeHandle(ref, () => ({
forceAlign,
nativeElement: tooltipRef.current?.nativeElement,
popupElement: tooltipRef.current?.popupElement
}));
// ============================== Warn ==============================
if (process.env.NODE_ENV !== 'production') {
[['overlayStyle', 'styles.root'], ['overlayInnerStyle', 'styles.container'], ['overlayClassName', 'classNames.root'], ['destroyTooltipOnHide', 'destroyOnHidden']].forEach(([deprecatedName, newName]) => {
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
});
process.env.NODE_ENV !== "production" ? warning(!destroyTooltipOnHide || typeof destroyTooltipOnHide === 'boolean', 'usage', '`destroyTooltipOnHide` no need config `keepParent` anymore. Please use `boolean` value directly.') : void 0;
}
// ============================== Open ==============================
const [open, setOpen] = useControlledState(props.defaultOpen ?? false, props.open);
const noTitle = !title && !overlay && title !== 0; // overlay for old version compatibility
const onInternalOpenChange = vis => {
setOpen(noTitle ? false : vis);
if (!noTitle && onOpenChange) {
onOpenChange(vis);
}
};
const tooltipPlacements = React.useMemo(() => {
return builtinPlacements || getPlacements({
arrowPointAtCenter: mergedArrow?.pointAtCenter ?? false,
autoAdjustOverflow,
arrowWidth: mergedShowArrow ? token.sizePopupArrow : 0,
borderRadius: token.borderRadius,
offset: token.marginXXS,
visibleFirst: true
});
}, [mergedArrow, builtinPlacements, token, mergedShowArrow, autoAdjustOverflow]);
const memoOverlay = React.useMemo(() => {
if (title === 0) {
return title;
}
return overlay || title || '';
}, [overlay, title]);
const memoOverlayWrapper = /*#__PURE__*/React.createElement(ContextIsolator, {
space: true,
form: true
}, typeof memoOverlay === 'function' ? memoOverlay() : memoOverlay);
// =========== Merged Props for Semantic ===========
const mergedProps = {
...props,
trigger: mergedTrigger,
builtinPlacements: tooltipPlacements,
getPopupContainer: mergedGetPopupContainer,
destroyOnHidden: mergedDestroyOnHidden
};
const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
let tempOpen = open;
// Hide tooltip when there is no title or in table measure row
if (!('open' in props) && noTitle || inTableMeasureRow) {
tempOpen = false;
}
// ============================= Render =============================
const child = /*#__PURE__*/React.isValidElement(children) && !isFragment(children) ? children : /*#__PURE__*/React.createElement("span", null, children);
const childProps = child.props;
const childCls = !childProps.className || typeof childProps.className === 'string' ? clsx(childProps.className, openClassName || `${prefixCls}-open`) : childProps.className;
// Style
const rootCls = useCSSVarCls(prefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls, !injectFromPopover);
// Color
const colorInfo = parseColor(rootPrefixCls, prefixCls, color);
const arrowContentStyle = colorInfo.arrowStyle;
const themeCls = clsx(rootCls, hashId, cssVarCls);
const rootClassNames = clsx(overlayClassName, {
[`${prefixCls}-rtl`]: direction === 'rtl'
}, colorInfo.className, rootClassName, themeCls, contextClassName, mergedClassNames.root);
// ============================ zIndex ============================
const [zIndex, contextZIndex] = useZIndex('Tooltip', restProps.zIndex);
const containerStyle = {
...mergedStyles.container,
...overlayInnerStyle,
...colorInfo.overlayStyle
};
const content = /*#__PURE__*/React.createElement(RcTooltip, {
unique: true,
...restProps,
zIndex: zIndex,
showArrow: mergedShowArrow,
placement: placement,
mouseEnterDelay: mouseEnterDelay,
mouseLeaveDelay: mouseLeaveDelay,
prefixCls: prefixCls,
classNames: {
root: rootClassNames,
container: mergedClassNames.container,
arrow: mergedClassNames.arrow,
uniqueContainer: clsx(themeCls, mergedClassNames.container)
},
styles: {
root: {
...arrowContentStyle,
...mergedStyles.root,
...contextStyle,
...overlayStyle
},
container: containerStyle,
uniqueContainer: containerStyle,
arrow: mergedStyles.arrow
},
ref: tooltipRef,
overlay: memoOverlayWrapper,
visible: tempOpen,
onVisibleChange: onInternalOpenChange,
afterVisibleChange: afterOpenChange,
arrowContent: /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-arrow-content`
}),
motion: {
motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', typeof motion?.motionName === 'string' ? motion?.motionName : undefined),
motionDeadline: 1000
},
trigger: mergedTrigger,
builtinPlacements: tooltipPlacements,
getTooltipContainer: mergedGetPopupContainer,
destroyOnHidden: mergedDestroyOnHidden
}, tempOpen ? cloneElement(child, {
className: childCls
}) : child);
return /*#__PURE__*/React.createElement(ZIndexContext.Provider, {
value: contextZIndex
}, content);
});
const Tooltip = InternalTooltip;
if (process.env.NODE_ENV !== 'production') {
Tooltip.displayName = 'Tooltip';
}
Tooltip._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
Tooltip.UniqueProvider = UniqueProvider;
export default Tooltip;
+19
View File
@@ -0,0 +1,19 @@
import type { ArrowOffsetToken } from '../../style/placementArrow';
import type { ArrowToken } from '../../style/roundedArrow';
import type { GetDefaultToken } from '../../theme/internal';
export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
/**
* @since 6.2.0
* @desc 文字提示最大宽度
* @descEN Max width of tooltip
*/
maxWidth: number;
/**
* @desc 文字提示 z-index
* @descEN z-index of tooltip
*/
zIndexPopup: number;
}
export declare const prepareComponentToken: GetDefaultToken<'Tooltip'>;
declare const _default: (prefixCls: string, rootCls: string, injectStyle?: boolean) => readonly [string, string];
export default _default;
+165
View File
@@ -0,0 +1,165 @@
import { unit } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import { initFadeMotion, initZoomMotion } from '../../style/motion';
import getArrowStyle, { getArrowOffsetToken, MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
import { getArrowToken } from '../../style/roundedArrow';
import { genPresetColor, genStyleHooks, mergeToken } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
const FALL_BACK_ORIGIN = '50%';
const genTooltipStyle = token => {
const {
calc,
componentCls,
// ant-tooltip
tooltipMaxWidth,
tooltipColor,
tooltipBg,
tooltipBorderRadius,
zIndexPopup,
controlHeight,
boxShadowSecondary,
paddingSM,
paddingXS,
arrowOffsetHorizontal,
sizePopupArrow,
antCls
} = token;
const [varName, varRef] = genCssVar(antCls, 'tooltip');
// arrowOffsetHorizontal + arrowWidth + borderRadius
const edgeAlignMinWidth = calc(tooltipBorderRadius).add(sizePopupArrow).add(arrowOffsetHorizontal).equal();
// borderRadius * 2 + arrowWidth
const centerAlignMinWidth = calc(tooltipBorderRadius).mul(2).add(sizePopupArrow).equal();
const sharedBodyStyle = {
minWidth: centerAlignMinWidth,
minHeight: controlHeight,
padding: `${unit(token.calc(paddingSM).div(2).equal())} ${unit(paddingXS)}`,
color: varRef('overlay-color', tooltipColor),
textAlign: 'start',
textDecoration: 'none',
wordWrap: 'break-word',
backgroundColor: tooltipBg,
borderRadius: tooltipBorderRadius,
boxShadow: boxShadowSecondary,
boxSizing: 'border-box'
};
const sharedTransformOrigin = {
// When use `autoArrow`, origin will follow the arrow position
[varName('valid-offset-x')]: varRef('arrow-offset-x', 'var(--arrow-x)'),
transformOrigin: [varRef('valid-offset-x', FALL_BACK_ORIGIN), `var(--arrow-y, ${FALL_BACK_ORIGIN})`].join(' ')
};
return [{
[componentCls]: {
...resetComponent(token),
position: 'absolute',
zIndex: zIndexPopup,
display: 'block',
width: 'max-content',
maxWidth: tooltipMaxWidth,
visibility: 'visible',
...sharedTransformOrigin,
'&-hidden': {
display: 'none'
},
[varName('arrow-background-color')]: tooltipBg,
// Wrapper for the tooltip content
[`${componentCls}-container`]: [sharedBodyStyle, initFadeMotion(token, true)],
[`&:has(~ ${componentCls}-unique-container)`]: {
[`${componentCls}-container`]: {
border: 'none',
background: 'transparent',
boxShadow: 'none'
}
},
// Align placement should have another min width
[[`&-placement-topLeft`, `&-placement-topRight`, `&-placement-bottomLeft`, `&-placement-bottomRight`].join(',')]: {
minWidth: edgeAlignMinWidth
},
// Limit left and right placement radius
[[`&-placement-left`, `&-placement-leftTop`, `&-placement-leftBottom`, `&-placement-right`, `&-placement-rightTop`, `&-placement-rightBottom`].join(',')]: {
[`${componentCls}-inner`]: {
borderRadius: token.min(tooltipBorderRadius, MAX_VERTICAL_CONTENT_RADIUS)
}
},
[`${componentCls}-content`]: {
position: 'relative'
},
// generator for preset color
...genPresetColor(token, (colorKey, {
darkColor
}) => ({
[`&${componentCls}-${colorKey}`]: {
[`${componentCls}-container`]: {
backgroundColor: darkColor
},
[`${componentCls}-arrow`]: {
[varName('arrow-background-color')]: darkColor
}
}
})),
// RTL
'&-rtl': {
direction: 'rtl'
}
}
},
// Arrow Style
getArrowStyle(token, varRef('arrow-background-color')),
// Pure Render
{
[`${componentCls}-pure`]: {
position: 'relative',
maxWidth: 'none',
margin: token.sizePopupArrow
}
},
// Unique Body
{
[`${componentCls}-unique-container`]: {
...sharedBodyStyle,
...sharedTransformOrigin,
position: 'absolute',
zIndex: calc(zIndexPopup).sub(1).equal(),
'&-hidden': {
display: 'none'
},
'&-visible': {
transition: `all ${token.motionDurationSlow}`
}
}
}];
};
// ============================== Export ==============================
export const prepareComponentToken = token => ({
zIndexPopup: token.zIndexPopupBase + 70,
maxWidth: 250,
...getArrowOffsetToken({
contentRadius: token.borderRadius,
limitVerticalRadius: true
}),
...getArrowToken(mergeToken(token, {
borderRadiusOuter: Math.min(token.borderRadiusOuter, 4)
}))
});
export default (prefixCls, rootCls, injectStyle = true) => {
const useStyle = genStyleHooks('Tooltip', token => {
const {
borderRadius,
colorTextLightSolid,
colorBgSpotlight,
maxWidth
} = token;
const TooltipToken = mergeToken(token, {
// default variables
tooltipMaxWidth: maxWidth,
tooltipColor: colorTextLightSolid,
tooltipBorderRadius: borderRadius,
tooltipBg: colorBgSpotlight
});
return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
}, prepareComponentToken, {
resetStyle: false,
// Popover use Tooltip as internal component. We do not need to handle this.
injectStyle
});
return useStyle(prefixCls, rootCls);
};
+6
View File
@@ -0,0 +1,6 @@
import type * as React from 'react';
export declare const parseColor: (rootPrefixCls: string, prefixCls: string, color?: string) => {
className: string;
overlayStyle: React.CSSProperties;
arrowStyle: React.CSSProperties;
};
+26
View File
@@ -0,0 +1,26 @@
import { clsx } from 'clsx';
import { isPresetColor } from '../_util/colors';
import { generateColor } from '../color-picker/util';
import { genCssVar } from '../theme/util/genStyleUtils';
export const parseColor = (rootPrefixCls, prefixCls, color) => {
const isInternalColor = isPresetColor(color);
const [varName] = genCssVar(rootPrefixCls, 'tooltip');
const className = clsx({
[`${prefixCls}-${color}`]: color && isInternalColor
});
const overlayStyle = {};
const arrowStyle = {};
const rgb = generateColor(color).toRgb();
const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
const textColor = luminance < 0.5 ? '#FFF' : '#000';
if (color && !isInternalColor) {
overlayStyle.background = color;
overlayStyle[varName('overlay-color')] = textColor;
arrowStyle[varName('arrow-background-color')] = color;
}
return {
className,
overlayStyle,
arrowStyle
};
};