react-native-paper-dates/lib/module/Time/TimePicker.js

Performant Date Picker for React Native Paper

"use strict";

import { StyleSheet, useWindowDimensions, View } from 'react-native';
import { circleSize, inputTypes, toHourInputFormat, toHourOutputFormat } from './timeUtils';
import AnalogClock from './AnalogClock';
import TimeInputs from './TimeInputs';
import { DisplayModeContext } from '../contexts/DisplayModeContext';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function TimePicker({
  hours,
  minutes,
  onFocusInput,
  focused,
  inputType,
  onChange,
  locale,
  use24HourClock,
  inputFontSize
}) {
  const dimensions = useWindowDimensions();
  const isLandscape = dimensions.width > dimensions.height;
  const [displayMode, setDisplayMode] = useState(undefined);

  // method to check whether we have 24 hours in clock or 12
  const is24Hour = useMemo(() => {
    if (use24HourClock !== undefined) {
      return use24HourClock;
    }
    const formatter = new Intl.DateTimeFormat(locale, {
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'UTC'
    });
    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)));
    return formatted.includes('23');
  }, [locale, use24HourClock]);

  // Initialize display Mode according the hours value
  useEffect(() => {
    if (hours >= 12) {
      setDisplayMode('PM');
    } else {
      setDisplayMode('AM');
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onInnerChange = useCallback(params => {
    params.hours = toHourOutputFormat(params.hours, hours, is24Hour);
    onChange(params);
  }, [onChange, hours, is24Hour]);
  return /*#__PURE__*/_jsx(DisplayModeContext.Provider, {
    value: {
      mode: displayMode,
      setMode: setDisplayMode
    },
    children: /*#__PURE__*/_jsxs(View, {
      style: isLandscape ? [styles.rootLandscape, {
        width: 24 * 3 + 96 * 2 + 52 + (inputType === inputTypes.picker ? circleSize : -circleSize)
      }] : styles.rootPortrait,
      children: [/*#__PURE__*/_jsx(TimeInputs, {
        inputType: inputType,
        inputFontSize: inputFontSize,
        hours: hours,
        minutes: minutes,
        is24Hour: is24Hour,
        onChange: onChange,
        onFocusInput: onFocusInput,
        focused: focused,
        locale: locale
      }), inputType === inputTypes.picker ? /*#__PURE__*/_jsx(View, {
        style: styles.clockContainer,
        children: /*#__PURE__*/_jsx(AnalogClock, {
          hours: toHourInputFormat(hours, is24Hour),
          minutes: minutes,
          focused: focused,
          is24Hour: is24Hour,
          onChange: onInnerChange
        })
      }) : null]
    })
  });
}
const styles = StyleSheet.create({
  clockContainer: {
    paddingTop: 36,
    paddingLeft: 12,
    paddingRight: 12
  },
  rootLandscape: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  rootPortrait: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});
export default /*#__PURE__*/memo(TimePicker);
//# sourceMappingURL=TimePicker.js.map