baseui
Version:
A React Component library implementing the Base design language
266 lines (264 loc) • 10.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledTable = exports.StyledSortableLabel = exports.StyledRow = exports.StyledHeadCell = exports.StyledHead = exports.StyledFilterHeading = exports.StyledFilterFooter = exports.StyledFilterContent = exports.StyledFilterButton = exports.StyledCell = exports.StyledBody = exports.StyledAction = void 0;
var React = _interopRequireWildcard(require("react"));
var _styles = require("../styles");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
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.
*/
const StyledTableElement = (0, _styles.styled)('div', ({
$theme
}) => {
return {
...(0, _styles.expandBorderStyles)($theme.borders.border300),
backgroundColor: $theme.colors.tableBackground,
borderTopLeftRadius: $theme.borders.radius200,
borderTopRightRadius: $theme.borders.radius200,
borderBottomRightRadius: $theme.borders.radius200,
borderBottomLeftRadius: $theme.borders.radius200,
display: 'flex',
flexDirection: 'column',
height: '100%',
overflowX: 'auto'
};
});
StyledTableElement.displayName = "StyledTableElement";
StyledTableElement.displayName = 'StyledTableElement';
const StyledTable = exports.StyledTable = (0, _styles.withWrapper)(StyledTableElement, StyledComponent => function StyledTable(props) {
return /*#__PURE__*/React.createElement(StyledComponent, _extends({
"data-baseweb": "table-custom",
role: "grid"
}, props));
});
const StyledHeadElement = (0, _styles.styled)('div', ({
$theme,
$width
}) => {
return {
backgroundColor: $theme.colors.tableHeadBackgroundColor,
boxShadow: $theme.lighting.shadow400,
display: 'flex',
flexGrow: 0,
width: $width ? $width : '100%'
};
});
StyledHeadElement.displayName = "StyledHeadElement";
StyledHeadElement.displayName = 'StyledHeadElement';
const StyledHead = exports.StyledHead = (0, _styles.withWrapper)(StyledHeadElement, StyledComponent => function StyledHead(props) {
return /*#__PURE__*/React.createElement(StyledComponent, _extends({
role: "row"
}, props));
});
const StyledHeadCellElement = (0, _styles.styled)('div', ({
$theme,
$cursor
}) => {
const borderDir = $theme.direction === 'rtl' ? 'borderLeft' : 'borderRight';
return {
...$theme.typography.font350,
...(0, _styles.expandBorderStyles)($theme.borders.border300),
borderTopStyle: 'none',
borderBottomStyle: 'none',
borderLeftStyle: 'none',
color: $theme.colors.contentPrimary,
display: 'flex',
justifyContent: 'space-between',
paddingTop: $theme.sizing.scale500,
paddingRight: $theme.sizing.scale600,
paddingBottom: $theme.sizing.scale500,
paddingLeft: $theme.sizing.scale600,
cursor: $cursor ? $cursor : 'inherit',
width: '100%',
':last-of-type': {
[borderDir]: 'none'
}
};
});
StyledHeadCellElement.displayName = "StyledHeadCellElement";
StyledHeadCellElement.displayName = 'StyledHeadCellElement';
const StyledHeadCell = exports.StyledHeadCell = (0, _styles.withWrapper)(StyledHeadCellElement, StyledComponent => function StyledHeadCell(props) {
return /*#__PURE__*/React.createElement(StyledComponent, _extends({
role: "columnheader"
}, props));
});
const StyledSortableLabel = exports.StyledSortableLabel = (0, _styles.styled)('button', ({
$theme
}) => {
return {
...$theme.typography.font250,
alignItems: 'center',
backgroundColor: 'transparent',
borderLeftStyle: 'none',
borderTopStyle: 'none',
borderRightStyle: 'none',
borderBottomStyle: 'none',
color: $theme.colors.contentPrimary,
display: 'flex',
padding: 0,
':hover:enabled': {
cursor: 'pointer'
},
':disabled': {
color: $theme.colors.contentStateDisabled
}
};
});
StyledSortableLabel.displayName = "StyledSortableLabel";
StyledSortableLabel.displayName = 'StyledSortableLabel';
const StyledBodyElement = (0, _styles.styled)('div', ({
$width
}) => {
return {
width: $width ? $width : '100%',
overflowX: 'hidden',
// @ts-expect-error todo(flow->ts) looks to be incorrect value
overflowY: 'overlay',
flex: 1
};
});
StyledBodyElement.displayName = "StyledBodyElement";
StyledBodyElement.displayName = 'StyledBodyElement';
const StyledBody = exports.StyledBody = (0, _styles.withWrapper)(StyledBodyElement, StyledComponent => function StyledBody(props) {
return /*#__PURE__*/React.createElement(StyledComponent, _extends({
role: "rowgroup"
}, props));
});
const StyledRowElement = (0, _styles.styled)('div', {
display: 'flex',
alignItems: 'center'
});
StyledRowElement.displayName = "StyledRowElement";
StyledRowElement.displayName = 'StyledRowElement';
const StyledRow = exports.StyledRow = (0, _styles.withWrapper)(StyledRowElement, StyledComponent => function StyledRow(props) {
return /*#__PURE__*/React.createElement(StyledComponent, _extends({
role: "row"
}, props));
});
// @ts-ignore
const StyledCellElement = (0, _styles.styled)('div', ({
$theme,
$striped
}) => {
return {
...$theme.typography.font200,
backgroundColor: $striped ? $theme.colors.tableStripedBackground : null,
color: $theme.colors.contentPrimary,
display: 'flex',
flex: 1,
paddingTop: $theme.sizing.scale300,
paddingRight: $theme.sizing.scale600,
paddingBottom: $theme.sizing.scale300,
paddingLeft: $theme.sizing.scale600
};
});
StyledCellElement.displayName = "StyledCellElement";
StyledCellElement.displayName = 'StyledCellElement';
const StyledCell = exports.StyledCell = (0, _styles.withWrapper)(StyledCellElement, StyledComponent => function StyledCell(props) {
return /*#__PURE__*/React.createElement(StyledComponent, _extends({
role: "gridcell"
}, props));
});
const StyledFilterButton = exports.StyledFilterButton = (0, _styles.styled)('button', props => {
function getIconColor() {
if (props.$disabled) {
return props.$theme.colors.contentStateDisabled;
}
if (props.$active) {
return props.$theme.colors.contentPrimary;
}
return props.$theme.colors.tableFilter;
}
function getIconHoverColor() {
if (props.$disabled || props.$active) {
return null;
}
return props.$theme.colors.contentPrimary;
}
return {
backgroundColor: 'transparent',
borderLeftStyle: 'none',
borderTopStyle: 'none',
borderRightStyle: 'none',
borderBottomStyle: 'none',
color: getIconColor(),
cursor: props.$disabled ? null : 'pointer',
paddingTop: 'none',
paddingRight: 'none',
paddingBottom: 'none',
paddingLeft: 'none',
':hover': {
color: getIconHoverColor()
}
};
});
StyledFilterButton.displayName = "StyledFilterButton";
StyledFilterButton.displayName = 'StyledFilterButton';
const StyledFilterContent = exports.StyledFilterContent = (0, _styles.styled)('div', ({
$theme
}) => ({
...(0, _styles.expandBorderStyles)($theme.borders.border300),
backgroundColor: $theme.colors.tableFilterBackground,
borderRightStyle: 'none',
borderLeftStyle: 'none',
maxHeight: '196px',
paddingRight: $theme.sizing.scale600,
paddingLeft: $theme.sizing.scale600,
overflow: 'auto'
}));
StyledFilterContent.displayName = "StyledFilterContent";
StyledFilterContent.displayName = 'StyledFilterContent';
const StyledFilterHeading = exports.StyledFilterHeading = (0, _styles.styled)('div', ({
$theme
}) => ({
...$theme.typography.font250,
color: $theme.colors.tableFilterHeading,
paddingTop: $theme.sizing.scale500,
paddingRight: $theme.sizing.scale600,
paddingBottom: $theme.sizing.scale500,
paddingLeft: $theme.sizing.scale600
}));
StyledFilterHeading.displayName = "StyledFilterHeading";
StyledFilterHeading.displayName = 'StyledFilterHeading';
const StyledFilterFooter = exports.StyledFilterFooter = (0, _styles.styled)('div', ({
$theme
}) => ({
backgroundColor: $theme.colors.tableFilterFooterBackground,
paddingTop: $theme.sizing.scale300,
paddingRight: $theme.sizing.scale100,
paddingBottom: $theme.sizing.scale300,
paddingLeft: $theme.sizing.scale100,
display: 'flex',
justifyContent: 'space-between',
minWidth: '216px'
}));
StyledFilterFooter.displayName = "StyledFilterFooter";
StyledFilterFooter.displayName = 'StyledFilterFooter';
const StyledAction = exports.StyledAction = (0, _styles.styled)('button', ({
$theme
}) => {
return {
backgroundColor: 'transparent',
borderLeftStyle: 'none',
borderTopStyle: 'none',
borderRightStyle: 'none',
borderBottomStyle: 'none',
color: $theme.colors.contentPrimary,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
marginRight: $theme.sizing.scale100,
marginLeft: $theme.sizing.scale100,
':hover:enabled': {
cursor: 'pointer'
}
};
});
StyledAction.displayName = "StyledAction";
StyledAction.displayName = 'StyledAction';