react-native-paper-dates 0.4.5 → 0.6.0

package/lib/module/Time/AnalogClock.js

@@ -3,23 +3,26 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import Color from 'color';
 import { PanResponder, StyleSheet, View } from 'react-native';
 import { useTheme } from 'react-native-paper';
-import { clockTypes, getAngle, getHours, getHourType, getHourTypeFromOffset, getMinutes, hourTypes } from './timeUtils';
+import { circleSize, clockTypes, getAngle, getHours, getHourType, getMinutes } from './timeUtils';
 import * as React from 'react';
 import { useLatest } from '../utils';
 import AnalogClockHours from './AnalogClockHours';
 import AnimatedClockSwitcher from './AnimatedClockSwitcher';
-import AnalogClockMinutes from './AnalogClockMinutes'; // 250? when bigger?
+import AnalogClockMinutes from './AnalogClockMinutes';
+import { DisplayModeContext } from './TimePicker';
 
-export const circleSize = 215;
-
-function AnalogClock({
-  hours,
-  minutes,
-  focused,
-  is24Hour,
-  onChange
-}) {
-  const theme = useTheme(); // used to make pointer shorter if hours are selected and above 12
+function AnalogClock(_ref) {
+  let {
+    hours,
+    minutes,
+    focused,
+    is24Hour,
+    onChange
+  } = _ref;
+  const theme = useTheme();
+  const {
+    mode
+  } = React.useContext(DisplayModeContext); // used to make pointer shorter if hours are selected and above 12
 
   const shortPointer = (hours === 0 || hours > 12) && is24Hour;
   const clockRef = React.useRef(null); // Hooks are nice, sometimes... :-)..
@@ -30,6 +33,7 @@ function AnalogClock({
   const minutesRef = useLatest(minutes);
   const focusedRef = useLatest(focused);
   const is24HourRef = useLatest(is24Hour);
+  const modeRef = useLatest(mode);
   const onPointerMove = React.useCallback((e, final) => {
     let x = e.nativeEvent.locationX;
     let y = e.nativeEvent.locationY;
@@ -39,11 +43,10 @@ function AnalogClock({
       let hours24 = is24HourRef.current;
       let previousHourType = getHourType(hoursRef.current);
       let pickedHours = getHours(angle, previousHourType);
-      let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize);
-      let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm;
-      let hours12AndPm = !hours24 && previousHourType === hourTypes.pm; // TODO: check which mode is switched on am/pm
+      let hours12AndPm = !hours24 && modeRef.current === 'PM'; // Avoiding the "24h"
+      // Should be 12h for 12 hours and PM mode
 
-      if (hours12AndPm || hours24AndPM) {
+      if ((hours12AndPm || hours24) && pickedHours + 12 < 24) {
         pickedHours += 12;
       }
 
@@ -68,7 +71,7 @@ function AnalogClock({
         });
       }
     }
-  }, [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef]);
+  }, [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]);
   const panResponder = React.useRef(PanResponder.create({
     onPanResponderGrant: e => onPointerMove(e, false),
     onPanResponderMove: e => onPointerMove(e, false),

package/lib/module/Time/AnalogClock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnalogClock.tsx"],"names":["Color","PanResponder","StyleSheet","View","useTheme","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","React","useLatest","AnalogClockHours","AnimatedClockSwitcher","AnalogClockMinutes","circleSize","AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","shortPointer","clockRef","useRef","hoursRef","onChangeRef","minutesRef","focusedRef","is24HourRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","current","hours24","previousHourType","pickedHours","hourTypeFromOffset","hours24AndPM","pm","hours12AndPm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","dark","colors","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","marginBottom","memo"],"mappings":"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","sourcesContent":["import Color from 'color'\nimport {\n  GestureResponderEvent,\n  PanResponder,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\nimport {\n  clockTypes,\n  getAngle,\n  getHours,\n  getHourType,\n  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\n\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\n\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\n\n// 250? when bigger?\nexport const circleSize = 215\n\nfunction AnalogClock({\n  hours,\n  minutes,\n  focused,\n  is24Hour,\n  onChange,\n}: {\n  hours: number\n  minutes: number\n  focused: PossibleClockTypes\n  is24Hour: boolean\n  onChange: ({\n    hours,\n    minutes,\n    focused,\n  }: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n}) {\n  const theme = useTheme()\n\n  // used to make pointer shorter if hours are selected and above 12\n  const shortPointer = (hours === 0 || hours > 12) && is24Hour\n\n  const clockRef = React.useRef<View | null>(null)\n\n  // Hooks are nice, sometimes... :-)..\n  // We need the latest values, since the onPointerMove uses a closure to the function\n  const hoursRef = useLatest(hours)\n  const onChangeRef = useLatest(onChange)\n  const minutesRef = useLatest(minutes)\n  const focusedRef = useLatest(focused)\n  const is24HourRef = useLatest(is24Hour)\n\n  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n\n      let angle = getAngle(x, y, circleSize)\n\n      if (focusedRef.current === clockTypes.hours) {\n        let hours24 = is24HourRef.current\n        let previousHourType = getHourType(hoursRef.current)\n        let pickedHours = getHours(angle, previousHourType)\n\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n        let hours12AndPm = !hours24 && previousHourType === hourTypes.pm\n\n        // TODO: check which mode is switched on am/pm\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n\n        if (pickedHours === 24) {\n          pickedHours = 0\n        }\n\n        if (hoursRef.current !== pickedHours || final) {\n          onChangeRef.current({\n            hours: pickedHours,\n            minutes: minutesRef.current,\n            focused: final ? clockTypes.minutes : undefined,\n          })\n        }\n      } else if (focusedRef.current === clockTypes.minutes) {\n        let pickedMinutes = getMinutes(angle)\n        if (minutesRef.current !== pickedMinutes) {\n          onChangeRef.current({\n            hours: hoursRef.current,\n            minutes: pickedMinutes,\n          })\n        }\n      }\n    },\n    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef]\n  )\n\n  const panResponder = React.useRef(\n    PanResponder.create({\n      onPanResponderGrant: (e) => onPointerMove(e, false),\n      onPanResponderMove: (e) => onPointerMove(e, false),\n      onPanResponderRelease: (e) => onPointerMove(e, true),\n\n      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\n\n  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0\n  const pointerNumber = focused === clockTypes.hours ? hours : minutes\n  const degreesPerNumber = focused === clockTypes.hours ? 30 : 6\n  return (\n    <View\n      ref={clockRef}\n      {...panResponder.panHandlers}\n      style={[\n        styles.clock,\n        {\n          backgroundColor: theme.dark\n            ? Color(theme.colors.surface).lighten(1.2).hex()\n            : Color(theme.colors.surface).darken(0.1).hex(),\n        },\n      ]}\n      // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506\n      cursor={'pointer'}\n    >\n      <View\n        style={[\n          styles.line,\n          {\n            backgroundColor: theme.colors.primary,\n            transform: [\n              { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },\n              {\n                translateX: circleSize / 4 - 4 - dynamicSize / 2,\n              },\n            ],\n            width: circleSize / 2 - 4 - dynamicSize,\n          },\n        ]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[styles.endPoint, { backgroundColor: theme.colors.primary }]}\n        />\n      </View>\n      <View\n        style={[StyleSheet.absoluteFill, styles.center]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[\n            styles.middlePoint,\n            {\n              backgroundColor: theme.colors.primary,\n            },\n          ]}\n        />\n      </View>\n      <AnimatedClockSwitcher\n        focused={focused}\n        hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}\n        minutes={<AnalogClockMinutes minutes={minutes} />}\n      />\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  clock: {\n    height: circleSize,\n    width: circleSize,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: circleSize / 2,\n  },\n  middlePoint: {\n    borderRadius: 4,\n    height: 8,\n    width: 8,\n  },\n  center: { justifyContent: 'center', alignItems: 'center' },\n  endPoint: {\n    borderRadius: 15,\n    height: 30,\n    width: 30,\n    position: 'absolute',\n    right: 0,\n    bottom: -14,\n  },\n  line: {\n    position: 'absolute',\n\n    marginBottom: -1,\n    height: 2,\n    borderRadius: 4,\n  },\n})\n\nfunction returnTrue() {\n  return true\n}\n\nexport default React.memo(AnalogClock)\n"]}
+{"version":3,"sources":["AnalogClock.tsx"],"names":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getMinutes","React","useLatest","AnalogClockHours","AnimatedClockSwitcher","AnalogClockMinutes","DisplayModeContext","AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","mode","useContext","shortPointer","clockRef","useRef","hoursRef","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","current","hours24","previousHourType","pickedHours","hours12AndPm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","dark","colors","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","marginBottom","memo"],"mappings":"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","sourcesContent":["import Color from 'color'\nimport {\n  GestureResponderEvent,\n  PanResponder,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\nimport {\n  circleSize,\n  clockTypes,\n  getAngle,\n  getHours,\n  getHourType,\n  getMinutes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\n\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\n\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\n\nfunction AnalogClock({\n  hours,\n  minutes,\n  focused,\n  is24Hour,\n  onChange,\n}: {\n  hours: number\n  minutes: number\n  focused: PossibleClockTypes\n  is24Hour: boolean\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n}) {\n  const theme = useTheme()\n  const { mode } = React.useContext(DisplayModeContext)\n  // used to make pointer shorter if hours are selected and above 12\n  const shortPointer = (hours === 0 || hours > 12) && is24Hour\n\n  const clockRef = React.useRef<View | null>(null)\n\n  // Hooks are nice, sometimes... :-)..\n  // We need the latest values, since the onPointerMove uses a closure to the function\n  const hoursRef = useLatest(hours)\n  const onChangeRef = useLatest(onChange)\n  const minutesRef = useLatest(minutes)\n  const focusedRef = useLatest(focused)\n  const is24HourRef = useLatest(is24Hour)\n  const modeRef = useLatest(mode)\n\n  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n\n      let angle = getAngle(x, y, circleSize)\n\n      if (focusedRef.current === clockTypes.hours) {\n        let hours24 = is24HourRef.current\n        let previousHourType = getHourType(hoursRef.current)\n        let pickedHours = getHours(angle, previousHourType)\n\n        let hours12AndPm = !hours24 && modeRef.current === 'PM'\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n        if ((hours12AndPm || hours24) && pickedHours + 12 < 24) {\n          pickedHours += 12\n        }\n\n        if (pickedHours === 24) {\n          pickedHours = 0\n        }\n\n        if (hoursRef.current !== pickedHours || final) {\n          onChangeRef.current({\n            hours: pickedHours,\n            minutes: minutesRef.current,\n            focused: final ? clockTypes.minutes : undefined,\n          })\n        }\n      } else if (focusedRef.current === clockTypes.minutes) {\n        let pickedMinutes = getMinutes(angle)\n        if (minutesRef.current !== pickedMinutes) {\n          onChangeRef.current({\n            hours: hoursRef.current,\n            minutes: pickedMinutes,\n          })\n        }\n      }\n    },\n    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]\n  )\n\n  const panResponder = React.useRef(\n    PanResponder.create({\n      onPanResponderGrant: (e) => onPointerMove(e, false),\n      onPanResponderMove: (e) => onPointerMove(e, false),\n      onPanResponderRelease: (e) => onPointerMove(e, true),\n\n      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\n\n  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0\n  const pointerNumber = focused === clockTypes.hours ? hours : minutes\n  const degreesPerNumber = focused === clockTypes.hours ? 30 : 6\n  return (\n    <View\n      ref={clockRef}\n      {...panResponder.panHandlers}\n      style={[\n        styles.clock,\n        {\n          backgroundColor: theme.dark\n            ? Color(theme.colors.surface).lighten(1.2).hex()\n            : Color(theme.colors.surface).darken(0.1).hex(),\n        },\n      ]}\n      // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506\n      cursor={'pointer'}\n    >\n      <View\n        style={[\n          styles.line,\n          {\n            backgroundColor: theme.colors.primary,\n            transform: [\n              { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },\n              {\n                translateX: circleSize / 4 - 4 - dynamicSize / 2,\n              },\n            ],\n            width: circleSize / 2 - 4 - dynamicSize,\n          },\n        ]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[styles.endPoint, { backgroundColor: theme.colors.primary }]}\n        />\n      </View>\n      <View\n        style={[StyleSheet.absoluteFill, styles.center]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[\n            styles.middlePoint,\n            {\n              backgroundColor: theme.colors.primary,\n            },\n          ]}\n        />\n      </View>\n      <AnimatedClockSwitcher\n        focused={focused}\n        hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}\n        minutes={<AnalogClockMinutes minutes={minutes} />}\n      />\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  clock: {\n    height: circleSize,\n    width: circleSize,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: circleSize / 2,\n  },\n  middlePoint: {\n    borderRadius: 4,\n    height: 8,\n    width: 8,\n  },\n  center: { justifyContent: 'center', alignItems: 'center' },\n  endPoint: {\n    borderRadius: 15,\n    height: 30,\n    width: 30,\n    position: 'absolute',\n    right: 0,\n    bottom: -14,\n  },\n  line: {\n    position: 'absolute',\n\n    marginBottom: -1,\n    height: 2,\n    borderRadius: 4,\n  },\n})\n\nfunction returnTrue() {\n  return true\n}\n\nexport default React.memo(AnalogClock)\n"]}

package/lib/module/Time/AnalogClockHours.js

@@ -1,15 +1,20 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Text } from 'react-native-paper';
-import { circleSize } from './AnalogClock';
+import { circleSize } from './timeUtils';
 import { useTextColorOnPrimary } from '../utils';
+import { DisplayModeContext } from './TimePicker';
 
-function AnalogClockHours({
-  is24Hour,
-  hours
-}) {
-  const outerRange = getHourNumbers(false, circleSize, 12);
-  const innerRange = getHourNumbers(true, circleSize, 12);
+function AnalogClockHours(_ref) {
+  let {
+    is24Hour,
+    hours
+  } = _ref;
+  const {
+    mode
+  } = React.useContext(DisplayModeContext);
+  const outerRange = getHourNumbers(false, circleSize, 12, 12);
+  const innerRange = getHourNumbers(true, circleSize, 12, 12);
   const color = useTextColorOnPrimary();
   return /*#__PURE__*/React.createElement(React.Fragment, null, outerRange.map((a, i) => /*#__PURE__*/React.createElement(View, {
     key: i,
@@ -25,7 +30,7 @@ function AnalogClockHours({
       color
     } : null,
     selectable: false
-  }, i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(View, {
+  }, mode === 'AM' && i + 1 === 12 ? '00' : i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(View, {
     key: i,
     pointerEvents: "none",
     style: [styles.innerHourRoot, {
@@ -76,12 +81,12 @@ const styles = StyleSheet.create({
   }
 });
 
-function getHourNumbers(is24Hour, size, count) {
+function getHourNumbers(is24Hour, size, count, arrayLength) {
   let angle = 0;
   let step = 2 * Math.PI / count;
   let radius = size / (is24Hour ? 4 : 2.5);
   angle = -90 * Math.PI / 180 + Math.PI / 6;
-  return Array(12).fill(true).map(() => {
+  return Array(arrayLength).fill(true).map(() => {
     let x = Math.round(size / 2 + radius * Math.cos(angle));
     let y = Math.round(size / 2 + radius * Math.sin(angle));
     angle += step;

package/lib/module/Time/AnalogClockHours.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnalogClockHours.tsx"],"names":["React","View","StyleSheet","Text","circleSize","useTextColorOnPrimary","AnalogClockHours","is24Hour","hours","outerRange","getHourNumbers","innerRange","color","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","innerHourText","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","fontSize","size","count","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text } from 'react-native-paper'\nimport { circleSize } from './AnalogClock'\nimport { useTextColorOnPrimary } from '../utils'\n\nfunction AnalogClockHours({\n  is24Hour,\n  hours,\n}: {\n  is24Hour: boolean\n  hours: number\n}) {\n  const outerRange = getHourNumbers(false, circleSize, 12)\n  const innerRange = getHourNumbers(true, circleSize, 12)\n  const color = useTextColorOnPrimary()\n  return (\n    <>\n      {outerRange.map((a, i) => (\n        <View\n          key={i}\n          pointerEvents=\"none\"\n          style={[\n            styles.outerHourRoot,\n            {\n              top: a[1] || 0,\n              left: a[0] || 0,\n            },\n          ]}\n        >\n          <View style={styles.outerHourInner}>\n            <Text style={hours === i + 1 ? { color } : null} selectable={false}>\n              {i + 1}\n            </Text>\n          </View>\n        </View>\n      ))}\n      {is24Hour\n        ? innerRange.map((a, i) => (\n            <View\n              key={i}\n              pointerEvents=\"none\"\n              style={[\n                styles.innerHourRoot,\n                {\n                  top: a[1] || 0,\n                  left: a[0] || 0,\n                },\n              ]}\n            >\n              <View style={styles.innerHourInner}>\n                <Text\n                  selectable={false}\n                  style={[\n                    styles.innerHourText,\n                    i + 13 === hours || (i + 13 === 24 && hours === 0)\n                      ? { color }\n                      : null,\n                  ]}\n                >\n                  {i + 13 === 24 ? '00' : i + 13}\n                </Text>\n              </View>\n            </View>\n          ))\n        : null}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 50,\n    height: 50,\n    marginLeft: -25,\n    marginTop: -25,\n\n    borderRadius: 25,\n  },\n  outerHourInner: { borderRadius: 25 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\n})\n\nfunction getHourNumbers(is24Hour: boolean, size: number, count: number) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / (is24Hour ? 4 : 2.5)\n\n  angle = (-90 * Math.PI) / 180 + Math.PI / 6\n\n  return Array(12)\n    .fill(true)\n    .map(() => {\n      let x = Math.round(size / 2 + radius * Math.cos(angle))\n      let y = Math.round(size / 2 + radius * Math.sin(angle))\n      angle += step\n      return [x, y]\n    })\n}\n\nexport default React.memo(AnalogClockHours)\n"]}
+{"version":3,"sources":["AnalogClockHours.tsx"],"names":["React","View","StyleSheet","Text","circleSize","useTextColorOnPrimary","DisplayModeContext","AnalogClockHours","is24Hour","hours","mode","useContext","outerRange","getHourNumbers","innerRange","color","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","innerHourText","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","fontSize","size","count","arrayLength","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text } from 'react-native-paper'\nimport { circleSize } from './timeUtils'\nimport { useTextColorOnPrimary } from '../utils'\nimport { DisplayModeContext } from './TimePicker'\n\nfunction AnalogClockHours({\n  is24Hour,\n  hours,\n}: {\n  is24Hour: boolean\n  hours: number\n}) {\n  const { mode } = React.useContext(DisplayModeContext)\n  const outerRange = getHourNumbers(false, circleSize, 12, 12)\n  const innerRange = getHourNumbers(true, circleSize, 12, 12)\n  const color = useTextColorOnPrimary()\n\n  return (\n    <>\n      {outerRange.map((a, i) => (\n        <View\n          key={i}\n          pointerEvents=\"none\"\n          style={[\n            styles.outerHourRoot,\n            {\n              top: a[1] || 0,\n              left: a[0] || 0,\n            },\n          ]}\n        >\n          <View style={styles.outerHourInner}>\n            {/* Display 00 instead of 12 for AM hours */}\n            <Text style={hours === i + 1 ? { color } : null} selectable={false}>\n              {mode === 'AM' && i + 1 === 12 ? '00' : i + 1}\n            </Text>\n          </View>\n        </View>\n      ))}\n      {is24Hour\n        ? innerRange.map((a, i) => (\n            <View\n              key={i}\n              pointerEvents=\"none\"\n              style={[\n                styles.innerHourRoot,\n                {\n                  top: a[1] || 0,\n                  left: a[0] || 0,\n                },\n              ]}\n            >\n              <View style={styles.innerHourInner}>\n                <Text\n                  selectable={false}\n                  style={[\n                    styles.innerHourText,\n                    i + 13 === hours || (i + 13 === 24 && hours === 0)\n                      ? { color }\n                      : null,\n                  ]}\n                >\n                  {i + 13 === 24 ? '00' : i + 13}\n                </Text>\n              </View>\n            </View>\n          ))\n        : null}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 50,\n    height: 50,\n    marginLeft: -25,\n    marginTop: -25,\n\n    borderRadius: 25,\n  },\n  outerHourInner: { borderRadius: 25 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\n})\n\nfunction getHourNumbers(\n  is24Hour: boolean,\n  size: number,\n  count: number,\n  arrayLength: number\n) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / (is24Hour ? 4 : 2.5)\n\n  angle = (-90 * Math.PI) / 180 + Math.PI / 6\n\n  return Array(arrayLength)\n    .fill(true)\n    .map(() => {\n      let x = Math.round(size / 2 + radius * Math.cos(angle))\n      let y = Math.round(size / 2 + radius * Math.sin(angle))\n      angle += step\n      return [x, y]\n    })\n}\n\nexport default React.memo(AnalogClockHours)\n"]}

package/lib/module/Time/AnalogClockMinutes.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Text } from 'react-native-paper';
-import { circleSize } from './AnalogClock';
+import { circleSize } from './timeUtils';
 import { useTextColorOnPrimary } from '../utils';
 
-function AnalogClockMinutes({
-  minutes
-}) {
+function AnalogClockMinutes(_ref) {
+  let {
+    minutes
+  } = _ref;
   const range = getMinuteNumbers(circleSize, 12);
   const color = useTextColorOnPrimary();
   return /*#__PURE__*/React.createElement(React.Fragment, null, range.map((a, i) => {
@@ -30,7 +31,7 @@ function AnalogClockMinutes({
     }, /*#__PURE__*/React.createElement(Text, {
       style: isCurrent ? {
         color
-      } : null,
+      } : undefined,
       selectable: false
     }, isZero ? '00' : currentMinutes)));
   }));

package/lib/module/Time/AnalogClockMinutes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnalogClockMinutes.tsx"],"names":["React","View","StyleSheet","Text","circleSize","useTextColorOnPrimary","AnalogClockMinutes","minutes","range","getMinuteNumbers","color","map","a","i","currentMinutes","isZero","isCurrent","styles","outerHourRoot","top","left","outerHourInner","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","innerHourRoot","innerHourInner","innerHourText","fontSize","textWhite","size","count","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text } from 'react-native-paper'\nimport { circleSize } from './AnalogClock'\nimport { useTextColorOnPrimary } from '../utils'\n\nfunction AnalogClockMinutes({ minutes }: { minutes: number }) {\n  const range = getMinuteNumbers(circleSize, 12)\n  const color = useTextColorOnPrimary()\n  return (\n    <>\n      {range.map((a, i) => {\n        const currentMinutes = i * 5\n        const isZero = currentMinutes === 0\n        let isCurrent =\n          currentMinutes - 1 <= minutes && currentMinutes + 1 >= minutes\n        if (isZero) {\n          isCurrent = minutes >= 59 || currentMinutes + 1 >= minutes\n        }\n        return (\n          <View\n            key={i}\n            pointerEvents=\"none\"\n            style={[\n              styles.outerHourRoot,\n              {\n                top: a[1] || 0,\n                left: a[0] || 0,\n              },\n            ]}\n          >\n            <View style={styles.outerHourInner}>\n              <Text style={isCurrent ? { color } : null} selectable={false}>\n                {isZero ? '00' : currentMinutes}\n              </Text>\n            </View>\n          </View>\n        )\n      })}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 50,\n    height: 50,\n    marginLeft: -25,\n    marginTop: -25,\n\n    borderRadius: 25,\n  },\n  outerHourInner: { borderRadius: 25 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\n  textWhite: { color: '#fff' },\n})\n\nfunction getMinuteNumbers(size: number, count: number) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / 2.5\n\n  angle = angle = (-90 * Math.PI) / 180\n\n  return Array(12)\n    .fill(true)\n    .map(() => {\n      let x = Math.round(size / 2 + radius * Math.cos(angle))\n      let y = Math.round(size / 2 + radius * Math.sin(angle))\n      angle += step\n      return [x, y]\n    })\n}\n\nexport default React.memo(AnalogClockMinutes)\n"]}
+{"version":3,"sources":["AnalogClockMinutes.tsx"],"names":["React","View","StyleSheet","Text","circleSize","useTextColorOnPrimary","AnalogClockMinutes","minutes","range","getMinuteNumbers","color","map","a","i","currentMinutes","isZero","isCurrent","styles","outerHourRoot","top","left","outerHourInner","undefined","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","innerHourRoot","innerHourInner","innerHourText","fontSize","textWhite","size","count","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text } from 'react-native-paper'\nimport { circleSize } from './timeUtils'\nimport { useTextColorOnPrimary } from '../utils'\n\nfunction AnalogClockMinutes({ minutes }: { minutes: number }) {\n  const range = getMinuteNumbers(circleSize, 12)\n  const color = useTextColorOnPrimary()\n  return (\n    <>\n      {range.map((a, i) => {\n        const currentMinutes = i * 5\n        const isZero = currentMinutes === 0\n        let isCurrent =\n          currentMinutes - 1 <= minutes && currentMinutes + 1 >= minutes\n        if (isZero) {\n          isCurrent = minutes >= 59 || currentMinutes + 1 >= minutes\n        }\n        return (\n          <View\n            key={i}\n            pointerEvents=\"none\"\n            style={[\n              styles.outerHourRoot,\n              {\n                top: a[1] || 0,\n                left: a[0] || 0,\n              },\n            ]}\n          >\n            <View style={styles.outerHourInner}>\n              <Text\n                style={isCurrent ? { color } : undefined}\n                selectable={false}\n              >\n                {isZero ? '00' : currentMinutes}\n              </Text>\n            </View>\n          </View>\n        )\n      })}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 50,\n    height: 50,\n    marginLeft: -25,\n    marginTop: -25,\n\n    borderRadius: 25,\n  },\n  outerHourInner: { borderRadius: 25 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\n  textWhite: { color: '#fff' },\n})\n\nfunction getMinuteNumbers(size: number, count: number) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / 2.5\n\n  angle = angle = (-90 * Math.PI) / 180\n\n  return Array(12)\n    .fill(true)\n    .map(() => {\n      let x = Math.round(size / 2 + radius * Math.cos(angle))\n      let y = Math.round(size / 2 + radius * Math.sin(angle))\n      angle += step\n      return [x, y]\n    })\n}\n\nexport default React.memo(AnalogClockMinutes)\n"]}

package/lib/module/Time/AnimatedClockSwitcher.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { clockTypes } from './timeUtils';
-export default function AnimatedClockSwitcher({
-  focused,
-  hours,
-  minutes
-}) {
+export default function AnimatedClockSwitcher(_ref) {
+  let {
+    focused,
+    hours,
+    minutes
+  } = _ref;
   const collapsed = focused === clockTypes.hours;
   const animatedCollapsed = React.useRef(new Animated.Value(collapsed ? 1 : 0));
   React.useEffect(() => {

package/lib/module/Time/AnimatedClockSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedClockSwitcher.tsx"],"names":["React","Animated","StyleSheet","View","clockTypes","AnimatedClockSwitcher","focused","hours","minutes","collapsed","animatedCollapsed","useRef","Value","useEffect","timing","current","toValue","duration","useNativeDriver","start","absoluteFill","opacity","transform","scale","interpolate","inputRange","outputRange"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,QAA2C,cAA3C;AACA,SAASC,UAAT,QAA+C,aAA/C;AAEA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,OAD4C;AAE5CC,EAAAA,KAF4C;AAG5CC,EAAAA;AAH4C,CAA/B,EAQZ;AACD,QAAMC,SAAS,GAAGH,OAAO,KAAKF,UAAU,CAACG,KAAzC;AACA,QAAMG,iBAAiB,GAAGV,KAAK,CAACW,MAAN,CACxB,IAAIV,QAAQ,CAACW,KAAb,CAAmBH,SAAS,GAAG,CAAH,GAAO,CAAnC,CADwB,CAA1B;AAGAT,EAAAA,KAAK,CAACa,SAAN,CAAgB,MAAM;AACpBZ,IAAAA,QAAQ,CAACa,MAAT,CAAgBJ,iBAAiB,CAACK,OAAlC,EAA2C;AACzCC,MAAAA,OAAO,EAAEP,SAAS,GAAG,CAAH,GAAO,CADgB;AAEzCQ,MAAAA,QAAQ,EAAE,GAF+B;AAGzCC,MAAAA,eAAe,EAAE;AAHwB,KAA3C,EAIGC,KAJH;AAKD,GAND,EAMG,CAACV,SAAD,CANH;AAQA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEP,UAAU,CAACkB;AAAxB,kBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAEX,SAAS,GAAG,MAAH,GAAY,MADtC;AAEE,IAAA,KAAK,EAAE,CACLP,UAAU,CAACkB,YADN,EAEL;AACEC,MAAAA,OAAO,EAAEX,iBAAiB,CAACK,OAD7B;AAEEO,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,KAAK,EAAEb,iBAAiB,CAACK,OAAlB,CAA0BS,WAA1B,CAAsC;AAC3CC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD+B;AAE3CC,UAAAA,WAAW,EAAE,CAAC,IAAD,EAAO,CAAP;AAF8B,SAAtC;AADT,OADS;AAFb,KAFK;AAFT,KAiBGnB,KAjBH,CADF,eAoBE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAEE,SAAS,GAAG,MAAH,GAAY,MADtC;AAEE,IAAA,KAAK,EAAE,CACLP,UAAU,CAACkB,YADN,EAEL;AACEC,MAAAA,OAAO,EAAEX,iBAAiB,CAACK,OAAlB,CAA0BS,WAA1B,CAAsC;AAC7CC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADiC;AAE7CC,QAAAA,WAAW,EAAE,CAAC,CAAD,EAAI,CAAJ;AAFgC,OAAtC,CADX;AAKEJ,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,KAAK,EAAEb,iBAAiB,CAACK,OAAlB,CAA0BS,WAA1B,CAAsC;AAC3CC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD+B;AAE3CC,UAAAA,WAAW,EAAE,CAAC,CAAD,EAAI,IAAJ;AAF8B,SAAtC;AADT,OADS;AALb,KAFK;AAFT,KAoBGlB,OApBH,CApBF,CADF;AA6CD","sourcesContent":["import * as React from 'react'\nimport { Animated, StyleSheet, View } from 'react-native'\nimport { clockTypes, PossibleClockTypes } from './timeUtils'\n\nexport default function AnimatedClockSwitcher({\n  focused,\n  hours,\n  minutes,\n}: {\n  focused: PossibleClockTypes\n  hours: any\n  minutes: any\n}) {\n  const collapsed = focused === clockTypes.hours\n  const animatedCollapsed = React.useRef<Animated.Value>(\n    new Animated.Value(collapsed ? 1 : 0)\n  )\n  React.useEffect(() => {\n    Animated.timing(animatedCollapsed.current, {\n      toValue: collapsed ? 1 : 0,\n      duration: 250,\n      useNativeDriver: true,\n    }).start()\n  }, [collapsed])\n\n  return (\n    <View style={StyleSheet.absoluteFill}>\n      <Animated.View\n        pointerEvents={collapsed ? 'auto' : 'none'}\n        style={[\n          StyleSheet.absoluteFill,\n          {\n            opacity: animatedCollapsed.current,\n            transform: [\n              {\n                scale: animatedCollapsed.current.interpolate({\n                  inputRange: [0, 1],\n                  outputRange: [0.95, 1],\n                }),\n              },\n            ],\n          },\n        ]}\n      >\n        {hours}\n      </Animated.View>\n      <Animated.View\n        pointerEvents={collapsed ? 'none' : 'auto'}\n        style={[\n          StyleSheet.absoluteFill,\n          {\n            opacity: animatedCollapsed.current.interpolate({\n              inputRange: [0, 1],\n              outputRange: [1, 0],\n            }),\n            transform: [\n              {\n                scale: animatedCollapsed.current.interpolate({\n                  inputRange: [0, 1],\n                  outputRange: [1, 0.95],\n                }),\n              },\n            ],\n          },\n        ]}\n      >\n        {minutes}\n      </Animated.View>\n    </View>\n  )\n}\n"]}
+{"version":3,"sources":["AnimatedClockSwitcher.tsx"],"names":["React","Animated","StyleSheet","View","clockTypes","AnimatedClockSwitcher","focused","hours","minutes","collapsed","animatedCollapsed","useRef","Value","useEffect","timing","current","toValue","duration","useNativeDriver","start","absoluteFill","opacity","transform","scale","interpolate","inputRange","outputRange"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,QAA2C,cAA3C;AACA,SAASC,UAAT,QAA+C,aAA/C;AAEA,eAAe,SAASC,qBAAT,OAQZ;AAAA,MAR2C;AAC5CC,IAAAA,OAD4C;AAE5CC,IAAAA,KAF4C;AAG5CC,IAAAA;AAH4C,GAQ3C;AACD,QAAMC,SAAS,GAAGH,OAAO,KAAKF,UAAU,CAACG,KAAzC;AACA,QAAMG,iBAAiB,GAAGV,KAAK,CAACW,MAAN,CACxB,IAAIV,QAAQ,CAACW,KAAb,CAAmBH,SAAS,GAAG,CAAH,GAAO,CAAnC,CADwB,CAA1B;AAGAT,EAAAA,KAAK,CAACa,SAAN,CAAgB,MAAM;AACpBZ,IAAAA,QAAQ,CAACa,MAAT,CAAgBJ,iBAAiB,CAACK,OAAlC,EAA2C;AACzCC,MAAAA,OAAO,EAAEP,SAAS,GAAG,CAAH,GAAO,CADgB;AAEzCQ,MAAAA,QAAQ,EAAE,GAF+B;AAGzCC,MAAAA,eAAe,EAAE;AAHwB,KAA3C,EAIGC,KAJH;AAKD,GAND,EAMG,CAACV,SAAD,CANH;AAQA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEP,UAAU,CAACkB;AAAxB,kBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAEX,SAAS,GAAG,MAAH,GAAY,MADtC;AAEE,IAAA,KAAK,EAAE,CACLP,UAAU,CAACkB,YADN,EAEL;AACEC,MAAAA,OAAO,EAAEX,iBAAiB,CAACK,OAD7B;AAEEO,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,KAAK,EAAEb,iBAAiB,CAACK,OAAlB,CAA0BS,WAA1B,CAAsC;AAC3CC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD+B;AAE3CC,UAAAA,WAAW,EAAE,CAAC,IAAD,EAAO,CAAP;AAF8B,SAAtC;AADT,OADS;AAFb,KAFK;AAFT,KAiBGnB,KAjBH,CADF,eAoBE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAEE,SAAS,GAAG,MAAH,GAAY,MADtC;AAEE,IAAA,KAAK,EAAE,CACLP,UAAU,CAACkB,YADN,EAEL;AACEC,MAAAA,OAAO,EAAEX,iBAAiB,CAACK,OAAlB,CAA0BS,WAA1B,CAAsC;AAC7CC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADiC;AAE7CC,QAAAA,WAAW,EAAE,CAAC,CAAD,EAAI,CAAJ;AAFgC,OAAtC,CADX;AAKEJ,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,KAAK,EAAEb,iBAAiB,CAACK,OAAlB,CAA0BS,WAA1B,CAAsC;AAC3CC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD+B;AAE3CC,UAAAA,WAAW,EAAE,CAAC,CAAD,EAAI,IAAJ;AAF8B,SAAtC;AADT,OADS;AALb,KAFK;AAFT,KAoBGlB,OApBH,CApBF,CADF;AA6CD","sourcesContent":["import * as React from 'react'\nimport { Animated, StyleSheet, View } from 'react-native'\nimport { clockTypes, PossibleClockTypes } from './timeUtils'\n\nexport default function AnimatedClockSwitcher({\n  focused,\n  hours,\n  minutes,\n}: {\n  focused: PossibleClockTypes\n  hours: any\n  minutes: any\n}) {\n  const collapsed = focused === clockTypes.hours\n  const animatedCollapsed = React.useRef<Animated.Value>(\n    new Animated.Value(collapsed ? 1 : 0)\n  )\n  React.useEffect(() => {\n    Animated.timing(animatedCollapsed.current, {\n      toValue: collapsed ? 1 : 0,\n      duration: 250,\n      useNativeDriver: true,\n    }).start()\n  }, [collapsed])\n\n  return (\n    <View style={StyleSheet.absoluteFill}>\n      <Animated.View\n        pointerEvents={collapsed ? 'auto' : 'none'}\n        style={[\n          StyleSheet.absoluteFill,\n          {\n            opacity: animatedCollapsed.current,\n            transform: [\n              {\n                scale: animatedCollapsed.current.interpolate({\n                  inputRange: [0, 1],\n                  outputRange: [0.95, 1],\n                }),\n              },\n            ],\n          },\n        ]}\n      >\n        {hours}\n      </Animated.View>\n      <Animated.View\n        pointerEvents={collapsed ? 'none' : 'auto'}\n        style={[\n          StyleSheet.absoluteFill,\n          {\n            opacity: animatedCollapsed.current.interpolate({\n              inputRange: [0, 1],\n              outputRange: [1, 0],\n            }),\n            transform: [\n              {\n                scale: animatedCollapsed.current.interpolate({\n                  inputRange: [0, 1],\n                  outputRange: [1, 0.95],\n                }),\n              },\n            ],\n          },\n        ]}\n      >\n        {minutes}\n      </Animated.View>\n    </View>\n  )\n}\n"]}

package/lib/module/Time/TimeInput.js

@@ -6,15 +6,16 @@ import { useTheme, TouchableRipple } from 'react-native-paper';
 import Color from 'color';
 import { inputTypes, useInputColors } from './timeUtils';
 
-function TimeInput({
-  value,
-  clockType,
-  pressed,
-  onPress,
-  onChanged,
-  inputType,
-  ...rest
-}, ref) {
+function TimeInput(_ref, ref) {
+  let {
+    value,
+    clockType,
+    pressed,
+    onPress,
+    onChanged,
+    inputType,
+    ...rest
+  } = _ref;
   const [controlledValue, setControlledValue] = React.useState(`${value}`);
 
   const onInnerChange = text => {
@@ -64,7 +65,10 @@ function TimeInput({
     }],
     rippleColor: Color(theme.colors.primary).fade(0.7).hex(),
     onPress: () => onPress(clockType),
-    borderless: true
+    borderless: true // RN types bug
+    ,
+    hasTVPreferredFocus: undefined,
+    tvParallaxProperties: undefined
   }, /*#__PURE__*/React.createElement(View, null)) : null);
 }
 

package/lib/module/Time/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TimeInput.tsx"],"names":["React","View","TextInput","StyleSheet","useTheme","TouchableRipple","Color","inputTypes","useInputColors","TimeInput","value","clockType","pressed","onPress","onChanged","inputType","rest","ref","controlledValue","setControlledValue","useState","onInnerChange","text","Number","useEffect","theme","inputFocused","setInputFocused","highlighted","picker","color","backgroundColor","formattedValue","length","styles","root","input","borderRadius","roundness","dark","absoluteFill","buttonOverlay","colors","primary","fade","hex","create","position","height","width","fontSize","textAlign","textAlignVertical","overflow","forwardRef"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, TextInput, TextInputProps, StyleSheet } from 'react-native'\nimport { useTheme, TouchableRipple } from 'react-native-paper'\n\nimport Color from 'color'\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  useInputColors,\n} from './timeUtils'\n\ninterface TimeInputProps\n  extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {\n  value: number\n  clockType: PossibleClockTypes\n  onPress?: (type: PossibleClockTypes) => any\n  pressed: boolean\n  onChanged: (n: number) => any\n  inputType: PossibleInputTypes\n}\n\nfunction TimeInput(\n  {\n    value,\n    clockType,\n    pressed,\n    onPress,\n    onChanged,\n    inputType,\n    ...rest\n  }: TimeInputProps,\n  ref: any\n) {\n  const [controlledValue, setControlledValue] = React.useState<string>(\n    `${value}`\n  )\n\n  const onInnerChange = (text: string) => {\n    setControlledValue(text)\n    if (text !== '' && text !== '0') {\n      onChanged(Number(text))\n    }\n  }\n\n  React.useEffect(() => {\n    setControlledValue(`${value}`)\n  }, [value])\n\n  const theme = useTheme()\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false)\n\n  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused\n\n  const { color, backgroundColor } = useInputColors(highlighted)\n\n  let formattedValue = controlledValue\n  if (!inputFocused) {\n    formattedValue =\n      controlledValue.length === 1\n        ? `0${controlledValue}`\n        : `${controlledValue}`\n  }\n\n  return (\n    <View style={styles.root}>\n      <TextInput\n        ref={ref}\n        style={[\n          styles.input,\n          {\n            color,\n            backgroundColor,\n            borderRadius: theme.roundness,\n          },\n        ]}\n        value={formattedValue}\n        maxLength={2}\n        onFocus={() => setInputFocused(true)}\n        onBlur={() => setInputFocused(false)}\n        keyboardAppearance={theme.dark ? 'dark' : 'default'}\n        keyboardType=\"number-pad\"\n        onChangeText={onInnerChange}\n        {...rest}\n      />\n      {onPress && inputType === inputTypes.picker ? (\n        <TouchableRipple\n          style={[\n            StyleSheet.absoluteFill,\n            styles.buttonOverlay,\n            {\n              // backgroundColor: 'blue',\n              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={Color(theme.colors.primary).fade(0.7).hex()}\n          onPress={() => onPress(clockType)}\n          borderless={true}\n        >\n          <View />\n        </TouchableRipple>\n      ) : null}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: { position: 'relative', height: 80, width: 96 },\n  input: {\n    fontSize: 50,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n    height: 80,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"]}
+{"version":3,"sources":["TimeInput.tsx"],"names":["React","View","TextInput","StyleSheet","useTheme","TouchableRipple","Color","inputTypes","useInputColors","TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","rest","controlledValue","setControlledValue","useState","onInnerChange","text","Number","useEffect","theme","inputFocused","setInputFocused","highlighted","picker","color","backgroundColor","formattedValue","length","styles","root","input","borderRadius","roundness","dark","absoluteFill","buttonOverlay","colors","primary","fade","hex","undefined","create","position","height","width","fontSize","textAlign","textAlignVertical","overflow","forwardRef"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, TextInput, TextInputProps, StyleSheet } from 'react-native'\nimport { useTheme, TouchableRipple } from 'react-native-paper'\n\nimport Color from 'color'\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  useInputColors,\n} from './timeUtils'\n\ninterface TimeInputProps\n  extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {\n  value: number\n  clockType: PossibleClockTypes\n  onPress?: (type: PossibleClockTypes) => any\n  pressed: boolean\n  onChanged: (n: number) => any\n  inputType: PossibleInputTypes\n}\n\nfunction TimeInput(\n  {\n    value,\n    clockType,\n    pressed,\n    onPress,\n    onChanged,\n    inputType,\n    ...rest\n  }: TimeInputProps,\n  ref: any\n) {\n  const [controlledValue, setControlledValue] = React.useState<string>(\n    `${value}`\n  )\n\n  const onInnerChange = (text: string) => {\n    setControlledValue(text)\n    if (text !== '' && text !== '0') {\n      onChanged(Number(text))\n    }\n  }\n\n  React.useEffect(() => {\n    setControlledValue(`${value}`)\n  }, [value])\n\n  const theme = useTheme()\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false)\n\n  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused\n\n  const { color, backgroundColor } = useInputColors(highlighted)\n\n  let formattedValue = controlledValue\n  if (!inputFocused) {\n    formattedValue =\n      controlledValue.length === 1\n        ? `0${controlledValue}`\n        : `${controlledValue}`\n  }\n\n  return (\n    <View style={styles.root}>\n      <TextInput\n        ref={ref}\n        style={[\n          styles.input,\n          {\n            color,\n            backgroundColor,\n            borderRadius: theme.roundness,\n          },\n        ]}\n        value={formattedValue}\n        maxLength={2}\n        onFocus={() => setInputFocused(true)}\n        onBlur={() => setInputFocused(false)}\n        keyboardAppearance={theme.dark ? 'dark' : 'default'}\n        keyboardType=\"number-pad\"\n        onChangeText={onInnerChange}\n        {...rest}\n      />\n      {onPress && inputType === inputTypes.picker ? (\n        <TouchableRipple\n          style={[\n            StyleSheet.absoluteFill,\n            styles.buttonOverlay,\n            {\n              // backgroundColor: 'blue',\n              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={Color(theme.colors.primary).fade(0.7).hex()}\n          onPress={() => onPress(clockType)}\n          borderless={true}\n          // RN types bug\n          hasTVPreferredFocus={undefined}\n          tvParallaxProperties={undefined}\n        >\n          <View />\n        </TouchableRipple>\n      ) : null}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: { position: 'relative', height: 80, width: 96 },\n  input: {\n    fontSize: 50,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n    height: 80,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"]}

package/lib/module/Time/TimeInputs.js

@@ -8,15 +8,16 @@ import TimeInput from './TimeInput';
 import AmPmSwitcher from './AmPmSwitcher';
 import { useLatest } from '../utils';
 
-function TimeInputs({
-  hours,
-  minutes,
-  onFocusInput,
-  focused,
-  inputType,
-  onChange,
-  is24Hour
-}) {
+function TimeInputs(_ref) {
+  let {
+    hours,
+    minutes,
+    onFocusInput,
+    focused,
+    inputType,
+    onChange,
+    is24Hour
+  } = _ref;
   const startInput = React.useRef(null);
   const endInput = React.useRef(null);
   const dimensions = useWindowDimensions();

package/lib/module/Time/TimeInputs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TimeInputs.tsx"],"names":["React","View","StyleSheet","useWindowDimensions","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","useRef","endInput","dimensions","isLandscape","width","height","theme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","onChangeHours","newHours","styles","inputContainer","inputContainerLandscape","newHoursFromInput","hoursAndMinutesSeparator","spaceDot","dot","backgroundColor","colors","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"mappings":"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","sourcesContent":["// @typescript-eslint/no-unused-vars\n// WORK IN PROGRESS\n\nimport * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\n\nimport {\n  clockTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\nimport TimeInput from './TimeInput'\nimport AmPmSwitcher from './AmPmSwitcher'\nimport { useLatest } from '../utils'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n}: {\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: ({\n    hours,\n    minutes,\n    focused,\n  }: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n  is24Hour: boolean\n}) {\n  const startInput = React.useRef<TextInputNative | null>(null)\n  const endInput = React.useRef<TextInputNative | null>(null)\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n  const theme = useTheme()\n\n  const onSubmitStartInput = React.useCallback(() => {\n    if (endInput.current) {\n      endInput.current.focus()\n    }\n  }, [endInput])\n\n  const onSubmitEndInput = React.useCallback(() => {\n    // TODO: close modal and persist time\n  }, [])\n\n  const minutesRef = useLatest(minutes)\n  const onChangeHours = React.useCallback(\n    (newHours: number) => {\n      onChange({\n        hours: newHours,\n        minutes: minutesRef.current,\n        focused: clockTypes.hours,\n      })\n    },\n    [onChange, minutesRef]\n  )\n\n  return (\n    <View\n      style={[\n        styles.inputContainer,\n        isLandscape && styles.inputContainerLandscape,\n      ]}\n    >\n      <TimeInput\n        ref={startInput}\n        placeholder={'00'}\n        value={toHourInputFormat(hours, is24Hour)}\n        clockType={clockTypes.hours}\n        pressed={focused === clockTypes.hours}\n        onPress={onFocusInput}\n        inputType={inputType}\n        returnKeyType={'next'}\n        onSubmitEditing={onSubmitStartInput}\n        blurOnSubmit={false}\n        onChanged={(newHoursFromInput) => {\n          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)\n          if (newHoursFromInput > 24) {\n            newHours = 24\n          }\n          onChange({\n            hours: newHours,\n            minutes,\n          })\n        }}\n        // onChangeText={onChangeStartInput}\n      />\n      <View style={styles.hoursAndMinutesSeparator}>\n        <View style={styles.spaceDot} />\n        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />\n        <View style={styles.betweenDot} />\n        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />\n        <View style={styles.spaceDot} />\n      </View>\n      <TimeInput\n        ref={endInput}\n        placeholder={'00'}\n        value={minutes}\n        clockType={clockTypes.minutes}\n        pressed={focused === clockTypes.minutes}\n        onPress={onFocusInput}\n        inputType={inputType}\n        onSubmitEditing={onSubmitEndInput}\n        onChanged={(newMinutesFromInput) => {\n          let newMinutes = newMinutesFromInput\n          if (newMinutesFromInput > 60) {\n            newMinutes = 60\n          }\n          onChange({\n            hours,\n            minutes: newMinutes,\n          })\n        }}\n      />\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher hours={hours} onChange={onChangeHours} />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  spaceBetweenInputsAndSwitcher: { width: 12 },\n  inputContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainerLandscape: {\n    flex: 1,\n  },\n  hoursAndMinutesSeparator: {\n    fontSize: 65,\n    width: 24,\n    alignItems: 'center',\n  },\n  spaceDot: {\n    flex: 1,\n  },\n  dot: {\n    width: 7,\n    height: 7,\n    borderRadius: 7 / 2,\n  },\n  betweenDot: {\n    height: 12,\n  },\n})\n\nexport default React.memo(TimeInputs)\n"]}
+{"version":3,"sources":["TimeInputs.tsx"],"names":["React","View","StyleSheet","useWindowDimensions","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","useRef","endInput","dimensions","isLandscape","width","height","theme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","onChangeHours","newHours","styles","inputContainer","inputContainerLandscape","newHoursFromInput","hoursAndMinutesSeparator","spaceDot","dot","backgroundColor","colors","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"mappings":"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","sourcesContent":["// @typescript-eslint/no-unused-vars\n// WORK IN PROGRESS\n\nimport * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\n\nimport {\n  clockTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\nimport TimeInput from './TimeInput'\nimport AmPmSwitcher from './AmPmSwitcher'\nimport { useLatest } from '../utils'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n}: {\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n  is24Hour: boolean\n}) {\n  const startInput = React.useRef<TextInputNative | null>(null)\n  const endInput = React.useRef<TextInputNative | null>(null)\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n  const theme = useTheme()\n\n  const onSubmitStartInput = React.useCallback(() => {\n    if (endInput.current) {\n      endInput.current.focus()\n    }\n  }, [endInput])\n\n  const onSubmitEndInput = React.useCallback(() => {\n    // TODO: close modal and persist time\n  }, [])\n\n  const minutesRef = useLatest(minutes)\n  const onChangeHours = React.useCallback(\n    (newHours: number) => {\n      onChange({\n        hours: newHours,\n        minutes: minutesRef.current,\n        focused: clockTypes.hours,\n      })\n    },\n    [onChange, minutesRef]\n  )\n\n  return (\n    <View\n      style={[\n        styles.inputContainer,\n        isLandscape && styles.inputContainerLandscape,\n      ]}\n    >\n      <TimeInput\n        ref={startInput}\n        placeholder={'00'}\n        value={toHourInputFormat(hours, is24Hour)}\n        clockType={clockTypes.hours}\n        pressed={focused === clockTypes.hours}\n        onPress={onFocusInput}\n        inputType={inputType}\n        returnKeyType={'next'}\n        onSubmitEditing={onSubmitStartInput}\n        blurOnSubmit={false}\n        onChanged={(newHoursFromInput) => {\n          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)\n          if (newHoursFromInput > 24) {\n            newHours = 24\n          }\n          onChange({\n            hours: newHours,\n            minutes,\n          })\n        }}\n        // onChangeText={onChangeStartInput}\n      />\n      <View style={styles.hoursAndMinutesSeparator}>\n        <View style={styles.spaceDot} />\n        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />\n        <View style={styles.betweenDot} />\n        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />\n        <View style={styles.spaceDot} />\n      </View>\n      <TimeInput\n        ref={endInput}\n        placeholder={'00'}\n        value={minutes}\n        clockType={clockTypes.minutes}\n        pressed={focused === clockTypes.minutes}\n        onPress={onFocusInput}\n        inputType={inputType}\n        onSubmitEditing={onSubmitEndInput}\n        onChanged={(newMinutesFromInput) => {\n          let newMinutes = newMinutesFromInput\n          if (newMinutesFromInput > 60) {\n            newMinutes = 60\n          }\n          onChange({\n            hours,\n            minutes: newMinutes,\n          })\n        }}\n      />\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher hours={hours} onChange={onChangeHours} />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  spaceBetweenInputsAndSwitcher: { width: 12 },\n  inputContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainerLandscape: {\n    flex: 1,\n  },\n  hoursAndMinutesSeparator: {\n    fontSize: 65,\n    width: 24,\n    alignItems: 'center',\n  },\n  spaceDot: {\n    flex: 1,\n  },\n  dot: {\n    width: 7,\n    height: 7,\n    borderRadius: 7 / 2,\n  },\n  betweenDot: {\n    height: 12,\n  },\n})\n\nexport default React.memo(TimeInputs)\n"]}

package/lib/module/Time/TimePicker.js

@@ -1,18 +1,25 @@
 import * as React from 'react';
 import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { inputTypes, toHourInputFormat, toHourOutputFormat } from './timeUtils';
-import AnalogClock, { circleSize } from './AnalogClock';
+import AnalogClock from './AnalogClock';
+import { circleSize } from './timeUtils';
 import TimeInputs from './TimeInputs';
+export const DisplayModeContext = /*#__PURE__*/React.createContext({
+  mode: 'AM',
+  setMode: () => {}
+});
 
-function TimePicker({
-  hours,
-  minutes,
-  onFocusInput,
-  focused,
-  inputType,
-  onChange,
-  locale
-}) {
+function TimePicker(_ref) {
+  let {
+    hours,
+    minutes,
+    onFocusInput,
+    focused,
+    inputType,
+    onChange,
+    locale
+  } = _ref;
+  const [displayMode, setDisplayMode] = React.useState(undefined);
   const dimensions = useWindowDimensions();
   const isLandscape = dimensions.width > dimensions.height; // method to check whether we have 24 hours in clock or 12
 
@@ -24,12 +31,26 @@ function TimePicker({
     });
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)));
     return formatted.includes('23');
-  }, [locale]);
+  }, [locale]); // Initialize display Mode according the hours value
+
+  React.useEffect(() => {
+    if (hours >= 12) {
+      setDisplayMode('PM');
+    } else {
+      setDisplayMode('AM');
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   const onInnerChange = React.useCallback(params => {
     params.hours = toHourOutputFormat(params.hours, hours, is24Hour);
     onChange(params);
   }, [onChange, hours, is24Hour]);
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(DisplayModeContext.Provider, {
+    value: {
+      mode: displayMode,
+      setMode: setDisplayMode
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: isLandscape ? styles.rootLandscape : styles.rootPortrait
   }, /*#__PURE__*/React.createElement(TimeInputs, {
     inputType: inputType,
@@ -47,7 +68,7 @@ function TimePicker({
     focused: focused,
     is24Hour: is24Hour,
     onChange: onInnerChange
-  })) : null);
+  })) : null));
 }
 
 const styles = StyleSheet.create({

package/lib/module/Time/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TimePicker.tsx"],"names":["React","View","StyleSheet","useWindowDimensions","inputTypes","toHourInputFormat","toHourOutputFormat","AnalogClock","circleSize","TimeInputs","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","dimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","onInnerChange","useCallback","params","styles","rootLandscape","rootPortrait","picker","clockContainer","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet, useWindowDimensions } from 'react-native'\n\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\n\nimport AnalogClock, { circleSize } from './AnalogClock'\nimport TimeInputs from './TimeInputs'\n\ntype onChangeFunc = ({\n  hours,\n  minutes,\n  focused,\n}: {\n  hours: number\n  minutes: number\n  focused?: undefined | PossibleClockTypes\n}) => any\n\nfunction TimePicker({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  locale,\n}: {\n  locale?: undefined | string\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: onChangeFunc\n}) {\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n\n  // method to check whether we have 24 hours in clock or 12\n  const is24Hour = React.useMemo(() => {\n    const formatter = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: 'UTC',\n    })\n    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))\n    return formatted.includes('23')\n  }, [locale])\n\n  const onInnerChange = React.useCallback<onChangeFunc>(\n    (params) => {\n      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)\n      onChange(params)\n    },\n    [onChange, hours, is24Hour]\n  )\n\n  return (\n    <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>\n      <TimeInputs\n        inputType={inputType}\n        hours={hours}\n        minutes={minutes}\n        is24Hour={is24Hour}\n        onChange={onChange}\n        onFocusInput={onFocusInput}\n        focused={focused}\n      />\n      {inputType === inputTypes.picker ? (\n        <View style={styles.clockContainer}>\n          <AnalogClock\n            hours={toHourInputFormat(hours, is24Hour)}\n            minutes={minutes}\n            focused={focused}\n            is24Hour={is24Hour}\n            onChange={onInnerChange}\n          />\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  rootLandscape: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24 * 3 + 96 * 2 + 52 + circleSize,\n  },\n  rootPortrait: {},\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"]}
+{"version":3,"sources":["TimePicker.tsx"],"names":["React","View","StyleSheet","useWindowDimensions","inputTypes","toHourInputFormat","toHourOutputFormat","AnalogClock","circleSize","TimeInputs","DisplayModeContext","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","displayMode","setDisplayMode","useState","undefined","dimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","styles","rootLandscape","rootPortrait","picker","clockContainer","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet, useWindowDimensions } from 'react-native'\n\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\n\nimport AnalogClock from './AnalogClock'\nimport { circleSize } from './timeUtils'\nimport TimeInputs from './TimeInputs'\n\nexport const DisplayModeContext = React.createContext<{\n  mode: 'AM' | 'PM' | undefined\n  setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>\n}>({ mode: 'AM', setMode: () => {} })\n\ntype onChangeFunc = ({\n  hours,\n  minutes,\n  focused,\n}: {\n  hours: number\n  minutes: number\n  focused?: undefined | PossibleClockTypes\n}) => any\n\nfunction TimePicker({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  locale,\n}: {\n  locale?: undefined | string\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: onChangeFunc\n}) {\n  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(\n    undefined\n  )\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n\n  // method to check whether we have 24 hours in clock or 12\n  const is24Hour = React.useMemo(() => {\n    const formatter = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: 'UTC',\n    })\n    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))\n    return formatted.includes('23')\n  }, [locale])\n\n  // Initialize display Mode according the hours value\n  React.useEffect(() => {\n    if (hours >= 12) {\n      setDisplayMode('PM')\n    } else {\n      setDisplayMode('AM')\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onInnerChange = React.useCallback<onChangeFunc>(\n    (params) => {\n      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)\n      onChange(params)\n    },\n    [onChange, hours, is24Hour]\n  )\n\n  return (\n    <DisplayModeContext.Provider\n      value={{ mode: displayMode, setMode: setDisplayMode }}\n    >\n      <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>\n        <TimeInputs\n          inputType={inputType}\n          hours={hours}\n          minutes={minutes}\n          is24Hour={is24Hour}\n          onChange={onChange}\n          onFocusInput={onFocusInput}\n          focused={focused}\n        />\n        {inputType === inputTypes.picker ? (\n          <View style={styles.clockContainer}>\n            <AnalogClock\n              hours={toHourInputFormat(hours, is24Hour)}\n              minutes={minutes}\n              focused={focused}\n              is24Hour={is24Hour}\n              onChange={onInnerChange}\n            />\n          </View>\n        ) : null}\n      </View>\n    </DisplayModeContext.Provider>\n  )\n}\n\nconst styles = StyleSheet.create({\n  rootLandscape: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24 * 3 + 96 * 2 + 52 + circleSize,\n  },\n  rootPortrait: {},\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"]}