123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- "use strict";
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.prepareComponentToken = exports.default = void 0;
- var _style = require("../../style");
- var _motion = require("../../style/motion");
- var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
- var _roundedArrow = require("../../style/roundedArrow");
- var _internal = require("../../theme/internal");
- const genBaseStyle = token => {
- const {
- componentCls,
- popoverColor,
- titleMinWidth,
- fontWeightStrong,
- innerPadding,
- boxShadowSecondary,
- colorTextHeading,
- borderRadiusLG,
- zIndexPopup,
- titleMarginBottom,
- colorBgElevated,
- popoverBg,
- titleBorderBottom,
- innerContentPadding,
- titlePadding
- } = token;
- return [{
- [componentCls]: Object.assign(Object.assign({}, (0, _style.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',
- // When use `autoArrow`, origin will follow the arrow position
- '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
- transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
- '--antd-arrow-background-color': colorBgElevated,
- width: 'max-content',
- maxWidth: '100vw',
- '&-rtl': {
- direction: 'rtl'
- },
- '&-hidden': {
- display: 'none'
- },
- [`${componentCls}-content`]: {
- position: 'relative'
- },
- [`${componentCls}-inner`]: {
- backgroundColor: popoverBg,
- backgroundClip: 'padding-box',
- borderRadius: borderRadiusLG,
- boxShadow: boxShadowSecondary,
- padding: innerPadding
- },
- [`${componentCls}-title`]: {
- minWidth: titleMinWidth,
- marginBottom: titleMarginBottom,
- color: colorTextHeading,
- fontWeight: fontWeightStrong,
- borderBottom: titleBorderBottom,
- padding: titlePadding
- },
- [`${componentCls}-inner-content`]: {
- color: popoverColor,
- padding: innerContentPadding
- }
- })
- },
- // Arrow Style
- (0, _placementArrow.default)(token, '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]: _internal.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 prepareComponentToken = token => {
- const {
- lineWidth,
- controlHeight,
- fontHeight,
- padding,
- wireframe,
- zIndexPopupBase,
- borderRadiusLG,
- marginXS,
- lineType,
- colorSplit,
- paddingSM
- } = token;
- const titlePaddingBlockDist = controlHeight - fontHeight;
- const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
- const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
- const popoverPaddingHorizontal = padding;
- return Object.assign(Object.assign(Object.assign({
- titleMinWidth: 177,
- zIndexPopup: zIndexPopupBase + 30
- }, (0, _roundedArrow.getArrowToken)(token)), (0, _placementArrow.getArrowOffsetToken)({
- contentRadius: borderRadiusLG,
- limitVerticalRadius: true
- })), {
- // internal
- innerPadding: wireframe ? 0 : 12,
- titleMarginBottom: wireframe ? 0 : marginXS,
- titlePadding: wireframe ? `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px` : 0,
- titleBorderBottom: wireframe ? `${lineWidth}px ${lineType} ${colorSplit}` : 'none',
- innerContentPadding: wireframe ? `${paddingSM}px ${popoverPaddingHorizontal}px` : 0
- });
- };
- exports.prepareComponentToken = prepareComponentToken;
- var _default = exports.default = (0, _internal.genStyleHooks)('Popover', token => {
- const {
- colorBgElevated,
- colorText
- } = token;
- const popoverToken = (0, _internal.mergeToken)(token, {
- popoverBg: colorBgElevated,
- popoverColor: colorText
- });
- return [genBaseStyle(popoverToken), genColorStyle(popoverToken), (0, _motion.initZoomMotion)(popoverToken, 'zoom-big')];
- }, prepareComponentToken, {
- resetStyle: false,
- deprecatedTokens: [['width', 'titleMinWidth'], ['minWidth', 'titleMinWidth']]
- });
|