@grafana/ui
Version:
Grafana Components Library
75 lines (72 loc) • 2.45 kB
JavaScript
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useRef } from 'react';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../../themes/ThemeContext.mjs';
import { TimePickerTitle } from './TimePickerTitle.mjs';
import { TimeRangeOption } from './TimeRangeOption.mjs';
import { useListFocus } from './hooks.mjs';
;
const TimeRangeList = (props) => {
const styles = useStyles2(getStyles);
const { title, options, placeholderEmpty } = props;
if (typeof placeholderEmpty !== "undefined" && options.length <= 0) {
return /* @__PURE__ */ jsx(Fragment, { children: placeholderEmpty });
}
if (!title) {
return /* @__PURE__ */ jsx(Options, { ...props });
}
return /* @__PURE__ */ jsx("section", { "aria-label": title, children: /* @__PURE__ */ jsxs("fieldset", { children: [
/* @__PURE__ */ jsx("div", { className: styles.title, children: /* @__PURE__ */ jsx(TimePickerTitle, { children: title }) }),
/* @__PURE__ */ jsx(Options, { ...props })
] }) });
};
const Options = ({ options, value, onChange, title }) => {
const styles = useStyles2(getOptionsStyles);
const localRef = useRef(null);
const [handleKeys] = useListFocus({ localRef, options });
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
"ul",
{
role: "presentation",
onKeyDown: handleKeys,
ref: localRef,
"aria-roledescription": t("time-picker.time-range.aria-role", "Time range selection"),
className: styles.list,
children: options.map((option, index) => /* @__PURE__ */ jsx(
TimeRangeOption,
{
value: option,
selected: isEqual(option, value),
onSelect: onChange,
name: title != null ? title : t("time-picker.time-range.default-title", "Time ranges")
},
keyForOption(option, index)
))
}
) });
};
function keyForOption(option, index) {
return `${option.from}-${option.to}-${index}`;
}
function isEqual(x, y) {
if (!y || !x) {
return false;
}
return y.from === x.from && y.to === x.to;
}
const getStyles = () => ({
title: css({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "8px 16px 5px 9px"
})
});
const getOptionsStyles = (theme) => ({
list: css({
padding: theme.spacing(0.5)
})
});
export { TimeRangeList };
//# sourceMappingURL=TimeRangeList.mjs.map