@grafana/ui
Version:
Grafana Components Library
285 lines (278 loc) • 10.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var css = require('@emotion/css');
var memoize = require('micro-memoize');
var data = require('@grafana/data');
var constants = require('./constants.cjs');
var utils = require('./utils.cjs');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var memoize__default = /*#__PURE__*/_interopDefaultCompat(memoize);
"use strict";
const isTableCellStylesKeyEqual = (cacheKey, key) => cacheKey[0] === key[0] && cacheKey[1].shouldOverflow === key[1].shouldOverflow && cacheKey[1].maxHeight === key[1].maxHeight && cacheKey[1].textAlign === key[1].textAlign && cacheKey[1].textWrap === key[1].textWrap;
const getGridStyles = memoize__default.default((theme, enablePagination, transparent) => {
const bgColor = transparent ? theme.colors.background.canvas : theme.colors.background.primary;
const borderColor = data.colorManipulator.onBackground(theme.colors.border.weak, bgColor).toHexString();
const selectedRowColor = theme.isDark ? data.colorManipulator.onBackground(theme.colors.warning.main, bgColor).darken(37).toHexString() : data.colorManipulator.onBackground(theme.colors.warning.main, bgColor).lighten(25).toHexString();
const selectedRowHoverColor = theme.colors.emphasize(selectedRowColor, 0.05);
return {
grid: css.css({
"--rdg-background-color": bgColor,
"--rdg-header-background-color": bgColor,
"--rdg-border-color": borderColor,
"--rdg-color": theme.colors.text.primary,
"--rdg-summary-border-color": borderColor,
"--rdg-summary-border-width": "1px",
"--rdg-selection-color": theme.colors.info.transparent,
// note: this cannot have any transparency since default cells that
// overlay/overflow on hover inherit this background and need to occlude cells below
"--rdg-row-background-color": bgColor,
"--rdg-row-hover-background-color": transparent ? theme.colors.background.primary : theme.colors.background.secondary,
"--rdg-row-selected-background-color": selectedRowColor,
"--rdg-row-selected-hover-background-color": selectedRowHoverColor,
// TODO: magic 32px number is unfortunate. it would be better to have the content
// flow using flexbox rather than hard-coding this size via a calc
blockSize: enablePagination ? "calc(100% - 32px)" : "100%",
scrollbarWidth: "thin",
scrollbarColor: theme.isDark ? "#fff5 #fff1" : "#0005 #0001",
border: "none",
".rdg-cell": {
padding: constants.TABLE.CELL_PADDING,
"&:last-child": {
borderInlineEnd: "none"
},
'&[aria-selected="true"][role="columnheader"]': {
outline: "none"
}
},
// add a box shadow on hover and selection for all body cells
"& > :not(.rdg-summary-row, .rdg-header-row) > .rdg-cell": {
[getActiveCellSelector()]: { boxShadow: theme.shadows.z2 },
// selected cells should appear below hovered cells.
...!utils.IS_SAFARI_26 && { "&:hover": { zIndex: theme.zIndex.tooltip - 7 } },
"&[aria-selected=true]": { zIndex: theme.zIndex.tooltip - 6 }
},
".rdg-cell.rdg-cell-frozen": {
backgroundColor: "var(--rdg-row-background-color)",
zIndex: theme.zIndex.tooltip - 4,
...!utils.IS_SAFARI_26 && { "&:hover": { zIndex: theme.zIndex.tooltip - 2 } },
"&[aria-selected=true]": { zIndex: theme.zIndex.tooltip - 3 }
},
// have to override styles for row selection to workaround safari styles workaround
'[role="row"][aria-selected="true"]': {
"&:hover": {
".rdg-cell.rdg-cell-frozen": {
backgroundColor: "var(--rdg-row-selected-hover-background-color)"
}
},
".rdg-cell.rdg-cell-frozen": {
backgroundColor: "var(--rdg-row-selected-background-color)"
}
},
".rdg-header-row, .rdg-summary-row": {
".rdg-cell": {
zIndex: theme.zIndex.tooltip - 5,
"&.rdg-cell-frozen": {
zIndex: theme.zIndex.tooltip - 1
}
}
},
".rdg-summary-row >": {
".rdg-cell": {
// 0.75 padding causes "jumping" on hover.
paddingBlock: theme.spacing(0.625)
},
[getActiveCellSelector()]: {
whiteSpace: "pre-line",
height: "100%",
minHeight: "fit-content",
overflowY: "visible",
boxShadow: theme.shadows.z2
}
}
}),
gridNested: css.css({
height: "100%",
width: `calc(100% - ${constants.COLUMN.EXPANDER_WIDTH - constants.TABLE.CELL_PADDING * 2 - 1}px)`,
overflowX: "scroll",
overflowY: "hidden",
marginLeft: constants.COLUMN.EXPANDER_WIDTH - constants.TABLE.CELL_PADDING - 1,
marginBlock: constants.TABLE.CELL_PADDING,
// usually row height will be set to 0 when not expanded, but auto cell height may lead to some rendering errors.
'&[aria-expanded="false"]': {
display: "none"
}
}),
cellNested: css.css({
"&[aria-selected=true]": { outline: "none" },
"&:hover": { backgroundColor: "transparent" }
}),
noDataNested: css.css({
height: constants.TABLE.NESTED_NO_DATA_HEIGHT,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: theme.colors.text.secondary,
fontSize: theme.typography.h4.fontSize
}),
headerRow: css.css({
paddingBlockStart: 0,
fontWeight: "normal",
"& .rdg-cell": { height: "100%", alignItems: "flex-end" }
}),
displayNone: css.css({ display: "none" }),
paginationContainer: css.css({
alignItems: "center",
display: "flex",
justifyContent: "center",
marginTop: "8px",
width: "100%"
}),
paginationSummary: css.css({
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
display: "flex",
justifyContent: "flex-end",
padding: theme.spacing(0, 1, 0, 2)
}),
menuItem: css.css({ maxWidth: "200px" }),
safariWrapper: css.css({ contain: "strict", height: "100%" })
};
});
const getHeaderCellStyles = memoize__default.default(
(theme, justifyContent) => css.css({
display: "flex",
gap: theme.spacing(0.5),
zIndex: theme.zIndex.tooltip - 1,
paddingInline: constants.TABLE.CELL_PADDING,
paddingBlockEnd: constants.TABLE.CELL_PADDING,
justifyContent,
"&:last-child": { borderInlineEnd: "none" }
})
);
const getDefaultCellStyles = memoize__default.default(
(theme, { textAlign, shouldOverflow, maxHeight }) => css.css({
display: "flex",
alignItems: "center",
textAlign,
justifyContent: Boolean(maxHeight) ? "flex-start" : utils.getJustifyContent(textAlign),
...maxHeight && { overflowY: "hidden" },
...shouldOverflow && { minHeight: "100%" },
[getActiveCellSelector()]: {
...shouldOverflow && {
zIndex: theme.zIndex.tooltip - 2,
height: "fit-content",
minWidth: "fit-content"
}
},
[getHoverOnlyCellSelector()]: {
".table-cell-actions": { display: "flex" }
}
}),
{ isMatchingKey: isTableCellStylesKeyEqual }
);
const getMaxHeightCellStyles = memoize__default.default(
(_theme, { textAlign, maxHeight }) => css.css({
display: "flex",
alignItems: "center",
textAlign,
justifyContent: utils.getJustifyContent(textAlign),
maxHeight,
width: "100%",
overflowY: "hidden",
[getActiveCellSelector(true)]: {
maxHeight: "none",
minHeight: "100%"
}
}),
{ isMatchingKey: isTableCellStylesKeyEqual }
);
const getCellActionStyles = memoize__default.default(
(theme, textAlign) => css.css({
display: "none",
position: "absolute",
top: 0,
margin: "auto",
height: "100%",
color: theme.colors.text.primary,
background: theme.isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.7)",
padding: theme.spacing.x0_5,
paddingInlineStart: theme.spacing.x1,
[textAlign === "right" ? "left" : "right"]: 0
})
);
const getLinkStyles = memoize__default.default(
(theme, canBeColorized) => css.css({
a: {
cursor: "pointer",
...canBeColorized ? {
color: "inherit",
textDecoration: "underline"
} : {
color: theme.colors.text.link,
textDecoration: "none",
"&:hover": { textDecoration: "underline" }
}
}
})
);
const caretTriangle = (direction, bgColor) => `linear-gradient(to top ${direction}, transparent 62.5%, ${bgColor} 50%)`;
const getTooltipStyles = memoize__default.default((theme, textAlign) => ({
tooltipContent: css.css({
height: "100%",
width: "100%",
display: "flex",
alignItems: "center"
}),
tooltipWrapper: css.css({
background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3,
overflow: "hidden",
padding: theme.spacing(1),
width: "inherit"
}),
tooltipCaret: css.css({
cursor: "pointer",
position: "absolute",
top: theme.spacing(0.25),
[textAlign === "right" ? "right" : "left"]: theme.spacing(0.25),
width: theme.spacing(1.75),
height: theme.spacing(1.75),
background: caretTriangle(textAlign === "right" ? "right" : "left", theme.colors.border.strong)
})
}));
const ACTIVE_CELL_SELECTORS = {
hover: {
nested: ".rdg-cell:hover &",
normal: "&:hover"
},
selected: {
nested: "[aria-selected=true] &",
normal: "&[aria-selected=true]"
}
};
const getActiveCellSelector = memoize__default.default((isNested) => {
const selectors = [];
selectors.push(ACTIVE_CELL_SELECTORS.selected[isNested ? "nested" : "normal"]);
if (!utils.IS_SAFARI_26) {
selectors.push(ACTIVE_CELL_SELECTORS.hover[isNested ? "nested" : "normal"]);
}
return selectors.join(", ");
});
const getHoverOnlyCellSelector = memoize__default.default((isNested) => {
if (utils.IS_SAFARI_26) {
return "";
}
return ACTIVE_CELL_SELECTORS.hover[isNested ? "nested" : "normal"];
});
exports.getActiveCellSelector = getActiveCellSelector;
exports.getCellActionStyles = getCellActionStyles;
exports.getDefaultCellStyles = getDefaultCellStyles;
exports.getGridStyles = getGridStyles;
exports.getHeaderCellStyles = getHeaderCellStyles;
exports.getLinkStyles = getLinkStyles;
exports.getMaxHeightCellStyles = getMaxHeightCellStyles;
exports.getTooltipStyles = getTooltipStyles;
exports.isTableCellStylesKeyEqual = isTableCellStylesKeyEqual;
//# sourceMappingURL=styles.cjs.map