react-native-paper-dates 0.11.15 → 0.12.0

package/lib/commonjs/Time/AnalogClock.js

@@ -46,7 +46,7 @@ function AnalogClock(_ref) {
     mode
   } = React.useContext(_TimePicker.DisplayModeContext); // used to make pointer shorter if hours are selected and above 12
 
-  const shortPointer = (hours === 0 || hours > 12) && is24Hour;
+  const shortPointer = hours >= 12 && is24Hour;
   const clockRef = React.useRef(null); // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
 
@@ -74,14 +74,18 @@ function AnalogClock(_ref) {
         pickedHours += 12;
       }
 
-      if (modeRef.current === 'AM' && pickedHours === 12) {
+      if ((modeRef.current === 'AM' || hours24) && pickedHours === 12) {
         pickedHours = 0;
       }
 
-      if (!hours24 && modeRef.current === 'AM' && pickedHours === 12 || pickedHours === 24) {
+      if (!hours24 && modeRef.current === 'AM' && pickedHours === 12) {
         pickedHours = 0;
       }
 
+      if (pickedHours === 24) {
+        pickedHours = 12;
+      }
+
       if (hoursRef.current !== pickedHours || final) {
         onChangeRef.current({
           hours: pickedHours,

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

@@ -1 +1 @@
-{"version":3,"names":["AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","useTheme","mode","React","useContext","DisplayModeContext","shortPointer","clockRef","useRef","hoursRef","useLatest","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","getAngle","circleSize","current","clockTypes","hours24","previousHourType","getHourType","pickedHours","getHours","hours12AndPm","hourTypeFromOffset","getHourTypeFromOffset","hours24AndPM","hourTypes","pm","undefined","pickedMinutes","getMinutes","panResponder","PanResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","isV3","colors","surfaceVariant","dark","Color","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","StyleSheet","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","memo"],"sources":["AnalogClock.tsx"],"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  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\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  const clockRef = React.useRef<View | null>(null)\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  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n      let angle = getAngle(x, y, circleSize)\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\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n        if (modeRef.current === 'AM' && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (\n          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||\n          pickedHours === 24\n        ) {\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  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      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\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.isV3\n            ? theme.colors.surfaceVariant\n            : theme.dark\n            ? Color(theme.colors.surface).lighten(1.4).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:\n                  circleSize / 4 -\n                  (focused === clockTypes.hours &&\n                  pointerNumber >= 0 &&\n                  pointerNumber < 13\n                    ? 0\n                    : 4) +\n                  (focused === clockTypes.minutes ? 4 : 0) -\n                  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}\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: 24,\n    height: 48,\n    width: 48,\n    position: 'absolute',\n    right: 0,\n    bottom: -23,\n  },\n  line: {\n    position: 'absolute',\n    height: 2,\n    borderRadius: 4,\n  },\n})\nfunction returnTrue() {\n  return true\n}\nexport default React.memo(AnalogClock)\n"],"mappings":"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"}
+{"version":3,"names":["AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","useTheme","mode","React","useContext","DisplayModeContext","shortPointer","clockRef","useRef","hoursRef","useLatest","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","getAngle","circleSize","current","clockTypes","hours24","previousHourType","getHourType","pickedHours","getHours","hours12AndPm","hourTypeFromOffset","getHourTypeFromOffset","hours24AndPM","hourTypes","pm","undefined","pickedMinutes","getMinutes","panResponder","PanResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","isV3","colors","surfaceVariant","dark","Color","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","StyleSheet","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","memo"],"sources":["AnalogClock.tsx"],"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  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\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 >= 12 && is24Hour\n  const clockRef = React.useRef<View | null>(null)\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  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n      let angle = getAngle(x, y, circleSize)\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\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n        if ((modeRef.current === 'AM' || hours24) && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (!hours24 && modeRef.current === 'AM' && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (pickedHours === 24) {\n          pickedHours = 12\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  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      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\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.isV3\n            ? theme.colors.surfaceVariant\n            : theme.dark\n            ? Color(theme.colors.surface).lighten(1.4).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:\n                  circleSize / 4 -\n                  (focused === clockTypes.hours &&\n                  pointerNumber >= 0 &&\n                  pointerNumber < 13\n                    ? 0\n                    : 4) +\n                  (focused === clockTypes.minutes ? 4 : 0) -\n                  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}\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: 24,\n    height: 48,\n    width: 48,\n    position: 'absolute',\n    right: 0,\n    bottom: -23,\n  },\n  line: {\n    position: 'absolute',\n    height: 2,\n    borderRadius: 4,\n  },\n})\nfunction returnTrue() {\n  return true\n}\nexport default React.memo(AnalogClock)\n"],"mappings":"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"}

package/lib/commonjs/Time/AnalogClockHours.js

@@ -15,8 +15,6 @@ var _timeUtils = require("./timeUtils");
 
 var _utils = require("../utils");
 
-var _TimePicker = require("./TimePicker");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,9 +24,6 @@ function AnalogClockHours(_ref) {
     is24Hour,
     hours
   } = _ref;
-  const {
-    mode
-  } = React.useContext(_TimePicker.DisplayModeContext);
   const outerRange = getHourNumbers(false, _timeUtils.circleSize, 12, 12);
   const innerRange = getHourNumbers(true, _timeUtils.circleSize, 12, 12);
   const color = (0, _utils.useTextColorOnPrimary)();
@@ -42,12 +37,12 @@ function AnalogClockHours(_ref) {
   }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.outerHourInner
   }, /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
-    style: hours === i + 1 ? {
+    style: !is24Hour && i + 1 === hours || hours === i + 1 && hours !== 12 || i + 1 === 12 && hours === 0 ? {
       color
     } : null,
     variant: "bodyLarge",
     selectable: false
-  }, mode === 'AM' && is24Hour && i + 1 === 12 ? '00' : i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(_reactNative.View, {
+  }, is24Hour && i + 1 === 12 ? '00' : i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(_reactNative.View, {
     key: i,
     pointerEvents: "none",
     style: [styles.innerHourRoot, {
@@ -58,11 +53,11 @@ function AnalogClockHours(_ref) {
     style: styles.innerHourInner
   }, /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
     selectable: false,
-    style: [i + 13 === hours || i + 13 === 24 && hours === 0 ? {
+    style: [i + 13 === hours || i + 13 === 24 && hours === 12 ? {
       color
     } : null],
     variant: "bodyLarge"
-  }, i + 13 === 24 ? '00' : i + 13)))) : null);
+  }, i + 13 === 24 ? '12' : i + 13)))) : null);
 }
 
 const styles = _reactNative.StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"names":["AnalogClockHours","is24Hour","hours","mode","React","useContext","DisplayModeContext","outerRange","getHourNumbers","circleSize","innerRange","color","useTextColorOnPrimary","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","StyleSheet","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","size","count","arrayLength","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"sources":["AnalogClockHours.tsx"],"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\n              style={hours === i + 1 ? { color } : null}\n              variant=\"bodyLarge\"\n              selectable={false}\n            >\n              {mode === 'AM' && is24Hour && 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                    i + 13 === hours || (i + 13 === 24 && hours === 0)\n                      ? { color }\n                      : null,\n                  ]}\n                  variant=\"bodyLarge\"\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: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  outerHourInner: { borderRadius: 24 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  innerHourInner: { borderRadius: 24 },\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"],"mappings":"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"}
+{"version":3,"names":["AnalogClockHours","is24Hour","hours","outerRange","getHourNumbers","circleSize","innerRange","color","useTextColorOnPrimary","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","StyleSheet","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","size","count","arrayLength","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","React","memo"],"sources":["AnalogClockHours.tsx"],"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 AnalogClockHours({\n  is24Hour,\n  hours,\n}: {\n  is24Hour: boolean\n  hours: number\n}) {\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\n              style={\n                (!is24Hour && i + 1 === hours) ||\n                (hours === i + 1 && hours !== 12) ||\n                (i + 1 === 12 && hours === 0)\n                  ? { color }\n                  : null\n              }\n              variant=\"bodyLarge\"\n              selectable={false}\n            >\n              {is24Hour && 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                    i + 13 === hours || (i + 13 === 24 && hours === 12)\n                      ? { color }\n                      : null,\n                  ]}\n                  variant=\"bodyLarge\"\n                >\n                  {i + 13 === 24 ? '12' : 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: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  outerHourInner: { borderRadius: 24 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  innerHourInner: { borderRadius: 24 },\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"],"mappings":"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"}

package/lib/commonjs/Time/TimeInput.js

@@ -31,6 +31,7 @@ function TimeInput(_ref, ref) {
     onPress,
     onChanged,
     inputType,
+    inputFontSize = 57,
     ...rest
   } = _ref;
   const [controlledValue, setControlledValue] = React.useState(`${value}`);
@@ -66,6 +67,7 @@ function TimeInput(_ref, ref) {
     style: [styles.input, // eslint-disable-next-line react-native/no-inline-styles
     {
       color,
+      fontSize: inputFontSize,
       backgroundColor,
       borderRadius: theme.roundness * 2,
       borderColor: theme.isV3 && highlighted ? theme.colors.onPrimaryContainer : undefined,
@@ -96,7 +98,6 @@ const styles = _reactNative.StyleSheet.create({
     width: 96
   },
   input: {
-    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96

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

@@ -1 +1 @@
-{"version":3,"names":["TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","rest","controlledValue","setControlledValue","React","useState","onInnerChange","text","Number","useEffect","theme","useTheme","inputFocused","setInputFocused","highlighted","inputTypes","picker","color","backgroundColor","useInputColors","formattedValue","length","styles","root","input","borderRadius","roundness","borderColor","isV3","colors","onPrimaryContainer","undefined","borderWidth","height","keyboard","dark","StyleSheet","absoluteFill","buttonOverlay","Platform","OS","Color","onSurface","fade","hex","create","position","width","fontSize","textAlign","textAlignVertical","overflow","forwardRef"],"sources":["TimeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  TextInput,\n  TextInputProps,\n  StyleSheet,\n  Platform,\n} 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          // eslint-disable-next-line react-native/no-inline-styles\n          {\n            color,\n            backgroundColor,\n            borderRadius: theme.roundness * 2,\n            borderColor:\n              theme.isV3 && highlighted\n                ? theme.colors.onPrimaryContainer\n                : undefined,\n            borderWidth: theme.isV3 && highlighted ? 2 : 0,\n            height: inputType === inputTypes.keyboard ? 72 : 80,\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              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={\n            Platform.OS !== 'ios'\n              ? Color(theme.colors.onSurface).fade(0.7).hex()\n              : undefined\n          }\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: 57,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"],"mappings":"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"}
+{"version":3,"names":["TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","inputFontSize","rest","controlledValue","setControlledValue","React","useState","onInnerChange","text","Number","useEffect","theme","useTheme","inputFocused","setInputFocused","highlighted","inputTypes","picker","color","backgroundColor","useInputColors","formattedValue","length","styles","root","input","fontSize","borderRadius","roundness","borderColor","isV3","colors","onPrimaryContainer","undefined","borderWidth","height","keyboard","dark","StyleSheet","absoluteFill","buttonOverlay","Platform","OS","Color","onSurface","fade","hex","create","position","width","textAlign","textAlignVertical","overflow","forwardRef"],"sources":["TimeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  TextInput,\n  TextInputProps,\n  StyleSheet,\n  Platform,\n} 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  inputFontSize?: number\n}\n\nfunction TimeInput(\n  {\n    value,\n    clockType,\n    pressed,\n    onPress,\n    onChanged,\n    inputType,\n    inputFontSize = 57,\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          // eslint-disable-next-line react-native/no-inline-styles\n          {\n            color,\n            fontSize: inputFontSize,\n            backgroundColor,\n            borderRadius: theme.roundness * 2,\n            borderColor:\n              theme.isV3 && highlighted\n                ? theme.colors.onPrimaryContainer\n                : undefined,\n            borderWidth: theme.isV3 && highlighted ? 2 : 0,\n            height: inputType === inputTypes.keyboard ? 72 : 80,\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              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={\n            Platform.OS !== 'ios'\n              ? Color(theme.colors.onSurface).fade(0.7).hex()\n              : undefined\n          }\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    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"],"mappings":";;;;;;;AAAA;;AACA;;AAOA;;AAEA;;AACA;;;;;;;;;;AAkBA,SAASA,SAAT,OAWEC,GAXF,EAYE;EAAA,IAXA;IACEC,KADF;IAEEC,SAFF;IAGEC,OAHF;IAIEC,OAJF;IAKEC,SALF;IAMEC,SANF;IAOEC,aAAa,GAAG,EAPlB;IAQE,GAAGC;EARL,CAWA;EACA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCC,KAAK,CAACC,QAAN,CAC3C,GAAEX,KAAM,EADmC,CAA9C;;EAIA,MAAMY,aAAa,GAAIC,IAAD,IAAkB;IACtCJ,kBAAkB,CAACI,IAAD,CAAlB;;IACA,IAAIA,IAAI,KAAK,EAAT,IAAeA,IAAI,KAAK,GAA5B,EAAiC;MAC/BT,SAAS,CAACU,MAAM,CAACD,IAAD,CAAP,CAAT;IACD;EACF,CALD;;EAOAH,KAAK,CAACK,SAAN,CAAgB,MAAM;IACpBN,kBAAkB,CAAE,GAAET,KAAM,EAAV,CAAlB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,MAAMgB,KAAK,GAAG,IAAAC,0BAAA,GAAd;EACA,MAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCT,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;EAEA,MAAMS,WAAW,GAAGf,SAAS,KAAKgB,qBAAA,CAAWC,MAAzB,GAAkCpB,OAAlC,GAA4CgB,YAAhE;EAEA,MAAM;IAAEK,KAAF;IAASC;EAAT,IAA6B,IAAAC,yBAAA,EAAeL,WAAf,CAAnC;EAEA,IAAIM,cAAc,GAAGlB,eAArB;;EACA,IAAI,CAACU,YAAL,EAAmB;IACjBQ,cAAc,GACZlB,eAAe,CAACmB,MAAhB,KAA2B,CAA3B,GACK,IAAGnB,eAAgB,EADxB,GAEK,GAAEA,eAAgB,EAHzB;EAID;;EAED,oBACE,oBAAC,iBAAD;IAAM,KAAK,EAAEoB,MAAM,CAACC;EAApB,gBACE,oBAAC,sBAAD;IACE,GAAG,EAAE9B,GADP;IAEE,KAAK,EAAE,CACL6B,MAAM,CAACE,KADF,EAEL;IACA;MACEP,KADF;MAEEQ,QAAQ,EAAEzB,aAFZ;MAGEkB,eAHF;MAIEQ,YAAY,EAAEhB,KAAK,CAACiB,SAAN,GAAkB,CAJlC;MAKEC,WAAW,EACTlB,KAAK,CAACmB,IAAN,IAAcf,WAAd,GACIJ,KAAK,CAACoB,MAAN,CAAaC,kBADjB,GAEIC,SARR;MASEC,WAAW,EAAEvB,KAAK,CAACmB,IAAN,IAAcf,WAAd,GAA4B,CAA5B,GAAgC,CAT/C;MAUEoB,MAAM,EAAEnC,SAAS,KAAKgB,qBAAA,CAAWoB,QAAzB,GAAoC,EAApC,GAAyC;IAVnD,CAHK,CAFT;IAkBE,KAAK,EAAEf,cAlBT;IAmBE,SAAS,EAAE,CAnBb;IAoBE,OAAO,EAAE,MAAMP,eAAe,CAAC,IAAD,CApBhC;IAqBE,MAAM,EAAE,MAAMA,eAAe,CAAC,KAAD,CArB/B;IAsBE,kBAAkB,EAAEH,KAAK,CAAC0B,IAAN,GAAa,MAAb,GAAsB,SAtB5C;IAuBE,YAAY,EAAC,YAvBf;IAwBE,YAAY,EAAE9B;EAxBhB,GAyBML,IAzBN,EADF,EA4BGJ,OAAO,IAAIE,SAAS,KAAKgB,qBAAA,CAAWC,MAApC,gBACC,oBAAC,iCAAD;IACE,KAAK,EAAE,CACLqB,uBAAA,CAAWC,YADN,EAELhB,MAAM,CAACiB,aAFF,EAGL;MACEb,YAAY,EAAEhB,KAAK,CAACiB;IADtB,CAHK,CADT;IAQE,WAAW,EACTa,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GACI,IAAAC,cAAA,EAAMhC,KAAK,CAACoB,MAAN,CAAaa,SAAnB,EAA8BC,IAA9B,CAAmC,GAAnC,EAAwCC,GAAxC,EADJ,GAEIb,SAXR;IAaE,OAAO,EAAE,MAAMnC,OAAO,CAACF,SAAD,CAbxB;IAcE,UAAU,EAAE;EAdd,gBAgBE,oBAAC,iBAAD,OAhBF,CADD,GAmBG,IA/CN,CADF;AAmDD;;AAED,MAAM2B,MAAM,GAAGe,uBAAA,CAAWS,MAAX,CAAkB;EAC/BvB,IAAI,EAAE;IAAEwB,QAAQ,EAAE,UAAZ;IAAwBb,MAAM,EAAE,EAAhC;IAAoCc,KAAK,EAAE;EAA3C,CADyB;EAE/BxB,KAAK,EAAE;IACLyB,SAAS,EAAE,QADN;IAELC,iBAAiB,EAAE,QAFd;IAGLF,KAAK,EAAE;EAHF,CAFwB;EAO/BT,aAAa,EAAE;IAAEY,QAAQ,EAAE;EAAZ;AAPgB,CAAlB,CAAf;;4BAUe/C,KAAK,CAACgD,UAAN,CAAiB5D,SAAjB,C"}

package/lib/commonjs/Time/TimeInputs.js

@@ -35,7 +35,8 @@ function TimeInputs(_ref) {
     focused,
     inputType,
     onChange,
-    is24Hour
+    is24Hour,
+    inputFontSize
   } = _ref;
   const startInput = React.useRef(null);
   const endInput = React.useRef(null);
@@ -63,6 +64,7 @@ function TimeInputs(_ref) {
     style: styles.column
   }, /*#__PURE__*/React.createElement(_TimeInput.default, {
     ref: startInput,
+    inputFontSize: inputFontSize,
     placeholder: '00',
     value: (0, _timeUtils.toHourInputFormat)(hours, is24Hour),
     clockType: _timeUtils.clockTypes.hours,
@@ -110,6 +112,7 @@ function TimeInputs(_ref) {
     style: styles.column
   }, /*#__PURE__*/React.createElement(_TimeInput.default, {
     ref: endInput,
+    inputFontSize: inputFontSize,
     placeholder: '00',
     value: minutes,
     clockType: _timeUtils.clockTypes.minutes,

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

@@ -1 +1 @@
-{"version":3,"names":["TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","React","useRef","endInput","dimensions","useWindowDimensions","isLandscape","width","height","theme","useTheme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","useLatest","onChangeHours","newHours","clockTypes","styles","inputContainer","inputContainerLandscape","column","toHourInputFormat","dark","Color","colors","primary","darken","hex","newHoursFromInput","toHourOutputFormat","hoursAndMinutesSeparator","marginBottom","spaceDot","dot","backgroundColor","isV3","onSurface","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","StyleSheet","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { MD2Theme, Text, 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'\nimport Color from 'color'\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      <View style={styles.column}>\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          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          returnKeyType={'next'}\n          onSubmitEditing={onSubmitStartInput}\n          blurOnSubmit={false}\n          onChanged={(newHoursFromInput) => {\n            let newHours = toHourOutputFormat(\n              newHoursFromInput,\n              hours,\n              is24Hour\n            )\n            if (newHoursFromInput > 24) {\n              newHours = 24\n            }\n            onChange({\n              hours: newHours,\n              minutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Hour</Text>\n        ) : null}\n      </View>\n      <View\n        style={[\n          styles.hoursAndMinutesSeparator,\n          // eslint-disable-next-line react-native/no-inline-styles\n          { marginBottom: inputType === 'keyboard' ? 24 : 0 },\n        ]}\n      >\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.betweenDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.spaceDot} />\n      </View>\n      <View style={styles.column}>\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          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          onSubmitEditing={onSubmitEndInput}\n          onChanged={(newMinutesFromInput) => {\n            let newMinutes = newMinutesFromInput\n            if (newMinutesFromInput > 59) {\n              newMinutes = 59\n            }\n            onChange({\n              hours,\n              minutes: newMinutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Minute</Text>\n        ) : null}\n      </View>\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher\n            hours={hours}\n            onChange={onChangeHours}\n            inputType={inputType}\n          />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  column: {\n    flexDirection: 'column',\n  },\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"],"mappings":"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"}
+{"version":3,"names":["TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","inputFontSize","startInput","React","useRef","endInput","dimensions","useWindowDimensions","isLandscape","width","height","theme","useTheme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","useLatest","onChangeHours","newHours","clockTypes","styles","inputContainer","inputContainerLandscape","column","toHourInputFormat","dark","Color","colors","primary","darken","hex","newHoursFromInput","toHourOutputFormat","hoursAndMinutesSeparator","marginBottom","spaceDot","dot","backgroundColor","isV3","onSurface","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","StyleSheet","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { MD2Theme, Text, 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'\nimport Color from 'color'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n  inputFontSize,\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  inputFontSize?: number\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      <View style={styles.column}>\n        <TimeInput\n          ref={startInput}\n          inputFontSize={inputFontSize}\n          placeholder={'00'}\n          value={toHourInputFormat(hours, is24Hour)}\n          clockType={clockTypes.hours}\n          pressed={focused === clockTypes.hours}\n          onPress={onFocusInput}\n          inputType={inputType}\n          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          returnKeyType={'next'}\n          onSubmitEditing={onSubmitStartInput}\n          blurOnSubmit={false}\n          onChanged={(newHoursFromInput) => {\n            let newHours = toHourOutputFormat(\n              newHoursFromInput,\n              hours,\n              is24Hour\n            )\n            if (newHoursFromInput > 24) {\n              newHours = 24\n            }\n            onChange({\n              hours: newHours,\n              minutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Hour</Text>\n        ) : null}\n      </View>\n      <View\n        style={[\n          styles.hoursAndMinutesSeparator,\n          // eslint-disable-next-line react-native/no-inline-styles\n          { marginBottom: inputType === 'keyboard' ? 24 : 0 },\n        ]}\n      >\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.betweenDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.spaceDot} />\n      </View>\n      <View style={styles.column}>\n        <TimeInput\n          ref={endInput}\n          inputFontSize={inputFontSize}\n          placeholder={'00'}\n          value={minutes}\n          clockType={clockTypes.minutes}\n          pressed={focused === clockTypes.minutes}\n          onPress={onFocusInput}\n          inputType={inputType}\n          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          onSubmitEditing={onSubmitEndInput}\n          onChanged={(newMinutesFromInput) => {\n            let newMinutes = newMinutesFromInput\n            if (newMinutesFromInput > 59) {\n              newMinutes = 59\n            }\n            onChange({\n              hours,\n              minutes: newMinutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Minute</Text>\n        ) : null}\n      </View>\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher\n            hours={hours}\n            onChange={onChangeHours}\n            inputType={inputType}\n          />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  column: {\n    flexDirection: 'column',\n  },\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"],"mappings":"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"}

package/lib/commonjs/Time/TimePicker.js

@@ -35,13 +35,19 @@ function TimePicker(_ref) {
     focused,
     inputType,
     onChange,
-    locale
+    locale,
+    use24HourClock,
+    inputFontSize
   } = _ref;
   const [displayMode, setDisplayMode] = React.useState(undefined);
   const dimensions = (0, _reactNative.useWindowDimensions)();
   const isLandscape = dimensions.width > dimensions.height; // method to check whether we have 24 hours in clock or 12
 
   const is24Hour = React.useMemo(() => {
+    if (use24HourClock !== undefined) {
+      return use24HourClock;
+    }
+
     const formatter = new Intl.DateTimeFormat(locale, {
       hour: '2-digit',
       minute: '2-digit',
@@ -49,7 +55,7 @@ function TimePicker(_ref) {
     });
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)));
     return formatted.includes('23');
-  }, [locale]); // Initialize display Mode according the hours value
+  }, [locale, use24HourClock]); // Initialize display Mode according the hours value
 
   React.useEffect(() => {
     if (hours >= 12) {
@@ -74,6 +80,7 @@ function TimePicker(_ref) {
     }] : styles.rootPortrait
   }, /*#__PURE__*/React.createElement(_TimeInputs.default, {
     inputType: inputType,
+    inputFontSize: inputFontSize,
     hours: hours,
     minutes: minutes,
     is24Hour: is24Hour,

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

@@ -1 +1 @@
-{"version":3,"names":["DisplayModeContext","React","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","displayMode","setDisplayMode","useState","undefined","dimensions","useWindowDimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","toHourOutputFormat","styles","rootLandscape","inputTypes","picker","circleSize","rootPortrait","clockContainer","toHourInputFormat","StyleSheet","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"sources":["TimePicker.tsx"],"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\n        style={\n          isLandscape\n            ? [\n                styles.rootLandscape,\n                {\n                  width:\n                    24 * 3 +\n                    96 * 2 +\n                    52 +\n                    (inputType === inputTypes.picker\n                      ? circleSize\n                      : -circleSize),\n                },\n              ]\n            : styles.rootPortrait\n        }\n      >\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  },\n  rootPortrait: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"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"}
+{"version":3,"names":["DisplayModeContext","React","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","use24HourClock","inputFontSize","displayMode","setDisplayMode","useState","undefined","dimensions","useWindowDimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","toHourOutputFormat","styles","rootLandscape","inputTypes","picker","circleSize","rootPortrait","clockContainer","toHourInputFormat","StyleSheet","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"sources":["TimePicker.tsx"],"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  use24HourClock,\n  inputFontSize,\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  use24HourClock?: boolean\n  inputFontSize?: number\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    if (use24HourClock !== undefined) {\n      return use24HourClock\n    }\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, use24HourClock])\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\n        style={\n          isLandscape\n            ? [\n                styles.rootLandscape,\n                {\n                  width:\n                    24 * 3 +\n                    96 * 2 +\n                    52 +\n                    (inputType === inputTypes.picker\n                      ? circleSize\n                      : -circleSize),\n                },\n              ]\n            : styles.rootPortrait\n        }\n      >\n        <TimeInputs\n          inputType={inputType}\n          inputFontSize={inputFontSize}\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  },\n  rootPortrait: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"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"}

package/lib/commonjs/Time/TimePickerModal.js

@@ -40,7 +40,9 @@ function TimePickerModal(_ref) {
     animationType = 'none',
     locale,
     keyboardIcon = 'keyboard-outline',
-    clockIcon = 'clock-outline'
+    clockIcon = 'clock-outline',
+    use24HourClock,
+    inputFontSize
   } = _ref;
   const theme = (0, _reactNativePaper.useTheme)();
   let textFont;
@@ -112,6 +114,8 @@ function TimePickerModal(_ref) {
   }, /*#__PURE__*/React.createElement(_TimePicker.default, {
     locale: locale,
     inputType: inputType,
+    use24HourClock: use24HourClock,
+    inputFontSize: inputFontSize,
     focused: focused,
     hours: localHours,
     minutes: localMinutes,

package/lib/commonjs/Time/TimePickerModal.js.map

@@ -1 +1 @@
-{"version":3,"names":["supportedOrientations","TimePickerModal","visible","onDismiss","onConfirm","hours","minutes","label","uppercase","cancelLabel","confirmLabel","animationType","locale","keyboardIcon","clockIcon","theme","useTheme","textFont","labelText","isV3","fonts","labelMedium","medium","inputType","setInputType","React","useState","inputTypes","picker","focused","setFocused","clockTypes","localHours","setLocalHours","getHours","localMinutes","setLocalMinutes","getMinutes","keyboard","useEffect","onFocusInput","useCallback","type","onChange","params","StyleSheet","absoluteFill","styles","modalBackground","backgroundColor","colors","backdrop","modalRoot","keyboardView","modalContent","dark","elevation","level3","surface","overlay","borderRadius","roundness","labelContainer","color","onSurfaceVariant","text","toUpperCase","timePickerContainer","bottom","getTimeInputTypeIcon","reverseInputTypes","inputTypeToggle","fill","undefined","Date","create","justifyContent","alignItems","flex","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","minWidth","paddingVertical","paddingLeft","paddingRight","paddingTop","letterSpacing","fontSize","paddingBottom","flexDirection","padding","margin","memo"],"sources":["TimePickerModal.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  Modal,\n  StyleSheet,\n  View,\n  Text,\n  Animated,\n  TouchableWithoutFeedback,\n  KeyboardAvoidingView,\n} from 'react-native'\n\nimport {\n  Button,\n  IconButton,\n  MD2Theme,\n  overlay,\n  useTheme,\n} from 'react-native-paper'\n\nimport TimePicker from './TimePicker'\nimport {\n  clockTypes,\n  getTimeInputTypeIcon,\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  reverseInputTypes,\n} from './timeUtils'\n\nconst supportedOrientations: (\n  | 'portrait'\n  | 'portrait-upside-down'\n  | 'landscape'\n  | 'landscape-left'\n  | 'landscape-right'\n)[] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\nexport function TimePickerModal({\n  visible,\n  onDismiss,\n  onConfirm,\n  hours,\n  minutes,\n  label = 'Select time',\n  uppercase = true,\n  cancelLabel = 'Cancel',\n  confirmLabel = 'Ok',\n  animationType = 'none',\n  locale,\n  keyboardIcon = 'keyboard-outline',\n  clockIcon = 'clock-outline',\n}: {\n  locale?: undefined | string\n  label?: string\n  uppercase?: boolean\n  cancelLabel?: string\n  confirmLabel?: string\n  hours?: number | undefined\n  minutes?: number | undefined\n  visible: boolean | undefined\n  onDismiss: () => any\n  onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any\n  animationType?: 'slide' | 'fade' | 'none'\n  keyboardIcon?: string\n  clockIcon?: string\n}) {\n  const theme = useTheme()\n\n  let textFont\n  let labelText = label\n\n  if (theme.isV3) {\n    textFont = theme.fonts.labelMedium\n  } else {\n    textFont = (theme as any as MD2Theme)?.fonts.medium\n  }\n\n  const [inputType, setInputType] = React.useState<PossibleInputTypes>(\n    inputTypes.picker\n  )\n  const [focused, setFocused] = React.useState<PossibleClockTypes>(\n    clockTypes.hours\n  )\n  const [localHours, setLocalHours] = React.useState<number>(getHours(hours))\n  const [localMinutes, setLocalMinutes] = React.useState<number>(\n    getMinutes(minutes)\n  )\n\n  if (inputType === inputTypes.keyboard && !label) {\n    labelText = 'Enter time'\n  }\n\n  React.useEffect(() => {\n    setLocalHours(getHours(hours))\n  }, [setLocalHours, hours])\n\n  React.useEffect(() => {\n    setLocalMinutes(getMinutes(minutes))\n  }, [setLocalMinutes, minutes])\n\n  const onFocusInput = React.useCallback(\n    (type: PossibleClockTypes) => setFocused(type),\n    []\n  )\n  const onChange = React.useCallback(\n    (params: {\n      focused?: PossibleClockTypes | undefined\n      hours: number\n      minutes: number\n    }) => {\n      if (params.focused) {\n        setFocused(params.focused)\n      }\n\n      setLocalHours(params.hours)\n      setLocalMinutes(params.minutes)\n    },\n    [setFocused, setLocalHours, setLocalMinutes]\n  )\n  return (\n    <Modal\n      animationType={animationType}\n      transparent={true}\n      visible={visible}\n      onRequestClose={onDismiss}\n      presentationStyle=\"overFullScreen\"\n      supportedOrientations={supportedOrientations}\n      statusBarTranslucent={true}\n    >\n      <>\n        <TouchableWithoutFeedback onPress={onDismiss}>\n          <View\n            style={[\n              StyleSheet.absoluteFill,\n              styles.modalBackground,\n              { backgroundColor: theme.colors?.backdrop },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n        <View\n          style={[StyleSheet.absoluteFill, styles.modalRoot]}\n          pointerEvents=\"box-none\"\n        >\n          <KeyboardAvoidingView\n            style={styles.keyboardView}\n            behavior={'padding'}\n          >\n            <Animated.View\n              style={[\n                styles.modalContent,\n                {\n                  backgroundColor:\n                    theme.dark && theme.isV3\n                      ? theme.colors.elevation.level3\n                      : theme.isV3\n                      ? theme.colors.surface\n                      : theme.dark\n                      ? overlay(10, theme.colors.surface)\n                      : theme.colors.surface,\n                  borderRadius: theme.isV3\n                    ? theme.roundness * 6\n                    : theme.roundness,\n                },\n              ]}\n            >\n              <View style={styles.labelContainer}>\n                <Text\n                  style={[\n                    styles.label,\n                    {\n                      ...textFont,\n                      color: theme?.isV3\n                        ? theme.colors.onSurfaceVariant\n                        : (theme as any as MD2Theme).colors.text,\n                    },\n                  ]}\n                >\n                  {uppercase ? labelText.toUpperCase() : labelText}\n                </Text>\n              </View>\n              <View style={styles.timePickerContainer}>\n                <TimePicker\n                  locale={locale}\n                  inputType={inputType}\n                  focused={focused}\n                  hours={localHours}\n                  minutes={localMinutes}\n                  onChange={onChange}\n                  onFocusInput={onFocusInput}\n                />\n              </View>\n              <View style={styles.bottom}>\n                <IconButton\n                  icon={getTimeInputTypeIcon(inputType, {\n                    keyboard: keyboardIcon,\n                    picker: clockIcon,\n                  })}\n                  onPress={() => setInputType(reverseInputTypes[inputType])}\n                  size={24}\n                  style={styles.inputTypeToggle}\n                  accessibilityLabel=\"toggle keyboard\"\n                />\n                <View style={styles.fill} />\n                <Button onPress={onDismiss} uppercase={uppercase}>\n                  {cancelLabel}\n                </Button>\n                <Button\n                  onPress={() =>\n                    onConfirm({ hours: localHours, minutes: localMinutes })\n                  }\n                  uppercase={uppercase}\n                >\n                  {confirmLabel}\n                </Button>\n              </View>\n            </Animated.View>\n          </KeyboardAvoidingView>\n        </View>\n      </>\n    </Modal>\n  )\n}\n\nfunction getMinutes(minutes: number | undefined | null): number {\n  return minutes === undefined || minutes === null\n    ? new Date().getMinutes()\n    : minutes\n}\nfunction getHours(hours: number | undefined | null): number {\n  return hours === undefined || hours === null ? new Date().getHours() : hours\n}\n\nconst styles = StyleSheet.create({\n  modalRoot: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  keyboardView: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  modalBackground: {\n    flex: 1,\n  },\n  modalContent: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 3,\n    minWidth: 287,\n    paddingVertical: 8,\n  },\n  labelContainer: {\n    justifyContent: 'flex-end',\n    paddingLeft: 24,\n    paddingRight: 24,\n    paddingTop: 16,\n  },\n  label: {\n    letterSpacing: 1,\n    fontSize: 13,\n  },\n  timePickerContainer: {\n    paddingLeft: 24,\n    paddingTop: 20,\n    paddingBottom: 16,\n    paddingRight: 24,\n  },\n  bottom: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 8,\n  },\n  inputTypeToggle: { margin: 4 },\n  fill: { flex: 1 },\n})\n\nexport default React.memo(TimePickerModal)\n"],"mappings":"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"}
+{"version":3,"names":["supportedOrientations","TimePickerModal","visible","onDismiss","onConfirm","hours","minutes","label","uppercase","cancelLabel","confirmLabel","animationType","locale","keyboardIcon","clockIcon","use24HourClock","inputFontSize","theme","useTheme","textFont","labelText","isV3","fonts","labelMedium","medium","inputType","setInputType","React","useState","inputTypes","picker","focused","setFocused","clockTypes","localHours","setLocalHours","getHours","localMinutes","setLocalMinutes","getMinutes","keyboard","useEffect","onFocusInput","useCallback","type","onChange","params","StyleSheet","absoluteFill","styles","modalBackground","backgroundColor","colors","backdrop","modalRoot","keyboardView","modalContent","dark","elevation","level3","surface","overlay","borderRadius","roundness","labelContainer","color","onSurfaceVariant","text","toUpperCase","timePickerContainer","bottom","getTimeInputTypeIcon","reverseInputTypes","inputTypeToggle","fill","undefined","Date","create","justifyContent","alignItems","flex","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","minWidth","paddingVertical","paddingLeft","paddingRight","paddingTop","letterSpacing","fontSize","paddingBottom","flexDirection","padding","margin","memo"],"sources":["TimePickerModal.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  Modal,\n  StyleSheet,\n  View,\n  Text,\n  Animated,\n  TouchableWithoutFeedback,\n  KeyboardAvoidingView,\n} from 'react-native'\n\nimport {\n  Button,\n  IconButton,\n  MD2Theme,\n  overlay,\n  useTheme,\n} from 'react-native-paper'\n\nimport TimePicker from './TimePicker'\nimport {\n  clockTypes,\n  getTimeInputTypeIcon,\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  reverseInputTypes,\n} from './timeUtils'\n\nconst supportedOrientations: (\n  | 'portrait'\n  | 'portrait-upside-down'\n  | 'landscape'\n  | 'landscape-left'\n  | 'landscape-right'\n)[] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\nexport function TimePickerModal({\n  visible,\n  onDismiss,\n  onConfirm,\n  hours,\n  minutes,\n  label = 'Select time',\n  uppercase = true,\n  cancelLabel = 'Cancel',\n  confirmLabel = 'Ok',\n  animationType = 'none',\n  locale,\n  keyboardIcon = 'keyboard-outline',\n  clockIcon = 'clock-outline',\n  use24HourClock,\n  inputFontSize,\n}: {\n  locale?: undefined | string\n  label?: string\n  uppercase?: boolean\n  cancelLabel?: string\n  confirmLabel?: string\n  hours?: number | undefined\n  minutes?: number | undefined\n  visible: boolean | undefined\n  onDismiss: () => any\n  onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any\n  animationType?: 'slide' | 'fade' | 'none'\n  keyboardIcon?: string\n  clockIcon?: string\n  use24HourClock?: boolean\n  inputFontSize?: number\n}) {\n  const theme = useTheme()\n\n  let textFont\n  let labelText = label\n\n  if (theme.isV3) {\n    textFont = theme.fonts.labelMedium\n  } else {\n    textFont = (theme as any as MD2Theme)?.fonts.medium\n  }\n\n  const [inputType, setInputType] = React.useState<PossibleInputTypes>(\n    inputTypes.picker\n  )\n  const [focused, setFocused] = React.useState<PossibleClockTypes>(\n    clockTypes.hours\n  )\n  const [localHours, setLocalHours] = React.useState<number>(getHours(hours))\n  const [localMinutes, setLocalMinutes] = React.useState<number>(\n    getMinutes(minutes)\n  )\n\n  if (inputType === inputTypes.keyboard && !label) {\n    labelText = 'Enter time'\n  }\n\n  React.useEffect(() => {\n    setLocalHours(getHours(hours))\n  }, [setLocalHours, hours])\n\n  React.useEffect(() => {\n    setLocalMinutes(getMinutes(minutes))\n  }, [setLocalMinutes, minutes])\n\n  const onFocusInput = React.useCallback(\n    (type: PossibleClockTypes) => setFocused(type),\n    []\n  )\n  const onChange = React.useCallback(\n    (params: {\n      focused?: PossibleClockTypes | undefined\n      hours: number\n      minutes: number\n    }) => {\n      if (params.focused) {\n        setFocused(params.focused)\n      }\n\n      setLocalHours(params.hours)\n      setLocalMinutes(params.minutes)\n    },\n    [setFocused, setLocalHours, setLocalMinutes]\n  )\n  return (\n    <Modal\n      animationType={animationType}\n      transparent={true}\n      visible={visible}\n      onRequestClose={onDismiss}\n      presentationStyle=\"overFullScreen\"\n      supportedOrientations={supportedOrientations}\n      statusBarTranslucent={true}\n    >\n      <>\n        <TouchableWithoutFeedback onPress={onDismiss}>\n          <View\n            style={[\n              StyleSheet.absoluteFill,\n              styles.modalBackground,\n              { backgroundColor: theme.colors?.backdrop },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n        <View\n          style={[StyleSheet.absoluteFill, styles.modalRoot]}\n          pointerEvents=\"box-none\"\n        >\n          <KeyboardAvoidingView\n            style={styles.keyboardView}\n            behavior={'padding'}\n          >\n            <Animated.View\n              style={[\n                styles.modalContent,\n                {\n                  backgroundColor:\n                    theme.dark && theme.isV3\n                      ? theme.colors.elevation.level3\n                      : theme.isV3\n                      ? theme.colors.surface\n                      : theme.dark\n                      ? overlay(10, theme.colors.surface)\n                      : theme.colors.surface,\n                  borderRadius: theme.isV3\n                    ? theme.roundness * 6\n                    : theme.roundness,\n                },\n              ]}\n            >\n              <View style={styles.labelContainer}>\n                <Text\n                  style={[\n                    styles.label,\n                    {\n                      ...textFont,\n                      color: theme?.isV3\n                        ? theme.colors.onSurfaceVariant\n                        : (theme as any as MD2Theme).colors.text,\n                    },\n                  ]}\n                >\n                  {uppercase ? labelText.toUpperCase() : labelText}\n                </Text>\n              </View>\n              <View style={styles.timePickerContainer}>\n                <TimePicker\n                  locale={locale}\n                  inputType={inputType}\n                  use24HourClock={use24HourClock}\n                  inputFontSize={inputFontSize}\n                  focused={focused}\n                  hours={localHours}\n                  minutes={localMinutes}\n                  onChange={onChange}\n                  onFocusInput={onFocusInput}\n                />\n              </View>\n              <View style={styles.bottom}>\n                <IconButton\n                  icon={getTimeInputTypeIcon(inputType, {\n                    keyboard: keyboardIcon,\n                    picker: clockIcon,\n                  })}\n                  onPress={() => setInputType(reverseInputTypes[inputType])}\n                  size={24}\n                  style={styles.inputTypeToggle}\n                  accessibilityLabel=\"toggle keyboard\"\n                />\n                <View style={styles.fill} />\n                <Button onPress={onDismiss} uppercase={uppercase}>\n                  {cancelLabel}\n                </Button>\n                <Button\n                  onPress={() =>\n                    onConfirm({ hours: localHours, minutes: localMinutes })\n                  }\n                  uppercase={uppercase}\n                >\n                  {confirmLabel}\n                </Button>\n              </View>\n            </Animated.View>\n          </KeyboardAvoidingView>\n        </View>\n      </>\n    </Modal>\n  )\n}\n\nfunction getMinutes(minutes: number | undefined | null): number {\n  return minutes === undefined || minutes === null\n    ? new Date().getMinutes()\n    : minutes\n}\nfunction getHours(hours: number | undefined | null): number {\n  return hours === undefined || hours === null ? new Date().getHours() : hours\n}\n\nconst styles = StyleSheet.create({\n  modalRoot: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  keyboardView: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  modalBackground: {\n    flex: 1,\n  },\n  modalContent: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 3,\n    minWidth: 287,\n    paddingVertical: 8,\n  },\n  labelContainer: {\n    justifyContent: 'flex-end',\n    paddingLeft: 24,\n    paddingRight: 24,\n    paddingTop: 16,\n  },\n  label: {\n    letterSpacing: 1,\n    fontSize: 13,\n  },\n  timePickerContainer: {\n    paddingLeft: 24,\n    paddingTop: 20,\n    paddingBottom: 16,\n    paddingRight: 24,\n  },\n  bottom: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 8,\n  },\n  inputTypeToggle: { margin: 4 },\n  fill: { flex: 1 },\n})\n\nexport default React.memo(TimePickerModal)\n"],"mappings":";;;;;;;;AAAA;;AACA;;AAUA;;AAQA;;AACA;;;;;;;;AASA,MAAMA,qBAMH,GAAG,CACJ,UADI,EAEJ,sBAFI,EAGJ,WAHI,EAIJ,gBAJI,EAKJ,iBALI,CANN;;AAcO,SAASC,eAAT,OAgCJ;EAAA;;EAAA,IAhC6B;IAC9BC,OAD8B;IAE9BC,SAF8B;IAG9BC,SAH8B;IAI9BC,KAJ8B;IAK9BC,OAL8B;IAM9BC,KAAK,GAAG,aANsB;IAO9BC,SAAS,GAAG,IAPkB;IAQ9BC,WAAW,GAAG,QARgB;IAS9BC,YAAY,GAAG,IATe;IAU9BC,aAAa,GAAG,MAVc;IAW9BC,MAX8B;IAY9BC,YAAY,GAAG,kBAZe;IAa9BC,SAAS,GAAG,eAbkB;IAc9BC,cAd8B;IAe9BC;EAf8B,CAgC7B;EACD,MAAMC,KAAK,GAAG,IAAAC,0BAAA,GAAd;EAEA,IAAIC,QAAJ;EACA,IAAIC,SAAS,GAAGb,KAAhB;;EAEA,IAAIU,KAAK,CAACI,IAAV,EAAgB;IACdF,QAAQ,GAAGF,KAAK,CAACK,KAAN,CAAYC,WAAvB;EACD,CAFD,MAEO;IACLJ,QAAQ,GAAIF,KAAJ,aAAIA,KAAJ,uBAAIA,KAAD,CAA4BK,KAA5B,CAAkCE,MAA7C;EACD;;EAED,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BC,KAAK,CAACC,QAAN,CAChCC,qBAAA,CAAWC,MADqB,CAAlC;EAGA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBL,KAAK,CAACC,QAAN,CAC5BK,qBAAA,CAAW5B,KADiB,CAA9B;EAGA,MAAM,CAAC6B,UAAD,EAAaC,aAAb,IAA8BR,KAAK,CAACC,QAAN,CAAuBQ,QAAQ,CAAC/B,KAAD,CAA/B,CAApC;EACA,MAAM,CAACgC,YAAD,EAAeC,eAAf,IAAkCX,KAAK,CAACC,QAAN,CACtCW,UAAU,CAACjC,OAAD,CAD4B,CAAxC;;EAIA,IAAImB,SAAS,KAAKI,qBAAA,CAAWW,QAAzB,IAAqC,CAACjC,KAA1C,EAAiD;IAC/Ca,SAAS,GAAG,YAAZ;EACD;;EAEDO,KAAK,CAACc,SAAN,CAAgB,MAAM;IACpBN,aAAa,CAACC,QAAQ,CAAC/B,KAAD,CAAT,CAAb;EACD,CAFD,EAEG,CAAC8B,aAAD,EAAgB9B,KAAhB,CAFH;EAIAsB,KAAK,CAACc,SAAN,CAAgB,MAAM;IACpBH,eAAe,CAACC,UAAU,CAACjC,OAAD,CAAX,CAAf;EACD,CAFD,EAEG,CAACgC,eAAD,EAAkBhC,OAAlB,CAFH;EAIA,MAAMoC,YAAY,GAAGf,KAAK,CAACgB,WAAN,CAClBC,IAAD,IAA8BZ,UAAU,CAACY,IAAD,CADrB,EAEnB,EAFmB,CAArB;EAIA,MAAMC,QAAQ,GAAGlB,KAAK,CAACgB,WAAN,CACdG,MAAD,IAIM;IACJ,IAAIA,MAAM,CAACf,OAAX,EAAoB;MAClBC,UAAU,CAACc,MAAM,CAACf,OAAR,CAAV;IACD;;IAEDI,aAAa,CAACW,MAAM,CAACzC,KAAR,CAAb;IACAiC,eAAe,CAACQ,MAAM,CAACxC,OAAR,CAAf;EACD,CAZc,EAaf,CAAC0B,UAAD,EAAaG,aAAb,EAA4BG,eAA5B,CAbe,CAAjB;EAeA,oBACE,oBAAC,kBAAD;IACE,aAAa,EAAE3B,aADjB;IAEE,WAAW,EAAE,IAFf;IAGE,OAAO,EAAET,OAHX;IAIE,cAAc,EAAEC,SAJlB;IAKE,iBAAiB,EAAC,gBALpB;IAME,qBAAqB,EAAEH,qBANzB;IAOE,oBAAoB,EAAE;EAPxB,gBASE,uDACE,oBAAC,qCAAD;IAA0B,OAAO,EAAEG;EAAnC,gBACE,oBAAC,iBAAD;IACE,KAAK,EAAE,CACL4C,uBAAA,CAAWC,YADN,EAELC,MAAM,CAACC,eAFF,EAGL;MAAEC,eAAe,mBAAElC,KAAK,CAACmC,MAAR,kDAAE,cAAcC;IAAjC,CAHK;EADT,EADF,CADF,eAUE,oBAAC,iBAAD;IACE,KAAK,EAAE,CAACN,uBAAA,CAAWC,YAAZ,EAA0BC,MAAM,CAACK,SAAjC,CADT;IAEE,aAAa,EAAC;EAFhB,gBAIE,oBAAC,iCAAD;IACE,KAAK,EAAEL,MAAM,CAACM,YADhB;IAEE,QAAQ,EAAE;EAFZ,gBAIE,oBAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACLN,MAAM,CAACO,YADF,EAEL;MACEL,eAAe,EACblC,KAAK,CAACwC,IAAN,IAAcxC,KAAK,CAACI,IAApB,GACIJ,KAAK,CAACmC,MAAN,CAAaM,SAAb,CAAuBC,MAD3B,GAEI1C,KAAK,CAACI,IAAN,GACAJ,KAAK,CAACmC,MAAN,CAAaQ,OADb,GAEA3C,KAAK,CAACwC,IAAN,GACA,IAAAI,yBAAA,EAAQ,EAAR,EAAY5C,KAAK,CAACmC,MAAN,CAAaQ,OAAzB,CADA,GAEA3C,KAAK,CAACmC,MAAN,CAAaQ,OARrB;MASEE,YAAY,EAAE7C,KAAK,CAACI,IAAN,GACVJ,KAAK,CAAC8C,SAAN,GAAkB,CADR,GAEV9C,KAAK,CAAC8C;IAXZ,CAFK;EADT,gBAkBE,oBAAC,iBAAD;IAAM,KAAK,EAAEd,MAAM,CAACe;EAApB,gBACE,oBAAC,iBAAD;IACE,KAAK,EAAE,CACLf,MAAM,CAAC1C,KADF,EAEL,EACE,GAAGY,QADL;MAEE8C,KAAK,EAAEhD,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEI,IAAP,GACHJ,KAAK,CAACmC,MAAN,CAAac,gBADV,GAEFjD,KAAD,CAA2BmC,MAA3B,CAAkCe;IAJxC,CAFK;EADT,GAWG3D,SAAS,GAAGY,SAAS,CAACgD,WAAV,EAAH,GAA6BhD,SAXzC,CADF,CAlBF,eAiCE,oBAAC,iBAAD;IAAM,KAAK,EAAE6B,MAAM,CAACoB;EAApB,gBACE,oBAAC,mBAAD;IACE,MAAM,EAAEzD,MADV;IAEE,SAAS,EAAEa,SAFb;IAGE,cAAc,EAAEV,cAHlB;IAIE,aAAa,EAAEC,aAJjB;IAKE,OAAO,EAAEe,OALX;IAME,KAAK,EAAEG,UANT;IAOE,OAAO,EAAEG,YAPX;IAQE,QAAQ,EAAEQ,QARZ;IASE,YAAY,EAAEH;EAThB,EADF,CAjCF,eA8CE,oBAAC,iBAAD;IAAM,KAAK,EAAEO,MAAM,CAACqB;EAApB,gBACE,oBAAC,4BAAD;IACE,IAAI,EAAE,IAAAC,+BAAA,EAAqB9C,SAArB,EAAgC;MACpCe,QAAQ,EAAE3B,YAD0B;MAEpCiB,MAAM,EAAEhB;IAF4B,CAAhC,CADR;IAKE,OAAO,EAAE,MAAMY,YAAY,CAAC8C,4BAAA,CAAkB/C,SAAlB,CAAD,CAL7B;IAME,IAAI,EAAE,EANR;IAOE,KAAK,EAAEwB,MAAM,CAACwB,eAPhB;IAQE,kBAAkB,EAAC;EARrB,EADF,eAWE,oBAAC,iBAAD;IAAM,KAAK,EAAExB,MAAM,CAACyB;EAApB,EAXF,eAYE,oBAAC,wBAAD;IAAQ,OAAO,EAAEvE,SAAjB;IAA4B,SAAS,EAAEK;EAAvC,GACGC,WADH,CAZF,eAeE,oBAAC,wBAAD;IACE,OAAO,EAAE,MACPL,SAAS,CAAC;MAAEC,KAAK,EAAE6B,UAAT;MAAqB5B,OAAO,EAAE+B;IAA9B,CAAD,CAFb;IAIE,SAAS,EAAE7B;EAJb,GAMGE,YANH,CAfF,CA9CF,CAJF,CAJF,CAVF,CATF,CADF;AAwGD;;AAED,SAAS6B,UAAT,CAAoBjC,OAApB,EAAgE;EAC9D,OAAOA,OAAO,KAAKqE,SAAZ,IAAyBrE,OAAO,KAAK,IAArC,GACH,IAAIsE,IAAJ,GAAWrC,UAAX,EADG,GAEHjC,OAFJ;AAGD;;AACD,SAAS8B,QAAT,CAAkB/B,KAAlB,EAA4D;EAC1D,OAAOA,KAAK,KAAKsE,SAAV,IAAuBtE,KAAK,KAAK,IAAjC,GAAwC,IAAIuE,IAAJ,GAAWxC,QAAX,EAAxC,GAAgE/B,KAAvE;AACD;;AAED,MAAM4C,MAAM,GAAGF,uBAAA,CAAW8B,MAAX,CAAkB;EAC/BvB,SAAS,EAAE;IACTwB,cAAc,EAAE,QADP;IAETC,UAAU,EAAE,QAFH;IAGTC,IAAI,EAAE;EAHG,CADoB;EAM/BzB,YAAY,EAAE;IACZuB,cAAc,EAAE,QADJ;IAEZC,UAAU,EAAE,QAFA;IAGZC,IAAI,EAAE;EAHM,CANiB;EAW/B9B,eAAe,EAAE;IACf8B,IAAI,EAAE;EADS,CAXc;EAc/BxB,YAAY,EAAE;IACZyB,WAAW,EAAE,MADD;IAEZC,YAAY,EAAE;MACZC,KAAK,EAAE,CADK;MAEZC,MAAM,EAAE;IAFI,CAFF;IAMZC,aAAa,EAAE,IANH;IAOZC,YAAY,EAAE,IAPF;IAQZ5B,SAAS,EAAE,CARC;IASZ6B,QAAQ,EAAE,GATE;IAUZC,eAAe,EAAE;EAVL,CAdiB;EA0B/BxB,cAAc,EAAE;IACdc,cAAc,EAAE,UADF;IAEdW,WAAW,EAAE,EAFC;IAGdC,YAAY,EAAE,EAHA;IAIdC,UAAU,EAAE;EAJE,CA1Be;EAgC/BpF,KAAK,EAAE;IACLqF,aAAa,EAAE,CADV;IAELC,QAAQ,EAAE;EAFL,CAhCwB;EAoC/BxB,mBAAmB,EAAE;IACnBoB,WAAW,EAAE,EADM;IAEnBE,UAAU,EAAE,EAFO;IAGnBG,aAAa,EAAE,EAHI;IAInBJ,YAAY,EAAE;EAJK,CApCU;EA0C/BpB,MAAM,EAAE;IACNyB,aAAa,EAAE,KADT;IAENhB,UAAU,EAAE,QAFN;IAGNiB,OAAO,EAAE;EAHH,CA1CuB;EA+C/BvB,eAAe,EAAE;IAAEwB,MAAM,EAAE;EAAV,CA/Cc;EAgD/BvB,IAAI,EAAE;IAAEM,IAAI,EAAE;EAAR;AAhDyB,CAAlB,CAAf;;4BAmDerD,KAAK,CAACuE,IAAN,CAAWjG,eAAX,C"}

package/lib/module/Time/AnalogClock.js

@@ -24,7 +24,7 @@ function AnalogClock(_ref) {
     mode
   } = React.useContext(DisplayModeContext); // used to make pointer shorter if hours are selected and above 12
 
-  const shortPointer = (hours === 0 || hours > 12) && is24Hour;
+  const shortPointer = hours >= 12 && is24Hour;
   const clockRef = React.useRef(null); // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
 
@@ -52,14 +52,18 @@ function AnalogClock(_ref) {
         pickedHours += 12;
       }
 
-      if (modeRef.current === 'AM' && pickedHours === 12) {
+      if ((modeRef.current === 'AM' || hours24) && pickedHours === 12) {
         pickedHours = 0;
       }
 
-      if (!hours24 && modeRef.current === 'AM' && pickedHours === 12 || pickedHours === 24) {
+      if (!hours24 && modeRef.current === 'AM' && pickedHours === 12) {
         pickedHours = 0;
       }
 
+      if (pickedHours === 24) {
+        pickedHours = 12;
+      }
+
       if (hoursRef.current !== pickedHours || final) {
         onChangeRef.current({
           hours: pickedHours,