ant-design/components/table/style/sticky.ts
lijianan 71eddd2c20 chore: remove useless tsx support (#39934)
* chore: remove useless tsx support

* add

* revert

* add

* fix

* fix

* add test case

* fix
2022-12-31 22:24:56 +08:00

60 lines
1.6 KiB
TypeScript

import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/internal';
import type { TableToken } from './index';
const genStickyStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
const {
componentCls,
opacityLoading,
tableScrollThumbBg,
tableScrollThumbBgHover,
tableScrollThumbSize,
tableScrollBg,
zIndexTableSticky,
} = token;
const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
return {
[`${componentCls}-wrapper`]: {
[`${componentCls}-sticky`]: {
'&-holder': {
position: 'sticky',
zIndex: zIndexTableSticky,
background: token.colorBgContainer,
},
'&-scroll': {
position: 'sticky',
bottom: 0,
height: `${tableScrollThumbSize}px !important`,
zIndex: zIndexTableSticky,
display: 'flex',
alignItems: 'center',
background: tableScrollBg,
borderTop: tableBorder,
opacity: opacityLoading,
'&:hover': {
transformOrigin: 'center bottom',
},
// fake scrollbar style of sticky
'&-bar': {
height: tableScrollThumbSize,
backgroundColor: tableScrollThumbBg,
borderRadius: 100,
transition: `all ${token.motionDurationSlow}, transform none`,
position: 'absolute',
bottom: 0,
'&:hover, &-active': {
backgroundColor: tableScrollThumbBgHover,
},
},
},
},
},
};
};
export default genStickyStyle;