@elastic/eui
Version:
Elastic UI Component Library
111 lines (109 loc) • 8.06 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiTableRowStyles = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _euiThemeCommon = require("@elastic/eui-theme-common");
var _global_styling = require("../../global_styling");
var _supports = require("../../global_styling/functions/supports");
var _table = require("./table.styles");
var _templateObject;
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var rowColors = _rowColorVariables(euiThemeContext);
var expandedAnimationCss = _expandedRowAnimation(euiThemeContext);
var _euiTableVariables = (0, _table.euiTableVariables)(euiThemeContext),
cellContentPadding = _euiTableVariables.cellContentPadding,
mobileSizes = _euiTableVariables.mobileSizes,
checkboxSize = _euiTableVariables.checkboxSize;
var markedStyles = "\n :where(&.euiTableRow--marked):hover {\n background-color: ".concat(rowColors.marked.hover, ";\n }\n ");
return {
euiTableRow: /*#__PURE__*/(0, _react.css)(":where(&.euiTableRow--marked){background-color:", rowColors.marked.background, ";};label:euiTableRow;"),
desktop: {
desktop: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.hover, ";}", markedStyles, ";;label:desktop;"),
expanded: {
expanded: /*#__PURE__*/(0, _react.css)(expandedAnimationCss, ";;label:expanded;"),
// skipping adding a css class as it's a default style when expanded
hasBackground: "\n background-color: ".concat(rowColors.hover, ";\n ")
},
clickable: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}", markedStyles, " &:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
// Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
// Set on the `<td>` because padding can't be applied to `<tr>` elements directly
checkboxOffset: /*#__PURE__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
},
mobile: {
mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), " border-radius:", euiTheme.border.radius.medium, ";", (0, _supports.cssSupportsHasWithNextSibling)("\n &:has(+ .euiTableRow-isExpandedRow) {\n ".concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "\n ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), "\n }\n ")), ";;label:mobile;"),
/* Omitting adding a class via css here as it's a default style on mobile, not a standalone prop-related style.
Adding it separate allows better appliance control via props without the need to override the styles. */
hasBorder: "\n ".concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
// uses pseudo-border to align dimensions with shadows applied by `hasBackground`
none: "\n ".concat((0, _euiThemeCommon.euiBorderStyles)(euiThemeContext, {
side: 'all'
}), "\n transform: translateZ(0);\n "),
preferred: "\n border: ".concat(euiTheme.border.thin, "\n ")
}), "\n "),
hasBackground: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 's', {
borderAllInHighContrastMode: true
}), " background-color:", euiTheme.colors.backgroundBasePlain, ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
none: "\n border: none;\n "
}), ";;label:hasBackground;"),
selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";};label:selected;"),
/**
* Left column offset (no border)
* Used for selection checkbox, which will be absolutely positioned
*/
hasLeftColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', mobileSizes.checkbox.width), ";;label:hasLeftColumn;"),
/**
* Right column styles + border
* Used for cell actions and row expander arrow
*/
hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
/**
* Bottom of card - expanded rows
*/
expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
// On mobile, visually move the expanded row to join up with the
// preceding table row via negative margins
'margin-top', (0, _global_styling.mathWithUnits)([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
return (x + y) * -1;
})), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), " &:after{", (0, _global_styling.logicalCSS)('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);>.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
}
};
};
var _expandedRowAnimation = function _expandedRowAnimation(_ref) {
var euiTheme = _ref.euiTheme;
// Do not attempt to animate to height auto - down that road dragons lie
// @see https://github.com/elastic/eui/pull/6826
var expandRow = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n opacity: 0;\n transform: translateY(-", ");\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n "])), euiTheme.size.m);
// Animation must be on the contents div inside, not the row itself
return /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{.euiTableCellContent{animation:", euiTheme.animation.fast, " ", euiTheme.animation.resistance, " 1 normal none ", expandRow, ";}}");
};
var _rowColorVariables = function _rowColorVariables(_ref2) {
var euiTheme = _ref2.euiTheme;
return {
hover: euiTheme.components.tableRowBackgroundHover,
selected: {
background: euiTheme.components.tableRowBackgroundSelected,
hover: euiTheme.components.tableRowBackgroundSelectedHover
},
clickable: {
hover: euiTheme.components.tableRowInteractiveBackgroundHover,
focus: euiTheme.components.tableRowInteractiveBackgroundFocus
},
marked: {
background: euiTheme.components.tableRowBackgroundMarked,
hover: euiTheme.components.tableRowBackgroundMarkedHover
}
};
};