mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
9f88c1238a
* feat: token update * chore: update test * chore: lint * chore: code clean * test: update test case * feat: radius token update * fix: form size * chore: fix steps style * chore: code clean * chore: update test case
174 lines
4.7 KiB
TypeScript
174 lines
4.7 KiB
TypeScript
import type { CSSObject } from '@ant-design/cssinjs';
|
|
import { initZoomMotion } from '../../style/motion';
|
|
import type {
|
|
FullToken,
|
|
GenerateStyle,
|
|
PresetColorType,
|
|
UseComponentStyleResult,
|
|
} from '../../theme';
|
|
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
|
|
import { resetComponent } from '../../style';
|
|
import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
|
|
|
|
export interface ComponentToken {
|
|
zIndexPopup: number;
|
|
colorBgDefault: string;
|
|
}
|
|
|
|
interface TooltipToken extends FullToken<'Tooltip'> {
|
|
// default variables
|
|
tooltipMaxWidth: number;
|
|
tooltipColor: string;
|
|
tooltipBg: string;
|
|
tooltipBorderRadius: number;
|
|
tooltipRadiusOuter: number;
|
|
}
|
|
|
|
const generatorTooltipPresetColor: GenerateStyle<TooltipToken, CSSObject> = token => {
|
|
const { componentCls } = token;
|
|
|
|
return PresetColors.reduce((previousValue: any, currentValue: keyof PresetColorType) => {
|
|
const lightColor = token[`${currentValue}-6`];
|
|
previousValue[`&${componentCls}-${currentValue}`] = {
|
|
[`${componentCls}-inner`]: {
|
|
backgroundColor: lightColor,
|
|
},
|
|
[`${componentCls}-arrow`]: {
|
|
'--antd-arrow-background-color': lightColor,
|
|
},
|
|
};
|
|
return previousValue;
|
|
}, {});
|
|
};
|
|
|
|
const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
|
|
const {
|
|
componentCls, // ant-tooltip
|
|
tooltipMaxWidth,
|
|
tooltipColor,
|
|
tooltipBg,
|
|
tooltipBorderRadius,
|
|
zIndexPopup,
|
|
controlHeight,
|
|
boxShadowSecondary,
|
|
paddingSM,
|
|
paddingXS,
|
|
tooltipRadiusOuter,
|
|
} = token;
|
|
|
|
return [
|
|
{
|
|
[componentCls]: {
|
|
...resetComponent(token),
|
|
position: 'absolute',
|
|
zIndex: zIndexPopup,
|
|
display: 'block',
|
|
'&': [{ width: 'max-content' }, { width: 'intrinsic' }],
|
|
maxWidth: tooltipMaxWidth,
|
|
visibility: 'visible',
|
|
'&-hidden': {
|
|
display: 'none',
|
|
},
|
|
|
|
'--antd-arrow-background-color': tooltipBg,
|
|
|
|
// Wrapper for the tooltip content
|
|
[`${componentCls}-inner`]: {
|
|
minWidth: controlHeight,
|
|
minHeight: controlHeight,
|
|
padding: `${paddingSM / 2}px ${paddingXS}px`,
|
|
color: tooltipColor,
|
|
textAlign: 'start',
|
|
textDecoration: 'none',
|
|
wordWrap: 'break-word',
|
|
backgroundColor: tooltipBg,
|
|
borderRadius: tooltipBorderRadius,
|
|
boxShadow: boxShadowSecondary,
|
|
},
|
|
|
|
// Limit left and right placement radius
|
|
[[
|
|
`&-placement-left`,
|
|
`&-placement-leftTop`,
|
|
`&-placement-leftBottom`,
|
|
`&-placement-right`,
|
|
`&-placement-rightTop`,
|
|
`&-placement-rightBottom`,
|
|
].join(',')]: {
|
|
[`${componentCls}-inner`]: {
|
|
borderRadius:
|
|
tooltipBorderRadius > MAX_VERTICAL_CONTENT_RADIUS
|
|
? MAX_VERTICAL_CONTENT_RADIUS
|
|
: tooltipBorderRadius,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-content`]: {
|
|
position: 'relative',
|
|
},
|
|
|
|
// generator for preset color
|
|
...generatorTooltipPresetColor(token),
|
|
|
|
// RTL
|
|
'&-rtl': {
|
|
direction: 'rtl',
|
|
},
|
|
},
|
|
},
|
|
|
|
// Arrow Style
|
|
getArrowStyle<TooltipToken>(
|
|
mergeToken<TooltipToken>(token, {
|
|
borderRadiusOuter: tooltipRadiusOuter,
|
|
}),
|
|
{
|
|
colorBg: 'var(--antd-arrow-background-color)',
|
|
showArrowCls: '',
|
|
contentRadius: tooltipBorderRadius,
|
|
limitVerticalRadius: true,
|
|
},
|
|
),
|
|
|
|
// Pure Render
|
|
{
|
|
[`${componentCls}-pure`]: {
|
|
position: 'relative',
|
|
maxWidth: 'none',
|
|
},
|
|
},
|
|
];
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => {
|
|
const useOriginHook = genComponentStyleHook(
|
|
'Tooltip',
|
|
token => {
|
|
// Popover use Tooltip as internal component. We do not need to handle this.
|
|
if (injectStyle === false) {
|
|
return [];
|
|
}
|
|
|
|
const { borderRadius, colorTextLightSolid, colorBgDefault, borderRadiusOuter } = token;
|
|
|
|
const TooltipToken = mergeToken<TooltipToken>(token, {
|
|
// default variables
|
|
tooltipMaxWidth: 250,
|
|
tooltipColor: colorTextLightSolid,
|
|
tooltipBorderRadius: borderRadius,
|
|
tooltipBg: colorBgDefault,
|
|
tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter,
|
|
});
|
|
|
|
return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
|
|
},
|
|
({ zIndexPopupBase, colorBgSpotlight }) => ({
|
|
zIndexPopup: zIndexPopupBase + 70,
|
|
colorBgDefault: colorBgSpotlight,
|
|
}),
|
|
);
|
|
|
|
return useOriginHook(prefixCls);
|
|
};
|