2022-06-21 00:34:51 +08:00
|
|
|
import { initZoomMotion } from '../../style/motion';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
|
2022-07-11 15:35:58 +08:00
|
|
|
import { resetComponent } from '../../style';
|
|
|
|
import getArrowStyle from '../../style/placementArrow';
|
2022-05-27 11:07:58 +08:00
|
|
|
|
|
|
|
export interface ComponentToken {
|
|
|
|
zIndexPopup: number;
|
|
|
|
width: number;
|
|
|
|
}
|
2022-03-25 13:20:42 +08:00
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
export type PopoverToken = FullToken<'Popover'> & {
|
2022-03-25 13:20:42 +08:00
|
|
|
popoverBg: string;
|
|
|
|
popoverColor: string;
|
2022-10-25 17:04:36 +08:00
|
|
|
popoverPadding: number | string;
|
2022-03-25 13:20:42 +08:00
|
|
|
};
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
|
2022-03-25 13:20:42 +08:00
|
|
|
const {
|
2022-04-07 21:50:35 +08:00
|
|
|
componentCls,
|
2022-03-25 13:20:42 +08:00
|
|
|
popoverBg,
|
|
|
|
popoverColor,
|
2022-05-27 11:07:58 +08:00
|
|
|
width,
|
|
|
|
fontWeightStrong,
|
2022-08-29 17:09:41 +08:00
|
|
|
popoverPadding,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadowSecondary,
|
2022-03-25 13:20:42 +08:00
|
|
|
colorTextHeading,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadiusLG: borderRadius,
|
2022-05-27 11:07:58 +08:00
|
|
|
zIndexPopup,
|
2022-08-29 17:09:41 +08:00
|
|
|
marginXS,
|
2022-12-13 14:41:24 +08:00
|
|
|
colorBgElevated,
|
2022-03-25 13:20:42 +08:00
|
|
|
} = token;
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
[componentCls]: {
|
|
|
|
...resetComponent(token),
|
2022-03-25 13:20:42 +08:00
|
|
|
position: 'absolute',
|
2022-05-27 11:07:58 +08:00
|
|
|
top: 0,
|
2022-12-06 23:29:38 +08:00
|
|
|
// use `left` to fix https://github.com/ant-design/ant-design/issues/39195
|
|
|
|
left: {
|
|
|
|
_skip_check_: true,
|
|
|
|
value: 0,
|
|
|
|
},
|
2022-05-27 11:07:58 +08:00
|
|
|
zIndex: zIndexPopup,
|
|
|
|
fontWeight: 'normal',
|
|
|
|
whiteSpace: 'normal',
|
|
|
|
textAlign: 'start',
|
|
|
|
cursor: 'auto',
|
|
|
|
userSelect: 'text',
|
2022-12-13 14:41:24 +08:00
|
|
|
'--antd-arrow-background-color': colorBgElevated,
|
2022-05-27 11:07:58 +08:00
|
|
|
|
|
|
|
'&-rtl': {
|
|
|
|
direction: 'rtl',
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
'&-hidden': {
|
|
|
|
display: 'none',
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
[`${componentCls}-content`]: {
|
|
|
|
position: 'relative',
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
[`${componentCls}-inner`]: {
|
|
|
|
backgroundColor: popoverBg,
|
|
|
|
backgroundClip: 'padding-box',
|
|
|
|
borderRadius,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: boxShadowSecondary,
|
2022-08-29 17:09:41 +08:00
|
|
|
padding: popoverPadding,
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
[`${componentCls}-title`]: {
|
|
|
|
minWidth: width,
|
2022-08-29 17:09:41 +08:00
|
|
|
marginBottom: marginXS,
|
2022-05-27 11:07:58 +08:00
|
|
|
color: colorTextHeading,
|
|
|
|
fontWeight: fontWeightStrong,
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
[`${componentCls}-inner-content`]: {
|
|
|
|
color: popoverColor,
|
|
|
|
},
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
|
|
|
},
|
2022-05-27 11:07:58 +08:00
|
|
|
|
|
|
|
// Arrow Style
|
2022-12-13 14:41:24 +08:00
|
|
|
getArrowStyle(token, { colorBg: 'var(--antd-arrow-background-color)' }),
|
2022-07-14 12:06:18 +08:00
|
|
|
|
|
|
|
// Pure Render
|
|
|
|
{
|
|
|
|
[`${componentCls}-pure`]: {
|
|
|
|
position: 'relative',
|
|
|
|
maxWidth: 'none',
|
|
|
|
|
|
|
|
[`${componentCls}-content`]: {
|
|
|
|
display: 'inline-block',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-05-27 11:07:58 +08:00
|
|
|
];
|
2022-03-25 13:20:42 +08:00
|
|
|
};
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genColorStyle: GenerateStyle<PopoverToken> = (token) => {
|
2022-04-07 21:50:35 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-25 13:20:42 +08:00
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
return {
|
|
|
|
[componentCls]: PresetColors.map((colorKey: keyof PresetColorType) => {
|
|
|
|
const lightColor = token[`${colorKey}-6`];
|
|
|
|
return {
|
|
|
|
[`&${componentCls}-${colorKey}`]: {
|
2022-12-13 14:41:24 +08:00
|
|
|
'--antd-arrow-background-color': lightColor,
|
2022-05-27 11:07:58 +08:00
|
|
|
[`${componentCls}-inner`]: {
|
2022-03-25 13:20:42 +08:00
|
|
|
backgroundColor: lightColor,
|
|
|
|
},
|
2022-05-27 11:07:58 +08:00
|
|
|
[`${componentCls}-arrow`]: {
|
|
|
|
background: 'transparent',
|
|
|
|
},
|
2022-03-25 13:20:42 +08:00
|
|
|
},
|
2022-05-27 11:07:58 +08:00
|
|
|
};
|
|
|
|
}),
|
|
|
|
};
|
2022-03-25 13:20:42 +08:00
|
|
|
};
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genWireframeStyle: GenerateStyle<PopoverToken> = (token) => {
|
2022-09-13 11:52:56 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
lineWidth,
|
|
|
|
lineType,
|
|
|
|
colorSplit,
|
|
|
|
paddingSM,
|
|
|
|
controlHeight,
|
|
|
|
fontSize,
|
|
|
|
lineHeight,
|
|
|
|
padding,
|
|
|
|
} = token;
|
|
|
|
|
|
|
|
const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight);
|
|
|
|
const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
|
|
|
|
const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
|
|
|
|
const popoverPaddingHorizontal = padding;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[componentCls]: {
|
|
|
|
[`${componentCls}-inner`]: {
|
|
|
|
padding: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-title`]: {
|
|
|
|
margin: 0,
|
|
|
|
padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
|
|
|
|
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-inner-content`]: {
|
|
|
|
padding: `${paddingSM}px ${popoverPaddingHorizontal}px`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-05-27 11:07:58 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Popover',
|
2022-11-19 13:47:33 +08:00
|
|
|
(token) => {
|
2022-10-25 17:04:36 +08:00
|
|
|
const { colorBgElevated, colorText, wireframe } = token;
|
2022-05-27 11:07:58 +08:00
|
|
|
|
|
|
|
const popoverToken = mergeToken<PopoverToken>(token, {
|
2022-06-17 18:47:47 +08:00
|
|
|
popoverBg: colorBgElevated,
|
2022-08-29 17:09:41 +08:00
|
|
|
popoverColor: colorText,
|
2022-10-25 17:04:36 +08:00
|
|
|
popoverPadding: 12, // Fixed Value
|
2022-05-27 11:07:58 +08:00
|
|
|
});
|
|
|
|
|
2022-06-21 00:34:51 +08:00
|
|
|
return [
|
|
|
|
genBaseStyle(popoverToken),
|
|
|
|
genColorStyle(popoverToken),
|
2022-09-13 11:52:56 +08:00
|
|
|
wireframe && genWireframeStyle(popoverToken),
|
2022-06-21 00:34:51 +08:00
|
|
|
initZoomMotion(popoverToken, 'zoom-big'),
|
|
|
|
];
|
2022-05-27 11:07:58 +08:00
|
|
|
},
|
|
|
|
({ zIndexPopupBase }) => ({
|
|
|
|
zIndexPopup: zIndexPopupBase + 30,
|
|
|
|
width: 177,
|
|
|
|
}),
|
|
|
|
);
|