stack.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _interface = require("../interface");
  7. const placementAlignProperty = {
  8. topLeft: 'left',
  9. topRight: 'right',
  10. bottomLeft: 'left',
  11. bottomRight: 'right',
  12. top: 'left',
  13. bottom: 'left'
  14. };
  15. const genPlacementStackStyle = (token, placement) => {
  16. const {
  17. componentCls
  18. } = token;
  19. return {
  20. [`${componentCls}-${placement}`]: {
  21. [`&${componentCls}-stack > ${componentCls}-notice-wrapper`]: {
  22. [placement.startsWith('top') ? 'top' : 'bottom']: 0,
  23. [placementAlignProperty[placement]]: {
  24. value: 0,
  25. _skip_check_: true
  26. }
  27. }
  28. }
  29. };
  30. };
  31. const genStackChildrenStyle = token => {
  32. const childrenStyle = {};
  33. for (let i = 1; i < token.notificationStackLayer; i++) {
  34. childrenStyle[`&:nth-last-child(${i + 1})`] = {
  35. overflow: 'hidden',
  36. [`& > ${token.componentCls}-notice`]: {
  37. opacity: 0,
  38. transition: `opacity ${token.motionDurationMid}`
  39. }
  40. };
  41. }
  42. return Object.assign({
  43. [`&:not(:nth-last-child(-n+${token.notificationStackLayer}))`]: {
  44. opacity: 0,
  45. overflow: 'hidden',
  46. color: 'transparent',
  47. pointerEvents: 'none'
  48. }
  49. }, childrenStyle);
  50. };
  51. const genStackedNoticeStyle = token => {
  52. const childrenStyle = {};
  53. for (let i = 1; i < token.notificationStackLayer; i++) {
  54. childrenStyle[`&:nth-last-child(${i + 1})`] = {
  55. background: token.colorBgBlur,
  56. backdropFilter: 'blur(10px)',
  57. '-webkit-backdrop-filter': 'blur(10px)'
  58. };
  59. }
  60. return Object.assign({}, childrenStyle);
  61. };
  62. const genStackStyle = token => {
  63. const {
  64. componentCls
  65. } = token;
  66. return Object.assign({
  67. [`${componentCls}-stack`]: {
  68. [`& > ${componentCls}-notice-wrapper`]: Object.assign({
  69. transition: `transform ${token.motionDurationSlow}, backdrop-filter 0s`,
  70. willChange: 'transform, opacity',
  71. position: 'absolute'
  72. }, genStackChildrenStyle(token))
  73. },
  74. [`${componentCls}-stack:not(${componentCls}-stack-expanded)`]: {
  75. [`& > ${componentCls}-notice-wrapper`]: Object.assign({}, genStackedNoticeStyle(token))
  76. },
  77. [`${componentCls}-stack${componentCls}-stack-expanded`]: {
  78. [`& > ${componentCls}-notice-wrapper`]: {
  79. '&:not(:nth-last-child(-n + 1))': {
  80. opacity: 1,
  81. overflow: 'unset',
  82. color: 'inherit',
  83. pointerEvents: 'auto',
  84. [`& > ${token.componentCls}-notice`]: {
  85. opacity: 1
  86. }
  87. },
  88. '&:after': {
  89. content: '""',
  90. position: 'absolute',
  91. height: token.margin,
  92. width: '100%',
  93. insetInline: 0,
  94. bottom: token.calc(token.margin).mul(-1).equal(),
  95. background: 'transparent',
  96. pointerEvents: 'auto'
  97. }
  98. }
  99. }
  100. }, _interface.NotificationPlacements.map(placement => genPlacementStackStyle(token, placement)).reduce((acc, cur) => Object.assign(Object.assign({}, acc), cur), {}));
  101. };
  102. var _default = exports.default = genStackStyle;