| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _motion = require("../../style/motion");
- var _internal = require("../../theme/internal");
- var _style = require("../../style");
- var _placementArrow = _interopRequireDefault(require("../../style/placementArrow"));
- const genBaseStyle = token => {
- const {
- componentCls,
- popoverBg,
- popoverColor,
- width,
- fontWeightStrong,
- popoverPadding,
- boxShadowSecondary,
- colorTextHeading,
- borderRadiusLG: borderRadius,
- zIndexPopup,
- marginXS,
- colorBgElevated
- } = token;
- return [{
- [componentCls]: (0, _extends2.default)((0, _extends2.default)({}, (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',
- '--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: width,
- marginBottom: marginXS,
- color: colorTextHeading,
- fontWeight: fontWeightStrong
- },
- [`${componentCls}-inner-content`]: {
- color: popoverColor
- }
- })
- },
- // Arrow Style
- (0, _placementArrow.default)(token, {
- colorBg: 'var(--antd-arrow-background-color)'
- }),
- // Pure Render
- {
- [`${componentCls}-pure`]: {
- position: 'relative',
- maxWidth: 'none',
- [`${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 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`
- }
- }
- };
- };
- var _default = exports.default = (0, _internal.genComponentStyleHook)('Popover', token => {
- const {
- colorBgElevated,
- colorText,
- wireframe
- } = token;
- const popoverToken = (0, _internal.mergeToken)(token, {
- popoverBg: colorBgElevated,
- popoverColor: colorText,
- popoverPadding: 12 // Fixed Value
- });
- return [genBaseStyle(popoverToken), genColorStyle(popoverToken), wireframe && genWireframeStyle(popoverToken), (0, _motion.initZoomMotion)(popoverToken, 'zoom-big')];
- }, _ref => {
- let {
- zIndexPopupBase
- } = _ref;
- return {
- zIndexPopup: zIndexPopupBase + 30,
- width: 177
- };
- });
|