Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 8 additions & 18 deletions src/Popup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,16 @@ export interface ContentProps {
}

const Popup: React.FC<ContentProps> = (props) => {
const {
children,
prefixCls,
id,
overlayInnerStyle: innerStyle,
bodyClassName,
className,
style,
} = props;
const { children, prefixCls, id, className, style, bodyClassName, overlayInnerStyle } = props;

return (
<div className={classNames(`${prefixCls}-content`, className)} style={style}>
<div
className={classNames(`${prefixCls}-inner`, bodyClassName)}
id={id}
role="tooltip"
style={innerStyle}
>
{typeof children === 'function' ? children() : children}
</div>
<div
id={id}
className={classNames(`${prefixCls}-body`, className, bodyClassName)}
style={{ ...overlayInnerStyle, ...style }}
role="tooltip"
>
{typeof children === 'function' ? children() : children}
</div>
);
};
Expand Down
63 changes: 41 additions & 22 deletions src/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { useImperativeHandle, useRef } from 'react';
import { placements } from './placements';
import Popup from './Popup';

export type SemanticName = 'root' | 'arrow' | 'body';

export interface TooltipProps
extends Pick<
TriggerProps,
Expand All @@ -21,47 +23,46 @@ export interface TooltipProps
| 'forceRender'
| 'popupVisible'
> {
// Style
classNames?: Partial<Record<SemanticName, string>>;
styles?: Partial<Record<SemanticName, React.CSSProperties>>;

/** Config popup motion */
motion?: TriggerProps['popupMotion'];

/** @deprecated Please use `styles={{ root: {} }}` */
overlayStyle?: React.CSSProperties;
/** @deprecated Please use `classNames={{ root: '' }}` */
overlayClassName?: string;
/** @deprecated Please use `styles={{ body: {} }}` */
overlayInnerStyle?: React.CSSProperties;

// Rest
trigger?: ActionType | ActionType[];
defaultVisible?: boolean;
visible?: boolean;
placement?: string;
/** Config popup motion */
motion?: TriggerProps['popupMotion'];

onVisibleChange?: (visible: boolean) => void;
afterVisibleChange?: (visible: boolean) => void;
overlay: (() => React.ReactNode) | React.ReactNode;
/** @deprecated Please use `styles={{ root: {} }}` */
overlayStyle?: React.CSSProperties;
/** @deprecated Please use `classNames={{ root: '' }}` */
overlayClassName?: string;

getTooltipContainer?: (node: HTMLElement) => HTMLElement;
destroyOnHidden?: boolean;
align?: AlignType;
showArrow?: boolean | ArrowType;
arrowContent?: React.ReactNode;
id?: string;
/** @deprecated Please use `styles={{ body: {} }}` */
overlayInnerStyle?: React.CSSProperties;

zIndex?: number;
styles?: TooltipStyles;
classNames?: TooltipClassNames;

/**
* Configures Tooltip to reuse the background for transition usage.
* This is an experimental API and may not be stable.
*/
unique?: TriggerProps['unique'];
}

export interface TooltipStyles {
root?: React.CSSProperties;
body?: React.CSSProperties;
}

export interface TooltipClassNames {
root?: string;
body?: string;
}

export interface TooltipRef extends TriggerRef {}

const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
Expand Down Expand Up @@ -108,7 +109,8 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
prefixCls={prefixCls}
id={mergedId}
bodyClassName={tooltipClassNames?.body}
overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.body }}
overlayInnerStyle={overlayInnerStyle}
style={tooltipStyles?.body}
>
{overlay}
</Popup>
Expand All @@ -124,6 +126,23 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
return React.cloneElement<any>(children, childProps) as any;
};

// Process arrow configuration
const getArrowConfig = () => {
if (!showArrow) {
return false;
}

// Convert true to object for unified processing
const arrowConfig = showArrow === true ? {} : showArrow;

// Apply semantic styles with unified logic
return {
...arrowConfig,
className: classNames(arrowConfig.className, tooltipClassNames?.arrow),
content: arrowConfig.content || arrowContent,
};
};

return (
<Trigger
popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
Expand All @@ -143,7 +162,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
mouseLeaveDelay={mouseLeaveDelay}
popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
mouseEnterDelay={mouseEnterDelay}
arrow={showArrow}
arrow={getArrowConfig()}
{...extraProps}
>
{getChildren()}
Expand Down
10 changes: 5 additions & 5 deletions tests/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { act, fireEvent, render } from '@testing-library/react';
import React from 'react';
import Tooltip, { TooltipRef } from '../src';
import Tooltip, { type TooltipRef } from '../src';

const verifyContent = (wrapper: HTMLElement, content: string) => {
expect(wrapper.querySelector('.x-content').textContent).toBe(content);
Expand Down Expand Up @@ -73,7 +73,7 @@ describe('rc-tooltip', () => {
);
fireEvent.click(container.querySelector('.target'));
expect(
(container.querySelector('.rc-tooltip-inner') as HTMLElement).style.background,
(container.querySelector('.rc-tooltip-body') as HTMLElement).style.background,
).toEqual('red');
});

Expand Down Expand Up @@ -269,11 +269,11 @@ describe('rc-tooltip', () => {
);

const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-inner') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;

// 验证 classNames
expect(tooltipElement.classList).toContain('custom-root');
expect(tooltipBodyElement.classList).toContain('custom-body');
expect(tooltipElement).toHaveClass('custom-root');
expect(tooltipBodyElement).toHaveClass('custom-body');

// 验证 styles
expect(tooltipElement.style.backgroundColor).toBe('blue');
Expand Down