antd/lib/table/style/bordered.js

An enterprise-class UI design language and React components implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genBorderedStyle = token => {
  const {
    antCls,
    componentCls,
    lineWidth,
    lineType,
    tableBorderColor,
    tableHeaderBg,
    tablePaddingVertical,
    tablePaddingHorizontal,
    calc
  } = token;
  const tableBorder = `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${tableBorderColor}`;
  const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'table');
  const getSizeBorderStyle = (size, paddingVertical, paddingHorizontal) => ({
    [`&${componentCls}-${size}`]: {
      [`> ${componentCls}-container`]: {
        [`> ${componentCls}-content, > ${componentCls}-body`]: {
          '> table > tbody > tr > th, > table > tbody > tr > td': {
            [`> ${componentCls}-expanded-row-fixed`]: {
              margin: `${(0, _cssinjs.unit)(calc(paddingVertical).mul(-1).equal())}
              ${(0, _cssinjs.unit)(calc(calc(paddingHorizontal).add(lineWidth)).mul(-1).equal())}`
            }
          }
        }
      }
    }
  });
  return {
    [`${componentCls}-wrapper`]: {
      [varName('nested-border-top')]: tableBorder,
      [`${componentCls}${componentCls}-bordered`]: {
        // ============================ Title =============================
        [`> ${componentCls}-title`]: {
          border: tableBorder,
          borderBottom: 0
        },
        // ============================ Content ============================
        [`> ${componentCls}-container`]: {
          borderInlineStart: tableBorder,
          borderTop: tableBorder,
          '&:first-child': {
            borderTop: varRef('nested-border-top', tableBorder)
          },
          [`> ${componentCls}-header${componentCls}-sticky-holder`]: {
            marginTop: calc(lineWidth).mul(-1).equal(),
            borderTop: tableBorder
          },
          [`> ${componentCls}-content, > ${componentCls}-header, > ${componentCls}-body, > ${componentCls}-summary`]: {
            '> table': {
              // ============================= Cell =============================
              '> thead > tr > th, > thead > tr > td, > tbody > tr > th, > tbody > tr > td, > tfoot > tr > th, > tfoot > tr > td': {
                borderInlineEnd: tableBorder
              },
              // ============================ Header ============================
              '> thead': {
                '> tr:not(:last-child) > th': {
                  borderBottom: tableBorder
                },
                '> tr > th::before': {
                  backgroundColor: 'transparent !important'
                }
              },
              // Fixed right should provides additional border
              // Only add separator border when there are multiple fixed-right columns
              // (i.e. fix-right-first is not also fix-right-last), otherwise the
              // ::after border doubles up with the cell's own borderInlineEnd and
              // creates a spurious extra vertical line. See #56287.
              '> thead > tr, > tbody > tr, > tfoot > tr': {
                [`> ${componentCls}-cell-fix-right-first:not(${componentCls}-cell-fix-right-last)::after`]: {
                  borderInlineEnd: tableBorder
                }
              },
              // ========================== Expandable ==========================
              '> tbody > tr > th, > tbody > tr > td': {
                [`> ${componentCls}-expanded-row-fixed`]: {
                  margin: `${(0, _cssinjs.unit)(calc(tablePaddingVertical).mul(-1).equal())} ${(0, _cssinjs.unit)(calc(calc(tablePaddingHorizontal).add(lineWidth)).mul(-1).equal())}`,
                  '&::after': {
                    position: 'absolute',
                    top: 0,
                    insetInlineEnd: lineWidth,
                    bottom: 0,
                    borderInlineEnd: tableBorder,
                    content: '""'
                  }
                }
              }
            }
          }
        },
        // ============================ Scroll ============================
        [`&${componentCls}-scroll-horizontal`]: {
          [`> ${componentCls}-container > ${componentCls}-body`]: {
            '> table > tbody': {
              [`
                > tr${componentCls}-expanded-row,
                > tr${componentCls}-placeholder
              `]: {
                '> th, > td': {
                  borderInlineEnd: 0
                }
              }
            }
          }
        },
        // ============================ Size ============================
        ...getSizeBorderStyle('medium', token.tablePaddingVerticalMiddle, token.tablePaddingHorizontalMiddle),
        ...getSizeBorderStyle('small', token.tablePaddingVerticalSmall, token.tablePaddingHorizontalSmall),
        // ============================ Footer ============================
        [`> ${componentCls}-footer`]: {
          border: tableBorder,
          borderTop: 0
        }
      },
      // ============================ Nested ============================
      [`${componentCls}-cell`]: {
        [`
          > ${componentCls}-wrapper:only-child,
          > ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child
        `]: {
          [varName('nested-border-top')]: 0
        },
        // https://github.com/ant-design/ant-design/issues/35577
        '&-scrollbar:not([rowspan])': {
          boxShadow: `0 ${(0, _cssinjs.unit)(lineWidth)} 0 ${(0, _cssinjs.unit)(lineWidth)} ${tableHeaderBg}`
        }
      },
      [`${componentCls}-bordered ${componentCls}-cell-scrollbar`]: {
        borderInlineEnd: tableBorder
      }
    }
  };
};
var _default = exports.default = genBorderedStyle;