"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _tinycolor = require("@ctrl/tinycolor"); 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, lineWidth, lineType, tableBorderColor, tableFontSize, tableBg, tableRadius, tableHeaderTextColor, motionDurationMid, tableHeaderBg, tableHeaderCellSplitColor, tableFooterTextColor, tableFooterBg } = token; const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`; return { [`${componentCls}-wrapper`]: Object.assign(Object.assign({ clear: 'both', maxWidth: '100%' }, (0, _style.clearFix)()), { [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), { fontSize: tableFontSize, background: tableBg, borderRadius: `${tableRadius}px ${tableRadius}px 0 0` }), // https://github.com/ant-design/ant-design/issues/17611 table: { width: '100%', textAlign: 'start', borderRadius: `${tableRadius}px ${tableRadius}px 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: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`, overflowWrap: 'break-word' }, // ============================ Title ============================= [`${componentCls}-title`]: { padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px` }, // ============================ 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: `-${tablePaddingVertical}px`, marginInline: `${token.tableExpandColumnWidth - tablePaddingHorizontal}px -${tablePaddingHorizontal}px`, [`${componentCls}-tbody > tr:last-child > td`]: { borderBottom: 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: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`, color: tableFooterTextColor, background: tableFooterBg } }) }; }; // ============================== Export ============================== var _default = exports.default = (0, _internal.genComponentStyleHook)('Table', token => { const { colorTextHeading, colorSplit, colorIcon, colorIconHover, opacityLoading, 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 } = token; const baseColorAction = new _tinycolor.TinyColor(colorIcon); const baseColorActionHover = new _tinycolor.TinyColor(colorIconHover); const zIndexTableFixed = 2; 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, tableHeaderIconColor: baseColorAction.clone().setAlpha(baseColorAction.getAlpha() * opacityLoading).toRgbString(), tableHeaderIconColorHover: baseColorActionHover.clone().setAlpha(baseColorActionHover.getAlpha() * opacityLoading).toRgbString(), tableBodySortBg: bodySortBg, tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg, tableHeaderFilterActiveBg: headerFilterHoverBg, tableFilterDropdownBg: filterDropdownBg, tableRowHoverBg: rowHoverBg, tableSelectedRowBg: rowSelectedBg, tableSelectedRowHoverBg: rowSelectedHoverBg, zIndexTableFixed, zIndexTableSticky: zIndexTableFixed + 1, tableFontSizeMiddle: cellFontSizeMD, tableFontSizeSmall: cellFontSizeSM, tableSelectionColumnWidth: selectionColumnWidth, tableExpandIconBg: expandIconBg, tableExpandColumnWidth: checkboxSize + 2 * token.padding, tableExpandedRowBg: rowExpandedBg, // Dropdown tableFilterDropdownWidth: 120, tableFilterDropdownHeight: 264, tableFilterDropdownSearchWidth: 140, // Virtual Scroll Bar tableScrollThumbSize: 8, 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)]; }, token => { const { colorFillAlter, colorBgContainer, colorTextHeading, colorFillSecondary, colorFillContent, controlItemBgActive, controlItemBgActiveHover, padding, paddingSM, paddingXS, colorBorderSecondary, borderRadiusLG, fontSize, controlHeight, colorTextPlaceholder } = token; const colorFillSecondarySolid = new _tinycolor.TinyColor(colorFillSecondary).onBackground(colorBgContainer).toHexShortString(); const colorFillContentSolid = new _tinycolor.TinyColor(colorFillContent).onBackground(colorBgContainer).toHexShortString(); const colorFillAlterSolid = new _tinycolor.TinyColor(colorFillAlter).onBackground(colorBgContainer).toHexShortString(); 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 }; });