@grafana/ui/dist/esm/components/DateTimePickers/TimeOfDayPicker.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { useMemo, useState } from 'react';
import { dateTime } from '@grafana/data';
import { Combobox } from '../Combobox/Combobox.mjs';

"use strict";
const TimeOfDayPicker = ({
  minuteStep = 15,
  showSeconds = false,
  value,
  disabled,
  disabledHours,
  id,
  placeholder,
  allowEmpty = false,
  onChange
}) => {
  const opts = 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 = useMemo(
    () => value ? value.format(showSeconds ? "HH:mm:ss" : "HH:mm") : null,
    [value, showSeconds]
  );
  const [selected, setSelected] = useState(initValue);
  return /* @__PURE__ */ jsx(
    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 ? dateTime(value) : 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);
      }
    }
  );
};

export { TimeOfDayPicker };
//# sourceMappingURL=TimeOfDayPicker.mjs.map