@elastic/eui
Version:
Elastic UI Component Library
84 lines (82 loc) • 6.14 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 _services = require("../../services");
var _global_styling = require("../../global_styling");
var _mixins = require("../../themes/amsterdam/global_styling/mixins");
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;
return {
euiTableRow: /*#__PURE__*/(0, _react.css)(";label:euiTableRow;"),
desktop: {
desktop: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.hover, ";};label:desktop;"),
expanded: /*#__PURE__*/(0, _react.css)("background-color:", rowColors.hover, ";", expandedAnimationCss, ";;label:expanded;"),
clickable: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}&:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";}&: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), (0, _mixins.euiShadow)(euiThemeContext, 's'), " background-color:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};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), " &::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('width', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";};label:hasRightColumn;"),
/**
* Bottom of card - expanded rows
*/
expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', "-".concat(mobileSizes.actions.offset)), (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), ">.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,
colorMode = _ref2.colorMode;
return {
hover: colorMode === 'DARK' ? euiTheme.colors.lightestShade : (0, _services.tint)(euiTheme.colors.lightestShade, 0.5),
selected: {
color: colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.primary, 0.7) : (0, _services.tint)(euiTheme.colors.primary, 0.96),
hover: colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.primary, 0.75) : (0, _services.tint)(euiTheme.colors.primary, 0.9)
},
clickable: {
hover: (0, _services.transparentize)(euiTheme.colors.primary, 0.05),
focus: (0, _services.transparentize)(euiTheme.colors.primary, 0.1)
}
};
};