@renderlesskit/react/dist/esm/timepicker/TimePickerColumnState.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import { useCompositeState } from "reakit";
import { useControllableState } from "../utils";
import { getSelectedDateFromValue, getSelectedValueFromDate } from "./helpers";
export var useTimePickerColumnState = function useTimePickerColumnState() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var {
    defaultValue = new Date(),
    value,
    onChange,
    visible,
    columnType = "hour",
    popover,
    updateOldTime,
    restoreOldTime
  } = props;
  var [date, setDate] = useControllableState({
    value,
    defaultValue,
    onChange
  });
  var selected = getSelectedValueFromDate(date, columnType);
  var composite = useCompositeState({
    loop: true,
    wrap: true,
    orientation: "vertical"
  });
  var [count, setCount] = React.useState(selected); // keep in sync

  React.useEffect(() => {
    setCount(selected);

    if (!visible) {
      updateOldTime === null || updateOldTime === void 0 ? void 0 : updateOldTime();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [selected, visible]);
  var setSelected = React.useCallback((value, close) => {
    setDate(getSelectedDateFromValue(value, date, columnType));
    close && (popover === null || popover === void 0 ? void 0 : popover.hide());
  }, [columnType, date, popover, setDate]);

  var comp = _objectSpread(_objectSpread({}, composite), {}, {
    up: unstable_allTheWay => {
      composite.up(unstable_allTheWay);
      setCount(prev => {
        var count = prev - 1;

        if (count < 0) {
          count = composite.unstable_idCountRef.current - 1;
        }

        return count;
      });
    },
    down: unstable_allTheWay => {
      composite.down(unstable_allTheWay);
      setCount(prev => {
        var count = (prev + 1) % composite.unstable_idCountRef.current;
        return count;
      });
    }
  }); // if count is incrementing while the popover is not visible,
  // (ie: when users are using the segment control to increase the date)
  // then also set the currentId of composite to the corret count index,
  // so that when user opens the popover later it does not cause any syncing issues.


  React.useEffect(() => {
    // add 1 to meridian & minute beause they are zero based index
    var id = count + (columnType === "hour" ? 0 : 1);
    composite.setCurrentId("".concat(composite.baseId, "-").concat(id)); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [columnType, count, visible]);
  React.useEffect(() => {
    setSelected(count); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [count]);
  return _objectSpread({
    popover,
    date,
    selected,
    setSelected,
    visible,
    columnType,
    restoreOldTime,
    updateOldTime
  }, comp);
};
//# sourceMappingURL=TimePickerColumnState.js.map