123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.prepareComponentToken = exports.default = void 0;
- var _cssinjs = require("@ant-design/cssinjs");
- var _fastColor = require("@ant-design/fast-color");
- var _style = require("../../style");
- var _internal = require("../../theme/internal");
- var _bordered = _interopRequireDefault(require("./bordered"));
- var _ellipsis = _interopRequireDefault(require("./ellipsis"));
- var _empty = _interopRequireDefault(require("./empty"));
- var _expand = _interopRequireDefault(require("./expand"));
- var _filter = _interopRequireDefault(require("./filter"));
- var _fixed = _interopRequireDefault(require("./fixed"));
- var _pagination = _interopRequireDefault(require("./pagination"));
- var _radius = _interopRequireDefault(require("./radius"));
- var _rtl = _interopRequireDefault(require("./rtl"));
- var _selection = _interopRequireDefault(require("./selection"));
- var _size = _interopRequireDefault(require("./size"));
- var _sorter = _interopRequireDefault(require("./sorter"));
- var _sticky = _interopRequireDefault(require("./sticky"));
- var _summary = _interopRequireDefault(require("./summary"));
- var _virtual = _interopRequireDefault(require("./virtual"));
- const genTableStyle = token => {
- const {
- componentCls,
- fontWeightStrong,
- tablePaddingVertical,
- tablePaddingHorizontal,
- tableExpandColumnWidth,
- lineWidth,
- lineType,
- tableBorderColor,
- tableFontSize,
- tableBg,
- tableRadius,
- tableHeaderTextColor,
- motionDurationMid,
- tableHeaderBg,
- tableHeaderCellSplitColor,
- tableFooterTextColor,
- tableFooterBg,
- calc
- } = token;
- const tableBorder = `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${tableBorderColor}`;
- return {
- [`${componentCls}-wrapper`]: Object.assign(Object.assign({
- clear: 'both',
- maxWidth: '100%',
- // fix https://github.com/ant-design/ant-design/issues/46177
- ['--rc-virtual-list-scrollbar-bg']: token.tableScrollBg
- }, (0, _style.clearFix)()), {
- [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
- fontSize: tableFontSize,
- background: tableBg,
- borderRadius: `${(0, _cssinjs.unit)(tableRadius)} ${(0, _cssinjs.unit)(tableRadius)} 0 0`,
- // https://github.com/ant-design/ant-design/issues/47486
- scrollbarColor: `${token.tableScrollThumbBg} ${token.tableScrollBg}`
- }),
- // https://github.com/ant-design/ant-design/issues/17611
- table: {
- width: '100%',
- textAlign: 'start',
- borderRadius: `${(0, _cssinjs.unit)(tableRadius)} ${(0, _cssinjs.unit)(tableRadius)} 0 0`,
- borderCollapse: 'separate',
- borderSpacing: 0
- },
- // ============================= Cell ==============================
- [`
- ${componentCls}-cell,
- ${componentCls}-thead > tr > th,
- ${componentCls}-tbody > tr > th,
- ${componentCls}-tbody > tr > td,
- tfoot > tr > th,
- tfoot > tr > td
- `]: {
- position: 'relative',
- padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`,
- overflowWrap: 'break-word'
- },
- // ============================ Title =============================
- [`${componentCls}-title`]: {
- padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`
- },
- // ============================ Header ============================
- [`${componentCls}-thead`]: {
- [`
- > tr > th,
- > tr > td
- `]: {
- position: 'relative',
- color: tableHeaderTextColor,
- fontWeight: fontWeightStrong,
- textAlign: 'start',
- background: tableHeaderBg,
- borderBottom: tableBorder,
- transition: `background ${motionDurationMid} ease`,
- "&[colspan]:not([colspan='1'])": {
- textAlign: 'center'
- },
- [`&:not(:last-child):not(${componentCls}-selection-column):not(${componentCls}-row-expand-icon-cell):not([colspan])::before`]: {
- position: 'absolute',
- top: '50%',
- insetInlineEnd: 0,
- width: 1,
- height: '1.6em',
- backgroundColor: tableHeaderCellSplitColor,
- transform: 'translateY(-50%)',
- transition: `background-color ${motionDurationMid}`,
- content: '""'
- }
- },
- '> tr:not(:last-child) > th[colspan]': {
- borderBottom: 0
- }
- },
- // ============================ Body ============================
- [`${componentCls}-tbody`]: {
- '> tr': {
- '> th, > td': {
- transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
- borderBottom: tableBorder,
- // ========================= Nest Table ===========================
- [`
- > ${componentCls}-wrapper:only-child,
- > ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child
- `]: {
- [componentCls]: {
- marginBlock: (0, _cssinjs.unit)(calc(tablePaddingVertical).mul(-1).equal()),
- marginInline: `${(0, _cssinjs.unit)(calc(tableExpandColumnWidth).sub(tablePaddingHorizontal).equal())}
- ${(0, _cssinjs.unit)(calc(tablePaddingHorizontal).mul(-1).equal())}`,
- [`${componentCls}-tbody > tr:last-child > td`]: {
- borderBottomWidth: 0,
- '&:first-child, &:last-child': {
- borderRadius: 0
- }
- }
- }
- }
- },
- '> th': {
- position: 'relative',
- color: tableHeaderTextColor,
- fontWeight: fontWeightStrong,
- textAlign: 'start',
- background: tableHeaderBg,
- borderBottom: tableBorder,
- transition: `background ${motionDurationMid} ease`
- }
- }
- },
- // ============================ Footer ============================
- [`${componentCls}-footer`]: {
- padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`,
- color: tableFooterTextColor,
- background: tableFooterBg
- }
- })
- };
- };
- const prepareComponentToken = token => {
- const {
- colorFillAlter,
- colorBgContainer,
- colorTextHeading,
- colorFillSecondary,
- colorFillContent,
- controlItemBgActive,
- controlItemBgActiveHover,
- padding,
- paddingSM,
- paddingXS,
- colorBorderSecondary,
- borderRadiusLG,
- controlHeight,
- colorTextPlaceholder,
- fontSize,
- fontSizeSM,
- lineHeight,
- lineWidth,
- colorIcon,
- colorIconHover,
- opacityLoading,
- controlInteractiveSize
- } = token;
- const colorFillSecondarySolid = new _fastColor.FastColor(colorFillSecondary).onBackground(colorBgContainer).toHexString();
- const colorFillContentSolid = new _fastColor.FastColor(colorFillContent).onBackground(colorBgContainer).toHexString();
- const colorFillAlterSolid = new _fastColor.FastColor(colorFillAlter).onBackground(colorBgContainer).toHexString();
- const baseColorAction = new _fastColor.FastColor(colorIcon);
- const baseColorActionHover = new _fastColor.FastColor(colorIconHover);
- const expandIconHalfInner = controlInteractiveSize / 2 - lineWidth;
- const expandIconSize = expandIconHalfInner * 2 + lineWidth * 3;
- return {
- headerBg: colorFillAlterSolid,
- headerColor: colorTextHeading,
- headerSortActiveBg: colorFillSecondarySolid,
- headerSortHoverBg: colorFillContentSolid,
- bodySortBg: colorFillAlterSolid,
- rowHoverBg: colorFillAlterSolid,
- rowSelectedBg: controlItemBgActive,
- rowSelectedHoverBg: controlItemBgActiveHover,
- rowExpandedBg: colorFillAlter,
- cellPaddingBlock: padding,
- cellPaddingInline: padding,
- cellPaddingBlockMD: paddingSM,
- cellPaddingInlineMD: paddingXS,
- cellPaddingBlockSM: paddingXS,
- cellPaddingInlineSM: paddingXS,
- borderColor: colorBorderSecondary,
- headerBorderRadius: borderRadiusLG,
- footerBg: colorFillAlterSolid,
- footerColor: colorTextHeading,
- cellFontSize: fontSize,
- cellFontSizeMD: fontSize,
- cellFontSizeSM: fontSize,
- headerSplitColor: colorBorderSecondary,
- fixedHeaderSortActiveBg: colorFillSecondarySolid,
- headerFilterHoverBg: colorFillContent,
- filterDropdownMenuBg: colorBgContainer,
- filterDropdownBg: colorBgContainer,
- expandIconBg: colorBgContainer,
- selectionColumnWidth: controlHeight,
- stickyScrollBarBg: colorTextPlaceholder,
- stickyScrollBarBorderRadius: 100,
- expandIconMarginTop: (fontSize * lineHeight - lineWidth * 3) / 2 - Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
- headerIconColor: baseColorAction.clone().setA(baseColorAction.a * opacityLoading).toRgbString(),
- headerIconHoverColor: baseColorActionHover.clone().setA(baseColorActionHover.a * opacityLoading).toRgbString(),
- expandIconHalfInner,
- expandIconSize,
- expandIconScale: controlInteractiveSize / expandIconSize
- };
- };
- exports.prepareComponentToken = prepareComponentToken;
- const zIndexTableFixed = 2;
- // ============================== Export ==============================
- var _default = exports.default = (0, _internal.genStyleHooks)('Table', token => {
- const {
- colorTextHeading,
- colorSplit,
- colorBgContainer,
- controlInteractiveSize: checkboxSize,
- headerBg,
- headerColor,
- headerSortActiveBg,
- headerSortHoverBg,
- bodySortBg,
- rowHoverBg,
- rowSelectedBg,
- rowSelectedHoverBg,
- rowExpandedBg,
- cellPaddingBlock,
- cellPaddingInline,
- cellPaddingBlockMD,
- cellPaddingInlineMD,
- cellPaddingBlockSM,
- cellPaddingInlineSM,
- borderColor,
- footerBg,
- footerColor,
- headerBorderRadius,
- cellFontSize,
- cellFontSizeMD,
- cellFontSizeSM,
- headerSplitColor,
- fixedHeaderSortActiveBg,
- headerFilterHoverBg,
- filterDropdownBg,
- expandIconBg,
- selectionColumnWidth,
- stickyScrollBarBg,
- calc
- } = token;
- const tableToken = (0, _internal.mergeToken)(token, {
- tableFontSize: cellFontSize,
- tableBg: colorBgContainer,
- tableRadius: headerBorderRadius,
- tablePaddingVertical: cellPaddingBlock,
- tablePaddingHorizontal: cellPaddingInline,
- tablePaddingVerticalMiddle: cellPaddingBlockMD,
- tablePaddingHorizontalMiddle: cellPaddingInlineMD,
- tablePaddingVerticalSmall: cellPaddingBlockSM,
- tablePaddingHorizontalSmall: cellPaddingInlineSM,
- tableBorderColor: borderColor,
- tableHeaderTextColor: headerColor,
- tableHeaderBg: headerBg,
- tableFooterTextColor: footerColor,
- tableFooterBg: footerBg,
- tableHeaderCellSplitColor: headerSplitColor,
- tableHeaderSortBg: headerSortActiveBg,
- tableHeaderSortHoverBg: headerSortHoverBg,
- tableBodySortBg: bodySortBg,
- tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg,
- tableHeaderFilterActiveBg: headerFilterHoverBg,
- tableFilterDropdownBg: filterDropdownBg,
- tableRowHoverBg: rowHoverBg,
- tableSelectedRowBg: rowSelectedBg,
- tableSelectedRowHoverBg: rowSelectedHoverBg,
- zIndexTableFixed,
- zIndexTableSticky: calc(zIndexTableFixed).add(1).equal({
- unit: false
- }),
- tableFontSizeMiddle: cellFontSizeMD,
- tableFontSizeSmall: cellFontSizeSM,
- tableSelectionColumnWidth: selectionColumnWidth,
- tableExpandIconBg: expandIconBg,
- tableExpandColumnWidth: calc(checkboxSize).add(calc(token.padding).mul(2)).equal(),
- tableExpandedRowBg: rowExpandedBg,
- // Dropdown
- tableFilterDropdownWidth: 120,
- tableFilterDropdownHeight: 264,
- tableFilterDropdownSearchWidth: 140,
- // Virtual Scroll Bar
- tableScrollThumbSize: 8,
- // Mac scroll bar size
- tableScrollThumbBg: stickyScrollBarBg,
- tableScrollThumbBgHover: colorTextHeading,
- tableScrollBg: colorSplit
- });
- 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)];
- }, prepareComponentToken, {
- unitless: {
- expandIconScale: true
- }
- });
|