react-native-paper-dates 0.11.4 → 0.11.6

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

@@ -1 +1 @@
-{"version":3,"names":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","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","hourTypeFromOffset","hours24AndPM","pm","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","isV3","outline","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","marginBottom","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 === 'AM'\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.dark\n            ? Color(theme.colors.surface).lighten(1.4).hex()\n            : theme.isV3\n            ? Color(theme.colors.outline).lighten(0.9).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}\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    marginBottom: -1,\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":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","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","hourTypeFromOffset","hours24AndPM","pm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","isV3","colors","surfaceVariant","dark","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","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 === 'AM'\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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"}

package/lib/module/Time/AnalogClockHours.js

@@ -29,6 +29,7 @@ function AnalogClockHours(_ref) {
     style: hours === i + 1 ? {
       color
     } : null,
+    variant: "bodyLarge",
     selectable: false
   }, mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(View, {
     key: i,
@@ -41,9 +42,10 @@ function AnalogClockHours(_ref) {
     style: styles.innerHourInner
   }, /*#__PURE__*/React.createElement(Text, {
     selectable: false,
-    style: [styles.innerHourText, i + 13 === hours || i + 13 === 24 && hours === 0 ? {
+    style: [i + 13 === hours || i + 13 === 24 && hours === 0 ? {
       color
-    } : null]
+    } : null],
+    variant: "bodyLarge"
   }, i + 13 === 24 ? '00' : i + 13)))) : null);
 }
 
@@ -53,31 +55,28 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20,
-    width: 50,
-    height: 50,
-    marginLeft: -25,
-    marginTop: -25,
-    borderRadius: 25
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24
   },
   outerHourInner: {
-    borderRadius: 25
+    borderRadius: 24
   },
   innerHourRoot: {
     position: 'absolute',
     zIndex: 20,
     justifyContent: 'center',
     alignItems: 'center',
-    width: 40,
-    height: 40,
-    marginLeft: -20,
-    marginTop: -20,
-    borderRadius: 20
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24
   },
   innerHourInner: {
-    borderRadius: 20
-  },
-  innerHourText: {
-    fontSize: 13
+    borderRadius: 24
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"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"],"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 style={hours === i + 1 ? { color } : null} selectable={false}>\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                    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"],"mappings":"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"}
+{"version":3,"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","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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"}

package/lib/module/Time/AnalogClockMinutes.js

@@ -32,7 +32,8 @@ function AnalogClockMinutes(_ref) {
       style: isCurrent ? {
         color
       } : undefined,
-      selectable: false
+      selectable: false,
+      variant: "bodyLarge"
     }, isZero ? '00' : currentMinutes)));
   }));
 }
@@ -43,14 +44,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20,
-    width: 50,
-    height: 50,
-    marginLeft: -25,
-    marginTop: -25,
-    borderRadius: 25
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24
   },
   outerHourInner: {
-    borderRadius: 25
+    borderRadius: 24
   },
   innerHourRoot: {
     position: 'absolute',

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

@@ -1 +1 @@
-{"version":3,"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"],"sources":["AnalogClockMinutes.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 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"],"mappings":"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"}
+{"version":3,"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"],"sources":["AnalogClockMinutes.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 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                variant=\"bodyLarge\"\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: 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: 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"],"mappings":"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"}

package/lib/module/Time/TimeInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import { View, TextInput, StyleSheet, Platform } from 'react-native';
 import { useTheme, TouchableRipple } from 'react-native-paper';
 import Color from 'color';
 import { inputTypes, useInputColors } from './timeUtils';
@@ -46,10 +46,14 @@ function TimeInput(_ref, ref) {
     style: styles.root
   }, /*#__PURE__*/React.createElement(TextInput, _extends({
     ref: ref,
-    style: [styles.input, {
+    style: [styles.input, // eslint-disable-next-line react-native/no-inline-styles
+    {
       color,
       backgroundColor,
-      borderRadius: theme.roundness
+      borderRadius: theme.roundness * 2,
+      borderColor: theme.isV3 && highlighted ? theme.colors.onPrimaryContainer : undefined,
+      borderWidth: theme.isV3 && highlighted ? 2 : 0,
+      height: inputType === inputTypes.keyboard ? 72 : 80
     }],
     value: formattedValue,
     maxLength: 2,
@@ -60,10 +64,9 @@ function TimeInput(_ref, ref) {
     onChangeText: onInnerChange
   }, rest)), onPress && inputType === inputTypes.picker ? /*#__PURE__*/React.createElement(TouchableRipple, {
     style: [StyleSheet.absoluteFill, styles.buttonOverlay, {
-      // backgroundColor: 'blue',
       borderRadius: theme.roundness
     }],
-    rippleColor: Color(theme.colors.primary).fade(0.7).hex(),
+    rippleColor: Platform.OS !== 'ios' ? Color(theme.colors.onSurface).fade(0.7).hex() : undefined,
     onPress: () => onPress(clockType),
     borderless: true
   }, /*#__PURE__*/React.createElement(View, null)) : null);
@@ -76,11 +79,10 @@ const styles = StyleSheet.create({
     width: 96
   },
   input: {
-    fontSize: 50,
+    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
-    width: 96,
-    height: 80
+    width: 96
   },
   buttonOverlay: {
     overflow: 'hidden'

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

@@ -1 +1 @@
-{"version":3,"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","create","position","height","width","fontSize","textAlign","textAlignVertical","overflow","forwardRef"],"sources":["TimeInput.tsx"],"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"],"mappings":"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"}
+{"version":3,"names":["React","View","TextInput","StyleSheet","Platform","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","borderColor","isV3","colors","onPrimaryContainer","undefined","borderWidth","height","keyboard","dark","absoluteFill","buttonOverlay","OS","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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"}

package/lib/module/Time/TimeInputs.js

@@ -1,8 +1,6 @@
-// @typescript-eslint/no-unused-vars
-// WORK IN PROGRESS
 import * as React from 'react';
 import { View, StyleSheet, useWindowDimensions } from 'react-native';
-import { useTheme } from 'react-native-paper';
+import { Text, useTheme } from 'react-native-paper';
 import { clockTypes, toHourInputFormat, toHourOutputFormat } from './timeUtils';
 import TimeInput from './TimeInput';
 import AmPmSwitcher from './AmPmSwitcher';
@@ -41,6 +39,8 @@ function TimeInputs(_ref) {
   }, [onChange, minutesRef]);
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.inputContainer, isLandscape && styles.inputContainerLandscape]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.column
   }, /*#__PURE__*/React.createElement(TimeInput, {
     ref: startInput,
     placeholder: '00',
@@ -65,23 +65,30 @@ function TimeInputs(_ref) {
         minutes
       });
     }
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles.hoursAndMinutesSeparator
+  }), inputType === 'keyboard' ? /*#__PURE__*/React.createElement(Text, {
+    variant: "bodySmall"
+  }, "Hour") : null), /*#__PURE__*/React.createElement(View, {
+    style: [styles.hoursAndMinutesSeparator, // eslint-disable-next-line react-native/no-inline-styles
+    {
+      marginBottom: inputType === 'keyboard' ? 24 : 0
+    }]
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.spaceDot
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.dot, {
-      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
+      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onSurface : theme.colors.text
     }]
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.betweenDot
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.dot, {
-      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
+      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onSurface : theme.colors.text
     }]
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.spaceDot
-  })), /*#__PURE__*/React.createElement(TimeInput, {
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.column
+  }, /*#__PURE__*/React.createElement(TimeInput, {
     ref: endInput,
     placeholder: '00',
     value: minutes,
@@ -103,15 +110,21 @@ function TimeInputs(_ref) {
         minutes: newMinutes
       });
     }
-  }), !is24Hour && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  }), inputType === 'keyboard' ? /*#__PURE__*/React.createElement(Text, {
+    variant: "bodySmall"
+  }, "Minute") : null), !is24Hour && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: styles.spaceBetweenInputsAndSwitcher
   }), /*#__PURE__*/React.createElement(AmPmSwitcher, {
     hours: hours,
-    onChange: onChangeHours
+    onChange: onChangeHours,
+    inputType: inputType
   })));
 }
 
 const styles = StyleSheet.create({
+  column: {
+    flexDirection: 'column'
+  },
   spaceBetweenInputsAndSwitcher: {
     width: 12
   },

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","Color","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","dark","colors","primary","darken","hex","newHoursFromInput","hoursAndMinutesSeparator","spaceDot","dot","backgroundColor","isV3","onBackground","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"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 { MD2Theme, 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      <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(newHoursFromInput, hours, is24Hour)\n          if (newHoursFromInput > 24) {\n            newHours = 24\n          }\n          onChange({\n            hours: newHours,\n            minutes,\n          })\n        }}\n      />\n      <View style={styles.hoursAndMinutesSeparator}>\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onBackground\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.onBackground\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\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        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      {!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"],"mappings":"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"}
+{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","Text","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","Color","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","column","dark","colors","primary","darken","hex","newHoursFromInput","hoursAndMinutesSeparator","marginBottom","spaceDot","dot","backgroundColor","isV3","onSurface","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","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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"}

package/lib/module/Time/TimePicker.js

@@ -51,7 +51,9 @@ function TimePicker(_ref) {
       setMode: setDisplayMode
     }
   }, /*#__PURE__*/React.createElement(View, {
-    style: isLandscape ? styles.rootLandscape : styles.rootPortrait
+    style: isLandscape ? [styles.rootLandscape, {
+      width: 24 * 3 + 96 * 2 + 52 + (inputType === inputTypes.picker ? circleSize : -circleSize)
+    }] : styles.rootPortrait
   }, /*#__PURE__*/React.createElement(TimeInputs, {
     inputType: inputType,
     hours: hours,
@@ -75,8 +77,7 @@ const styles = StyleSheet.create({
   rootLandscape: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-    width: 24 * 3 + 96 * 2 + 52 + circleSize
+    justifyContent: 'center'
   },
   rootPortrait: {
     alignItems: 'center',

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

@@ -1 +1 @@
-{"version":3,"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"],"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 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    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,EAA2BC,mBAA3B,QAAsD,cAAtD;AAEA,SACEC,UADF,EAIEC,iBAJF,EAKEC,kBALF,QAMO,aANP;AAQA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,OAAO,MAAMC,kBAAkB,gBAAGV,KAAK,CAACW,aAAN,CAG/B;EAAEC,IAAI,EAAE,IAAR;EAAcC,OAAO,EAAE,MAAM,CAAE;AAA/B,CAH+B,CAA3B;;AAeP,SAASC,UAAT,OAgBG;EAAA,IAhBiB;IAClBC,KADkB;IAElBC,OAFkB;IAGlBC,YAHkB;IAIlBC,OAJkB;IAKlBC,SALkB;IAMlBC,QANkB;IAOlBC;EAPkB,CAgBjB;EACD,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCvB,KAAK,CAACwB,QAAN,CACpCC,SADoC,CAAtC;EAGA,MAAMC,UAAU,GAAGvB,mBAAmB,EAAtC;EACA,MAAMwB,WAAW,GAAGD,UAAU,CAACE,KAAX,GAAmBF,UAAU,CAACG,MAAlD,CALC,CAOD;;EACA,MAAMC,QAAQ,GAAG9B,KAAK,CAAC+B,OAAN,CAAc,MAAM;IACnC,MAAMC,SAAS,GAAG,IAAIC,IAAI,CAACC,cAAT,CAAwBb,MAAxB,EAAgC;MAChDc,IAAI,EAAE,SAD0C;MAEhDC,MAAM,EAAE,SAFwC;MAGhDC,QAAQ,EAAE;IAHsC,CAAhC,CAAlB;IAKA,MAAMC,SAAS,GAAGN,SAAS,CAACO,MAAV,CAAiB,IAAIC,IAAJ,CAASA,IAAI,CAACC,GAAL,CAAS,IAAT,EAAe,CAAf,EAAkB,CAAlB,EAAqB,EAArB,CAAT,CAAjB,CAAlB;IACA,OAAOH,SAAS,CAACI,QAAV,CAAmB,IAAnB,CAAP;EACD,CARgB,EAQd,CAACrB,MAAD,CARc,CAAjB,CARC,CAkBD;;EACArB,KAAK,CAAC2C,SAAN,CAAgB,MAAM;IACpB,IAAI5B,KAAK,IAAI,EAAb,EAAiB;MACfQ,cAAc,CAAC,IAAD,CAAd;IACD,CAFD,MAEO;MACLA,cAAc,CAAC,IAAD,CAAd;IACD,CALmB,CAMpB;;EACD,CAPD,EAOG,EAPH;EASA,MAAMqB,aAAa,GAAG5C,KAAK,CAAC6C,WAAN,CACnBC,MAAD,IAAY;IACVA,MAAM,CAAC/B,KAAP,GAAeT,kBAAkB,CAACwC,MAAM,CAAC/B,KAAR,EAAeA,KAAf,EAAsBe,QAAtB,CAAjC;IACAV,QAAQ,CAAC0B,MAAD,CAAR;EACD,CAJmB,EAKpB,CAAC1B,QAAD,EAAWL,KAAX,EAAkBe,QAAlB,CALoB,CAAtB;EAQA,oBACE,oBAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MAAElB,IAAI,EAAEU,WAAR;MAAqBT,OAAO,EAAEU;IAA9B;EADT,gBAGE,oBAAC,IAAD;IAAM,KAAK,EAAEI,WAAW,GAAGoB,MAAM,CAACC,aAAV,GAA0BD,MAAM,CAACE;EAAzD,gBACE,oBAAC,UAAD;IACE,SAAS,EAAE9B,SADb;IAEE,KAAK,EAAEJ,KAFT;IAGE,OAAO,EAAEC,OAHX;IAIE,QAAQ,EAAEc,QAJZ;IAKE,QAAQ,EAAEV,QALZ;IAME,YAAY,EAAEH,YANhB;IAOE,OAAO,EAAEC;EAPX,EADF,EAUGC,SAAS,KAAKf,UAAU,CAAC8C,MAAzB,gBACC,oBAAC,IAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,oBAAC,WAAD;IACE,KAAK,EAAE9C,iBAAiB,CAACU,KAAD,EAAQe,QAAR,CAD1B;IAEE,OAAO,EAAEd,OAFX;IAGE,OAAO,EAAEE,OAHX;IAIE,QAAQ,EAAEY,QAJZ;IAKE,QAAQ,EAAEc;EALZ,EADF,CADD,GAUG,IApBN,CAHF,CADF;AA4BD;;AAED,MAAMG,MAAM,GAAG7C,UAAU,CAACkD,MAAX,CAAkB;EAC/BJ,aAAa,EAAE;IACbK,aAAa,EAAE,KADF;IAEbC,UAAU,EAAE,QAFC;IAGbC,cAAc,EAAE,QAHH;IAIb3B,KAAK,EAAE,KAAK,CAAL,GAAS,KAAK,CAAd,GAAkB,EAAlB,GAAuBpB;EAJjB,CADgB;EAO/ByC,YAAY,EAAE;IACZK,UAAU,EAAE,QADA;IAEZC,cAAc,EAAE;EAFJ,CAPiB;EAW/BJ,cAAc,EAAE;IAAEK,UAAU,EAAE,EAAd;IAAkBC,WAAW,EAAE,EAA/B;IAAmCC,YAAY,EAAE;EAAjD;AAXe,CAAlB,CAAf;AAcA,4BAAe1D,KAAK,CAAC2D,IAAN,CAAW7C,UAAX,CAAf"}
+{"version":3,"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","picker","rootPortrait","clockContainer","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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"}

package/lib/module/Time/TimePickerModal.js

@@ -24,9 +24,10 @@ export function TimePickerModal(_ref) {
   } = _ref;
   const theme = useTheme();
   let textFont;
+  let labelText = label;
 
   if (theme.isV3) {
-    textFont = theme.fonts.bodyMedium;
+    textFont = theme.fonts.labelMedium;
   } else {
     textFont = theme === null || theme === void 0 ? void 0 : theme.fonts.medium;
   }
@@ -35,6 +36,11 @@ export function TimePickerModal(_ref) {
   const [focused, setFocused] = React.useState(clockTypes.hours);
   const [localHours, setLocalHours] = React.useState(getHours(hours));
   const [localMinutes, setLocalMinutes] = React.useState(getMinutes(minutes));
+
+  if (inputType === inputTypes.keyboard && !label) {
+    labelText = 'Enter time';
+  }
+
   React.useEffect(() => {
     setLocalHours(getHours(hours));
   }, [setLocalHours, hours]);
@@ -56,8 +62,7 @@ export function TimePickerModal(_ref) {
     visible: visible,
     onRequestClose: onDismiss,
     presentationStyle: "overFullScreen",
-    supportedOrientations: supportedOrientations //@ts-ignore
-    ,
+    supportedOrientations: supportedOrientations,
     statusBarTranslucent: true
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
     onPress: onDismiss
@@ -73,16 +78,16 @@ export function TimePickerModal(_ref) {
     behavior: 'padding'
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: [styles.modalContent, {
-      backgroundColor: theme.dark ? overlay(10, theme.colors.surface) : theme.colors.surface,
-      borderRadius: theme.roundness
+      backgroundColor: theme.dark && theme.isV3 ? theme.colors.elevation.level3 : theme.isV3 ? theme.colors.surface : theme.dark ? overlay(10, theme.colors.surface) : theme.colors.surface,
+      borderRadius: theme.isV3 ? theme.roundness * 6 : theme.roundness
     }]
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.labelContainer
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.label, { ...textFont,
-      color: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
+      color: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onSurfaceVariant : theme.colors.text
     }]
-  }, uppercase ? label.toUpperCase() : label)), /*#__PURE__*/React.createElement(View, {
+  }, uppercase ? labelText.toUpperCase() : labelText)), /*#__PURE__*/React.createElement(View, {
     style: styles.timePickerContainer
   }, /*#__PURE__*/React.createElement(TimePicker, {
     locale: locale,
@@ -147,22 +152,25 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.34,
     shadowRadius: 6.27,
-    elevation: 10,
-    minWidth: 287
+    elevation: 3,
+    minWidth: 287,
+    paddingVertical: 8
   },
   labelContainer: {
-    height: 28,
     justifyContent: 'flex-end',
     paddingLeft: 24,
     paddingRight: 24,
-    marginTop: 8
+    paddingTop: 16
   },
   label: {
     letterSpacing: 1,
     fontSize: 13
   },
   timePickerContainer: {
-    padding: 24
+    paddingLeft: 24,
+    paddingTop: 20,
+    paddingBottom: 16,
+    paddingRight: 24
   },
   bottom: {
     flexDirection: 'row',