react-native-timer-picker/dist/module/components/TimerPickerModal/index.js

A simple, flexible, performant duration picker for React Native apps 🔥 Great for timers, alarms and duration inputs ⏰🕰️⏳ Includes iOS-style haptic and audio feedback 🍏

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { getSafeInitialValue } from "../../utils/getSafeInitialValue";
import Modal from "../Modal";
import TimerPicker from "../TimerPicker";
import { generateStyles } from "./styles";
const TimerPickerModal = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    buttonContainerProps,
    buttonTouchableOpacityProps,
    cancelButtonText = "Cancel",
    closeOnOverlayPress,
    confirmButtonText = "Confirm",
    containerProps,
    contentContainerProps,
    hideCancelButton = false,
    initialValue,
    modalProps,
    modalTitle,
    modalTitleProps,
    onCancel,
    onConfirm,
    onDurationChange,
    setIsVisible,
    styles: customStyles,
    visible,
    ...otherProps
  } = props;
  const styles = generateStyles(customStyles, {
    hasModalTitle: Boolean(modalTitle)
  });
  const timerPickerRef = useRef(null);
  const safeInitialValue = getSafeInitialValue({
    hours: initialValue === null || initialValue === void 0 ? void 0 : initialValue.hours,
    minutes: initialValue === null || initialValue === void 0 ? void 0 : initialValue.minutes,
    seconds: initialValue === null || initialValue === void 0 ? void 0 : initialValue.seconds
  });
  const [selectedDuration, setSelectedDuration] = useState(safeInitialValue);
  const [confirmedDuration, setConfirmedDuration] = useState(safeInitialValue);
  const reset = options => {
    var _timerPickerRef$curre;
    setSelectedDuration(safeInitialValue);
    setConfirmedDuration(safeInitialValue);
    (_timerPickerRef$curre = timerPickerRef.current) === null || _timerPickerRef$curre === void 0 || _timerPickerRef$curre.reset(options);
  };

  // reset state if the initial value changes
  useEffect(() => {
    reset();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [safeInitialValue.hours, safeInitialValue.minutes, safeInitialValue.seconds]);
  const hideModalHandler = () => {
    setSelectedDuration({
      hours: confirmedDuration.hours,
      minutes: confirmedDuration.minutes,
      seconds: confirmedDuration.seconds
    });
    setIsVisible(false);
  };
  const confirmHandler = () => {
    var _timerPickerRef$curre2, _latestDuration$hours, _latestDuration$minut, _latestDuration$secon;
    const latestDuration = (_timerPickerRef$curre2 = timerPickerRef.current) === null || _timerPickerRef$curre2 === void 0 ? void 0 : _timerPickerRef$curre2.latestDuration;
    const newDuration = {
      hours: (latestDuration === null || latestDuration === void 0 || (_latestDuration$hours = latestDuration.hours) === null || _latestDuration$hours === void 0 ? void 0 : _latestDuration$hours.current) ?? selectedDuration.hours,
      minutes: (latestDuration === null || latestDuration === void 0 || (_latestDuration$minut = latestDuration.minutes) === null || _latestDuration$minut === void 0 ? void 0 : _latestDuration$minut.current) ?? selectedDuration.minutes,
      seconds: (latestDuration === null || latestDuration === void 0 || (_latestDuration$secon = latestDuration.seconds) === null || _latestDuration$secon === void 0 ? void 0 : _latestDuration$secon.current) ?? selectedDuration.seconds
    };
    setConfirmedDuration(newDuration);
    onConfirm(newDuration);
  };
  const cancelHandler = () => {
    setIsVisible(false);
    setSelectedDuration(confirmedDuration);
    onCancel === null || onCancel === void 0 || onCancel();
  };

  // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker
  const durationChangeHandler = useCallback(duration => {
    setSelectedDuration(duration);
    onDurationChange === null || onDurationChange === void 0 || onDurationChange(duration);
  }, [onDurationChange]);
  useImperativeHandle(ref, () => {
    var _timerPickerRef$curre4, _timerPickerRef$curre5, _timerPickerRef$curre6;
    return {
      reset,
      setValue: (value, options) => {
        var _timerPickerRef$curre3;
        setSelectedDuration(value);
        setConfirmedDuration(value);
        (_timerPickerRef$curre3 = timerPickerRef.current) === null || _timerPickerRef$curre3 === void 0 || _timerPickerRef$curre3.setValue(value, options);
      },
      latestDuration: {
        hours: (_timerPickerRef$curre4 = timerPickerRef.current) === null || _timerPickerRef$curre4 === void 0 || (_timerPickerRef$curre4 = _timerPickerRef$curre4.latestDuration) === null || _timerPickerRef$curre4 === void 0 ? void 0 : _timerPickerRef$curre4.hours,
        minutes: (_timerPickerRef$curre5 = timerPickerRef.current) === null || _timerPickerRef$curre5 === void 0 || (_timerPickerRef$curre5 = _timerPickerRef$curre5.latestDuration) === null || _timerPickerRef$curre5 === void 0 ? void 0 : _timerPickerRef$curre5.minutes,
        seconds: (_timerPickerRef$curre6 = timerPickerRef.current) === null || _timerPickerRef$curre6 === void 0 || (_timerPickerRef$curre6 = _timerPickerRef$curre6.latestDuration) === null || _timerPickerRef$curre6 === void 0 ? void 0 : _timerPickerRef$curre6.seconds
      }
    };
  });
  return /*#__PURE__*/React.createElement(Modal, _extends({
    isVisible: visible,
    onOverlayPress: closeOnOverlayPress ? hideModalHandler : undefined
  }, modalProps, {
    testID: "timer-picker-modal"
  }), /*#__PURE__*/React.createElement(View, _extends({}, containerProps, {
    style: styles.container
  }), /*#__PURE__*/React.createElement(View, _extends({}, contentContainerProps, {
    style: styles.contentContainer
  }), modalTitle ? /*#__PURE__*/React.createElement(Text, _extends({}, modalTitleProps, {
    style: styles.modalTitle
  }), modalTitle) : null, /*#__PURE__*/React.createElement(TimerPicker, _extends({
    ref: timerPickerRef,
    initialValue: confirmedDuration
  }, otherProps, {
    aggressivelyGetLatestDuration: true,
    onDurationChange: durationChangeHandler,
    styles: styles.timerPickerStyles
  })), /*#__PURE__*/React.createElement(View, _extends({}, buttonContainerProps, {
    style: styles.buttonContainer
  }), !hideCancelButton ? /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, buttonTouchableOpacityProps, {
    onPress: cancelHandler
  }), /*#__PURE__*/React.createElement(Text, {
    style: [styles.button, styles.cancelButton]
  }, cancelButtonText)) : null, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, buttonTouchableOpacityProps, {
    onPress: confirmHandler
  }), /*#__PURE__*/React.createElement(Text, {
    style: [styles.button, styles.confirmButton]
  }, confirmButtonText))))));
});
export default /*#__PURE__*/React.memo(TimerPickerModal);
//# sourceMappingURL=index.js.map