baseui
Version:
A React Component library implementing the Base design language
255 lines (248 loc) • 9.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledTableLoadingMessage = exports.StyledTableHeadRow = exports.StyledTableHeadCellSortable = exports.StyledTableHeadCell = exports.StyledTableHead = exports.StyledTableEmptyMessage = exports.StyledTableBodyRow = exports.StyledTableBodyCell = exports.StyledTableBody = exports.StyledTable = exports.StyledSortNoneIcon = exports.StyledSortIconContainer = exports.StyledSortDescIcon = exports.StyledSortAscIcon = exports.StyledRoot = void 0;
var _blank = _interopRequireDefault(require("../icon/blank"));
var _chevronDown = _interopRequireDefault(require("../icon/chevron-down"));
var _chevronUp = _interopRequireDefault(require("../icon/chevron-up"));
var _styles = require("../styles");
var _constants = require("./constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @ts-ignore
function sizeToCellPadding($theme, $size) {
if ($size === _constants.SIZE.compact) {
return $theme.sizing.scale500;
} else if ($size === _constants.SIZE.spacious) {
return $theme.sizing.scale800;
}
return $theme.sizing.scale600;
}
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
$theme,
$divider
}) => {
const borderStyles = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical ? (0, _styles.expandBorderStyles)($theme.borders.border300) : {};
return {
...borderStyles,
...($divider === _constants.DIVIDER.horizontal ? {
borderBottomWidth: $theme.borders.border300.borderWidth,
borderBottomStyle: $theme.borders.border300.borderStyle,
borderBottomColor: $theme.borders.border300.borderColor
} : {}),
position: 'relative',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
backgroundColor: $theme.colors.tableBackground,
// Creates a stacking context so we can use z-index on the StyledTableHeadCell
// without affecting anything outside of this component.
transform: 'scale(1)'
};
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// @ts-ignore
const StyledTable = exports.StyledTable = (0, _styles.styled)('table', ({
$theme,
$width
}) => {
return {
borderSpacing: '0',
boxSizing: 'border-box',
minWidth: '100%',
width: $width || null
};
});
StyledTable.displayName = "StyledTable";
StyledTable.displayName = 'StyledTable';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledTableHead = exports.StyledTableHead = (0, _styles.styled)('thead', ({
$theme
}) => {
return {};
});
StyledTableHead.displayName = "StyledTableHead";
StyledTableHead.displayName = 'StyledTableHead';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledTableHeadRow = exports.StyledTableHeadRow = (0, _styles.styled)('tr', ({
$theme
}) => {
return {};
});
StyledTableHeadRow.displayName = "StyledTableHeadRow";
StyledTableHeadRow.displayName = 'StyledTableHeadRow';
const StyledTableHeadCell = exports.StyledTableHeadCell = (0, _styles.styled)('th', ({
$theme,
$size,
$divider
}) => {
const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
const borderVertical = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical;
const padding = sizeToCellPadding($theme, $size);
return {
...$theme.typography.font350,
position: 'sticky',
top: 0,
paddingTop: padding,
paddingRight: padding,
paddingBottom: padding,
paddingLeft: padding,
backgroundColor: $theme.colors.tableHeadBackgroundColor,
color: $theme.colors.contentPrimary,
textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
whiteSpace: 'nowrap',
zIndex: 1,
...($divider === _constants.DIVIDER.clean ? {} : {
borderBottomColor: $theme.borders.border300.borderColor,
borderBottomStyle: $theme.borders.border300.borderStyle,
borderBottomWidth: $theme.borders.border300.borderWidth
}),
':not(:last-child)': {
[`border${borderDir}Color`]: borderVertical ? $theme.borders.border300.borderColor : null,
[`border${borderDir}Style`]: borderVertical ? $theme.borders.border300.borderStyle : null,
[`border${borderDir}Width`]: borderVertical ? $theme.borders.border300.borderWidth : null
}
};
});
StyledTableHeadCell.displayName = "StyledTableHeadCell";
StyledTableHeadCell.displayName = 'StyledTableHeadCell';
const StyledTableHeadCellSortable = exports.StyledTableHeadCellSortable = (0, _styles.withStyle)(StyledTableHeadCell, ({
$theme,
$isFocusVisible
}) => {
return {
cursor: 'pointer',
outline: 'none',
':focus': {
outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none',
outlineOffset: '-3px'
},
':hover': {
backgroundColor: $theme.colors.tableStripedBackground
}
};
});
StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
StyledTableHeadCellSortable.displayName = 'StyledTableHeadCellSortable';
const StyledSortIconContainer = exports.StyledSortIconContainer = (0, _styles.styled)('span', ({
$theme
}) => {
return {
display: 'flex',
alignItems: 'center',
position: 'absolute',
top: '50%',
right: $theme.sizing.scale500,
transform: 'translateY(-50%)'
};
});
StyledSortIconContainer.displayName = "StyledSortIconContainer";
StyledSortIconContainer.displayName = 'StyledSortIconContainer';
// No longer used, but will maintain for some time to support existing usage
const StyledSortAscIcon = exports.StyledSortAscIcon = (0, _styles.styled)(_chevronUp.default, ({
$theme
}) => {
return {
position: 'absolute',
top: '50%',
right: $theme.sizing.scale500,
transform: 'translateY(-50%)'
};
});
StyledSortAscIcon.displayName = "StyledSortAscIcon";
StyledSortAscIcon.displayName = 'StyledSortAscIcon';
const StyledSortDescIcon = exports.StyledSortDescIcon = (0, _styles.styled)(_chevronDown.default, ({
$theme
}) => {
return {
position: 'absolute',
top: '50%',
right: $theme.sizing.scale500,
transform: 'translateY(-50%)'
};
});
StyledSortDescIcon.displayName = "StyledSortDescIcon";
StyledSortDescIcon.displayName = 'StyledSortDescIcon';
const StyledSortNoneIcon = exports.StyledSortNoneIcon = (0, _styles.styled)(_blank.default, ({
$theme
}) => {
return {
position: 'absolute',
top: '50%',
right: $theme.sizing.scale500,
transform: 'translateY(-50%)'
};
});
StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
StyledSortNoneIcon.displayName = 'StyledSortNoneIcon';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledTableBody = exports.StyledTableBody = (0, _styles.styled)('tbody', ({
$theme
}) => {
return {};
});
StyledTableBody.displayName = "StyledTableBody";
StyledTableBody.displayName = 'StyledTableBody';
const StyledTableBodyRow = exports.StyledTableBodyRow = (0, _styles.styled)('tr', ({
$theme
}) => {
return {
':hover': {
backgroundColor: $theme.colors.tableStripedBackground
}
};
});
StyledTableBodyRow.displayName = "StyledTableBodyRow";
StyledTableBodyRow.displayName = 'StyledTableBodyRow';
const StyledTableBodyCell = exports.StyledTableBodyCell = (0, _styles.styled)('td',
// @ts-ignore
({
$theme,
$size,
$divider,
$isNumeric,
$isLastRow
}) => {
const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
const borderVertical = $divider === _constants.DIVIDER.vertical || $divider === _constants.DIVIDER.grid;
const borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
const padding = sizeToCellPadding($theme, $size);
return {
...$theme.typography.font200,
paddingTop: padding,
paddingRight: padding,
paddingBottom: padding,
paddingLeft: padding,
color: $theme.colors.contentPrimary,
textAlign: $isNumeric ? 'right' : null,
verticalAlign: 'top',
borderBottomColor: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderColor : null,
borderBottomStyle: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderStyle : null,
borderBottomWidth: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderWidth : null,
':not(:last-child)': {
[`border${borderDir}Color`]: borderVertical ? $theme.borders.border300.borderColor : null,
[`border${borderDir}Style`]: borderVertical ? $theme.borders.border300.borderStyle : null,
[`border${borderDir}Width`]: borderVertical ? $theme.borders.border300.borderWidth : null
}
};
});
StyledTableBodyCell.displayName = "StyledTableBodyCell";
StyledTableBodyCell.displayName = 'StyledTableBodyCell';
const StyledTableLoadingMessage = exports.StyledTableLoadingMessage = (0, _styles.styled)('div', ({
$theme
}) => {
return {
...$theme.typography.ParagraphSmall,
color: $theme.colors.contentPrimary,
padding: $theme.sizing.scale600
};
});
StyledTableLoadingMessage.displayName = "StyledTableLoadingMessage";
StyledTableLoadingMessage.displayName = 'StyledTableLoadingMessage';
const StyledTableEmptyMessage = exports.StyledTableEmptyMessage = StyledTableLoadingMessage;