mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 04:13:13 +08:00
feat: ConfigProvider support tooltip (#51872)
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* feat: ConfigProvider support tooltip * fix * fix * fix * refactor: inner to body * revert SemanticPreview update * fix * clear unused * update Semantic demo * update locale content descrption
This commit is contained in:
parent
d8104505da
commit
ce87c614e1
@ -111,12 +111,14 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
|
|||||||
const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
|
const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
|
||||||
const containerRect = containerRef.current?.getBoundingClientRect();
|
const containerRect = containerRef.current?.getBoundingClientRect();
|
||||||
const targetRect = targetElement?.getBoundingClientRect();
|
const targetRect = targetElement?.getBoundingClientRect();
|
||||||
|
|
||||||
setMarkPos([
|
setMarkPos([
|
||||||
(targetRect?.left || 0) - (containerRect?.left || 0),
|
(targetRect?.left || 0) - (containerRect?.left || 0),
|
||||||
(targetRect?.top || 0) - (containerRect?.top || 0),
|
(targetRect?.top || 0) - (containerRect?.top || 0),
|
||||||
targetRect?.width || 0,
|
targetRect?.width || 0,
|
||||||
targetRect?.height || 0,
|
targetRect?.height || 0,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
timerRef.current = setTimeout(() => {
|
timerRef.current = setTimeout(() => {
|
||||||
setPositionMotion(true);
|
setPositionMotion(true);
|
||||||
}, 10);
|
}, 10);
|
||||||
|
@ -34,6 +34,7 @@ import type { TourProps } from '../tour/interface';
|
|||||||
import type { TransferProps } from '../transfer';
|
import type { TransferProps } from '../transfer';
|
||||||
import type { TreeSelectProps } from '../tree-select';
|
import type { TreeSelectProps } from '../tree-select';
|
||||||
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
||||||
|
import type { TooltipProps } from '../tooltip';
|
||||||
|
|
||||||
export const defaultPrefixCls = 'ant';
|
export const defaultPrefixCls = 'ant';
|
||||||
export const defaultIconPrefixCls = 'anticon';
|
export const defaultIconPrefixCls = 'anticon';
|
||||||
@ -176,6 +177,8 @@ export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch'
|
|||||||
|
|
||||||
export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
|
export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
|
||||||
|
|
||||||
|
export type TooltipConfig = Pick<TooltipProps, 'className' | 'style' | 'styles' | 'classNames'>;
|
||||||
|
|
||||||
export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
|
export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
|
||||||
|
|
||||||
export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
|
export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
|
||||||
@ -289,6 +292,7 @@ export interface ConfigConsumerProps {
|
|||||||
timeline?: ComponentStyleConfig;
|
timeline?: ComponentStyleConfig;
|
||||||
timePicker?: TimePickerConfig;
|
timePicker?: TimePickerConfig;
|
||||||
tour?: TourConfig;
|
tour?: TourConfig;
|
||||||
|
tooltip?: TooltipConfig;
|
||||||
upload?: ComponentStyleConfig;
|
upload?: ComponentStyleConfig;
|
||||||
notification?: NotificationConfig;
|
notification?: NotificationConfig;
|
||||||
tree?: ComponentStyleConfig;
|
tree?: ComponentStyleConfig;
|
||||||
|
@ -162,6 +162,7 @@ const {
|
|||||||
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
| tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |
|
| tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |
|
||||||
|
| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 |
|
||||||
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
|
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
|
||||||
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
|
@ -51,6 +51,7 @@ import type {
|
|||||||
Theme,
|
Theme,
|
||||||
ThemeConfig,
|
ThemeConfig,
|
||||||
TimePickerConfig,
|
TimePickerConfig,
|
||||||
|
TooltipConfig,
|
||||||
TourConfig,
|
TourConfig,
|
||||||
TransferConfig,
|
TransferConfig,
|
||||||
TreeSelectConfig,
|
TreeSelectConfig,
|
||||||
@ -235,6 +236,7 @@ export interface ConfigProviderProps {
|
|||||||
*/
|
*/
|
||||||
wave?: WaveConfig;
|
wave?: WaveConfig;
|
||||||
tour?: TourConfig;
|
tour?: TourConfig;
|
||||||
|
tooltip?: TooltipConfig;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ProviderChildrenProps extends ConfigProviderProps {
|
interface ProviderChildrenProps extends ConfigProviderProps {
|
||||||
@ -389,6 +391,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
|
|||||||
dropdown,
|
dropdown,
|
||||||
warning: warningConfig,
|
warning: warningConfig,
|
||||||
tour,
|
tour,
|
||||||
|
tooltip,
|
||||||
floatButtonGroup,
|
floatButtonGroup,
|
||||||
variant,
|
variant,
|
||||||
inputNumber,
|
inputNumber,
|
||||||
@ -489,6 +492,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
|
|||||||
dropdown,
|
dropdown,
|
||||||
warning: warningConfig,
|
warning: warningConfig,
|
||||||
tour,
|
tour,
|
||||||
|
tooltip,
|
||||||
floatButtonGroup,
|
floatButtonGroup,
|
||||||
variant,
|
variant,
|
||||||
inputNumber,
|
inputNumber,
|
||||||
|
@ -164,6 +164,7 @@ const {
|
|||||||
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
| tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |
|
| tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |
|
||||||
|
| tooltip | 设置 Tooltip 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip-cn#api) } | - | 5.23.0 |
|
||||||
| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
|
| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
|
||||||
| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||||
|
@ -116,7 +116,7 @@ const MenuItem: GenericComponent = (props) => {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
{...tooltipProps}
|
{...tooltipProps}
|
||||||
placement={direction === 'rtl' ? 'left' : 'right'}
|
placement={direction === 'rtl' ? 'left' : 'right'}
|
||||||
overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
|
classNames={{ root: `${prefixCls}-inline-collapsed-tooltip` }}
|
||||||
>
|
>
|
||||||
{returnNode}
|
{returnNode}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@ -601,4 +601,33 @@ describe('Tooltip', () => {
|
|||||||
expect(error).toHaveBeenCalled();
|
expect(error).toHaveBeenCalled();
|
||||||
error.mockRestore();
|
error.mockRestore();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should apply custom styles to Tooltip', () => {
|
||||||
|
const customClassNames = {
|
||||||
|
body: 'custom-body',
|
||||||
|
root: 'custom-root',
|
||||||
|
};
|
||||||
|
|
||||||
|
const customStyles = {
|
||||||
|
body: { color: 'red' },
|
||||||
|
root: { backgroundColor: 'blue' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const { container } = render(
|
||||||
|
<Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
|
||||||
|
<button type="button">button</button>
|
||||||
|
</Tooltip>,
|
||||||
|
);
|
||||||
|
|
||||||
|
const tooltipElement = container.querySelector('.ant-tooltip') as HTMLElement;
|
||||||
|
const tooltipBodyElement = container.querySelector('.ant-tooltip-inner') as HTMLElement;
|
||||||
|
|
||||||
|
// 验证 classNames
|
||||||
|
expect(tooltipElement.classList).toContain('custom-root');
|
||||||
|
expect(tooltipBodyElement.classList).toContain('custom-body');
|
||||||
|
|
||||||
|
// 验证 styles
|
||||||
|
expect(tooltipElement.style.backgroundColor).toBe('blue');
|
||||||
|
expect(tooltipBodyElement.style.color).toBe('red');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
49
components/tooltip/demo/_semantic.tsx
Normal file
49
components/tooltip/demo/_semantic.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Tooltip } from 'antd';
|
||||||
|
|
||||||
|
import SemanticPreview from '../../../.dumi/components/SemanticPreview';
|
||||||
|
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||||
|
|
||||||
|
const locales = {
|
||||||
|
cn: {
|
||||||
|
root: '根节点 (包含箭头、内容元素)',
|
||||||
|
body: '内容元素',
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
root: 'Root element (including arrows, content elements)',
|
||||||
|
body: 'Body element',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
|
||||||
|
const divRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
|
||||||
|
<Tooltip
|
||||||
|
title="prompt text"
|
||||||
|
open
|
||||||
|
placement="top"
|
||||||
|
autoAdjustOverflow={false}
|
||||||
|
getPopupContainer={() => divRef.current}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [locale] = useLocale(locales);
|
||||||
|
return (
|
||||||
|
<SemanticPreview
|
||||||
|
semantics={[
|
||||||
|
{ name: 'root', desc: locale.root, version: '5.23.0' },
|
||||||
|
{ name: 'body', desc: locale.body, version: '5.23.0' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<BlockList />
|
||||||
|
</SemanticPreview>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
7
components/tooltip/demo/config-debug.md
Normal file
7
components/tooltip/demo/config-debug.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
debug config provide
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
debug config provide
|
21
components/tooltip/demo/config-debug.tsx
Normal file
21
components/tooltip/demo/config-debug.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ConfigProvider, Tooltip } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<div>
|
||||||
|
<ConfigProvider
|
||||||
|
tooltip={{
|
||||||
|
className: 'cutsom-tooltip-test',
|
||||||
|
style: { background: 'yellow' },
|
||||||
|
styles: { body: { color: 'red', borderRadius: 50 }, root: { color: 'green' } },
|
||||||
|
classNames: { root: 'custom-root', body: 'custom-body' },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip title="prompt text">
|
||||||
|
<span>Tooltip will show on mouse enter.</span>
|
||||||
|
</Tooltip>
|
||||||
|
</ConfigProvider>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
@ -41,6 +41,10 @@ Common props ref:[Common props](/docs/react/common-props)
|
|||||||
|
|
||||||
<embed src="./shared/sharedProps.en-US.md"></embed>
|
<embed src="./shared/sharedProps.en-US.md"></embed>
|
||||||
|
|
||||||
|
## Semantic DOM
|
||||||
|
|
||||||
|
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||||||
|
|
||||||
## Design Token
|
## Design Token
|
||||||
|
|
||||||
<ComponentTokenTable component="Tooltip"></ComponentTokenTable>
|
<ComponentTokenTable component="Tooltip"></ComponentTokenTable>
|
||||||
|
@ -91,6 +91,14 @@ interface LegacyTooltipProps
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface AbstractTooltipProps extends LegacyTooltipProps {
|
export interface AbstractTooltipProps extends LegacyTooltipProps {
|
||||||
|
styles?: {
|
||||||
|
root?: React.CSSProperties;
|
||||||
|
body?: React.CSSProperties;
|
||||||
|
};
|
||||||
|
classNames?: {
|
||||||
|
root?: string;
|
||||||
|
body?: string;
|
||||||
|
};
|
||||||
style?: React.CSSProperties;
|
style?: React.CSSProperties;
|
||||||
className?: string;
|
className?: string;
|
||||||
rootClassName?: string;
|
rootClassName?: string;
|
||||||
@ -130,7 +138,6 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
prefixCls: customizePrefixCls,
|
prefixCls: customizePrefixCls,
|
||||||
openClassName,
|
openClassName,
|
||||||
getTooltipContainer,
|
getTooltipContainer,
|
||||||
overlayClassName,
|
|
||||||
color,
|
color,
|
||||||
overlayInnerStyle,
|
overlayInnerStyle,
|
||||||
children,
|
children,
|
||||||
@ -153,6 +160,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
getPopupContainer: getContextPopupContainer,
|
getPopupContainer: getContextPopupContainer,
|
||||||
getPrefixCls,
|
getPrefixCls,
|
||||||
direction,
|
direction,
|
||||||
|
tooltip,
|
||||||
} = React.useContext(ConfigContext);
|
} = React.useContext(ConfigContext);
|
||||||
|
|
||||||
// ============================== Ref ===============================
|
// ============================== Ref ===============================
|
||||||
@ -181,6 +189,10 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
['onVisibleChange', 'onOpenChange'],
|
['onVisibleChange', 'onOpenChange'],
|
||||||
['afterVisibleChange', 'afterOpenChange'],
|
['afterVisibleChange', 'afterOpenChange'],
|
||||||
['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'],
|
['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'],
|
||||||
|
// todo: Warnings are not available yet, because popover and popconfirm are still in use. Wait until they are merged before processing.
|
||||||
|
// ['overlayStyle', 'styles={{ root: {} }}'],
|
||||||
|
// ['overlayInnerStyle', 'styles={{ body: {} }}'],
|
||||||
|
// ['overlayClassName', 'classNames={{ root: {} }}'],
|
||||||
].forEach(([deprecatedName, newName]) => {
|
].forEach(([deprecatedName, newName]) => {
|
||||||
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
|
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
|
||||||
});
|
});
|
||||||
@ -253,6 +265,9 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
mouseLeaveDelay = 0.1,
|
mouseLeaveDelay = 0.1,
|
||||||
overlayStyle,
|
overlayStyle,
|
||||||
rootClassName,
|
rootClassName,
|
||||||
|
overlayClassName,
|
||||||
|
styles,
|
||||||
|
classNames: tooltipClassNames,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
@ -282,12 +297,8 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
// Color
|
// Color
|
||||||
const colorInfo = parseColor(prefixCls, color);
|
const colorInfo = parseColor(prefixCls, color);
|
||||||
const arrowContentStyle = colorInfo.arrowStyle;
|
const arrowContentStyle = colorInfo.arrowStyle;
|
||||||
const formattedOverlayInnerStyle: React.CSSProperties = {
|
|
||||||
...overlayInnerStyle,
|
|
||||||
...colorInfo.overlayStyle,
|
|
||||||
};
|
|
||||||
|
|
||||||
const customOverlayClassName = classNames(
|
const rootClassNames = classNames(
|
||||||
overlayClassName,
|
overlayClassName,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||||
@ -296,8 +307,13 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
rootClassName,
|
rootClassName,
|
||||||
hashId,
|
hashId,
|
||||||
cssVarCls,
|
cssVarCls,
|
||||||
|
tooltip?.className,
|
||||||
|
tooltip?.classNames?.root,
|
||||||
|
tooltipClassNames?.root,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const bodyClassnames = classNames(tooltip?.classNames?.body, tooltipClassNames?.body);
|
||||||
|
|
||||||
// ============================ zIndex ============================
|
// ============================ zIndex ============================
|
||||||
const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex);
|
const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex);
|
||||||
|
|
||||||
@ -310,8 +326,22 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
mouseEnterDelay={mouseEnterDelay}
|
mouseEnterDelay={mouseEnterDelay}
|
||||||
mouseLeaveDelay={mouseLeaveDelay}
|
mouseLeaveDelay={mouseLeaveDelay}
|
||||||
prefixCls={prefixCls}
|
prefixCls={prefixCls}
|
||||||
overlayClassName={customOverlayClassName}
|
classNames={{ root: rootClassNames, body: bodyClassnames }}
|
||||||
overlayStyle={{ ...arrowContentStyle, ...overlayStyle }}
|
styles={{
|
||||||
|
root: {
|
||||||
|
...arrowContentStyle,
|
||||||
|
...tooltip?.styles?.root,
|
||||||
|
...tooltip?.style,
|
||||||
|
...overlayStyle,
|
||||||
|
...styles?.root,
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
...tooltip?.styles?.body,
|
||||||
|
...overlayInnerStyle,
|
||||||
|
...styles?.body,
|
||||||
|
...colorInfo.overlayStyle,
|
||||||
|
},
|
||||||
|
}}
|
||||||
getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
|
getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
|
||||||
ref={tooltipRef}
|
ref={tooltipRef}
|
||||||
builtinPlacements={tooltipPlacements}
|
builtinPlacements={tooltipPlacements}
|
||||||
@ -319,7 +349,6 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
|||||||
visible={tempOpen}
|
visible={tempOpen}
|
||||||
onVisibleChange={onOpenChange}
|
onVisibleChange={onOpenChange}
|
||||||
afterVisibleChange={afterOpenChange ?? afterVisibleChange}
|
afterVisibleChange={afterOpenChange ?? afterVisibleChange}
|
||||||
overlayInnerStyle={formattedOverlayInnerStyle}
|
|
||||||
arrowContent={<span className={`${prefixCls}-arrow-content`} />}
|
arrowContent={<span className={`${prefixCls}-arrow-content`} />}
|
||||||
motion={{
|
motion={{
|
||||||
motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),
|
motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),
|
||||||
|
@ -30,6 +30,7 @@ demo:
|
|||||||
<code src="./demo/debug.tsx" debug>Debug</code>
|
<code src="./demo/debug.tsx" debug>Debug</code>
|
||||||
<code src="./demo/disabled.tsx">禁用</code>
|
<code src="./demo/disabled.tsx">禁用</code>
|
||||||
<code src="./demo/disabled-children.tsx" debug>禁用子元素</code>
|
<code src="./demo/disabled-children.tsx" debug>禁用子元素</code>
|
||||||
|
<code src="./demo/config-debug.tsx" debug>ConfigProvider</code>
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
@ -43,6 +44,10 @@ demo:
|
|||||||
|
|
||||||
<embed src="./shared/sharedProps.zh-CN.md"></embed>
|
<embed src="./shared/sharedProps.zh-CN.md"></embed>
|
||||||
|
|
||||||
|
## Semantic DOM
|
||||||
|
|
||||||
|
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||||||
|
|
||||||
## 主题变量(Design Token)
|
## 主题变量(Design Token)
|
||||||
|
|
||||||
<ComponentTokenTable component="Tooltip"></ComponentTokenTable>
|
<ComponentTokenTable component="Tooltip"></ComponentTokenTable>
|
||||||
|
@ -147,7 +147,7 @@
|
|||||||
"rc-table": "~7.49.0",
|
"rc-table": "~7.49.0",
|
||||||
"rc-tabs": "~15.5.0",
|
"rc-tabs": "~15.5.0",
|
||||||
"rc-textarea": "~1.8.2",
|
"rc-textarea": "~1.8.2",
|
||||||
"rc-tooltip": "~6.2.1",
|
"rc-tooltip": "~6.3.2",
|
||||||
"rc-tree": "~5.10.1",
|
"rc-tree": "~5.10.1",
|
||||||
"rc-tree-select": "~5.24.5",
|
"rc-tree-select": "~5.24.5",
|
||||||
"rc-upload": "~4.8.1",
|
"rc-upload": "~4.8.1",
|
||||||
|
Loading…
Reference in New Issue
Block a user