mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Refactor:Component Tooltip Less to cssinjs (#35340)
* refactor: add basic css layout for tooltip * style: handle the special mutilte repeat property * style: complete the custom color style * style: replace with Logical properties * style: skip check some logic property * docs: add FIXME necessary * chore: adjust bundle size and trigger the preview ci
This commit is contained in:
PCCCCCCC
GitHub
parent
6e2eff2836
commit
b3e8e2d555
@ -92,6 +92,7 @@ export interface OverrideToken {
|
||||
Menu?: MenuComponentToken;
|
||||
Layout?: {};
|
||||
Upload?: UploadComponentToken;
|
||||
Tooltip?: {};
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -10,6 +10,7 @@ import { ConfigContext } from '../config-provider';
|
||||
import { PresetColorType, PresetColorTypes } from '../_util/colors';
|
||||
import { LiteralUnion } from '../_util/type';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import useStyle from './style';
|
||||
|
||||
export { AdjustOverflow, PlacementsConfig };
|
||||
|
||||
@ -230,10 +231,17 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
[openClassName || `${prefixCls}-open`]: true,
|
||||
});
|
||||
|
||||
const customOverlayClassName = classNames(overlayClassName, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
|
||||
});
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const customOverlayClassName = classNames(
|
||||
overlayClassName,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
|
||||
},
|
||||
hashId,
|
||||
);
|
||||
|
||||
let formattedOverlayInnerStyle = overlayInnerStyle;
|
||||
let arrowContentStyle;
|
||||
@ -243,7 +251,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
arrowContentStyle = { '--antd-arrow-background-color': color };
|
||||
}
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<RcTooltip
|
||||
{...otherProps}
|
||||
prefixCls={prefixCls}
|
||||
@ -263,7 +271,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
}}
|
||||
>
|
||||
{tempVisible ? cloneElement(child, { className: childCls }) : child}
|
||||
</RcTooltip>
|
||||
</RcTooltip>,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -1,211 +1,211 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
|
||||
// @tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
|
||||
|
||||
@tooltip-arrow-shadow-width: 3px;
|
||||
// @tooltip-arrow-shadow-width: 3px;
|
||||
|
||||
@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
|
||||
@tooltip-arrow-shadow-width * 2;
|
||||
// @tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
|
||||
// @tooltip-arrow-shadow-width * 2;
|
||||
|
||||
@tooltip-arrow-offset-vertical: 5px; // 8 - 3px
|
||||
@tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
|
||||
// @tooltip-arrow-offset-vertical: 5px; // 8 - 3px
|
||||
// @tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
|
||||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{tooltip-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
position: absolute;
|
||||
z-index: @zindex-tooltip;
|
||||
display: block;
|
||||
width: max-content;
|
||||
width: intrinsic;
|
||||
max-width: @tooltip-max-width;
|
||||
visibility: visible;
|
||||
// position: absolute;
|
||||
// z-index: @zindex-tooltip;
|
||||
// display: block;
|
||||
// width: max-content;
|
||||
// width: intrinsic;
|
||||
// max-width: @tooltip-max-width;
|
||||
// visibility: visible;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
// &-hidden {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&-placement-top,
|
||||
&-placement-topLeft,
|
||||
&-placement-topRight {
|
||||
padding-bottom: @tooltip-distance;
|
||||
}
|
||||
// &-placement-top,
|
||||
// &-placement-topLeft,
|
||||
// &-placement-topRight {
|
||||
// padding-bottom: @tooltip-distance;
|
||||
// }
|
||||
|
||||
&-placement-right,
|
||||
&-placement-rightTop,
|
||||
&-placement-rightBottom {
|
||||
padding-left: @tooltip-distance;
|
||||
}
|
||||
// &-placement-right,
|
||||
// &-placement-rightTop,
|
||||
// &-placement-rightBottom {
|
||||
// padding-left: @tooltip-distance;
|
||||
// }
|
||||
|
||||
&-placement-bottom,
|
||||
&-placement-bottomLeft,
|
||||
&-placement-bottomRight {
|
||||
padding-top: @tooltip-distance;
|
||||
}
|
||||
// &-placement-bottom,
|
||||
// &-placement-bottomLeft,
|
||||
// &-placement-bottomRight {
|
||||
// padding-top: @tooltip-distance;
|
||||
// }
|
||||
|
||||
&-placement-left,
|
||||
&-placement-leftTop,
|
||||
&-placement-leftBottom {
|
||||
padding-right: @tooltip-distance;
|
||||
}
|
||||
// &-placement-left,
|
||||
// &-placement-leftTop,
|
||||
// &-placement-leftBottom {
|
||||
// padding-right: @tooltip-distance;
|
||||
// }
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
&-inner {
|
||||
min-width: 30px;
|
||||
min-height: 32px;
|
||||
padding: 6px 8px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @tooltip-border-radius;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
// // Wrapper for the tooltip content
|
||||
// &-inner {
|
||||
// min-width: 30px;
|
||||
// min-height: 32px;
|
||||
// padding: 6px 8px;
|
||||
// color: @tooltip-color;
|
||||
// text-align: left;
|
||||
// text-decoration: none;
|
||||
// word-wrap: break-word;
|
||||
// background-color: @tooltip-bg;
|
||||
// border-radius: @tooltip-border-radius;
|
||||
// box-shadow: @box-shadow-base;
|
||||
// }
|
||||
|
||||
// Arrows
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: @tooltip-arrow-rotate-width;
|
||||
height: @tooltip-arrow-rotate-width;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
// // Arrows
|
||||
// &-arrow {
|
||||
// position: absolute;
|
||||
// display: block;
|
||||
// width: @tooltip-arrow-rotate-width;
|
||||
// height: @tooltip-arrow-rotate-width;
|
||||
// overflow: hidden;
|
||||
// background: transparent;
|
||||
// pointer-events: none;
|
||||
|
||||
&-content {
|
||||
--antd-arrow-background-color: @tooltip-bg;
|
||||
// &-content {
|
||||
// --antd-arrow-background-color: @tooltip-bg;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: @tooltip-arrow-width;
|
||||
height: @tooltip-arrow-width;
|
||||
margin: auto;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
pointer-events: auto;
|
||||
.roundedArrow(@tooltip-arrow-width, 5px);
|
||||
}
|
||||
}
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// display: block;
|
||||
// width: @tooltip-arrow-width;
|
||||
// height: @tooltip-arrow-width;
|
||||
// margin: auto;
|
||||
// background-color: transparent;
|
||||
// content: '';
|
||||
// pointer-events: auto;
|
||||
// .roundedArrow(@tooltip-arrow-width, 5px);
|
||||
// }
|
||||
// }
|
||||
|
||||
&-placement-top &-arrow,
|
||||
&-placement-topLeft &-arrow,
|
||||
&-placement-topRight &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-rotate-width + 0.24px;
|
||||
// &-placement-top &-arrow,
|
||||
// &-placement-topLeft &-arrow,
|
||||
// &-placement-topRight &-arrow {
|
||||
// bottom: @tooltip-distance - @tooltip-arrow-rotate-width + 0.24px;
|
||||
|
||||
&-content {
|
||||
box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
|
||||
}
|
||||
}
|
||||
// &-content {
|
||||
// box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
// transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
&-placement-top &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
// &-placement-top &-arrow {
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
// }
|
||||
|
||||
&-placement-topLeft &-arrow {
|
||||
left: @tooltip-arrow-offset-horizontal;
|
||||
}
|
||||
// &-placement-topLeft &-arrow {
|
||||
// left: @tooltip-arrow-offset-horizontal;
|
||||
// }
|
||||
|
||||
&-placement-topRight &-arrow {
|
||||
right: @tooltip-arrow-offset-horizontal;
|
||||
}
|
||||
// &-placement-topRight &-arrow {
|
||||
// right: @tooltip-arrow-offset-horizontal;
|
||||
// }
|
||||
|
||||
&-placement-right &-arrow,
|
||||
&-placement-rightTop &-arrow,
|
||||
&-placement-rightBottom &-arrow {
|
||||
left: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
|
||||
// &-placement-right &-arrow,
|
||||
// &-placement-rightTop &-arrow,
|
||||
// &-placement-rightBottom &-arrow {
|
||||
// left: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
|
||||
|
||||
&-content {
|
||||
box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
|
||||
}
|
||||
}
|
||||
// &-content {
|
||||
// box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
// transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
&-placement-right &-arrow {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
// &-placement-right &-arrow {
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
|
||||
&-placement-rightTop &-arrow {
|
||||
top: @tooltip-arrow-offset-vertical;
|
||||
}
|
||||
// &-placement-rightTop &-arrow {
|
||||
// top: @tooltip-arrow-offset-vertical;
|
||||
// }
|
||||
|
||||
&-placement-rightBottom &-arrow {
|
||||
bottom: @tooltip-arrow-offset-vertical;
|
||||
}
|
||||
// &-placement-rightBottom &-arrow {
|
||||
// bottom: @tooltip-arrow-offset-vertical;
|
||||
// }
|
||||
|
||||
&-placement-left &-arrow,
|
||||
&-placement-leftTop &-arrow,
|
||||
&-placement-leftBottom &-arrow {
|
||||
right: @tooltip-distance - @tooltip-arrow-rotate-width + 0.08px;
|
||||
// &-placement-left &-arrow,
|
||||
// &-placement-leftTop &-arrow,
|
||||
// &-placement-leftBottom &-arrow {
|
||||
// right: @tooltip-distance - @tooltip-arrow-rotate-width + 0.08px;
|
||||
|
||||
&-content {
|
||||
box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(315deg);
|
||||
}
|
||||
}
|
||||
// &-content {
|
||||
// box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
// transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(315deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
&-placement-left &-arrow {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
// &-placement-left &-arrow {
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
|
||||
&-placement-leftTop &-arrow {
|
||||
top: @tooltip-arrow-offset-vertical;
|
||||
}
|
||||
// &-placement-leftTop &-arrow {
|
||||
// top: @tooltip-arrow-offset-vertical;
|
||||
// }
|
||||
|
||||
&-placement-leftBottom &-arrow {
|
||||
bottom: @tooltip-arrow-offset-vertical;
|
||||
}
|
||||
// &-placement-leftBottom &-arrow {
|
||||
// bottom: @tooltip-arrow-offset-vertical;
|
||||
// }
|
||||
|
||||
&-placement-bottom &-arrow,
|
||||
&-placement-bottomLeft &-arrow,
|
||||
&-placement-bottomRight &-arrow {
|
||||
top: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
|
||||
// &-placement-bottom &-arrow,
|
||||
// &-placement-bottomLeft &-arrow,
|
||||
// &-placement-bottomRight &-arrow {
|
||||
// top: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
|
||||
|
||||
&-content {
|
||||
box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(225deg);
|
||||
}
|
||||
}
|
||||
// &-content {
|
||||
// box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
// transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(225deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
&-placement-bottom &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
// &-placement-bottom &-arrow {
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
// }
|
||||
|
||||
&-placement-bottomLeft &-arrow {
|
||||
left: @tooltip-arrow-offset-horizontal;
|
||||
}
|
||||
// &-placement-bottomLeft &-arrow {
|
||||
// left: @tooltip-arrow-offset-horizontal;
|
||||
// }
|
||||
|
||||
&-placement-bottomRight &-arrow {
|
||||
right: @tooltip-arrow-offset-horizontal;
|
||||
}
|
||||
}
|
||||
// &-placement-bottomRight &-arrow {
|
||||
// right: @tooltip-arrow-offset-horizontal;
|
||||
// }
|
||||
// }
|
||||
|
||||
.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
|
||||
.generator-tooltip-preset-color(@i - 1);
|
||||
@color: extract(@preset-colors, @i);
|
||||
@lightColor: '@{color}-6';
|
||||
.@{tooltip-prefix-cls}-@{color} {
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
background-color: @@lightColor;
|
||||
}
|
||||
.@{tooltip-prefix-cls}-arrow {
|
||||
&-content::before {
|
||||
background: @@lightColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.generator-tooltip-preset-color();
|
||||
// .generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
|
||||
// .generator-tooltip-preset-color(@i - 1);
|
||||
// @color: extract(@preset-colors, @i);
|
||||
// @lightColor: '@{color}-6';
|
||||
// .@{tooltip-prefix-cls}-@{color} {
|
||||
// .@{tooltip-prefix-cls}-inner {
|
||||
// background-color: @@lightColor;
|
||||
// }
|
||||
// .@{tooltip-prefix-cls}-arrow {
|
||||
// &-content::before {
|
||||
// background: @@lightColor;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .generator-tooltip-preset-color();
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,2 +1,298 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
genComponentStyleHook,
|
||||
mergeToken,
|
||||
resetComponent,
|
||||
roundedArrow,
|
||||
PresetColors,
|
||||
} from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken, PresetColorType } from '../../_util/theme';
|
||||
|
||||
export interface TooltipToken extends FullToken<'Tooltip'> {
|
||||
// default variables
|
||||
tooltipMaxWidth: number;
|
||||
tooltipColor: string;
|
||||
tooltipBg: string;
|
||||
tooltipArrowWidth: number;
|
||||
tooltipDistance: number;
|
||||
tooltipArrowColor: string;
|
||||
tooltipBorderRadius: number;
|
||||
// component variables
|
||||
tooltipArrowShadowWidth: number;
|
||||
tooltipArrowRotateWidth: number;
|
||||
tooltipArrowOffsetVertical: number;
|
||||
tooltipArrowOffsetHorizontal: number;
|
||||
zIndexTooltip: number;
|
||||
tooltipShadowColor: string;
|
||||
}
|
||||
|
||||
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-content::before`]: {
|
||||
background: lightColor,
|
||||
},
|
||||
};
|
||||
return previousValue;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls, // ant-tooltip
|
||||
tooltipArrowOffsetHorizontal,
|
||||
tooltipArrowOffsetVertical,
|
||||
tooltipMaxWidth,
|
||||
tooltipColor,
|
||||
tooltipBg,
|
||||
tooltipArrowWidth,
|
||||
tooltipDistance,
|
||||
tooltipBorderRadius,
|
||||
tooltipShadowColor,
|
||||
tooltipArrowRotateWidth,
|
||||
tooltipArrowShadowWidth,
|
||||
zIndexTooltip,
|
||||
boxShadow,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
position: 'absolute',
|
||||
zIndex: zIndexTooltip,
|
||||
display: 'block',
|
||||
'&': [{ width: 'max-content' }, { width: 'intrinsic' }],
|
||||
maxWidth: tooltipMaxWidth,
|
||||
visibility: 'visible',
|
||||
'&-hidden': {
|
||||
display: 'none',
|
||||
},
|
||||
'&-placement-top, &-placement-topLeft, &-placement-topRight': {
|
||||
paddingBottom: tooltipDistance,
|
||||
},
|
||||
|
||||
'&-placement-right, &-placement-rightTop, &-placement-rightBottom': {
|
||||
paddingLeft: {
|
||||
_skip_check_: true,
|
||||
value: tooltipDistance,
|
||||
},
|
||||
},
|
||||
|
||||
'&-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight': {
|
||||
paddingTop: tooltipDistance,
|
||||
},
|
||||
|
||||
'&-placement-left, &-placement-leftTop, &-placement-leftBottom': {
|
||||
paddingRight: {
|
||||
_skip_check_: true,
|
||||
value: tooltipDistance,
|
||||
},
|
||||
},
|
||||
// Wrapper for the tooltip content
|
||||
[`${componentCls}-inner`]: {
|
||||
minWidth: 30, // FIXME: hardcode in v4
|
||||
minHeight: 32, // FIXME: hardcode in v4
|
||||
padding: '6px 8px', // FIXME: hardcode in v4
|
||||
color: tooltipColor,
|
||||
textAlign: 'start',
|
||||
textDecoration: 'none',
|
||||
wordWrap: 'break-word',
|
||||
backgroundColor: tooltipBg,
|
||||
borderRadius: tooltipBorderRadius,
|
||||
boxShadow,
|
||||
},
|
||||
|
||||
// Arrows
|
||||
[`${componentCls}-arrow`]: {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
width: tooltipArrowRotateWidth,
|
||||
height: tooltipArrowRotateWidth,
|
||||
overflow: 'hidden',
|
||||
background: 'transparent',
|
||||
pointerEvents: 'none',
|
||||
|
||||
'&-content': {
|
||||
'--antd-arrow-background-color': tooltipBg,
|
||||
position: 'absolute',
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineEnd: 0, // FIXME: hardcode in v4
|
||||
bottom: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
display: 'block',
|
||||
width: tooltipArrowWidth,
|
||||
height: tooltipArrowWidth,
|
||||
margin: 'auto',
|
||||
backgroundColor: 'transparent',
|
||||
content: '""',
|
||||
pointerEvents: 'auto',
|
||||
...roundedArrow(tooltipArrowWidth, 5, 'var(--antd-arrow-background-color)'), // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-top ${componentCls}-arrow, &-placement-topLeft ${componentCls}-arrow, &-placement-topRight ${componentCls}-arrow`]:
|
||||
{
|
||||
bottom: tooltipDistance - tooltipArrowRotateWidth + 0.24, // FIXME: hardcode in v4
|
||||
|
||||
'&-content': {
|
||||
boxShadow: `${tooltipArrowShadowWidth}px ${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
|
||||
transform: `translateY(${-tooltipArrowRotateWidth / 2}px) rotate(45deg)`, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-top ${componentCls}-arrow`]: {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: '50%', // FIXME: hardcode in v4
|
||||
},
|
||||
transform: 'translateX(-50%)',
|
||||
},
|
||||
|
||||
[`&-placement-topLeft ${componentCls}-arrow`]: {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: tooltipArrowOffsetHorizontal,
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-topRight ${componentCls}-arrow`]: {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: tooltipArrowOffsetHorizontal,
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-right ${componentCls}-arrow, &-placement-rightTop ${componentCls}-arrow, &-placement-rightBottom ${componentCls}-arrow`]:
|
||||
{
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: tooltipDistance - tooltipArrowRotateWidth + 0.1, // FIXME: hardcode in v4
|
||||
},
|
||||
'&-content': {
|
||||
boxShadow: `-${tooltipArrowShadowWidth}px ${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
|
||||
transform: `translateX(${tooltipArrowRotateWidth / 2}px) rotate(135deg)`, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-right ${componentCls}-arrow`]: {
|
||||
top: '50%', // FIXME: hardcode in v4
|
||||
transform: 'translateY(-50%)', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`&-placement-rightTop ${componentCls}-arrow`]: {
|
||||
top: tooltipArrowOffsetVertical,
|
||||
},
|
||||
|
||||
[`&-placement-rightBottom ${componentCls}-arrow`]: {
|
||||
bottom: tooltipArrowOffsetVertical,
|
||||
},
|
||||
|
||||
[`&-placement-left ${componentCls}-arrow, &-placement-leftTop ${componentCls}-arrow, &-placement-leftBottom ${componentCls}-arrow`]:
|
||||
{
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: tooltipDistance - tooltipArrowRotateWidth + 0.08, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
boxShadow: `${tooltipArrowShadowWidth}px -${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
|
||||
transform: `translateX(${-tooltipArrowRotateWidth / 2}px) rotate(315deg)`, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-left ${componentCls}-arrow`]: {
|
||||
top: '50%', // FIXME: hardcode in v4
|
||||
transform: 'translateY(-50%)', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`&-placement-leftTop ${componentCls}-arrow`]: {
|
||||
top: tooltipArrowOffsetVertical,
|
||||
},
|
||||
|
||||
[`&-placement-leftBottom ${componentCls}-arrow`]: {
|
||||
bottom: tooltipArrowOffsetVertical,
|
||||
},
|
||||
|
||||
[`&-placement-bottom ${componentCls}-arrow, &-placement-bottomLeft ${componentCls}-arrow, &-placement-bottomRight ${componentCls}-arrow`]:
|
||||
{
|
||||
top: tooltipDistance - tooltipArrowRotateWidth + 0.1, // FIXME: hardcode in v4
|
||||
|
||||
'&-content': {
|
||||
boxShadow: `-${tooltipArrowShadowWidth}px -${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
|
||||
transform: `translateY(${tooltipArrowRotateWidth / 2}px) rotate(225deg)`, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-bottom ${componentCls}-arrow`]: {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: '50%', // FIXME: hardcode in v4
|
||||
},
|
||||
transform: 'translateX(-50%)', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`&-placement-bottomLeft ${componentCls}-arrow`]: {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: tooltipArrowOffsetHorizontal,
|
||||
},
|
||||
},
|
||||
|
||||
[`&-placement-bottomRight ${componentCls}-arrow`]: {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: tooltipArrowOffsetHorizontal,
|
||||
},
|
||||
},
|
||||
|
||||
// generator for preset color
|
||||
...generatorTooltipPresetColor(token),
|
||||
|
||||
// RTL
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tooltip', token => {
|
||||
const { radiusBase, zIndexPopup } = token;
|
||||
const tooltipArrowShadowWidth = 3; // FIXME: hardcode in v4
|
||||
const tooltipArrowWidth = 8 * Math.sqrt(2); // FIXME: hardcode in v4
|
||||
const tooltipShadowColor = new TinyColor('#000').setAlpha(0.07).toRgbString(); // FIXME: hardcode in v4
|
||||
const tooltipBg = new TinyColor('#000').setAlpha(0.75).toRgbString(); // FIXME: hardcode in v4
|
||||
const tooltipArrowRotateWidth =
|
||||
Math.sqrt(tooltipArrowWidth * tooltipArrowWidth * 2) + tooltipArrowShadowWidth * 2; // FIXME: hardcode in v4
|
||||
|
||||
const TooltipToken = mergeToken<TooltipToken>(token, {
|
||||
// default variables
|
||||
tooltipMaxWidth: 250, // FIXME: hardcode in v4
|
||||
tooltipColor: '#fff', // FIXME: hardcode in v4
|
||||
tooltipBg,
|
||||
tooltipArrowWidth,
|
||||
tooltipDistance: tooltipArrowWidth - 1 + 4, // FIXME: hardcode in v4
|
||||
tooltipArrowColor: tooltipBg,
|
||||
tooltipBorderRadius: radiusBase,
|
||||
// component variables
|
||||
tooltipShadowColor,
|
||||
tooltipArrowShadowWidth,
|
||||
tooltipArrowRotateWidth,
|
||||
tooltipArrowOffsetVertical: 5, // FIXME: hardcode in v4
|
||||
tooltipArrowOffsetHorizontal: 13, // FIXME: hardcode in v4
|
||||
zIndexTooltip: zIndexPopup + 70, // FIXME: hardcode in v4
|
||||
});
|
||||
|
||||
return [genTooltipStyle(TooltipToken)];
|
||||
});
|
||||
|
||||
@ -306,7 +306,7 @@
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"maxSize": "350 kB"
|
||||
"maxSize": "355 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd.min.css",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user