@grafana/ui/dist/cjs/components/DateTimePickers/TimeRangePicker/TimeRangeList.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var TimePickerTitle = require('./TimePickerTitle.cjs');
var TimeRangeOption = require('./TimeRangeOption.cjs');
var hooks = require('./hooks.cjs');

"use strict";
const TimeRangeList = (props) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const { title, options, placeholderEmpty } = props;
  if (typeof placeholderEmpty !== "undefined" && options.length <= 0) {
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: placeholderEmpty });
  }
  if (!title) {
    return /* @__PURE__ */ jsxRuntime.jsx(Options, { ...props });
  }
  return /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": title, children: /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.title, children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerTitle.TimePickerTitle, { children: title }) }),
    /* @__PURE__ */ jsxRuntime.jsx(Options, { ...props })
  ] }) });
};
const Options = ({ options, value, onChange, title }) => {
  const styles = ThemeContext.useStyles2(getOptionsStyles);
  const localRef = React.useRef(null);
  const [handleKeys] = hooks.useListFocus({ localRef, options });
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
    "ul",
    {
      role: "presentation",
      onKeyDown: handleKeys,
      ref: localRef,
      "aria-roledescription": i18n.t("time-picker.time-range.aria-role", "Time range selection"),
      className: styles.list,
      children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
        TimeRangeOption.TimeRangeOption,
        {
          value: option,
          selected: isEqual(option, value),
          onSelect: onChange,
          name: title != null ? title : i18n.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.css({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "8px 16px 5px 9px"
  })
});
const getOptionsStyles = (theme) => ({
  list: css.css({
    padding: theme.spacing(0.5)
  })
});

exports.TimeRangeList = TimeRangeList;
//# sourceMappingURL=TimeRangeList.cjs.map