1
This commit is contained in:
+7
@@ -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
@@ -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;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import React from 'react';
|
||||
declare const MotionContent: React.FC<React.PropsWithChildren>;
|
||||
export default MotionContent;
|
||||
+40
@@ -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;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import React from 'react';
|
||||
declare const UniqueProvider: React.FC<React.PropsWithChildren>;
|
||||
export default UniqueProvider;
|
||||
+46
@@ -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;
|
||||
+8
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user