expand.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _style = require("../../style");
  9. const genExpandStyle = token => {
  10. const {
  11. componentCls,
  12. antCls,
  13. controlInteractiveSize: checkboxSize,
  14. motionDurationSlow,
  15. lineWidth,
  16. paddingXS,
  17. lineType,
  18. tableBorderColor,
  19. tableExpandIconBg,
  20. tableExpandColumnWidth,
  21. borderRadius,
  22. fontSize,
  23. fontSizeSM,
  24. lineHeight,
  25. tablePaddingVertical,
  26. tablePaddingHorizontal,
  27. tableExpandedRowBg,
  28. paddingXXS
  29. } = token;
  30. const halfInnerSize = checkboxSize / 2 - lineWidth;
  31. // must be odd number, unless it cannot align center
  32. const expandIconSize = halfInnerSize * 2 + lineWidth * 3;
  33. const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
  34. const expandIconLineOffset = paddingXXS - lineWidth;
  35. return {
  36. [`${componentCls}-wrapper`]: {
  37. [`${componentCls}-expand-icon-col`]: {
  38. width: tableExpandColumnWidth
  39. },
  40. [`${componentCls}-row-expand-icon-cell`]: {
  41. textAlign: 'center',
  42. [`${componentCls}-row-expand-icon`]: {
  43. display: 'inline-flex',
  44. float: 'none',
  45. verticalAlign: 'sub'
  46. }
  47. },
  48. [`${componentCls}-row-indent`]: {
  49. height: 1,
  50. float: 'left'
  51. },
  52. [`${componentCls}-row-expand-icon`]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style.operationUnit)(token)), {
  53. position: 'relative',
  54. float: 'left',
  55. boxSizing: 'border-box',
  56. width: expandIconSize,
  57. height: expandIconSize,
  58. padding: 0,
  59. color: 'inherit',
  60. lineHeight: `${expandIconSize}px`,
  61. background: tableExpandIconBg,
  62. border: tableBorder,
  63. borderRadius,
  64. transform: `scale(${checkboxSize / expandIconSize})`,
  65. transition: `all ${motionDurationSlow}`,
  66. userSelect: 'none',
  67. [`&:focus, &:hover, &:active`]: {
  68. borderColor: 'currentcolor'
  69. },
  70. [`&::before, &::after`]: {
  71. position: 'absolute',
  72. background: 'currentcolor',
  73. transition: `transform ${motionDurationSlow} ease-out`,
  74. content: '""'
  75. },
  76. '&::before': {
  77. top: halfInnerSize,
  78. insetInlineEnd: expandIconLineOffset,
  79. insetInlineStart: expandIconLineOffset,
  80. height: lineWidth
  81. },
  82. '&::after': {
  83. top: expandIconLineOffset,
  84. bottom: expandIconLineOffset,
  85. insetInlineStart: halfInnerSize,
  86. width: lineWidth,
  87. transform: 'rotate(90deg)'
  88. },
  89. // Motion effect
  90. '&-collapsed::before': {
  91. transform: 'rotate(-180deg)'
  92. },
  93. '&-collapsed::after': {
  94. transform: 'rotate(0deg)'
  95. },
  96. '&-spaced': {
  97. '&::before, &::after': {
  98. display: 'none',
  99. content: 'none'
  100. },
  101. background: 'transparent',
  102. border: 0,
  103. visibility: 'hidden'
  104. }
  105. }),
  106. [`${componentCls}-row-indent + ${componentCls}-row-expand-icon`]: {
  107. marginTop: (fontSize * lineHeight - lineWidth * 3) / 2 - Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
  108. marginInlineEnd: paddingXS
  109. },
  110. [`tr${componentCls}-expanded-row`]: {
  111. '&, &:hover': {
  112. '> td': {
  113. background: tableExpandedRowBg
  114. }
  115. },
  116. // https://github.com/ant-design/ant-design/issues/25573
  117. [`${antCls}-descriptions-view`]: {
  118. display: 'flex',
  119. table: {
  120. flex: 'auto',
  121. width: 'auto'
  122. }
  123. }
  124. },
  125. // With fixed
  126. [`${componentCls}-expanded-row-fixed`]: {
  127. position: 'relative',
  128. margin: `-${tablePaddingVertical}px -${tablePaddingHorizontal}px`,
  129. padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`
  130. }
  131. }
  132. };
  133. };
  134. var _default = exports.default = genExpandStyle;