first commit
This commit is contained in:
rayd1o
337
frontend/node_modules/antd/lib/table/style/index.js
generated
vendored
Normal file
337
frontend/node_modules/antd/lib/table/style/index.js
generated
vendored
Normal file
@@ -0,0 +1,337 @@
|
||||
"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`
|
||||
},
|
||||
// measure cell styles
|
||||
[`& > ${componentCls}-measure-cell`]: {
|
||||
paddingBlock: `0 !important`,
|
||||
borderBlock: `0 !important`,
|
||||
[`${componentCls}-measure-cell-content`]: {
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ============================ 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
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user