@renderlesskit/react/dist/esm/timepicker/TimePickerState.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 { useDateFormatter } from "@react-aria/i18n";
import { usePickerBaseState } from "../picker-base";
import { useSegmentState } from "../segment";
import { useControllableState } from "../utils";
import { announce } from "../utils/LiveAnnouncer";
import { parseTime, stringifyTime } from "./helpers";
import { useTimePickerColumnState } from "./TimePickerColumnState";
export var useTimePickerState = function useTimePickerState() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var {
    value: initialValue,
    defaultValue: defaultValueProp = stringifyTime(new Date()),
    onChange: onChangeProp,
    formatOptions = {
      timeStyle: "short"
    },
    placeholderDate,
    autoFocus
  } = props;
  var onChange = React.useCallback(date => {
    return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(stringifyTime(date));
  }, [onChangeProp]);
  var [time, setTime] = useControllableState({
    value: parseTime(initialValue),
    defaultValue: parseTime(defaultValueProp) || new Date(),
    onChange
  });
  var [oldTime, setOldTime] = React.useState(new Date(time));

  var updateOldTime = () => {
    setOldTime(new Date(time));
  };

  var restoreOldTime = () => {
    setTime(new Date(oldTime));
    return new Date(oldTime);
  };

  var segmentState = useSegmentState({
    value: time,
    onChange: setTime,
    formatOptions,
    placeholderDate
  });
  var popover = usePickerBaseState(_objectSpread({
    segmentFocus: segmentState.first
  }, props));

  var setTimeProp = date => {
    setTime(date);
  };

  var hourState = useTimePickerColumnState({
    columnType: "hour",
    value: time,
    onChange: setTimeProp,
    visible: popover.visible,
    popover,
    updateOldTime,
    restoreOldTime
  });
  var minuteState = useTimePickerColumnState({
    columnType: "minute",
    value: time,
    onChange: setTimeProp,
    visible: popover.visible,
    popover,
    updateOldTime,
    restoreOldTime
  });
  var meridiesState = useTimePickerColumnState({
    columnType: "meridian",
    value: time,
    onChange: setTimeProp,
    visible: popover.visible,
    popover,
    updateOldTime,
    restoreOldTime
  });
  var hours = [...new Array(13).keys()].slice(1);
  var minutes = [...new Array(60).keys()];
  var meridies = ["AM", "PM"];
  var dateFormatter = useDateFormatter({
    timeStyle: "medium"
  });

  var announceSelectedDate = () => {
    announce("Selected Time: ".concat(dateFormatter.format(time)));
  };

  React.useEffect(() => {
    if (autoFocus) {
      segmentState.first();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [autoFocus, segmentState.first]);
  React.useEffect(() => {
    if (popover.visible === false && oldTime !== new Date(time)) {
      setOldTime(new Date(time));
      announceSelectedDate();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [popover.visible]);
  return _objectSpread(_objectSpread({
    time,
    hours,
    minutes,
    meridies,
    hourState,
    minuteState,
    meridiesState
  }, popover), segmentState);
};
//# sourceMappingURL=TimePickerState.js.map