@activecollab/components/dist/esm/components/SelectTime/SelectTime.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["mode", "selected", "min", "max", "onChange", "target", "triggerMode", "step"];
import React from "react";
import moment from "moment";
import { isValidTime } from "../../utils/timeUtils";
import { Select } from "../Select/Select";
import { SelectTrigger } from "../SelectTrigger";
const renderOption = option => {
  return /*#__PURE__*/React.createElement("div", {
    id: option.id
  }, option.name);
};
export const SelectTime = _ref => {
  let {
      mode = "24",
      selected,
      min = "00:00",
      max = "23:45",
      onChange,
      target,
      triggerMode,
      step = 15
    } = _ref,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const generateTimeOptions = () => {
    const minTime = moment(isValidTime(min) ? min : "00:00", "HH:mm");
    const maxTime = moment(isValidTime(max) ? max : "23:45", "HH:mm");
    const options = [];
    const currentTime = minTime.clone();
    while (currentTime.isSameOrBefore(maxTime)) {
      options.push({
        id: currentTime.format("HH:mm"),
        name: currentTime.format(mode === "12" ? "hh:mm A" : "HH:mm")
      });
      currentTime.add(step, "minutes");
    }
    return options;
  };
  const timeOptions = generateTimeOptions();
  const displaySelectedTime = moment(selected, "HH:mm").format(mode === "12" ? "hh:mm A" : "HH:mm");
  const handleScrollToSelected = () => {
    if (selected) {
      setTimeout(() => {
        var _document$getElementB;
        const selectedItem = (_document$getElementB = document.getElementById(selected)) == null ? void 0 : _document$getElementB.parentElement;
        selectedItem == null || selectedItem.scrollIntoView({
          behavior: "smooth",
          block: "center"
        });
      }, 50);
    }
  };
  return /*#__PURE__*/React.createElement(Select, {
    options: timeOptions,
    disabledInternalSort: true,
    selected: selected,
    disableSearch: true,
    keepSameOptionsOrder: true,
    target: target ? target : /*#__PURE__*/React.createElement(SelectTrigger, _extends({
      mode: triggerMode
    }, rest), displaySelectedTime),
    mode: "tiny",
    renderOption: renderOption,
    onChange: onChange,
    forceCloseMenu: true,
    onSelectOpen: handleScrollToSelected
  });
};
//# sourceMappingURL=SelectTime.js.map