index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _internal = require("../../theme/internal");
  7. // ============================== Styles ==============================
  8. const genBaseStyle = token => {
  9. const {
  10. componentCls,
  11. lineHeightHeading3,
  12. iconCls,
  13. padding,
  14. paddingXL,
  15. paddingXS,
  16. paddingLG,
  17. marginXS,
  18. lineHeight
  19. } = token;
  20. return {
  21. // Result
  22. [componentCls]: {
  23. padding: `${paddingLG * 2}px ${paddingXL}px`,
  24. // RTL
  25. '&-rtl': {
  26. direction: 'rtl'
  27. }
  28. },
  29. // Exception Status image
  30. [`${componentCls} ${componentCls}-image`]: {
  31. width: token.imageWidth,
  32. height: token.imageHeight,
  33. margin: 'auto'
  34. },
  35. [`${componentCls} ${componentCls}-icon`]: {
  36. marginBottom: paddingLG,
  37. textAlign: 'center',
  38. [`& > ${iconCls}`]: {
  39. fontSize: token.resultIconFontSize
  40. }
  41. },
  42. [`${componentCls} ${componentCls}-title`]: {
  43. color: token.colorTextHeading,
  44. fontSize: token.resultTitleFontSize,
  45. lineHeight: lineHeightHeading3,
  46. marginBlock: marginXS,
  47. textAlign: 'center'
  48. },
  49. [`${componentCls} ${componentCls}-subtitle`]: {
  50. color: token.colorTextDescription,
  51. fontSize: token.resultSubtitleFontSize,
  52. lineHeight,
  53. textAlign: 'center'
  54. },
  55. [`${componentCls} ${componentCls}-content`]: {
  56. marginTop: paddingLG,
  57. padding: `${paddingLG}px ${padding * 2.5}px`,
  58. backgroundColor: token.colorFillAlter
  59. },
  60. [`${componentCls} ${componentCls}-extra`]: {
  61. margin: token.resultExtraMargin,
  62. textAlign: 'center',
  63. '& > *': {
  64. marginInlineEnd: paddingXS,
  65. '&:last-child': {
  66. marginInlineEnd: 0
  67. }
  68. }
  69. }
  70. };
  71. };
  72. const genStatusIconStyle = token => {
  73. const {
  74. componentCls,
  75. iconCls
  76. } = token;
  77. return {
  78. [`${componentCls}-success ${componentCls}-icon > ${iconCls}`]: {
  79. color: token.resultSuccessIconColor
  80. },
  81. [`${componentCls}-error ${componentCls}-icon > ${iconCls}`]: {
  82. color: token.resultErrorIconColor
  83. },
  84. [`${componentCls}-info ${componentCls}-icon > ${iconCls}`]: {
  85. color: token.resultInfoIconColor
  86. },
  87. [`${componentCls}-warning ${componentCls}-icon > ${iconCls}`]: {
  88. color: token.resultWarningIconColor
  89. }
  90. };
  91. };
  92. const genResultStyle = token => [genBaseStyle(token), genStatusIconStyle(token)];
  93. // ============================== Export ==============================
  94. const getStyle = token => genResultStyle(token);
  95. var _default = exports.default = (0, _internal.genComponentStyleHook)('Result', token => {
  96. const {
  97. paddingLG,
  98. fontSizeHeading3
  99. } = token;
  100. const resultSubtitleFontSize = token.fontSize;
  101. const resultExtraMargin = `${paddingLG}px 0 0 0`;
  102. const resultInfoIconColor = token.colorInfo;
  103. const resultErrorIconColor = token.colorError;
  104. const resultSuccessIconColor = token.colorSuccess;
  105. const resultWarningIconColor = token.colorWarning;
  106. const resultToken = (0, _internal.mergeToken)(token, {
  107. resultTitleFontSize: fontSizeHeading3,
  108. resultSubtitleFontSize,
  109. resultIconFontSize: fontSizeHeading3 * 3,
  110. resultExtraMargin,
  111. resultInfoIconColor,
  112. resultErrorIconColor,
  113. resultSuccessIconColor,
  114. resultWarningIconColor
  115. });
  116. return [getStyle(resultToken)];
  117. }, {
  118. imageWidth: 250,
  119. imageHeight: 295
  120. });