index.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.prepareComponentToken = exports.default = void 0;
  7. var _cssinjs = require("@ant-design/cssinjs");
  8. var _fastColor = require("@ant-design/fast-color");
  9. var _style = require("../../style");
  10. var _internal = require("../../theme/internal");
  11. var _bordered = _interopRequireDefault(require("./bordered"));
  12. var _ellipsis = _interopRequireDefault(require("./ellipsis"));
  13. var _empty = _interopRequireDefault(require("./empty"));
  14. var _expand = _interopRequireDefault(require("./expand"));
  15. var _filter = _interopRequireDefault(require("./filter"));
  16. var _fixed = _interopRequireDefault(require("./fixed"));
  17. var _pagination = _interopRequireDefault(require("./pagination"));
  18. var _radius = _interopRequireDefault(require("./radius"));
  19. var _rtl = _interopRequireDefault(require("./rtl"));
  20. var _selection = _interopRequireDefault(require("./selection"));
  21. var _size = _interopRequireDefault(require("./size"));
  22. var _sorter = _interopRequireDefault(require("./sorter"));
  23. var _sticky = _interopRequireDefault(require("./sticky"));
  24. var _summary = _interopRequireDefault(require("./summary"));
  25. var _virtual = _interopRequireDefault(require("./virtual"));
  26. const genTableStyle = token => {
  27. const {
  28. componentCls,
  29. fontWeightStrong,
  30. tablePaddingVertical,
  31. tablePaddingHorizontal,
  32. tableExpandColumnWidth,
  33. lineWidth,
  34. lineType,
  35. tableBorderColor,
  36. tableFontSize,
  37. tableBg,
  38. tableRadius,
  39. tableHeaderTextColor,
  40. motionDurationMid,
  41. tableHeaderBg,
  42. tableHeaderCellSplitColor,
  43. tableFooterTextColor,
  44. tableFooterBg,
  45. calc
  46. } = token;
  47. const tableBorder = `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${tableBorderColor}`;
  48. return {
  49. [`${componentCls}-wrapper`]: Object.assign(Object.assign({
  50. clear: 'both',
  51. maxWidth: '100%',
  52. // fix https://github.com/ant-design/ant-design/issues/46177
  53. ['--rc-virtual-list-scrollbar-bg']: token.tableScrollBg
  54. }, (0, _style.clearFix)()), {
  55. [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  56. fontSize: tableFontSize,
  57. background: tableBg,
  58. borderRadius: `${(0, _cssinjs.unit)(tableRadius)} ${(0, _cssinjs.unit)(tableRadius)} 0 0`,
  59. // https://github.com/ant-design/ant-design/issues/47486
  60. scrollbarColor: `${token.tableScrollThumbBg} ${token.tableScrollBg}`
  61. }),
  62. // https://github.com/ant-design/ant-design/issues/17611
  63. table: {
  64. width: '100%',
  65. textAlign: 'start',
  66. borderRadius: `${(0, _cssinjs.unit)(tableRadius)} ${(0, _cssinjs.unit)(tableRadius)} 0 0`,
  67. borderCollapse: 'separate',
  68. borderSpacing: 0
  69. },
  70. // ============================= Cell ==============================
  71. [`
  72. ${componentCls}-cell,
  73. ${componentCls}-thead > tr > th,
  74. ${componentCls}-tbody > tr > th,
  75. ${componentCls}-tbody > tr > td,
  76. tfoot > tr > th,
  77. tfoot > tr > td
  78. `]: {
  79. position: 'relative',
  80. padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`,
  81. overflowWrap: 'break-word'
  82. },
  83. // ============================ Title =============================
  84. [`${componentCls}-title`]: {
  85. padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`
  86. },
  87. // ============================ Header ============================
  88. [`${componentCls}-thead`]: {
  89. [`
  90. > tr > th,
  91. > tr > td
  92. `]: {
  93. position: 'relative',
  94. color: tableHeaderTextColor,
  95. fontWeight: fontWeightStrong,
  96. textAlign: 'start',
  97. background: tableHeaderBg,
  98. borderBottom: tableBorder,
  99. transition: `background ${motionDurationMid} ease`,
  100. "&[colspan]:not([colspan='1'])": {
  101. textAlign: 'center'
  102. },
  103. [`&:not(:last-child):not(${componentCls}-selection-column):not(${componentCls}-row-expand-icon-cell):not([colspan])::before`]: {
  104. position: 'absolute',
  105. top: '50%',
  106. insetInlineEnd: 0,
  107. width: 1,
  108. height: '1.6em',
  109. backgroundColor: tableHeaderCellSplitColor,
  110. transform: 'translateY(-50%)',
  111. transition: `background-color ${motionDurationMid}`,
  112. content: '""'
  113. }
  114. },
  115. '> tr:not(:last-child) > th[colspan]': {
  116. borderBottom: 0
  117. }
  118. },
  119. // ============================ Body ============================
  120. [`${componentCls}-tbody`]: {
  121. '> tr': {
  122. '> th, > td': {
  123. transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
  124. borderBottom: tableBorder,
  125. // ========================= Nest Table ===========================
  126. [`
  127. > ${componentCls}-wrapper:only-child,
  128. > ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child
  129. `]: {
  130. [componentCls]: {
  131. marginBlock: (0, _cssinjs.unit)(calc(tablePaddingVertical).mul(-1).equal()),
  132. marginInline: `${(0, _cssinjs.unit)(calc(tableExpandColumnWidth).sub(tablePaddingHorizontal).equal())}
  133. ${(0, _cssinjs.unit)(calc(tablePaddingHorizontal).mul(-1).equal())}`,
  134. [`${componentCls}-tbody > tr:last-child > td`]: {
  135. borderBottomWidth: 0,
  136. '&:first-child, &:last-child': {
  137. borderRadius: 0
  138. }
  139. }
  140. }
  141. }
  142. },
  143. '> th': {
  144. position: 'relative',
  145. color: tableHeaderTextColor,
  146. fontWeight: fontWeightStrong,
  147. textAlign: 'start',
  148. background: tableHeaderBg,
  149. borderBottom: tableBorder,
  150. transition: `background ${motionDurationMid} ease`
  151. }
  152. }
  153. },
  154. // ============================ Footer ============================
  155. [`${componentCls}-footer`]: {
  156. padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`,
  157. color: tableFooterTextColor,
  158. background: tableFooterBg
  159. }
  160. })
  161. };
  162. };
  163. const prepareComponentToken = token => {
  164. const {
  165. colorFillAlter,
  166. colorBgContainer,
  167. colorTextHeading,
  168. colorFillSecondary,
  169. colorFillContent,
  170. controlItemBgActive,
  171. controlItemBgActiveHover,
  172. padding,
  173. paddingSM,
  174. paddingXS,
  175. colorBorderSecondary,
  176. borderRadiusLG,
  177. controlHeight,
  178. colorTextPlaceholder,
  179. fontSize,
  180. fontSizeSM,
  181. lineHeight,
  182. lineWidth,
  183. colorIcon,
  184. colorIconHover,
  185. opacityLoading,
  186. controlInteractiveSize
  187. } = token;
  188. const colorFillSecondarySolid = new _fastColor.FastColor(colorFillSecondary).onBackground(colorBgContainer).toHexString();
  189. const colorFillContentSolid = new _fastColor.FastColor(colorFillContent).onBackground(colorBgContainer).toHexString();
  190. const colorFillAlterSolid = new _fastColor.FastColor(colorFillAlter).onBackground(colorBgContainer).toHexString();
  191. const baseColorAction = new _fastColor.FastColor(colorIcon);
  192. const baseColorActionHover = new _fastColor.FastColor(colorIconHover);
  193. const expandIconHalfInner = controlInteractiveSize / 2 - lineWidth;
  194. const expandIconSize = expandIconHalfInner * 2 + lineWidth * 3;
  195. return {
  196. headerBg: colorFillAlterSolid,
  197. headerColor: colorTextHeading,
  198. headerSortActiveBg: colorFillSecondarySolid,
  199. headerSortHoverBg: colorFillContentSolid,
  200. bodySortBg: colorFillAlterSolid,
  201. rowHoverBg: colorFillAlterSolid,
  202. rowSelectedBg: controlItemBgActive,
  203. rowSelectedHoverBg: controlItemBgActiveHover,
  204. rowExpandedBg: colorFillAlter,
  205. cellPaddingBlock: padding,
  206. cellPaddingInline: padding,
  207. cellPaddingBlockMD: paddingSM,
  208. cellPaddingInlineMD: paddingXS,
  209. cellPaddingBlockSM: paddingXS,
  210. cellPaddingInlineSM: paddingXS,
  211. borderColor: colorBorderSecondary,
  212. headerBorderRadius: borderRadiusLG,
  213. footerBg: colorFillAlterSolid,
  214. footerColor: colorTextHeading,
  215. cellFontSize: fontSize,
  216. cellFontSizeMD: fontSize,
  217. cellFontSizeSM: fontSize,
  218. headerSplitColor: colorBorderSecondary,
  219. fixedHeaderSortActiveBg: colorFillSecondarySolid,
  220. headerFilterHoverBg: colorFillContent,
  221. filterDropdownMenuBg: colorBgContainer,
  222. filterDropdownBg: colorBgContainer,
  223. expandIconBg: colorBgContainer,
  224. selectionColumnWidth: controlHeight,
  225. stickyScrollBarBg: colorTextPlaceholder,
  226. stickyScrollBarBorderRadius: 100,
  227. expandIconMarginTop: (fontSize * lineHeight - lineWidth * 3) / 2 - Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
  228. headerIconColor: baseColorAction.clone().setA(baseColorAction.a * opacityLoading).toRgbString(),
  229. headerIconHoverColor: baseColorActionHover.clone().setA(baseColorActionHover.a * opacityLoading).toRgbString(),
  230. expandIconHalfInner,
  231. expandIconSize,
  232. expandIconScale: controlInteractiveSize / expandIconSize
  233. };
  234. };
  235. exports.prepareComponentToken = prepareComponentToken;
  236. const zIndexTableFixed = 2;
  237. // ============================== Export ==============================
  238. var _default = exports.default = (0, _internal.genStyleHooks)('Table', token => {
  239. const {
  240. colorTextHeading,
  241. colorSplit,
  242. colorBgContainer,
  243. controlInteractiveSize: checkboxSize,
  244. headerBg,
  245. headerColor,
  246. headerSortActiveBg,
  247. headerSortHoverBg,
  248. bodySortBg,
  249. rowHoverBg,
  250. rowSelectedBg,
  251. rowSelectedHoverBg,
  252. rowExpandedBg,
  253. cellPaddingBlock,
  254. cellPaddingInline,
  255. cellPaddingBlockMD,
  256. cellPaddingInlineMD,
  257. cellPaddingBlockSM,
  258. cellPaddingInlineSM,
  259. borderColor,
  260. footerBg,
  261. footerColor,
  262. headerBorderRadius,
  263. cellFontSize,
  264. cellFontSizeMD,
  265. cellFontSizeSM,
  266. headerSplitColor,
  267. fixedHeaderSortActiveBg,
  268. headerFilterHoverBg,
  269. filterDropdownBg,
  270. expandIconBg,
  271. selectionColumnWidth,
  272. stickyScrollBarBg,
  273. calc
  274. } = token;
  275. const tableToken = (0, _internal.mergeToken)(token, {
  276. tableFontSize: cellFontSize,
  277. tableBg: colorBgContainer,
  278. tableRadius: headerBorderRadius,
  279. tablePaddingVertical: cellPaddingBlock,
  280. tablePaddingHorizontal: cellPaddingInline,
  281. tablePaddingVerticalMiddle: cellPaddingBlockMD,
  282. tablePaddingHorizontalMiddle: cellPaddingInlineMD,
  283. tablePaddingVerticalSmall: cellPaddingBlockSM,
  284. tablePaddingHorizontalSmall: cellPaddingInlineSM,
  285. tableBorderColor: borderColor,
  286. tableHeaderTextColor: headerColor,
  287. tableHeaderBg: headerBg,
  288. tableFooterTextColor: footerColor,
  289. tableFooterBg: footerBg,
  290. tableHeaderCellSplitColor: headerSplitColor,
  291. tableHeaderSortBg: headerSortActiveBg,
  292. tableHeaderSortHoverBg: headerSortHoverBg,
  293. tableBodySortBg: bodySortBg,
  294. tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg,
  295. tableHeaderFilterActiveBg: headerFilterHoverBg,
  296. tableFilterDropdownBg: filterDropdownBg,
  297. tableRowHoverBg: rowHoverBg,
  298. tableSelectedRowBg: rowSelectedBg,
  299. tableSelectedRowHoverBg: rowSelectedHoverBg,
  300. zIndexTableFixed,
  301. zIndexTableSticky: calc(zIndexTableFixed).add(1).equal({
  302. unit: false
  303. }),
  304. tableFontSizeMiddle: cellFontSizeMD,
  305. tableFontSizeSmall: cellFontSizeSM,
  306. tableSelectionColumnWidth: selectionColumnWidth,
  307. tableExpandIconBg: expandIconBg,
  308. tableExpandColumnWidth: calc(checkboxSize).add(calc(token.padding).mul(2)).equal(),
  309. tableExpandedRowBg: rowExpandedBg,
  310. // Dropdown
  311. tableFilterDropdownWidth: 120,
  312. tableFilterDropdownHeight: 264,
  313. tableFilterDropdownSearchWidth: 140,
  314. // Virtual Scroll Bar
  315. tableScrollThumbSize: 8,
  316. // Mac scroll bar size
  317. tableScrollThumbBg: stickyScrollBarBg,
  318. tableScrollThumbBgHover: colorTextHeading,
  319. tableScrollBg: colorSplit
  320. });
  321. return [genTableStyle(tableToken), (0, _pagination.default)(tableToken), (0, _summary.default)(tableToken), (0, _sorter.default)(tableToken), (0, _filter.default)(tableToken), (0, _bordered.default)(tableToken), (0, _radius.default)(tableToken), (0, _expand.default)(tableToken), (0, _summary.default)(tableToken), (0, _empty.default)(tableToken), (0, _selection.default)(tableToken), (0, _fixed.default)(tableToken), (0, _sticky.default)(tableToken), (0, _ellipsis.default)(tableToken), (0, _size.default)(tableToken), (0, _rtl.default)(tableToken), (0, _virtual.default)(tableToken)];
  322. }, prepareComponentToken, {
  323. unitless: {
  324. expandIconScale: true
  325. }
  326. });