virtual.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import { unit } from '@ant-design/cssinjs';
  2. const genVirtualStyle = token => {
  3. const {
  4. componentCls,
  5. motionDurationMid,
  6. lineWidth,
  7. lineType,
  8. tableBorderColor,
  9. calc
  10. } = token;
  11. const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
  12. const rowCellCls = `${componentCls}-expanded-row-cell`;
  13. return {
  14. [`${componentCls}-wrapper`]: {
  15. // ========================== Row ==========================
  16. [`${componentCls}-tbody-virtual`]: {
  17. [`${componentCls}-tbody-virtual-holder-inner`]: {
  18. [`
  19. & > ${componentCls}-row,
  20. & > div:not(${componentCls}-row) > ${componentCls}-row
  21. `]: {
  22. display: 'flex',
  23. boxSizing: 'border-box',
  24. width: '100%'
  25. }
  26. },
  27. [`${componentCls}-cell`]: {
  28. borderBottom: tableBorder,
  29. transition: `background ${motionDurationMid}`
  30. },
  31. [`${componentCls}-expanded-row`]: {
  32. [`${rowCellCls}${rowCellCls}-fixed`]: {
  33. position: 'sticky',
  34. insetInlineStart: 0,
  35. overflow: 'hidden',
  36. width: `calc(var(--virtual-width) - ${unit(lineWidth)})`,
  37. borderInlineEnd: 'none'
  38. }
  39. }
  40. },
  41. // ======================== Border =========================
  42. [`${componentCls}-bordered`]: {
  43. [`${componentCls}-tbody-virtual`]: {
  44. '&:after': {
  45. content: '""',
  46. insetInline: 0,
  47. bottom: 0,
  48. borderBottom: tableBorder,
  49. position: 'absolute'
  50. },
  51. [`${componentCls}-cell`]: {
  52. borderInlineEnd: tableBorder,
  53. [`&${componentCls}-cell-fix-right-first:before`]: {
  54. content: '""',
  55. position: 'absolute',
  56. insetBlock: 0,
  57. insetInlineStart: calc(lineWidth).mul(-1).equal(),
  58. borderInlineStart: tableBorder
  59. }
  60. }
  61. },
  62. // Empty placeholder
  63. [`&${componentCls}-virtual`]: {
  64. [`${componentCls}-placeholder ${componentCls}-cell`]: {
  65. borderInlineEnd: tableBorder,
  66. borderBottom: tableBorder
  67. }
  68. }
  69. }
  70. }
  71. };
  72. };
  73. export default genVirtualStyle;