@razorpay/blade/build/lib/web/development/components/TimePicker/useTimePickerState.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import { Time } from '@internationalized/date';
import { dateToTimeValue, timeValueToDate, getTimeComponents, createCompleteTime } from './utils.js';
import { useControllableState } from '../../utils/useControllable.js';

/**
 * Returns empty time value (midnight) when neither value nor defaultValue is provided
 */
var getEmptyTimeValue = function getEmptyTimeValue() {
  return new Time(0, 0);
};

/**
 * Return type for useTimePickerState hook
 */

/**
 * Custom hook for TimePicker state management
 */
var useTimePickerState = function useTimePickerState(_ref) {
  var value = _ref.value,
    defaultValue = _ref.defaultValue,
    _onChange = _ref.onChange,
    isOpen = _ref.isOpen,
    _ref$defaultIsOpen = _ref.defaultIsOpen,
    defaultIsOpen = _ref$defaultIsOpen === void 0 ? false : _ref$defaultIsOpen,
    onOpenChange = _ref.onOpenChange,
    _ref$timeFormat = _ref.timeFormat,
    timeFormat = _ref$timeFormat === void 0 ? '12h' : _ref$timeFormat,
    _ref$showFooterAction = _ref.showFooterActions,
    showFooterActions = _ref$showFooterAction === void 0 ? true : _ref$showFooterAction,
    onApply = _ref.onApply;
  // Convert values for React Aria Time compatibility
  var convertedValue = value !== undefined ? dateToTimeValue(value) : undefined;
  var convertedDefaultValue = defaultValue !== undefined ? dateToTimeValue(defaultValue) : undefined;
  var _useControllableState = useControllableState({
      value: convertedValue !== null && convertedValue !== void 0 ? convertedValue : undefined,
      defaultValue: convertedDefaultValue !== null && convertedDefaultValue !== void 0 ? convertedDefaultValue : undefined,
      onChange: function onChange(timeValue) {
        var date = timeValueToDate(timeValue);
        _onChange === null || _onChange === void 0 || _onChange({
          value: date
        });
      }
    }),
    _useControllableState2 = _slicedToArray(_useControllableState, 2),
    internalTimeValue = _useControllableState2[0],
    _setInternalTimeValue = _useControllableState2[1];

  // For external API, expose as Date
  var timeValue = timeValueToDate(internalTimeValue);
  var setTimeValue = React__default.useCallback(function (date) {
    _setInternalTimeValue(function () {
      var _dateToTimeValue;
      return (_dateToTimeValue = dateToTimeValue(date)) !== null && _dateToTimeValue !== void 0 ? _dateToTimeValue : getEmptyTimeValue();
    });
  }, [_setInternalTimeValue]);

  // Old value backup for cancel functionality
  var _React$useState = React__default.useState(internalTimeValue),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    oldTimeValue = _React$useState2[0],
    setOldTimeValue = _React$useState2[1];

  // Manage controlled/uncontrolled open state
  var _useControllableState3 = useControllableState({
      value: isOpen,
      defaultValue: defaultIsOpen,
      onChange: function onChange(isOpen) {
        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
          isOpen: isOpen
        });
        // Update old value every time timepicker is opened or closed
        setOldTimeValue(internalTimeValue);
      }
    }),
    _useControllableState4 = _slicedToArray(_useControllableState3, 2),
    controllableIsOpen = _useControllableState4[0],
    setControllableIsOpen = _useControllableState4[1];
  var handleApply = React__default.useCallback(function () {
    if (showFooterActions) {
      // Call onChange with current timeValue
      _onChange === null || _onChange === void 0 || _onChange({
        value: timeValue
      });
      // Update oldTimeValue to current value
      setOldTimeValue(internalTimeValue);
      // Call onApply callback
      onApply === null || onApply === void 0 || onApply({
        value: timeValue
      });
    }
    setControllableIsOpen(function () {
      return false;
    });
  }, [timeValue, internalTimeValue, _onChange, setOldTimeValue, onApply, setControllableIsOpen, showFooterActions]);
  var handleCancel = React__default.useCallback(function () {
    // Restore internalTimeValue from oldTimeValue
    _setInternalTimeValue(function () {
      return oldTimeValue;
    });
    setControllableIsOpen(function () {
      return false;
    });
  }, [oldTimeValue, _setInternalTimeValue, setControllableIsOpen]);
  var _getTimeComponents = getTimeComponents(timeValue, timeFormat),
    selectedHour = _getTimeComponents.selectedHour,
    selectedMinute = _getTimeComponents.selectedMinute,
    selectedPeriod = _getTimeComponents.selectedPeriod;

  // Function to create complete time from current partial/full values
  var createCompleteTimeCallback = React__default.useCallback(function () {
    return createCompleteTime(selectedHour, selectedMinute, selectedPeriod, timeFormat);
  }, [selectedHour, selectedMinute, selectedPeriod, timeFormat]);
  return {
    // Core state (Date API for external use)
    timeValue: timeValue,
    setTimeValue: setTimeValue,
    isOpen: controllableIsOpen !== null && controllableIsOpen !== void 0 ? controllableIsOpen : false,
    setIsOpen: function setIsOpen(isOpen) {
      return setControllableIsOpen(function () {
        return isOpen;
      });
    },
    // TimeValue for React Aria compatibility
    internalTimeValue: internalTimeValue,
    setInternalTimeValue: function setInternalTimeValue(timeValue) {
      return _setInternalTimeValue(function () {
        return timeValue;
      });
    },
    // Individual time components for easy access
    selectedHour: selectedHour,
    selectedMinute: selectedMinute,
    selectedPeriod: selectedPeriod,
    // Actions
    onApply: handleApply,
    onCancel: handleCancel,
    // Time validation and creation
    createCompleteTime: createCompleteTimeCallback
  };
};

export { useTimePickerState };
//# sourceMappingURL=useTimePickerState.js.map