@grafana/ui
Version:
Grafana Components Library
76 lines (71 loc) • 2.18 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var mixins = require('../../../themes/mixins.cjs');
"use strict";
const getStyles = (theme) => {
return {
container: css.css({
display: "flex",
alignItems: "center",
flexDirection: "row-reverse",
justifyContent: "space-between",
position: "relative"
}),
radio: css.css({
opacity: 0,
width: "0 !important",
"&:focus-visible + label": mixins.getFocusStyles(theme)
}),
label: css.css({
cursor: "pointer",
flex: 1,
padding: theme.spacing(1),
borderRadius: theme.shape.radius.default,
"&:hover": {
background: theme.colors.action.hover,
cursor: "pointer"
}
}),
labelSelected: css.css({
background: theme.colors.action.selected,
"&::before": {
backgroundImage: theme.colors.gradients.brandVertical,
borderRadius: theme.shape.radius.default,
content: '" "',
display: "block",
height: "100%",
position: "absolute",
width: theme.spacing(0.5),
left: 0,
top: 0
}
})
};
};
const TimeRangeOption = React.memo(({ value, onSelect, selected = false, name }) => {
const styles = ThemeContext.useStyles2(getStyles);
const id = React.useId();
return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: styles.container, children: [
/* @__PURE__ */ jsxRuntime.jsx(
"input",
{
className: styles.radio,
checked: selected,
name,
type: "checkbox",
"data-role": "item",
tabIndex: -1,
id,
onChange: () => onSelect(value)
}
),
/* @__PURE__ */ jsxRuntime.jsx("label", { className: css.cx(styles.label, selected && styles.labelSelected), htmlFor: id, children: value.display })
] });
});
TimeRangeOption.displayName = "TimeRangeOption";
exports.TimeRangeOption = TimeRangeOption;
//# sourceMappingURL=TimeRangeOption.cjs.map