@grafana/ui/dist/cjs/components/DateTimePickers/TimeOfDayPicker.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var Combobox = require('../Combobox/Combobox.cjs');

"use strict";
const TimeOfDayPicker = ({
  minuteStep = 15,
  showSeconds = false,
  value,
  disabled,
  disabledHours,
  id,
  placeholder,
  allowEmpty = false,
  onChange
}) => {
  const opts = React.useMemo(() => {
    const skipHours = new Set(disabledHours == null ? void 0 : disabledHours());
    const opts2 = [];
    for (let h = 0; h < 24; h++) {
      if (!skipHours.has(h)) {
        for (let m = 0; m < 60; m += minuteStep) {
          opts2.push({ value: `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}` });
        }
      }
    }
    return opts2;
  }, [minuteStep, disabledHours]);
  const initValue = React.useMemo(
    () => value ? value.format(showSeconds ? "HH:mm:ss" : "HH:mm") : null,
    [value, showSeconds]
  );
  const [selected, setSelected] = React.useState(initValue);
  return /* @__PURE__ */ jsxRuntime.jsx(
    Combobox.Combobox,
    {
      id,
      placeholder: placeholder != null ? placeholder : showSeconds ? "HH:mm:ss" : "HH:mm",
      disabled,
      createCustomValue: true,
      options: opts,
      value: selected,
      isClearable: allowEmpty,
      width: showSeconds ? 14 : 12,
      onChange: (option) => {
        var _a, _b;
        const optVal = (_a = option == null ? void 0 : option.value) != null ? _a : "00:00:00";
        const [HH, mm, ss] = optVal.split(":").map(Number);
        const newValue = value != null ? data.dateTime(value) : data.dateTime();
        newValue.set("hour", HH != null ? HH : 0);
        newValue.set("minute", mm != null ? mm : 0);
        newValue.set("second", ss != null ? ss : 0);
        setSelected((_b = option == null ? void 0 : option.value) != null ? _b : null);
        onChange(newValue);
      }
    }
  );
};

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