react-native-paper-dates 0.11.5 → 0.11.6

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":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,SAAf,EAA0CC,UAA1C,QAA4D,cAA5D;AACA,SAASC,QAAT,EAAmBC,eAAnB,QAA0C,oBAA1C;AAEA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SACEC,UADF,EAIEC,cAJF,QAKO,aALP;;AAiBA,SAASC,SAAT,OAUEC,GAVF,EAWE;EAAA,IAVA;IACEC,KADF;IAEEC,SAFF;IAGEC,OAHF;IAIEC,OAJF;IAKEC,SALF;IAMEC,SANF;IAOE,GAAGC;EAPL,CAUA;EACA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCnB,KAAK,CAACoB,QAAN,CAC3C,GAAET,KAAM,EADmC,CAA9C;;EAIA,MAAMU,aAAa,GAAIC,IAAD,IAAkB;IACtCH,kBAAkB,CAACG,IAAD,CAAlB;;IACA,IAAIA,IAAI,KAAK,EAAT,IAAeA,IAAI,KAAK,GAA5B,EAAiC;MAC/BP,SAAS,CAACQ,MAAM,CAACD,IAAD,CAAP,CAAT;IACD;EACF,CALD;;EAOAtB,KAAK,CAACwB,SAAN,CAAgB,MAAM;IACpBL,kBAAkB,CAAE,GAAER,KAAM,EAAV,CAAlB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,MAAMc,KAAK,GAAGrB,QAAQ,EAAtB;EACA,MAAM,CAACsB,YAAD,EAAeC,eAAf,IAAkC3B,KAAK,CAACoB,QAAN,CAAwB,KAAxB,CAAxC;EAEA,MAAMQ,WAAW,GAAGZ,SAAS,KAAKT,UAAU,CAACsB,MAAzB,GAAkChB,OAAlC,GAA4Ca,YAAhE;EAEA,MAAM;IAAEI,KAAF;IAASC;EAAT,IAA6BvB,cAAc,CAACoB,WAAD,CAAjD;EAEA,IAAII,cAAc,GAAGd,eAArB;;EACA,IAAI,CAACQ,YAAL,EAAmB;IACjBM,cAAc,GACZd,eAAe,CAACe,MAAhB,KAA2B,CAA3B,GACK,IAAGf,eAAgB,EADxB,GAEK,GAAEA,eAAgB,EAHzB;EAID;;EAED,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEgB,MAAM,CAACC;EAApB,gBACE,oBAAC,SAAD;IACE,GAAG,EAAEzB,GADP;IAEE,KAAK,EAAE,CACLwB,MAAM,CAACE,KADF,EAEL;MACEN,KADF;MAEEC,eAFF;MAGEM,YAAY,EAAEZ,KAAK,CAACa;IAHtB,CAFK,CAFT;IAUE,KAAK,EAAEN,cAVT;IAWE,SAAS,EAAE,CAXb;IAYE,OAAO,EAAE,MAAML,eAAe,CAAC,IAAD,CAZhC;IAaE,MAAM,EAAE,MAAMA,eAAe,CAAC,KAAD,CAb/B;IAcE,kBAAkB,EAAEF,KAAK,CAACc,IAAN,GAAa,MAAb,GAAsB,SAd5C;IAeE,YAAY,EAAC,YAff;IAgBE,YAAY,EAAElB;EAhBhB,GAiBMJ,IAjBN,EADF,EAoBGH,OAAO,IAAIE,SAAS,KAAKT,UAAU,CAACsB,MAApC,gBACC,oBAAC,eAAD;IACE,KAAK,EAAE,CACL1B,UAAU,CAACqC,YADN,EAELN,MAAM,CAACO,aAFF,EAGL;MACE;MACAJ,YAAY,EAAEZ,KAAK,CAACa;IAFtB,CAHK,CADT;IASE,WAAW,EAAEhC,KAAK,CAACmB,KAAK,CAACiB,MAAN,CAAaC,OAAd,CAAL,CAA4BC,IAA5B,CAAiC,GAAjC,EAAsCC,GAAtC,EATf;IAUE,OAAO,EAAE,MAAM/B,OAAO,CAACF,SAAD,CAVxB;IAWE,UAAU,EAAE;EAXd,gBAaE,oBAAC,IAAD,OAbF,CADD,GAgBG,IApCN,CADF;AAwCD;;AAED,MAAMsB,MAAM,GAAG/B,UAAU,CAAC2C,MAAX,CAAkB;EAC/BX,IAAI,EAAE;IAAEY,QAAQ,EAAE,UAAZ;IAAwBC,MAAM,EAAE,EAAhC;IAAoCC,KAAK,EAAE;EAA3C,CADyB;EAE/Bb,KAAK,EAAE;IACLc,QAAQ,EAAE,EADL;IAELC,SAAS,EAAE,QAFN;IAGLC,iBAAiB,EAAE,QAHd;IAILH,KAAK,EAAE,EAJF;IAKLD,MAAM,EAAE;EALH,CAFwB;EAS/BP,aAAa,EAAE;IAAEY,QAAQ,EAAE;EAAZ;AATgB,CAAlB,CAAf;AAYA,4BAAerD,KAAK,CAACsD,UAAN,CAAiB7C,SAAjB,CAAf"}
+{"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":"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"}
+{"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',

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

@@ -1 +1 @@
-{"version":3,"names":["React","Modal","StyleSheet","View","Text","Animated","TouchableWithoutFeedback","KeyboardAvoidingView","Button","IconButton","overlay","useTheme","TimePicker","clockTypes","getTimeInputTypeIcon","inputTypes","reverseInputTypes","supportedOrientations","TimePickerModal","visible","onDismiss","onConfirm","hours","minutes","label","uppercase","cancelLabel","confirmLabel","animationType","locale","keyboardIcon","clockIcon","theme","textFont","isV3","fonts","bodyMedium","medium","inputType","setInputType","useState","picker","focused","setFocused","localHours","setLocalHours","getHours","localMinutes","setLocalMinutes","getMinutes","useEffect","onFocusInput","useCallback","type","onChange","params","absoluteFill","styles","modalBackground","backgroundColor","colors","backdrop","modalRoot","keyboardView","modalContent","dark","surface","borderRadius","roundness","labelContainer","color","onBackground","text","toUpperCase","timePickerContainer","bottom","keyboard","inputTypeToggle","fill","undefined","Date","create","justifyContent","alignItems","flex","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","minWidth","paddingLeft","paddingRight","marginTop","letterSpacing","fontSize","padding","flexDirection","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: any[] = [\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\n  if (theme.isV3) {\n    textFont = theme.fonts.bodyMedium\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  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      //@ts-ignore\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\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: theme.dark\n                    ? overlay(10, theme.colors.surface)\n                    : theme.colors.surface,\n                  borderRadius: 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.onBackground\n                        : (theme as any as MD2Theme).colors.text,\n                    },\n                  ]}\n                >\n                  {uppercase ? label.toUpperCase() : label}\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: 10,\n    minWidth: 287,\n  },\n  labelContainer: {\n    height: 28,\n    justifyContent: 'flex-end',\n    paddingLeft: 24,\n    paddingRight: 24,\n    marginTop: 8,\n  },\n  label: {\n    letterSpacing: 1,\n    fontSize: 13,\n  },\n  timePickerContainer: { padding: 24 },\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":["React","Modal","StyleSheet","View","Text","Animated","TouchableWithoutFeedback","KeyboardAvoidingView","Button","IconButton","overlay","useTheme","TimePicker","clockTypes","getTimeInputTypeIcon","inputTypes","reverseInputTypes","supportedOrientations","TimePickerModal","visible","onDismiss","onConfirm","hours","minutes","label","uppercase","cancelLabel","confirmLabel","animationType","locale","keyboardIcon","clockIcon","theme","textFont","labelText","isV3","fonts","labelMedium","medium","inputType","setInputType","useState","picker","focused","setFocused","localHours","setLocalHours","getHours","localMinutes","setLocalMinutes","getMinutes","keyboard","useEffect","onFocusInput","useCallback","type","onChange","params","absoluteFill","styles","modalBackground","backgroundColor","colors","backdrop","modalRoot","keyboardView","modalContent","dark","elevation","level3","surface","borderRadius","roundness","labelContainer","color","onSurfaceVariant","text","toUpperCase","timePickerContainer","bottom","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":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,KADF,EAEEC,UAFF,EAGEC,IAHF,EAIEC,IAJF,EAKEC,QALF,EAMEC,wBANF,EAOEC,oBAPF,QAQO,cARP;AAUA,SACEC,MADF,EAEEC,UAFF,EAIEC,OAJF,EAKEC,QALF,QAMO,oBANP;AAQA,OAAOC,UAAP,MAAuB,cAAvB;AACA,SACEC,UADF,EAEEC,oBAFF,EAGEC,UAHF,EAMEC,iBANF,QAOO,aAPP;AASA,MAAMC,qBAMH,GAAG,CACJ,UADI,EAEJ,sBAFI,EAGJ,WAHI,EAIJ,gBAJI,EAKJ,iBALI,CANN;AAcA,OAAO,SAASC,eAAT,OA4BJ;EAAA;;EAAA,IA5B6B;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,CA4B7B;EACD,MAAMC,KAAK,GAAGrB,QAAQ,EAAtB;EAEA,IAAIsB,QAAJ;EACA,IAAIC,SAAS,GAAGV,KAAhB;;EAEA,IAAIQ,KAAK,CAACG,IAAV,EAAgB;IACdF,QAAQ,GAAGD,KAAK,CAACI,KAAN,CAAYC,WAAvB;EACD,CAFD,MAEO;IACLJ,QAAQ,GAAID,KAAJ,aAAIA,KAAJ,uBAAIA,KAAD,CAA4BI,KAA5B,CAAkCE,MAA7C;EACD;;EAED,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BxC,KAAK,CAACyC,QAAN,CAChC1B,UAAU,CAAC2B,MADqB,CAAlC;EAGA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB5C,KAAK,CAACyC,QAAN,CAC5B5B,UAAU,CAACS,KADiB,CAA9B;EAGA,MAAM,CAACuB,UAAD,EAAaC,aAAb,IAA8B9C,KAAK,CAACyC,QAAN,CAAuBM,QAAQ,CAACzB,KAAD,CAA/B,CAApC;EACA,MAAM,CAAC0B,YAAD,EAAeC,eAAf,IAAkCjD,KAAK,CAACyC,QAAN,CACtCS,UAAU,CAAC3B,OAAD,CAD4B,CAAxC;;EAIA,IAAIgB,SAAS,KAAKxB,UAAU,CAACoC,QAAzB,IAAqC,CAAC3B,KAA1C,EAAiD;IAC/CU,SAAS,GAAG,YAAZ;EACD;;EAEDlC,KAAK,CAACoD,SAAN,CAAgB,MAAM;IACpBN,aAAa,CAACC,QAAQ,CAACzB,KAAD,CAAT,CAAb;EACD,CAFD,EAEG,CAACwB,aAAD,EAAgBxB,KAAhB,CAFH;EAIAtB,KAAK,CAACoD,SAAN,CAAgB,MAAM;IACpBH,eAAe,CAACC,UAAU,CAAC3B,OAAD,CAAX,CAAf;EACD,CAFD,EAEG,CAAC0B,eAAD,EAAkB1B,OAAlB,CAFH;EAIA,MAAM8B,YAAY,GAAGrD,KAAK,CAACsD,WAAN,CAClBC,IAAD,IAA8BX,UAAU,CAACW,IAAD,CADrB,EAEnB,EAFmB,CAArB;EAIA,MAAMC,QAAQ,GAAGxD,KAAK,CAACsD,WAAN,CACdG,MAAD,IAIM;IACJ,IAAIA,MAAM,CAACd,OAAX,EAAoB;MAClBC,UAAU,CAACa,MAAM,CAACd,OAAR,CAAV;IACD;;IAEDG,aAAa,CAACW,MAAM,CAACnC,KAAR,CAAb;IACA2B,eAAe,CAACQ,MAAM,CAAClC,OAAR,CAAf;EACD,CAZc,EAaf,CAACqB,UAAD,EAAaE,aAAb,EAA4BG,eAA5B,CAbe,CAAjB;EAeA,oBACE,oBAAC,KAAD;IACE,aAAa,EAAErB,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,wBAAD;IAA0B,OAAO,EAAEG;EAAnC,gBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLlB,UAAU,CAACwD,YADN,EAELC,MAAM,CAACC,eAFF,EAGL;MAAEC,eAAe,mBAAE7B,KAAK,CAAC8B,MAAR,kDAAE,cAAcC;IAAjC,CAHK;EADT,EADF,CADF,eAUE,oBAAC,IAAD;IACE,KAAK,EAAE,CAAC7D,UAAU,CAACwD,YAAZ,EAA0BC,MAAM,CAACK,SAAjC,CADT;IAEE,aAAa,EAAC;EAFhB,gBAIE,oBAAC,oBAAD;IACE,KAAK,EAAEL,MAAM,CAACM,YADhB;IAEE,QAAQ,EAAE;EAFZ,gBAIE,oBAAC,QAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACLN,MAAM,CAACO,YADF,EAEL;MACEL,eAAe,EACb7B,KAAK,CAACmC,IAAN,IAAcnC,KAAK,CAACG,IAApB,GACIH,KAAK,CAAC8B,MAAN,CAAaM,SAAb,CAAuBC,MAD3B,GAEIrC,KAAK,CAACG,IAAN,GACAH,KAAK,CAAC8B,MAAN,CAAaQ,OADb,GAEAtC,KAAK,CAACmC,IAAN,GACAzD,OAAO,CAAC,EAAD,EAAKsB,KAAK,CAAC8B,MAAN,CAAaQ,OAAlB,CADP,GAEAtC,KAAK,CAAC8B,MAAN,CAAaQ,OARrB;MASEC,YAAY,EAAEvC,KAAK,CAACG,IAAN,GACVH,KAAK,CAACwC,SAAN,GAAkB,CADR,GAEVxC,KAAK,CAACwC;IAXZ,CAFK;EADT,gBAkBE,oBAAC,IAAD;IAAM,KAAK,EAAEb,MAAM,CAACc;EAApB,gBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLd,MAAM,CAACnC,KADF,EAEL,EACE,GAAGS,QADL;MAEEyC,KAAK,EAAE1C,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEG,IAAP,GACHH,KAAK,CAAC8B,MAAN,CAAaa,gBADV,GAEF3C,KAAD,CAA2B8B,MAA3B,CAAkCc;IAJxC,CAFK;EADT,GAWGnD,SAAS,GAAGS,SAAS,CAAC2C,WAAV,EAAH,GAA6B3C,SAXzC,CADF,CAlBF,eAiCE,oBAAC,IAAD;IAAM,KAAK,EAAEyB,MAAM,CAACmB;EAApB,gBACE,oBAAC,UAAD;IACE,MAAM,EAAEjD,MADV;IAEE,SAAS,EAAEU,SAFb;IAGE,OAAO,EAAEI,OAHX;IAIE,KAAK,EAAEE,UAJT;IAKE,OAAO,EAAEG,YALX;IAME,QAAQ,EAAEQ,QANZ;IAOE,YAAY,EAAEH;EAPhB,EADF,CAjCF,eA4CE,oBAAC,IAAD;IAAM,KAAK,EAAEM,MAAM,CAACoB;EAApB,gBACE,oBAAC,UAAD;IACE,IAAI,EAAEjE,oBAAoB,CAACyB,SAAD,EAAY;MACpCY,QAAQ,EAAErB,YAD0B;MAEpCY,MAAM,EAAEX;IAF4B,CAAZ,CAD5B;IAKE,OAAO,EAAE,MAAMS,YAAY,CAACxB,iBAAiB,CAACuB,SAAD,CAAlB,CAL7B;IAME,IAAI,EAAE,EANR;IAOE,KAAK,EAAEoB,MAAM,CAACqB,eAPhB;IAQE,kBAAkB,EAAC;EARrB,EADF,eAWE,oBAAC,IAAD;IAAM,KAAK,EAAErB,MAAM,CAACsB;EAApB,EAXF,eAYE,oBAAC,MAAD;IAAQ,OAAO,EAAE7D,SAAjB;IAA4B,SAAS,EAAEK;EAAvC,GACGC,WADH,CAZF,eAeE,oBAAC,MAAD;IACE,OAAO,EAAE,MACPL,SAAS,CAAC;MAAEC,KAAK,EAAEuB,UAAT;MAAqBtB,OAAO,EAAEyB;IAA9B,CAAD,CAFb;IAIE,SAAS,EAAEvB;EAJb,GAMGE,YANH,CAfF,CA5CF,CAJF,CAJF,CAVF,CATF,CADF;AAsGD;;AAED,SAASuB,UAAT,CAAoB3B,OAApB,EAAgE;EAC9D,OAAOA,OAAO,KAAK2D,SAAZ,IAAyB3D,OAAO,KAAK,IAArC,GACH,IAAI4D,IAAJ,GAAWjC,UAAX,EADG,GAEH3B,OAFJ;AAGD;;AACD,SAASwB,QAAT,CAAkBzB,KAAlB,EAA4D;EAC1D,OAAOA,KAAK,KAAK4D,SAAV,IAAuB5D,KAAK,KAAK,IAAjC,GAAwC,IAAI6D,IAAJ,GAAWpC,QAAX,EAAxC,GAAgEzB,KAAvE;AACD;;AAED,MAAMqC,MAAM,GAAGzD,UAAU,CAACkF,MAAX,CAAkB;EAC/BpB,SAAS,EAAE;IACTqB,cAAc,EAAE,QADP;IAETC,UAAU,EAAE,QAFH;IAGTC,IAAI,EAAE;EAHG,CADoB;EAM/BtB,YAAY,EAAE;IACZoB,cAAc,EAAE,QADJ;IAEZC,UAAU,EAAE,QAFA;IAGZC,IAAI,EAAE;EAHM,CANiB;EAW/B3B,eAAe,EAAE;IACf2B,IAAI,EAAE;EADS,CAXc;EAc/BrB,YAAY,EAAE;IACZsB,WAAW,EAAE,MADD;IAEZC,YAAY,EAAE;MACZC,KAAK,EAAE,CADK;MAEZC,MAAM,EAAE;IAFI,CAFF;IAMZC,aAAa,EAAE,IANH;IAOZC,YAAY,EAAE,IAPF;IAQZzB,SAAS,EAAE,CARC;IASZ0B,QAAQ,EAAE,GATE;IAUZC,eAAe,EAAE;EAVL,CAdiB;EA0B/BtB,cAAc,EAAE;IACdY,cAAc,EAAE,UADF;IAEdW,WAAW,EAAE,EAFC;IAGdC,YAAY,EAAE,EAHA;IAIdC,UAAU,EAAE;EAJE,CA1Be;EAgC/B1E,KAAK,EAAE;IACL2E,aAAa,EAAE,CADV;IAELC,QAAQ,EAAE;EAFL,CAhCwB;EAoC/BtB,mBAAmB,EAAE;IACnBkB,WAAW,EAAE,EADM;IAEnBE,UAAU,EAAE,EAFO;IAGnBG,aAAa,EAAE,EAHI;IAInBJ,YAAY,EAAE;EAJK,CApCU;EA0C/BlB,MAAM,EAAE;IACNuB,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;AAmDA,4BAAevF,KAAK,CAACyG,IAAN,CAAWvF,eAAX,CAAf"}