antd/es/table/style/expand.js

An enterprise-class UI design language and React components implementation

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { operationUnit } from '../../style';

var genExpandStyle = function genExpandStyle(token) {
  var _extends2, _$concat2;

  var componentCls = token.componentCls,
      antCls = token.antCls,
      checkboxSize = token.controlInteractiveSize,
      motionDurationSlow = token.motionDurationSlow,
      controlLineWidth = token.controlLineWidth,
      paddingXXS = token.paddingXXS,
      paddingXS = token.paddingXS,
      controlLineType = token.controlLineType,
      tableBorderColor = token.tableBorderColor,
      tableExpandIconBg = token.tableExpandIconBg,
      tableExpandColumnWidth = token.tableExpandColumnWidth,
      radiusBase = token.radiusBase,
      fontSize = token.fontSize,
      fontSizeSM = token.fontSizeSM,
      lineHeight = token.lineHeight,
      lineWidth = token.lineWidth,
      tablePaddingVertical = token.tablePaddingVertical,
      tablePaddingHorizontal = token.tablePaddingHorizontal,
      tableExpandedRowBg = token.tableExpandedRowBg;
  var halfInnerSize = checkboxSize / 2 - controlLineWidth; // must be odd number, unless it cannot align center

  var expandIconSize = halfInnerSize * 2 + controlLineWidth * 3;
  var tableBorder = "".concat(controlLineWidth, "px ").concat(controlLineType, " ").concat(tableBorderColor);
  var expandIconLineOffset = paddingXXS - controlLineWidth;
  return _defineProperty({}, "".concat(componentCls, "-wrapper"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(componentCls, "-expand-icon-col"), {
    width: tableExpandColumnWidth
  }), _defineProperty(_$concat2, "".concat(componentCls, "-row-expand-icon-cell"), _defineProperty({
    textAlign: 'center'
  }, "".concat(componentCls, "-row-expand-icon"), {
    display: 'inline-flex',
    "float": 'none',
    verticalAlign: 'sub'
  })), _defineProperty(_$concat2, "".concat(componentCls, "-row-indent"), {
    height: 1
  }), _defineProperty(_$concat2, "".concat(componentCls, "-row-expand-icon"), _extends(_extends({}, operationUnit(token)), (_extends2 = {
    position: 'relative',
    "float": 'left',
    boxSizing: 'border-box',
    width: expandIconSize,
    height: expandIconSize,
    padding: 0,
    color: 'inherit',
    lineHeight: "".concat(expandIconSize, "px"),
    background: tableExpandIconBg,
    border: tableBorder,
    borderRadius: radiusBase,
    transform: "scale(".concat(checkboxSize / expandIconSize, ")"),
    transition: "all ".concat(motionDurationSlow),
    userSelect: 'none'
  }, _defineProperty(_extends2, "&:focus, &:hover, &:active", {
    borderColor: 'currentcolor'
  }), _defineProperty(_extends2, "&::before, &::after", {
    position: 'absolute',
    background: 'currentcolor',
    transition: "transform ".concat(motionDurationSlow, " ease-out"),
    content: '""'
  }), _defineProperty(_extends2, '&::before', {
    top: halfInnerSize,
    insetInlineEnd: expandIconLineOffset,
    insetInlineStart: expandIconLineOffset,
    height: controlLineWidth
  }), _defineProperty(_extends2, '&::after', {
    top: expandIconLineOffset,
    bottom: expandIconLineOffset,
    insetInlineStart: halfInnerSize,
    width: controlLineWidth,
    transform: 'rotate(90deg)'
  }), _defineProperty(_extends2, '&-collapsed::before', {
    transform: 'rotate(-180deg)'
  }), _defineProperty(_extends2, '&-collapsed::after', {
    transform: 'rotate(0deg)'
  }), _defineProperty(_extends2, '&-spaced', {
    '&::before, &::after': {
      display: 'none',
      content: 'none'
    },
    background: 'transparent',
    border: 0,
    visibility: 'hidden'
  }), _extends2))), _defineProperty(_$concat2, "".concat(componentCls, "-row-indent + ").concat(componentCls, "-row-expand-icon"), {
    marginTop: (fontSize * lineHeight - lineWidth * 3) / 2 - Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
    marginInlineEnd: paddingXS
  }), _defineProperty(_$concat2, "tr".concat(componentCls, "-expanded-row"), _defineProperty({
    '&, &:hover': {
      '> td': {
        background: tableExpandedRowBg
      }
    }
  }, "".concat(antCls, "-descriptions-view"), {
    display: 'flex',
    table: {
      flex: 'auto',
      width: 'auto'
    }
  })), _defineProperty(_$concat2, "".concat(componentCls, "-expanded-row-fixed"), {
    position: 'relative',
    margin: "-".concat(tablePaddingVertical, "px -").concat(tablePaddingHorizontal, "px"),
    padding: "".concat(tablePaddingVertical, "px ").concat(tablePaddingHorizontal, "px")
  }), _$concat2));
};

export default genExpandStyle;