299 lines
11 KiB
JavaScript
299 lines
11 KiB
JavaScript
|
"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
|
||
|
|
};
|
||
|
|
});
|