antd/lib/message/style/index.js

An enterprise-class UI design language and React components implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PurePanelStyle = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _hooks = require("../../_util/hooks");
var _style = require("../../notification/style");
var _notification = require("../../notification/style/notification");
var _internal = require("../../theme/internal");
// =============================== Token ===============================
/** Map Message component tokens onto the shared Notification token shape. */
const prepareMessageToken = token => {
  const messagePaddingVertical = token.calc(token.controlHeightLG).sub(token.calc(token.fontSize).mul(token.lineHeight)).div(2).equal();
  const messagePaddingHorizontal = token.paddingSM;
  return (0, _internal.mergeToken)((0, _style.prepareNotificationToken)(token), {
    notificationBg: token.contentBg,
    notificationPadding: token.contentPadding,
    notificationPaddingVertical: messagePaddingVertical,
    notificationPaddingHorizontal: messagePaddingHorizontal
  });
};
/** Provide default public ComponentToken values for Message. */
const prepareComponentToken = token => ({
  zIndexPopup: token.zIndexPopupBase + _hooks.CONTAINER_MAX_OFFSET + 10,
  contentBg: token.colorBgElevated,
  contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${token.paddingSM}px`
});
// =============================== Base ===============================
/** Generate the shared item card styles for Message notices. */
const genMessageItemStyle = token => {
  const {
    fontSize,
    fontSizeLG,
    lineHeight
  } = token;
  return (0, _notification.genListItemSharedStyle)(token, {
    // Adjust card style since Message is not same as Notification.
    // Message needs horizontal center and not fix width.
    width: 'max-content',
    iconFontSize: fontSizeLG,
    titleFontSize: fontSize,
    titleLineHeight: lineHeight,
    contentStyle: {
      alignItems: 'center',
      gap: token.marginXS
    },
    noticeStyle: {
      zIndex: 1
    }
  });
};
// =============================== Stack ===============================
/** Generate the collapsed stack placeholder styles for Message notices. */
const generateMessageStackStyle = token => {
  const {
    componentCls
  } = token;
  const noticeCls = `${componentCls}-notice`;
  const listContentCls = `${componentCls}-list-content`;
  const messageItemStyle = genMessageItemStyle(token);
  const {
    '&::after': _hoverAfterStyle,
    ...messageNoticeStyle
  } = messageItemStyle[noticeCls];
  const placeholderStyle = {
    ...messageNoticeStyle,
    position: 'absolute',
    zIndex: -1,
    left: '50%',
    height: token.calc(token.marginXS).mul(2).equal(),
    padding: 0,
    boxShadow: token.boxShadowTertiary,
    opacity: 0,
    pointerEvents: 'none',
    transform: 'translateX(-50%) translateY(100%)',
    transition: [`opacity ${token.motionDurationFast} ${token.motionEaseInOut}`, `transform ${token.motionDurationFast} ${token.motionEaseInOut}`, `width ${token.motionDurationSlow} ${token.motionEaseInOut}`].join(', '),
    content: '""'
  };
  return {
    [componentCls]: {
      [`&${componentCls}-stack`]: {
        [listContentCls]: {
          isolation: 'isolate',
          '&::before': {
            ...placeholderStyle,
            top: `calc(var(--top-notificiation-height) - ${(0, _cssinjs.unit)(token.marginXS)})`,
            width: `calc(var(--top-notificiation-width) - ${(0, _cssinjs.unit)(token.margin)})`
          },
          '&::after': {
            ...placeholderStyle,
            zIndex: -2,
            top: 'var(--top-notificiation-height)',
            width: `calc(var(--top-notificiation-width) - ${(0, _cssinjs.unit)(token.calc(token.margin).mul(2).equal())})`
          }
        },
        [`&:not(${componentCls}-stack-expanded)`]: {
          [listContentCls]: {
            '&::before, &::after': {
              opacity: 1,
              transform: 'translateX(-50%) translateY(0)'
            }
          }
        }
      }
    }
  };
};
// ============================= PurePanel =============================
/** Generate standalone PurePanel styles for Message. */
const generateMessagePurePanelStyle = token => {
  const {
    componentCls
  } = token;
  const noticeCls = `${componentCls}-notice`;
  const messageItemStyle = genMessageItemStyle(token);
  return {
    [`${noticeCls}-pure-panel`]: {
      width: 'max-content',
      maxWidth: '100%',
      ...messageItemStyle,
      [noticeCls]: {
        ...messageItemStyle[noticeCls],
        position: 'relative',
        width: 'max-content',
        maxWidth: '100%'
      }
    }
  };
};
/** Register the PurePanel sub-style component for Message. */
const PurePanelStyle = exports.PurePanelStyle = (0, _internal.genSubStyleComponent)(['Message', 'PurePanel'], token => generateMessagePurePanelStyle(prepareMessageToken(token)), prepareComponentToken);
// ============================== Export ==============================
/** Wrap Message item styles under the component root selector. */
const generateMessageStyle = token => ({
  [token.componentCls]: genMessageItemStyle(token)
});
/** Register the main style hook for Message. */
var _default = exports.default = (0, _internal.genStyleHooks)('Message', token => {
  const messageToken = prepareMessageToken(token);
  return [(0, _style.sharedGenerateStyle)(messageToken, {
    stackVisibleCount: 1,
    itemStyle: generateMessageStyle
  }), generateMessageStackStyle(messageToken)];
}, prepareComponentToken);