| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { initZoomMotion } from '../../style/motion';
- import { genComponentStyleHook, mergeToken } from '../../theme/internal';
- import { genPresetColor, resetComponent } from '../../style';
- import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
- import 'vue';
- const genTooltipStyle = token => {
- const {
- componentCls,
- // ant-tooltip
- tooltipMaxWidth,
- tooltipColor,
- tooltipBg,
- tooltipBorderRadius,
- zIndexPopup,
- controlHeight,
- boxShadowSecondary,
- paddingSM,
- paddingXS,
- tooltipRadiusOuter
- } = token;
- return [{
- [componentCls]: _extends(_extends(_extends(_extends({}, 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: Math.min(tooltipBorderRadius, MAX_VERTICAL_CONTENT_RADIUS)
- }
- },
- [`${componentCls}-content`]: {
- position: 'relative'
- }
- }), genPresetColor(token, (colorKey, _ref) => {
- let {
- darkColor
- } = _ref;
- return {
- [`&${componentCls}-${colorKey}`]: {
- [`${componentCls}-inner`]: {
- backgroundColor: darkColor
- },
- [`${componentCls}-arrow`]: {
- '--antd-arrow-background-color': darkColor
- }
- }
- };
- })), {
- // RTL
- '&-rtl': {
- direction: 'rtl'
- }
- })
- },
- // Arrow Style
- getArrowStyle(mergeToken(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, injectStyle) => {
- const useOriginHook = genComponentStyleHook('Tooltip', token => {
- // Popover use Tooltip as internal component. We do not need to handle this.
- if ((injectStyle === null || injectStyle === void 0 ? void 0 : injectStyle.value) === false) {
- return [];
- }
- const {
- borderRadius,
- colorTextLightSolid,
- colorBgDefault,
- borderRadiusOuter
- } = token;
- const TooltipToken = mergeToken(token, {
- // default variables
- tooltipMaxWidth: 250,
- tooltipColor: colorTextLightSolid,
- tooltipBorderRadius: borderRadius,
- tooltipBg: colorBgDefault,
- tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter
- });
- return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
- }, _ref2 => {
- let {
- zIndexPopupBase,
- colorBgSpotlight
- } = _ref2;
- return {
- zIndexPopup: zIndexPopupBase + 70,
- colorBgDefault: colorBgSpotlight
- };
- });
- return useOriginHook(prefixCls);
- });
|