@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
88 lines (87 loc) • 3.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const getBorderStyles = (color, rowBorderRadius) => {
return {
"& td": {
borderTop: `1px solid ${color}`,
borderBottom: `1px solid ${color}`
},
"& td:first-of-type": {
borderLeft: `1px solid ${color}`,
borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
},
"& td:last-of-type": {
borderRight: `1px solid ${color}`,
borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
}
};
};
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow", {
/** Styles applied to the component root class. */
root: {
color: "inherit",
backgroundColor: uikitStyles.theme.colors.bgContainer,
verticalAlign: "middle",
alignContent: "center",
outline: 0,
":is($hover,$striped):hover": {
backgroundColor: uikitStyles.theme.colors.bgHover
}
},
/** Styles applied to the component root when inside a `HvTableHead`. */
head: {},
/** Styles applied to the component root when inside a `HvTableBody`. */
body: {},
/** Styles applied to the component root when inside a `HvTableFooter`. */
footer: {},
/** Styles applied to the component root when selected. */
selected: {
backgroundColor: uikitStyles.theme.colors.bgPage
},
/** Styles applied to the component root when expanded. */
expanded: {
backgroundColor: uikitStyles.theme.colors.bgContainer,
"& > *[role=cell]": {
borderBottom: "none"
}
},
/** Styles applied to the component root when striped. */
striped: {
"&:nth-of-type(even)": {
backgroundColor: uikitStyles.theme.alpha("bgContainer", 0.6)
},
"&:nth-of-type(odd)": {
backgroundColor: "transparent"
}
},
/** Styles applied to the component root on hover. */
hover: {},
/** Styles applied to the component root when its table variant is list. */
variantList: {
// only applied on custom `display`
marginBottom: uikitStyles.theme.space.xs,
borderRadius: uikitStyles.theme.radii.round,
...getBorderStyles(uikitStyles.theme.colors.border, uikitStyles.theme.radii.round),
backgroundColor: uikitStyles.theme.colors.bgContainer,
"&$selected": {
...getBorderStyles(uikitStyles.theme.colors.text, uikitStyles.theme.radii.round),
"&:hover": {
...getBorderStyles(uikitStyles.theme.colors.border, uikitStyles.theme.radii.round)
}
},
"&:hover": {
...getBorderStyles(uikitStyles.theme.colors.border, uikitStyles.theme.radii.round)
},
"&.HvIsFocused": {
borderRadius: uikitStyles.theme.radii.round
}
},
/** Styles applied to the component root when its table variant is list. */
variantListHead: {
backgroundColor: "transparent"
}
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;