confirm.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _ = require(".");
  8. var _style = require("../../style");
  9. var _internal = require("../../theme/internal");
  10. // Style as confirm component
  11. // ============================= Confirm ==============================
  12. const genModalConfirmStyle = token => {
  13. const {
  14. componentCls,
  15. titleFontSize,
  16. titleLineHeight,
  17. modalConfirmIconSize,
  18. fontSize,
  19. lineHeight,
  20. modalTitleHeight,
  21. fontHeight,
  22. confirmBodyPadding
  23. } = token;
  24. const confirmComponentCls = `${componentCls}-confirm`;
  25. return {
  26. [confirmComponentCls]: {
  27. '&-rtl': {
  28. direction: 'rtl'
  29. },
  30. [`${token.antCls}-modal-header`]: {
  31. display: 'none'
  32. },
  33. [`${confirmComponentCls}-body-wrapper`]: Object.assign({}, (0, _style.clearFix)()),
  34. [`&${componentCls} ${componentCls}-body`]: {
  35. padding: confirmBodyPadding
  36. },
  37. // ====================== Body ======================
  38. [`${confirmComponentCls}-body`]: {
  39. display: 'flex',
  40. flexWrap: 'nowrap',
  41. alignItems: 'start',
  42. [`> ${token.iconCls}`]: {
  43. flex: 'none',
  44. fontSize: modalConfirmIconSize,
  45. marginInlineEnd: token.confirmIconMarginInlineEnd,
  46. marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
  47. },
  48. [`&-has-title > ${token.iconCls}`]: {
  49. marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
  50. }
  51. },
  52. [`${confirmComponentCls}-paragraph`]: {
  53. display: 'flex',
  54. flexDirection: 'column',
  55. flex: 'auto',
  56. rowGap: token.marginXS,
  57. // https://github.com/ant-design/ant-design/issues/51912
  58. maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.marginSM)})`
  59. },
  60. // https://github.com/ant-design/ant-design/issues/48159
  61. [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
  62. maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
  63. },
  64. [`${confirmComponentCls}-title`]: {
  65. color: token.colorTextHeading,
  66. fontWeight: token.fontWeightStrong,
  67. fontSize: titleFontSize,
  68. lineHeight: titleLineHeight
  69. },
  70. [`${confirmComponentCls}-content`]: {
  71. color: token.colorText,
  72. fontSize,
  73. lineHeight
  74. },
  75. // ===================== Footer =====================
  76. [`${confirmComponentCls}-btns`]: {
  77. textAlign: 'end',
  78. marginTop: token.confirmBtnsMarginTop,
  79. [`${token.antCls}-btn + ${token.antCls}-btn`]: {
  80. marginBottom: 0,
  81. marginInlineStart: token.marginXS
  82. }
  83. }
  84. },
  85. [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
  86. color: token.colorError
  87. },
  88. [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
  89. ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
  90. color: token.colorWarning
  91. },
  92. [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
  93. color: token.colorInfo
  94. },
  95. [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
  96. color: token.colorSuccess
  97. }
  98. };
  99. };
  100. // ============================== Export ==============================
  101. var _default = exports.default = (0, _internal.genSubStyleComponent)(['Modal', 'confirm'], token => {
  102. const modalToken = (0, _.prepareToken)(token);
  103. return genModalConfirmStyle(modalToken);
  104. }, _.prepareComponentToken, {
  105. // confirm is weak than modal since no conflict here
  106. order: -1000
  107. });