mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
refactor: Full token table (#35888)
* chore: more * chore: more * refactor: full token
This commit is contained in:
二货机器人
GitHub
parent
dbedf0675c
commit
8f5b9b5f84
@ -4,18 +4,33 @@ import { operationUnit } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls, antCls } = token;
|
||||
// FIXME: 需要从 checkbox 那里取
|
||||
const checkboxSize = token.controlInteractiveSize;
|
||||
const halfInnerSize = checkboxSize / 2 - 1;
|
||||
// must be odd number, unless it cannot align centerly
|
||||
const expandIconSize = halfInnerSize * 2 + token.controlLineWidth * 3;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
const {
|
||||
componentCls,
|
||||
antCls,
|
||||
controlInteractiveSize: checkboxSize,
|
||||
motionDurationSlow,
|
||||
controlLineWidth,
|
||||
padding,
|
||||
paddingXXS,
|
||||
paddingXS,
|
||||
controlLineType,
|
||||
tableBorderColor,
|
||||
tableExpandIconBg,
|
||||
radiusBase,
|
||||
tablePaddingVertical,
|
||||
tablePaddingHorizontal,
|
||||
tableExpandedRowBg,
|
||||
} = token;
|
||||
const halfInnerSize = checkboxSize / 2 - controlLineWidth;
|
||||
// must be odd number, unless it cannot align center
|
||||
const expandIconSize = halfInnerSize * 2 + controlLineWidth * 3;
|
||||
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
|
||||
const expandIconLineOffset = paddingXXS - controlLineWidth;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-expand-icon-col`]: {
|
||||
// FIXME
|
||||
width: 48,
|
||||
width: checkboxSize + padding * 2,
|
||||
},
|
||||
|
||||
[`${componentCls}-row-expand-icon-cell`]: {
|
||||
@ -37,12 +52,12 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
padding: 0,
|
||||
color: 'inherit',
|
||||
lineHeight: `${expandIconSize}px`,
|
||||
background: token.tableExpandIconBg,
|
||||
background: tableExpandIconBg,
|
||||
border: tableBorder,
|
||||
borderRadius: token.radiusBase,
|
||||
borderRadius: radiusBase,
|
||||
outline: 'none',
|
||||
transform: `scale(${checkboxSize / expandIconSize})`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
userSelect: 'none',
|
||||
|
||||
[`&:focus, &:hover, &:active`]: {
|
||||
@ -52,22 +67,22 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
[`&::before, &::after`]: {
|
||||
position: 'absolute',
|
||||
background: 'currentcolor',
|
||||
transition: `transform ${token.motionDurationSlow} ease-out`,
|
||||
transition: `transform ${motionDurationSlow} ease-out`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
top: halfInnerSize,
|
||||
insetInlineEnd: 3,
|
||||
insetInlineStart: 3,
|
||||
height: token.controlLineWidth,
|
||||
insetInlineEnd: expandIconLineOffset,
|
||||
insetInlineStart: expandIconLineOffset,
|
||||
height: controlLineWidth,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
top: expandIconLineOffset,
|
||||
bottom: expandIconLineOffset,
|
||||
insetInlineStart: halfInnerSize,
|
||||
width: token.controlLineWidth,
|
||||
width: controlLineWidth,
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
|
||||
@ -92,13 +107,13 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-row-indent + ${componentCls}-row-expand-icon`]: {
|
||||
marginInlineEnd: token.paddingXS,
|
||||
marginInlineEnd: paddingXS,
|
||||
},
|
||||
|
||||
[`tr${componentCls}-expanded-row`]: {
|
||||
'&, &:hover': {
|
||||
'> td': {
|
||||
background: token.tableExpandedRowBg,
|
||||
background: tableExpandedRowBg,
|
||||
},
|
||||
},
|
||||
|
||||
@ -116,8 +131,8 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
// With fixed
|
||||
[`${componentCls}-expanded-row-fixed`]: {
|
||||
position: 'relative',
|
||||
margin: `-${token.tablePaddingVertical}px -${token.tablePaddingHorizontal}px`,
|
||||
padding: `${token.tablePaddingVertical}px ${token.tablePaddingHorizontal}px`,
|
||||
margin: `-${tablePaddingVertical}px -${tablePaddingHorizontal}px`,
|
||||
padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -4,11 +4,38 @@ import { resetComponent } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genFilterStyle: GenerateStyle<TableToken, CSSInterpolation> = token => {
|
||||
const { componentCls, antCls, iconCls } = token;
|
||||
const {
|
||||
componentCls,
|
||||
antCls,
|
||||
iconCls,
|
||||
tableFilterDropdownWidth,
|
||||
tableFilterDropdownSearchWidth,
|
||||
paddingXXS,
|
||||
paddingXS,
|
||||
lineWidth,
|
||||
colorText,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
tableBorderColor,
|
||||
tableHeaderIconColor,
|
||||
fontSizeSM,
|
||||
tablePaddingHorizontal,
|
||||
radiusBase,
|
||||
motionDurationSlow,
|
||||
colorTextSecondary,
|
||||
colorPrimary,
|
||||
colorPrimaryActive,
|
||||
tableHeaderFilterActiveBg,
|
||||
colorTextDisabled,
|
||||
tableFilterDropdownBg,
|
||||
tableFilterDropdownHeight,
|
||||
controlItemBgHover,
|
||||
boxShadow,
|
||||
} = token;
|
||||
const dropdownPrefixCls = `${antCls}-dropdown`;
|
||||
const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
|
||||
const treePrefixCls = `${antCls}-tree`;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
|
||||
|
||||
return [
|
||||
{
|
||||
@ -22,22 +49,22 @@ const genFilterStyle: GenerateStyle<TableToken, CSSInterpolation> = token => {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBlock: -token.paddingXXS,
|
||||
marginInline: `${token.paddingXXS}px ${-token.tablePaddingHorizontal / 2}px`,
|
||||
padding: `0 ${token.paddingXXS}px`,
|
||||
color: token.tableHeaderIconColor,
|
||||
fontSize: token.fontSizeSM,
|
||||
borderRadius: token.radiusBase,
|
||||
marginBlock: -paddingXXS,
|
||||
marginInline: `${paddingXXS}px ${-tablePaddingHorizontal / 2}px`,
|
||||
padding: `0 ${paddingXXS}px`,
|
||||
color: tableHeaderIconColor,
|
||||
fontSize: fontSizeSM,
|
||||
borderRadius: radiusBase,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorTextSecondary,
|
||||
background: token.tableHeaderFilterActiveBg,
|
||||
color: colorTextSecondary,
|
||||
background: tableHeaderFilterActiveBg,
|
||||
},
|
||||
|
||||
'&.active': {
|
||||
color: token.colorPrimary,
|
||||
color: colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -47,76 +74,75 @@ const genFilterStyle: GenerateStyle<TableToken, CSSInterpolation> = token => {
|
||||
[`${antCls}-dropdown`]: {
|
||||
[tableFilterDropdownPrefixCls]: {
|
||||
...resetComponent(token),
|
||||
// FIXME
|
||||
minWidth: 120,
|
||||
backgroundColor: token.tableFilterDropdownBg,
|
||||
borderRadius: token.radiusBase,
|
||||
boxShadow: token.boxShadow,
|
||||
|
||||
minWidth: tableFilterDropdownWidth,
|
||||
backgroundColor: tableFilterDropdownBg,
|
||||
borderRadius: radiusBase,
|
||||
boxShadow,
|
||||
|
||||
// Reset menu
|
||||
[`${dropdownPrefixCls}-menu`]: {
|
||||
// https://github.com/ant-design/ant-design/issues/4916
|
||||
// https://github.com/ant-design/ant-design/issues/19542
|
||||
maxHeight: token.tableFilterDropdownMaxHeight,
|
||||
maxHeight: tableFilterDropdownHeight,
|
||||
overflowX: 'hidden',
|
||||
border: 0,
|
||||
boxShadow: 'none',
|
||||
|
||||
'&:empty::after': {
|
||||
display: 'block',
|
||||
padding: `${token.paddingXS}px 0`,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
padding: `${paddingXS}px 0`,
|
||||
color: colorTextDisabled,
|
||||
fontSize: fontSizeSM,
|
||||
textAlign: 'center',
|
||||
content: '"Not Found"',
|
||||
},
|
||||
},
|
||||
|
||||
[`${tableFilterDropdownPrefixCls}-tree`]: {
|
||||
paddingBlock: `${token.paddingXS}px 0`,
|
||||
paddingInline: token.paddingXS,
|
||||
paddingBlock: `${paddingXS}px 0`,
|
||||
paddingInline: paddingXS,
|
||||
|
||||
[treePrefixCls]: {
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
[`${treePrefixCls}-treenode ${treePrefixCls}-node-content-wrapper:hover`]: {
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
backgroundColor: controlItemBgHover,
|
||||
},
|
||||
|
||||
[`${treePrefixCls}-treenode-checkbox-checked ${treePrefixCls}-node-content-wrapper`]: {
|
||||
'&, &:hover': {
|
||||
backgroundColor: token.colorPrimaryActive,
|
||||
backgroundColor: colorPrimaryActive,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${tableFilterDropdownPrefixCls}-search`]: {
|
||||
padding: token.paddingXS,
|
||||
padding: paddingXS,
|
||||
borderBottom: tableBorder,
|
||||
|
||||
'&-input': {
|
||||
input: {
|
||||
// FIXME
|
||||
minWidth: 140,
|
||||
minWidth: tableFilterDropdownSearchWidth,
|
||||
},
|
||||
[iconCls]: {
|
||||
color: token.colorTextDisabled,
|
||||
color: colorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${tableFilterDropdownPrefixCls}-checkall`]: {
|
||||
width: '100%',
|
||||
marginBottom: token.paddingXXS,
|
||||
marginInlineStart: token.paddingXXS,
|
||||
marginBottom: paddingXXS,
|
||||
marginInlineStart: paddingXXS,
|
||||
},
|
||||
|
||||
// Operation
|
||||
[`${tableFilterDropdownPrefixCls}-btns`]: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: `${token.paddingXS - 1}px ${token.paddingXS}px`,
|
||||
padding: `${paddingXS - lineWidth}px ${paddingXS}px`,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'inherit',
|
||||
borderTop: tableBorder,
|
||||
@ -131,8 +157,8 @@ const genFilterStyle: GenerateStyle<TableToken, CSSInterpolation> = token => {
|
||||
{
|
||||
// Checkbox
|
||||
[`${antCls}-checkbox-wrapper + span`]: {
|
||||
paddingInlineStart: token.paddingXS,
|
||||
color: token.colorText,
|
||||
paddingInlineStart: paddingXS,
|
||||
color: colorText,
|
||||
},
|
||||
|
||||
[`> ul`]: {
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genFixedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
// FIXME
|
||||
const shadowColor = new TinyColor('rgba(0, 0, 0, 0.15)').darken(5).toRgbString();
|
||||
const { componentCls, lineWidth, colorSplit, motionDurationSlow, zIndexTableFixed, tableBg } =
|
||||
token;
|
||||
|
||||
const shadowColor = colorSplit;
|
||||
|
||||
// Follow style is magic of shadow which should not follow token:
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`
|
||||
@ -14,8 +16,8 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
${componentCls}-cell-fix-right
|
||||
`]: {
|
||||
position: 'sticky !important' as 'sticky',
|
||||
zIndex: token.zIndexTableFixed,
|
||||
background: token.tableBg,
|
||||
zIndex: zIndexTableFixed,
|
||||
background: tableBg,
|
||||
},
|
||||
|
||||
[`
|
||||
@ -28,10 +30,10 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
bottom: -1,
|
||||
bottom: -lineWidth,
|
||||
width: 30,
|
||||
transform: 'translateX(100%)',
|
||||
transition: `box-shadow ${token.motionDurationSlow}`,
|
||||
transition: `box-shadow ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
@ -42,14 +44,14 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: -1,
|
||||
bottom: -lineWidth,
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
width: 30,
|
||||
transform: 'translateX(-100%)',
|
||||
transition: `box-shadow ${token.motionDurationSlow}`,
|
||||
transition: `box-shadow ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
@ -61,7 +63,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
width: 30,
|
||||
transition: `box-shadow ${token.motionDurationSlow}`,
|
||||
transition: `box-shadow ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@ import genEmptyStyle from './empty';
|
||||
import genExpandStyle from './expand';
|
||||
import genFilterStyle from './filter';
|
||||
import genFixedStyle from './fixed';
|
||||
import genPagniationStyle from './pagination';
|
||||
import genPaginationStyle from './pagination';
|
||||
import genRadiusStyle from './radius';
|
||||
import genRtlStyle from './rtl';
|
||||
import genSelectionStyle from './selection';
|
||||
@ -37,27 +37,58 @@ export interface TableToken extends FullToken<'Table'> {
|
||||
tableHeaderSortBg: string;
|
||||
tableHeaderSortHoverBg: string;
|
||||
tableHeaderIconColor: string;
|
||||
tableHeaderIconColorHover: string;
|
||||
tableBodySortBg: string;
|
||||
tableFixedHeaderSortActiveBg: string;
|
||||
tableHeaderFilterActiveBg: string;
|
||||
tableFilterDropdownBg: string;
|
||||
tableFilterDropdownMaxHeight: number;
|
||||
tableFilterDropdownHeight: number;
|
||||
tableRowHoverBg: string;
|
||||
tableSelectedRowBg: string;
|
||||
tableSelectedRowHoverBg: string;
|
||||
// FIXME: zIndexXxxx 统一提到一个地方
|
||||
zIndexTableFixed: number;
|
||||
zIndexTableSticky: number;
|
||||
tabelFontSizeMiddle: number;
|
||||
tabelFontSizeSmall: number;
|
||||
|
||||
tableFontSizeMiddle: number;
|
||||
tableFontSizeSmall: number;
|
||||
tableSelectionColumnWidth: number;
|
||||
tableExpandIconBg: string;
|
||||
tableExpandedRowBg: string;
|
||||
tableFilterDropdownWidth: number;
|
||||
tableFilterDropdownSearchWidth: number;
|
||||
|
||||
// Z-Index
|
||||
zIndexTableFixed: number;
|
||||
zIndexTableSticky: number;
|
||||
|
||||
// Virtual Scroll Bar
|
||||
tableScrollThumbSize: number;
|
||||
tableScrollThumbBg: string;
|
||||
tableScrollThumbBgHover: string;
|
||||
tableScrollBg: string;
|
||||
}
|
||||
|
||||
const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
const {
|
||||
componentCls,
|
||||
fontWeightStrong,
|
||||
tablePaddingVertical,
|
||||
tablePaddingHorizontal,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
tableBorderColor,
|
||||
tableFontSize,
|
||||
tableBg,
|
||||
tableRadius,
|
||||
tableHeaderTextColor,
|
||||
motionDurationSlow,
|
||||
tableHeaderBg,
|
||||
tableHeaderCellSplitColor,
|
||||
tableRowHoverBg,
|
||||
tableSelectedRowBg,
|
||||
tableSelectedRowHoverBg,
|
||||
tableFooterTextColor,
|
||||
tableFooterBg,
|
||||
} = token;
|
||||
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
clear: 'both',
|
||||
@ -66,15 +97,15 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
fontSize: token.tableFontSize,
|
||||
background: token.tableBg,
|
||||
borderRadius: token.tableRadius,
|
||||
fontSize: tableFontSize,
|
||||
background: tableBg,
|
||||
borderRadius: tableRadius,
|
||||
},
|
||||
// https://github.com/ant-design/ant-design/issues/17611
|
||||
table: {
|
||||
width: '100%',
|
||||
textAlign: 'start',
|
||||
borderRadius: `${token.tableRadius}px ${token.tableRadius}px 0 0`,
|
||||
borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
|
||||
borderCollapse: 'separate',
|
||||
borderSpacing: 0,
|
||||
},
|
||||
@ -87,25 +118,25 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
tfoot > tr > td
|
||||
`]: {
|
||||
position: 'relative',
|
||||
padding: `${token.tablePaddingVertical}px ${token.tablePaddingHorizontal}px`,
|
||||
padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
|
||||
overflowWrap: 'break-word',
|
||||
},
|
||||
|
||||
// ============================ Title =============================
|
||||
[`${componentCls}-title`]: {
|
||||
padding: `${token.tablePaddingVertical}px ${token.tablePaddingHorizontal}px`,
|
||||
padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
|
||||
},
|
||||
|
||||
// ============================ Header ============================
|
||||
[`${componentCls}-thead`]: {
|
||||
'> tr > th': {
|
||||
position: 'relative',
|
||||
color: token.tableHeaderTextColor,
|
||||
fontWeight: 500,
|
||||
color: tableHeaderTextColor,
|
||||
fontWeight: fontWeightStrong,
|
||||
textAlign: 'start',
|
||||
background: token.tableHeaderBg,
|
||||
background: tableHeaderBg,
|
||||
borderBottom: tableBorder,
|
||||
transition: `background ${token.motionDurationSlow} ease`,
|
||||
transition: `background ${motionDurationSlow} ease`,
|
||||
|
||||
"&[colspan]:not([colspan='1'])": {
|
||||
textAlign: 'center',
|
||||
@ -118,9 +149,9 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
insetInlineEnd: 0,
|
||||
width: 1,
|
||||
height: '1.6em',
|
||||
backgroundColor: token.tableHeaderCellSplitColor,
|
||||
backgroundColor: tableHeaderCellSplitColor,
|
||||
transform: 'translateY(-50%)',
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
transition: `background-color ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
@ -135,7 +166,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
'> tr': {
|
||||
'> td': {
|
||||
borderBottom: tableBorder,
|
||||
transition: `background ${token.motionDurationSlow}`,
|
||||
transition: `background ${motionDurationSlow}`,
|
||||
|
||||
// ========================= Nest Table ===========================
|
||||
[`
|
||||
@ -143,10 +174,8 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
> ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child
|
||||
`]: {
|
||||
[componentCls]: {
|
||||
marginBlock: `-${token.tablePaddingVertical}px`,
|
||||
marginInline: `${
|
||||
token.tablePaddingHorizontal + Math.ceil(token.fontSizeSM * 1.4)
|
||||
}px -${token.tablePaddingHorizontal}px`,
|
||||
marginBlock: `-${tablePaddingVertical}px`,
|
||||
marginInline: `${tablePaddingHorizontal * 2}px -${tablePaddingHorizontal}px`,
|
||||
[`${componentCls}-tbody > tr:last-child > td`]: {
|
||||
borderBottom: 0,
|
||||
'&:first-child, &:last-child': {
|
||||
@ -161,18 +190,16 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
&${componentCls}-row:hover > td,
|
||||
> td${componentCls}-cell-row-hover
|
||||
`]: {
|
||||
background: token.tableRowHoverBg,
|
||||
background: tableRowHoverBg,
|
||||
},
|
||||
|
||||
[`&${componentCls}-row-selected`]: {
|
||||
'> td': {
|
||||
background: token.tableSelectedRowBg,
|
||||
// FIXME
|
||||
borderColor: 'rgba(0, 0, 0, 0.03)',
|
||||
background: tableSelectedRowBg,
|
||||
},
|
||||
|
||||
'&:hover > td': {
|
||||
background: token.tableSelectedRowHoverBg,
|
||||
background: tableSelectedRowHoverBg,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -180,9 +207,9 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
|
||||
// ============================ Footer ============================
|
||||
[`${componentCls}-footer`]: {
|
||||
padding: `${token.tablePaddingVertical}px ${token.tablePaddingHorizontal}px`,
|
||||
color: token.tableFooterTextColor,
|
||||
background: token.tableFooterBg,
|
||||
padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
|
||||
color: tableFooterTextColor,
|
||||
background: tableFooterBg,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -190,56 +217,89 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Table', token => {
|
||||
// FIXME: missing tokens
|
||||
const tableSelectedRowBg = token.controlItemBgActive;
|
||||
const {
|
||||
controlItemBgActive,
|
||||
controlItemBgActiveHover,
|
||||
colorPlaceholder,
|
||||
colorTextHeading,
|
||||
colorSplit,
|
||||
fontSize,
|
||||
padding,
|
||||
paddingXS,
|
||||
paddingSM,
|
||||
controlHeight,
|
||||
colorBgComponentSecondary,
|
||||
colorAction,
|
||||
colorActionHover,
|
||||
colorLoadingOpacity,
|
||||
colorBgComponent,
|
||||
colorBgContainer,
|
||||
radiusBase,
|
||||
} = token;
|
||||
|
||||
const baseColorAction = new TinyColor(colorAction);
|
||||
const baseColorActionHover = new TinyColor(colorActionHover);
|
||||
|
||||
const tableSelectedRowBg = controlItemBgActive;
|
||||
const zIndexTableFixed: number = 2;
|
||||
|
||||
const tableToken = mergeToken<TableToken>(token, {
|
||||
tableFontSize: token.fontSizeBase,
|
||||
tableBg: token.colorBgComponent,
|
||||
tableRadius: token.radiusBase,
|
||||
/*
|
||||
@table-padding-vertical: 16px;
|
||||
@table-padding-horizontal: 16px;
|
||||
@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
|
||||
@table-padding-horizontal-md: (@table-padding-horizontal / 2);
|
||||
@table-padding-vertical-sm: (@table-padding-vertical / 2);
|
||||
@table-padding-horizontal-sm: (@table-padding-horizontal / 2);
|
||||
*/
|
||||
tablePaddingVertical: token.padding,
|
||||
tablePaddingHorizontal: token.padding,
|
||||
tablePaddingVerticalMiddle: (token.padding * 3) / 4,
|
||||
tablePaddingHorizontalMiddle: token.padding / 2,
|
||||
tablePaddingVerticalSmall: token.padding / 2,
|
||||
tablePaddingHorizontalSmall: token.padding / 2,
|
||||
tableBorderColor: token.colorSplit,
|
||||
tableHeaderTextColor: token.colorTextHeading,
|
||||
tableHeaderBg: token.colorBgComponentSecondary,
|
||||
tableFooterTextColor: token.colorTextHeading,
|
||||
tableFooterBg: token.colorBgComponentSecondary,
|
||||
tableHeaderCellSplitColor: 'rgba(0, 0, 0, 0.06)',
|
||||
tableHeaderSortBg: token.colorBgContainer,
|
||||
tableHeaderSortHoverBg: 'rgba(0, 0, 0, 0.04)',
|
||||
tableHeaderIconColor: '#bfbfbf',
|
||||
tableBodySortBg: '#fafafa',
|
||||
tableFixedHeaderSortActiveBg: 'hsv(0, 0, 96%)',
|
||||
tableHeaderFilterActiveBg: 'rgba(0, 0, 0, 0.04)',
|
||||
tableFilterDropdownBg: token.colorBgComponent,
|
||||
tableFilterDropdownMaxHeight: 264,
|
||||
tableRowHoverBg: token.colorBgComponentSecondary,
|
||||
tableFontSize: fontSize,
|
||||
tableBg: colorBgComponent,
|
||||
tableRadius: radiusBase,
|
||||
|
||||
tablePaddingVertical: padding,
|
||||
tablePaddingHorizontal: padding,
|
||||
tablePaddingVerticalMiddle: paddingSM,
|
||||
tablePaddingHorizontalMiddle: paddingXS,
|
||||
tablePaddingVerticalSmall: paddingXS,
|
||||
tablePaddingHorizontalSmall: paddingXS,
|
||||
tableBorderColor: colorSplit,
|
||||
tableHeaderTextColor: colorTextHeading,
|
||||
tableHeaderBg: colorBgComponentSecondary,
|
||||
tableFooterTextColor: colorTextHeading,
|
||||
tableFooterBg: colorBgComponentSecondary,
|
||||
tableHeaderCellSplitColor: colorSplit,
|
||||
tableHeaderSortBg: colorBgContainer,
|
||||
tableHeaderSortHoverBg: colorBgContainer,
|
||||
tableHeaderIconColor: baseColorAction
|
||||
.clone()
|
||||
.setAlpha(baseColorAction.getAlpha() * colorLoadingOpacity)
|
||||
.toRgbString(),
|
||||
tableHeaderIconColorHover: baseColorActionHover
|
||||
.clone()
|
||||
.setAlpha(baseColorActionHover.getAlpha() * colorLoadingOpacity)
|
||||
.toRgbString(),
|
||||
tableBodySortBg: colorBgComponentSecondary,
|
||||
tableFixedHeaderSortActiveBg: colorBgContainer,
|
||||
tableHeaderFilterActiveBg: colorBgContainer,
|
||||
tableFilterDropdownBg: colorBgComponent,
|
||||
tableRowHoverBg: colorBgComponentSecondary,
|
||||
tableSelectedRowBg,
|
||||
tableSelectedRowHoverBg: new TinyColor(tableSelectedRowBg).darken(2).toHexString(),
|
||||
tableSelectedRowHoverBg: controlItemBgActiveHover,
|
||||
zIndexTableFixed,
|
||||
zIndexTableSticky: zIndexTableFixed + 1,
|
||||
tabelFontSizeMiddle: token.fontSizeBase,
|
||||
tabelFontSizeSmall: token.fontSizeBase,
|
||||
tableSelectionColumnWidth: 32,
|
||||
tableExpandIconBg: token.colorBgComponent,
|
||||
tableExpandedRowBg: token.colorBgComponentSecondary,
|
||||
tableFontSizeMiddle: fontSize,
|
||||
tableFontSizeSmall: fontSize,
|
||||
tableSelectionColumnWidth: controlHeight,
|
||||
tableExpandIconBg: colorBgComponent,
|
||||
tableExpandedRowBg: colorBgComponentSecondary,
|
||||
|
||||
// Dropdown
|
||||
tableFilterDropdownWidth: 120,
|
||||
tableFilterDropdownHeight: 264,
|
||||
tableFilterDropdownSearchWidth: 140,
|
||||
|
||||
// Virtual Scroll Bar
|
||||
tableScrollThumbSize: 8, // Mac scroll bar size
|
||||
tableScrollThumbBg: colorPlaceholder,
|
||||
tableScrollThumbBgHover: colorTextHeading,
|
||||
tableScrollBg: colorSplit,
|
||||
});
|
||||
|
||||
return [
|
||||
genTableStyle(tableToken),
|
||||
genPagniationStyle(tableToken),
|
||||
genPaginationStyle(tableToken),
|
||||
genSummaryStyle(tableToken),
|
||||
genSorterStyle(tableToken),
|
||||
genFilterStyle(tableToken),
|
||||
|
||||
@ -3,12 +3,12 @@ import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
const { componentCls, tableRadius } = token;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[componentCls]: {
|
||||
'&-title': {
|
||||
borderRadius: `${token.tableRadius}px ${token.tableRadius}px 0 0`,
|
||||
borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
|
||||
},
|
||||
|
||||
'&-title + &-container': {
|
||||
@ -27,22 +27,22 @@ const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
'&-container': {
|
||||
borderStartStartRadius: token.tableRadius,
|
||||
borderStartEndRadius: token.tableRadius,
|
||||
borderStartStartRadius: tableRadius,
|
||||
borderStartEndRadius: tableRadius,
|
||||
|
||||
'table > thead > tr:first-child': {
|
||||
'th:first-child': {
|
||||
borderStartStartRadius: token.tableRadius,
|
||||
borderStartStartRadius: tableRadius,
|
||||
},
|
||||
|
||||
'th:last-child': {
|
||||
borderStartEndRadius: token.tableRadius,
|
||||
borderStartEndRadius: tableRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-footer': {
|
||||
borderRadius: `0 0 ${token.tableRadius}px ${token.tableRadius}px`,
|
||||
borderRadius: `0 0 ${tableRadius}px ${tableRadius}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genSelectionStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls, antCls, iconCls } = token;
|
||||
const {
|
||||
componentCls,
|
||||
antCls,
|
||||
iconCls,
|
||||
fontSizeIcon,
|
||||
paddingXS,
|
||||
tableHeaderIconColor,
|
||||
tableHeaderIconColorHover,
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
// ========================== Selections ==========================
|
||||
@ -13,8 +20,7 @@ const genSelectionStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-bordered ${componentCls}-selection-col`]: {
|
||||
// FIXME
|
||||
width: token.tableSelectionColumnWidth + 18,
|
||||
width: token.tableSelectionColumnWidth + paddingXS * 2,
|
||||
},
|
||||
|
||||
[`
|
||||
@ -54,12 +60,12 @@ const genSelectionStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
paddingInlineStart: `${token.tablePaddingHorizontal / 4}px`,
|
||||
|
||||
[iconCls]: {
|
||||
color: token.tableHeaderIconColor,
|
||||
fontSize: 10,
|
||||
color: tableHeaderIconColor,
|
||||
fontSize: fontSizeIcon,
|
||||
verticalAlign: 'baseline',
|
||||
|
||||
'&:hover': {
|
||||
color: new TinyColor(token.tableHeaderIconColor).darken(10).toRgbString(),
|
||||
color: tableHeaderIconColorHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -35,9 +35,7 @@ const genSizeStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
// ========================= Nest Table ===========================
|
||||
[`${componentCls}-wrapper:only-child ${componentCls}`]: {
|
||||
marginBlock: `-${paddingVertical}px`,
|
||||
marginInline: `${
|
||||
paddingHorizontal + Math.ceil(token.fontSizeSM * 1.4)
|
||||
}px -${paddingHorizontal}px`,
|
||||
marginInline: `${paddingHorizontal * 2}px -${paddingHorizontal}px`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -53,13 +51,13 @@ const genSizeStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
'middle',
|
||||
token.tablePaddingVerticalMiddle,
|
||||
token.tablePaddingHorizontalMiddle,
|
||||
token.tabelFontSizeMiddle,
|
||||
token.tableFontSizeMiddle,
|
||||
),
|
||||
...getSizeStyle(
|
||||
'small',
|
||||
token.tablePaddingVerticalSmall,
|
||||
token.tablePaddingHorizontalSmall,
|
||||
token.tabelFontSizeSmall,
|
||||
token.tableFontSizeSmall,
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genSorterStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
const { componentCls, marginXXS, fontSizeIcon, tableHeaderIconColor, tableHeaderIconColorHover } =
|
||||
token;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-thead th${componentCls}-column-has-sorters`]: {
|
||||
@ -59,10 +59,7 @@ const genSorterStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
content: '""',
|
||||
@ -70,8 +67,8 @@ const genSorterStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-column-sorter`]: {
|
||||
marginInlineStart: 4,
|
||||
color: token.tableHeaderIconColor,
|
||||
marginInlineStart: marginXXS,
|
||||
color: tableHeaderIconColor,
|
||||
fontSize: 0,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
@ -82,7 +79,7 @@ const genSorterStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
'&-up, &-down': {
|
||||
fontSize: 11,
|
||||
fontSize: fontSizeIcon,
|
||||
|
||||
'&.active': {
|
||||
color: token.colorPrimary,
|
||||
@ -95,7 +92,7 @@ const genSorterStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-column-sorters:hover ${componentCls}-column-sorter`]: {
|
||||
color: new TinyColor(token.tableHeaderIconColor).darken(10).toHexString(),
|
||||
color: tableHeaderIconColorHover,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,29 +1,37 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
const {
|
||||
componentCls,
|
||||
colorLoadingOpacity,
|
||||
tableScrollThumbBg,
|
||||
tableScrollThumbBgHover,
|
||||
tableScrollThumbSize,
|
||||
tableScrollBg,
|
||||
zIndexTableSticky,
|
||||
} = token;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-sticky`]: {
|
||||
'&-holder': {
|
||||
position: 'sticky',
|
||||
zIndex: token.zIndexTableSticky,
|
||||
zIndex: zIndexTableSticky,
|
||||
background: token.colorBgComponent,
|
||||
},
|
||||
|
||||
'&-scroll': {
|
||||
position: 'sticky',
|
||||
bottom: 0,
|
||||
zIndex: token.zIndexTableSticky,
|
||||
height: `${tableScrollThumbSize}px !important`,
|
||||
zIndex: zIndexTableSticky,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: new TinyColor(token.tableBorderColor).lighten(80).toRgbString(),
|
||||
background: tableScrollBg,
|
||||
borderTop: tableBorder,
|
||||
opacity: 0.6,
|
||||
opacity: colorLoadingOpacity,
|
||||
|
||||
'&:hover': {
|
||||
transformOrigin: 'center bottom',
|
||||
@ -31,16 +39,15 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
|
||||
// fake scrollbar style of sticky
|
||||
'&-bar': {
|
||||
// FIXME
|
||||
height: 8,
|
||||
// FIXME
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.35)',
|
||||
height: tableScrollThumbSize,
|
||||
backgroundColor: tableScrollThumbBg,
|
||||
borderRadius: 100,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
transition: `all ${token.motionDurationSlow}, transform none`,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
|
||||
'&:hover, &-active': {
|
||||
// FIXME
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
backgroundColor: tableScrollThumbBgHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -3,8 +3,8 @@ import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
const { componentCls, controlLineWidth, tableBorderColor } = token;
|
||||
const tableBorder = `${controlLineWidth}px ${token.controlLineType} ${tableBorderColor}`;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-summary`]: {
|
||||
@ -20,7 +20,7 @@ const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`div${componentCls}-summary`]: {
|
||||
boxShadow: `0 -${token.controlLineWidth}px 0 ${token.tableBorderColor}`,
|
||||
boxShadow: `0 -${controlLineWidth}px 0 ${tableBorderColor}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user