amis-rpc-design/node_modules/antd/es/popover/style/index.js

155 lines
4.1 KiB
JavaScript
Raw Normal View History

2023-10-07 19:42:30 +08:00
"use client";
import { resetComponent } from '../../style';
import { initZoomMotion } from '../../style/motion';
import getArrowStyle from '../../style/placementArrow';
import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal';
const genBaseStyle = token => {
const {
componentCls,
popoverColor,
minWidth,
fontWeightStrong,
popoverPadding,
boxShadowSecondary,
colorTextHeading,
borderRadiusLG: borderRadius,
zIndexPopup,
marginXS,
colorBgElevated,
popoverBg
} = token;
return [{
[componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
position: 'absolute',
top: 0,
// use `left` to fix https://github.com/ant-design/ant-design/issues/39195
left: {
_skip_check_: true,
value: 0
},
zIndex: zIndexPopup,
fontWeight: 'normal',
whiteSpace: 'normal',
textAlign: 'start',
cursor: 'auto',
userSelect: 'text',
transformOrigin: `var(--arrow-x, 50%) var(--arrow-y, 50%)`,
'--antd-arrow-background-color': colorBgElevated,
'&-rtl': {
direction: 'rtl'
},
'&-hidden': {
display: 'none'
},
[`${componentCls}-content`]: {
position: 'relative'
},
[`${componentCls}-inner`]: {
backgroundColor: popoverBg,
backgroundClip: 'padding-box',
borderRadius,
boxShadow: boxShadowSecondary,
padding: popoverPadding
},
[`${componentCls}-title`]: {
minWidth,
marginBottom: marginXS,
color: colorTextHeading,
fontWeight: fontWeightStrong
},
[`${componentCls}-inner-content`]: {
color: popoverColor
}
})
},
// Arrow Style
getArrowStyle(token, {
colorBg: 'var(--antd-arrow-background-color)'
}),
// Pure Render
{
[`${componentCls}-pure`]: {
position: 'relative',
maxWidth: 'none',
margin: token.sizePopupArrow,
display: 'inline-block',
[`${componentCls}-content`]: {
display: 'inline-block'
}
}
}];
};
const genColorStyle = token => {
const {
componentCls
} = token;
return {
[componentCls]: PresetColors.map(colorKey => {
const lightColor = token[`${colorKey}6`];
return {
[`&${componentCls}-${colorKey}`]: {
'--antd-arrow-background-color': lightColor,
[`${componentCls}-inner`]: {
backgroundColor: lightColor
},
[`${componentCls}-arrow`]: {
background: 'transparent'
}
}
};
})
};
};
const genWireframeStyle = token => {
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`
}
}
};
};
export default genComponentStyleHook('Popover', token => {
const {
colorBgElevated,
colorText,
wireframe
} = token;
const popoverToken = mergeToken(token, {
popoverPadding: 12,
popoverBg: colorBgElevated,
popoverColor: colorText
});
return [genBaseStyle(popoverToken), genColorStyle(popoverToken), wireframe && genWireframeStyle(popoverToken), initZoomMotion(popoverToken, 'zoom-big')];
}, token => ({
width: 177,
minWidth: 177,
zIndexPopup: token.zIndexPopupBase + 30
}), {
resetStyle: false,
deprecatedTokens: [['width', 'minWidth']]
});