react-native-paper-dates 0.9.1 → 0.10.0

package/src/Date/Swiper.tsx

@@ -157,7 +157,6 @@ function VerticalScroller({
               right: 0,
               position: 'absolute',
               height: getMonthHeight('vertical', visibleIndexes[vi]),
-              // transform: `translateY(${getMonthsOffset('vertical', vi)}px)`,
             }}
           >
             {renderItem({

package/src/Date/YearPicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
-import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../utils'
 
 const ITEM_HEIGHT = 62
@@ -20,7 +20,10 @@ export default function YearPicker({
 }) {
   const theme = useTheme()
   const flatList = React.useRef<FlatList<number> | null>(null)
-  const years = range(isNaN(startYear) ? 1800 : startYear, isNaN(endYear) ? 2200 : endYear)
+  const years = range(
+    isNaN(startYear) ? 1800 : startYear,
+    isNaN(endYear) ? 2200 : endYear
+  )
 
   // scroll to selected year
   React.useEffect(() => {
@@ -31,7 +34,7 @@ export default function YearPicker({
         animated: false,
       })
     }
-  }, [flatList, selectedYear])
+  }, [flatList, selectedYear, startYear])
 
   return (
     <View
@@ -71,6 +74,11 @@ function YearPure({
   onPressYear: (newYear: number) => any
 }) {
   const theme = useTheme()
+
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyLarge
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={styles.year}>
       <TouchableRipple
@@ -86,7 +94,11 @@ function YearPure({
           ]}
         >
           <Text
-            style={[styles.yearLabel, selected ? styles.selectedYear : null]}
+            style={[
+              styles.yearLabel,
+              selected ? styles.selectedYear : null,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {year}

package/src/TextInputMask.tsx

@@ -72,7 +72,7 @@ function TextInputWithMask(
     value,
     mask,
     ...rest
-  }: React.ComponentProps<typeof TextInput> & { mask: string },
+  }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
   ref: any
 ) {
   const [controlledValue, setControlledValue] = React.useState<string>(
@@ -80,12 +80,15 @@ function TextInputWithMask(
   )
 
   const onInnerChange = (text: string) => {
-    const enhancedText = enhanceTextWithMask(text, mask, controlledValue)
-    setControlledValue(enhancedText)
-
     if (text.length === mask.length) {
       onChangeText && onChangeText(text)
     }
+    setControlledValue(text)
+  }
+
+  const onInnerBlur = () => {
+    const enhancedText = enhanceTextWithMask(value, mask, controlledValue)
+    setControlledValue(enhancedText)
   }
 
   React.useEffect(() => {
@@ -98,6 +101,7 @@ function TextInputWithMask(
       {...rest}
       value={controlledValue}
       onChangeText={onInnerChange}
+      onBlur={onInnerBlur}
     />
   )
 }

package/src/Time/AmPmSwitcher.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { useMemo } from 'react'
 import Color from 'color'
 import { useSwitchColors } from './timeUtils'
@@ -19,7 +19,11 @@ export default function AmPmSwitcher({
     if (theme.dark) {
       return Color(theme.colors.surface).lighten(1.2).hex()
     }
-    return Color(theme.colors.surface).darken(0.1).hex()
+    return Color(
+      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface
+    )
+      .darken(0.1)
+      .hex()
   }, [theme])
 
   const isAM = mode === 'AM'
@@ -74,6 +78,10 @@ function SwitchButton({
   const theme = useTheme()
   const { backgroundColor, color } = useSwitchColors(selected)
 
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <TouchableRipple
       onPress={onPress}
@@ -92,7 +100,7 @@ function SwitchButton({
           selectable={false}
           style={[
             {
-              ...theme.fonts.medium,
+              ...textFont,
               color: color,
             },
           ]}

package/src/Time/AnalogClock.tsx

@@ -128,7 +128,9 @@ function AnalogClock({
         styles.clock,
         {
           backgroundColor: theme.dark
-            ? Color(theme.colors.surface).lighten(1.2).hex()
+            ? Color(theme.colors.surface).lighten(1.4).hex()
+            : theme.isV3
+            ? Color(theme.colors.outline).lighten(0.9).hex()
             : Color(theme.colors.surface).darken(0.1).hex(),
         },
       ]}

package/src/Time/TimeInputs.tsx

@@ -8,7 +8,7 @@ import {
   useWindowDimensions,
   TextInput as TextInputNative,
 } from 'react-native'
-import { useTheme } from 'react-native-paper'
+import { MD2Theme, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
@@ -20,6 +20,7 @@ import {
 import TimeInput from './TimeInput'
 import AmPmSwitcher from './AmPmSwitcher'
 import { useLatest } from '../utils'
+import Color from 'color'
 
 function TimeInputs({
   hours,
@@ -85,6 +86,11 @@ function TimeInputs({
         pressed={focused === clockTypes.hours}
         onPress={onFocusInput}
         inputType={inputType}
+        selectionColor={
+          theme.dark
+            ? Color(theme.colors.primary).darken(0.2).hex()
+            : theme.colors.primary
+        }
         returnKeyType={'next'}
         onSubmitEditing={onSubmitStartInput}
         blurOnSubmit={false}
@@ -98,13 +104,30 @@ function TimeInputs({
             minutes,
           })
         }}
-        // onChangeText={onChangeStartInput}
       />
       <View style={styles.hoursAndMinutesSeparator}>
         <View style={styles.spaceDot} />
-        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />
+        <View
+          style={[
+            styles.dot,
+            {
+              backgroundColor: theme?.isV3
+                ? theme.colors.onBackground
+                : (theme as any as MD2Theme).colors.text,
+            },
+          ]}
+        />
         <View style={styles.betweenDot} />
-        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />
+        <View
+          style={[
+            styles.dot,
+            {
+              backgroundColor: theme?.isV3
+                ? theme.colors.onBackground
+                : (theme as any as MD2Theme).colors.text,
+            },
+          ]}
+        />
         <View style={styles.spaceDot} />
       </View>
       <TimeInput
@@ -115,6 +138,11 @@ function TimeInputs({
         pressed={focused === clockTypes.minutes}
         onPress={onFocusInput}
         inputType={inputType}
+        selectionColor={
+          theme.dark
+            ? Color(theme.colors.primary).darken(0.2).hex()
+            : theme.colors.primary
+        }
         onSubmitEditing={onSubmitEndInput}
         onChanged={(newMinutesFromInput) => {
           let newMinutes = newMinutesFromInput

package/src/Time/TimePicker.tsx

@@ -117,7 +117,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 24 * 3 + 96 * 2 + 52 + circleSize,
   },
-  rootPortrait: {},
+  rootPortrait: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },
 })
 

package/src/Time/TimePickerModal.tsx

@@ -9,7 +9,14 @@ import {
   KeyboardAvoidingView,
 } from 'react-native'
 
-import { Button, IconButton, overlay, useTheme } from 'react-native-paper'
+import {
+  Button,
+  IconButton,
+  MD2Theme,
+  overlay,
+  useTheme,
+} from 'react-native-paper'
+
 import TimePicker from './TimePicker'
 import {
   clockTypes,
@@ -59,6 +66,14 @@ export function TimePickerModal({
 }) {
   const theme = useTheme()
 
+  let textFont
+
+  if (theme.isV3) {
+    textFont = theme.fonts.bodyMedium
+  } else {
+    textFont = (theme as any as MD2Theme)?.fonts.medium
+  }
+
   const [inputType, setInputType] = React.useState<PossibleInputTypes>(
     inputTypes.picker
   )
@@ -114,7 +129,7 @@ export function TimePickerModal({
             style={[
               StyleSheet.absoluteFill,
               styles.modalBackground,
-              { backgroundColor: theme.colors.backdrop },
+              { backgroundColor: theme.colors?.backdrop },
             ]}
           />
         </TouchableWithoutFeedback>
@@ -139,7 +154,17 @@ export function TimePickerModal({
               ]}
             >
               <View style={styles.labelContainer}>
-                <Text style={[styles.label, { color: theme.colors.text }]}>
+                <Text
+                  style={[
+                    styles.label,
+                    {
+                      ...textFont,
+                      color: theme?.isV3
+                        ? theme.colors.onBackground
+                        : (theme as any as MD2Theme).colors.text,
+                    },
+                  ]}
+                >
                   {uppercase ? label.toUpperCase() : label}
                 </Text>
               </View>
@@ -225,6 +250,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     paddingLeft: 24,
     paddingRight: 24,
+    marginTop: 8,
   },
   label: {
     letterSpacing: 1,

package/src/Time/timeUtils.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Color from 'color'
-import { useTheme } from 'react-native-paper'
+import { MD2Theme, useTheme } from 'react-native-paper'
 
 // 250? when bigger?
 export const circleSize = 215
@@ -163,10 +163,17 @@ export function useSwitchColors(highlighted: boolean) {
       if (highlighted) {
         return Color(theme.colors.primary).hex()
       }
+      if (theme.isV3) {
+        return Color(theme.colors.surface).lighten(1.4).hex()
+      }
       return theme.colors.backdrop
     }
 
     if (highlighted) {
+      if (theme.isV3) {
+        return theme.colors.primaryContainer
+      }
+
       return Color(theme.colors.primary).lighten(1).hex()
     }
     return theme.colors.surface
@@ -176,7 +183,14 @@ export function useSwitchColors(highlighted: boolean) {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-    return theme.colors.placeholder
+    if (highlighted && theme.dark) {
+      return theme.colors.background
+    }
+    if (theme.isV3) {
+      return theme.colors.onSurfaceVariant
+    } else {
+      return (theme as any as MD2Theme).colors.placeholder
+    }
   }, [highlighted, theme])
 
   return { backgroundColor, color }
@@ -189,12 +203,18 @@ export function useInputColors(highlighted: boolean) {
       if (highlighted) {
         return Color(theme.colors.primary).hex()
       }
-      return Color(theme.colors.surface).lighten(1.2).hex()
+      return Color(theme.colors.surface).lighten(1.4).hex()
     }
 
     if (highlighted) {
+      if (theme.isV3) {
+        return Color(theme.colors.primaryContainer).hex()
+      }
       return Color(theme.colors.primary).lighten(1).hex()
     }
+    if (theme.isV3) {
+      return Color(theme.colors.outline).lighten(0.9).hex()
+    }
     return Color(theme.colors.surface).darken(0.1).hex()
   }, [highlighted, theme])
 
@@ -202,7 +222,14 @@ export function useInputColors(highlighted: boolean) {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-    return theme.colors.text
+    if (theme.isV3) {
+      if (!highlighted) {
+        return theme.colors.onBackground
+      }
+      return theme.colors.background
+    } else {
+      return (theme as any as MD2Theme).colors.text
+    }
   }, [highlighted, theme])
 
   return { backgroundColor, color }

package/src/translations/utils.ts

@@ -26,14 +26,14 @@ export function getTranslation<K extends keyof TranslationsType>(
   const translationForLocale = translationsPerLocale[l]
   if (!translationForLocale) {
     console.warn(
-      `[react-native-paper-dates] ${locale} is not registered, key: ${key}`
+      `[react-native-paper-dates] The locale ${locale} is not registered, see README!, key: ${key}`
     )
     return fallback || key
   }
   const translation = translationsPerLocale[l][key]
   if (!translation) {
     console.warn(
-      `[react-native-paper-dates] ${locale} is registered, but ${key} is missing`
+      `[react-native-paper-dates] The locale ${locale} is registered, but ${key} is missing`
     )
   }
   return translation || fallback || key

package/src/utils.ts

@@ -1,7 +1,14 @@
 import * as React from 'react'
-import { overlay, useTheme } from 'react-native-paper'
+import {
+  DefaultTheme,
+  MD3DarkTheme,
+  overlay,
+  useTheme,
+} from 'react-native-paper'
 import Color from 'color'
 
+export type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme
+
 export function useLatest<T>(value: T) {
   const ref = React.useRef(value)
   ref.current = value

package/lib/commonjs/Date/DateRangeInput.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DateRangeInput;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _reactNativePaper = require("react-native-paper");
-
-var _DatePickerModal = _interopRequireDefault(require("./DatePickerModal"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// WORK IN PROGRESS
-function DateRangeInput(_ref) {
-  let {
-    locale,
-    calendarIcon = 'calendar'
-  } = _ref;
-  const [visible, setVisible] = React.useState(false);
-  const onDismiss = React.useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-  const onConfirm = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _ref2 => {
-    let {
-      startDate,
-      endDate
-    } = _ref2;
-    setVisible(false);
-    console.log({
-      startDate,
-      endDate
-    });
-  }, [setVisible]);
-  return /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(_reactNativePaper.Text, null, "Van")), /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
-    style: {
-      fontSize: 16,
-      marginLeft: 12,
-      marginRight: 12
-    }
-  }, "to"), /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
-    style: {
-      opacity: 0
-    },
-    accessible: false
-  }, "tot")), /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(_reactNativePaper.Text, null, "Tot")), /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNativePaper.IconButton, {
-    icon: calendarIcon,
-    onPress: () => setVisible(true)
-  }), /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
-    style: {
-      opacity: 0
-    },
-    accessible: false
-  }, "tot")), /*#__PURE__*/React.createElement(_DatePickerModal.default, {
-    locale: locale,
-    mode: "range",
-    visible: visible,
-    onDismiss: onDismiss,
-    onConfirm: onConfirm,
-    startDate: undefined,
-    endDate: undefined
-  }));
-}
-//# sourceMappingURL=DateRangeInput.js.map

package/lib/commonjs/Date/DateRangeInput.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DateRangeInput","locale","calendarIcon","visible","setVisible","React","useState","onDismiss","useCallback","onConfirm","startDate","endDate","console","log","flexDirection","alignItems","flex","fontSize","marginLeft","marginRight","opacity","undefined"],"sources":["DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View } from 'react-native'\nimport { Text, IconButton } from 'react-native-paper'\n\nimport DatePickerModal from './DatePickerModal'\n\n// WORK IN PROGRESS\nexport default function DateRangeInput({\n  locale,\n  calendarIcon = 'calendar',\n}: {\n  locale: string\n  calendarIcon?: string\n}) {\n  const [visible, setVisible] = React.useState<boolean>(false)\n  const onDismiss = React.useCallback(() => {\n    setVisible(false)\n  }, [setVisible])\n  const onConfirm = React.useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    ({ startDate, endDate }: { startDate: any; endDate: any }) => {\n      setVisible(false)\n      console.log({ startDate, endDate })\n    },\n    [setVisible]\n  )\n\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center' }}>\n      <View style={{ flex: 1 }}>\n        {/*<DatePickerInput*/}\n        {/*  value={''}*/}\n        {/*  keyboardType={'numeric'}*/}\n        {/*  placeholder={'DD-MM-YYY'}*/}\n        {/*  mask={'DD-MM-YYY'}*/}\n        {/*  onChangeText={() => {}}*/}\n        {/*/>*/}\n        <Text>Van</Text>\n      </View>\n      <View>\n        <Text style={{ fontSize: 16, marginLeft: 12, marginRight: 12 }}>\n          to\n        </Text>\n        <Text style={{ opacity: 0 }} accessible={false}>\n          tot\n        </Text>\n      </View>\n      <View style={{ flex: 1 }}>\n        {/*<DatePickerInput*/}\n        {/*  // value={''}*/}\n        {/*  // keyboardType={'numeric'}*/}\n        {/*  // placeholder={'DD-MM-YYY'}*/}\n        {/*  // mask={'DD-MM-YYY'}*/}\n        {/*  // onChangeText={() => {}}*/}\n        {/*/>*/}\n        <Text>Tot</Text>\n      </View>\n      <View>\n        <IconButton icon={calendarIcon} onPress={() => setVisible(true)} />\n        <Text style={{ opacity: 0 }} accessible={false}>\n          tot\n        </Text>\n      </View>\n      <DatePickerModal\n        locale={locale}\n        mode=\"range\"\n        visible={visible}\n        onDismiss={onDismiss}\n        onConfirm={onConfirm}\n        startDate={undefined}\n        endDate={undefined}\n      />\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAEA;AACe,SAASA,cAAT,OAMZ;EAAA,IANoC;IACrCC,MADqC;IAErCC,YAAY,GAAG;EAFsB,CAMpC;EACD,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA9B;EACA,MAAMC,SAAS,GAAGF,KAAK,CAACG,WAAN,CAAkB,MAAM;IACxCJ,UAAU,CAAC,KAAD,CAAV;EACD,CAFiB,EAEf,CAACA,UAAD,CAFe,CAAlB;EAGA,MAAMK,SAAS,GAAGJ,KAAK,CAACG,WAAN,EAChB;EACA,SAA8D;IAAA,IAA7D;MAAEE,SAAF;MAAaC;IAAb,CAA6D;IAC5DP,UAAU,CAAC,KAAD,CAAV;IACAQ,OAAO,CAACC,GAAR,CAAY;MAAEH,SAAF;MAAaC;IAAb,CAAZ;EACD,CALe,EAMhB,CAACP,UAAD,CANgB,CAAlB;EASA,oBACE,oBAAC,iBAAD;IAAM,KAAK,EAAE;MAAEU,aAAa,EAAE,KAAjB;MAAwBC,UAAU,EAAE;IAApC;EAAb,gBACE,oBAAC,iBAAD;IAAM,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAR;EAAb,gBAQE,oBAAC,sBAAD,cARF,CADF,eAWE,oBAAC,iBAAD,qBACE,oBAAC,sBAAD;IAAM,KAAK,EAAE;MAAEC,QAAQ,EAAE,EAAZ;MAAgBC,UAAU,EAAE,EAA5B;MAAgCC,WAAW,EAAE;IAA7C;EAAb,QADF,eAIE,oBAAC,sBAAD;IAAM,KAAK,EAAE;MAAEC,OAAO,EAAE;IAAX,CAAb;IAA6B,UAAU,EAAE;EAAzC,SAJF,CAXF,eAmBE,oBAAC,iBAAD;IAAM,KAAK,EAAE;MAAEJ,IAAI,EAAE;IAAR;EAAb,gBAQE,oBAAC,sBAAD,cARF,CAnBF,eA6BE,oBAAC,iBAAD,qBACE,oBAAC,4BAAD;IAAY,IAAI,EAAEd,YAAlB;IAAgC,OAAO,EAAE,MAAME,UAAU,CAAC,IAAD;EAAzD,EADF,eAEE,oBAAC,sBAAD;IAAM,KAAK,EAAE;MAAEgB,OAAO,EAAE;IAAX,CAAb;IAA6B,UAAU,EAAE;EAAzC,SAFF,CA7BF,eAmCE,oBAAC,wBAAD;IACE,MAAM,EAAEnB,MADV;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAEE,OAHX;IAIE,SAAS,EAAEI,SAJb;IAKE,SAAS,EAAEE,SALb;IAME,SAAS,EAAEY,SANb;IAOE,OAAO,EAAEA;EAPX,EAnCF,CADF;AA+CD"}

package/lib/module/Date/DateRangeInput.js

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { Text, IconButton } from 'react-native-paper';
-import DatePickerModal from './DatePickerModal'; // WORK IN PROGRESS
-
-export default function DateRangeInput(_ref) {
-  let {
-    locale,
-    calendarIcon = 'calendar'
-  } = _ref;
-  const [visible, setVisible] = React.useState(false);
-  const onDismiss = React.useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-  const onConfirm = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _ref2 => {
-    let {
-      startDate,
-      endDate
-    } = _ref2;
-    setVisible(false);
-    console.log({
-      startDate,
-      endDate
-    });
-  }, [setVisible]);
-  return /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, null, "Van")), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
-    style: {
-      fontSize: 16,
-      marginLeft: 12,
-      marginRight: 12
-    }
-  }, "to"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      opacity: 0
-    },
-    accessible: false
-  }, "tot")), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, null, "Tot")), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(IconButton, {
-    icon: calendarIcon,
-    onPress: () => setVisible(true)
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      opacity: 0
-    },
-    accessible: false
-  }, "tot")), /*#__PURE__*/React.createElement(DatePickerModal, {
-    locale: locale,
-    mode: "range",
-    visible: visible,
-    onDismiss: onDismiss,
-    onConfirm: onConfirm,
-    startDate: undefined,
-    endDate: undefined
-  }));
-}
-//# sourceMappingURL=DateRangeInput.js.map

package/lib/module/Date/DateRangeInput.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","Text","IconButton","DatePickerModal","DateRangeInput","locale","calendarIcon","visible","setVisible","useState","onDismiss","useCallback","onConfirm","startDate","endDate","console","log","flexDirection","alignItems","flex","fontSize","marginLeft","marginRight","opacity","undefined"],"sources":["DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View } from 'react-native'\nimport { Text, IconButton } from 'react-native-paper'\n\nimport DatePickerModal from './DatePickerModal'\n\n// WORK IN PROGRESS\nexport default function DateRangeInput({\n  locale,\n  calendarIcon = 'calendar',\n}: {\n  locale: string\n  calendarIcon?: string\n}) {\n  const [visible, setVisible] = React.useState<boolean>(false)\n  const onDismiss = React.useCallback(() => {\n    setVisible(false)\n  }, [setVisible])\n  const onConfirm = React.useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    ({ startDate, endDate }: { startDate: any; endDate: any }) => {\n      setVisible(false)\n      console.log({ startDate, endDate })\n    },\n    [setVisible]\n  )\n\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center' }}>\n      <View style={{ flex: 1 }}>\n        {/*<DatePickerInput*/}\n        {/*  value={''}*/}\n        {/*  keyboardType={'numeric'}*/}\n        {/*  placeholder={'DD-MM-YYY'}*/}\n        {/*  mask={'DD-MM-YYY'}*/}\n        {/*  onChangeText={() => {}}*/}\n        {/*/>*/}\n        <Text>Van</Text>\n      </View>\n      <View>\n        <Text style={{ fontSize: 16, marginLeft: 12, marginRight: 12 }}>\n          to\n        </Text>\n        <Text style={{ opacity: 0 }} accessible={false}>\n          tot\n        </Text>\n      </View>\n      <View style={{ flex: 1 }}>\n        {/*<DatePickerInput*/}\n        {/*  // value={''}*/}\n        {/*  // keyboardType={'numeric'}*/}\n        {/*  // placeholder={'DD-MM-YYY'}*/}\n        {/*  // mask={'DD-MM-YYY'}*/}\n        {/*  // onChangeText={() => {}}*/}\n        {/*/>*/}\n        <Text>Tot</Text>\n      </View>\n      <View>\n        <IconButton icon={calendarIcon} onPress={() => setVisible(true)} />\n        <Text style={{ opacity: 0 }} accessible={false}>\n          tot\n        </Text>\n      </View>\n      <DatePickerModal\n        locale={locale}\n        mode=\"range\"\n        visible={visible}\n        onDismiss={onDismiss}\n        onConfirm={onConfirm}\n        startDate={undefined}\n        endDate={undefined}\n      />\n    </View>\n  )\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,IAAT,EAAeC,UAAf,QAAiC,oBAAjC;AAEA,OAAOC,eAAP,MAA4B,mBAA5B,C,CAEA;;AACA,eAAe,SAASC,cAAT,OAMZ;EAAA,IANoC;IACrCC,MADqC;IAErCC,YAAY,GAAG;EAFsB,CAMpC;EACD,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBT,KAAK,CAACU,QAAN,CAAwB,KAAxB,CAA9B;EACA,MAAMC,SAAS,GAAGX,KAAK,CAACY,WAAN,CAAkB,MAAM;IACxCH,UAAU,CAAC,KAAD,CAAV;EACD,CAFiB,EAEf,CAACA,UAAD,CAFe,CAAlB;EAGA,MAAMI,SAAS,GAAGb,KAAK,CAACY,WAAN,EAChB;EACA,SAA8D;IAAA,IAA7D;MAAEE,SAAF;MAAaC;IAAb,CAA6D;IAC5DN,UAAU,CAAC,KAAD,CAAV;IACAO,OAAO,CAACC,GAAR,CAAY;MAAEH,SAAF;MAAaC;IAAb,CAAZ;EACD,CALe,EAMhB,CAACN,UAAD,CANgB,CAAlB;EASA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAES,aAAa,EAAE,KAAjB;MAAwBC,UAAU,EAAE;IAApC;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAR;EAAb,gBAQE,oBAAC,IAAD,cARF,CADF,eAWE,oBAAC,IAAD,qBACE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEC,QAAQ,EAAE,EAAZ;MAAgBC,UAAU,EAAE,EAA5B;MAAgCC,WAAW,EAAE;IAA7C;EAAb,QADF,eAIE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEC,OAAO,EAAE;IAAX,CAAb;IAA6B,UAAU,EAAE;EAAzC,SAJF,CAXF,eAmBE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEJ,IAAI,EAAE;IAAR;EAAb,gBAQE,oBAAC,IAAD,cARF,CAnBF,eA6BE,oBAAC,IAAD,qBACE,oBAAC,UAAD;IAAY,IAAI,EAAEb,YAAlB;IAAgC,OAAO,EAAE,MAAME,UAAU,CAAC,IAAD;EAAzD,EADF,eAEE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEe,OAAO,EAAE;IAAX,CAAb;IAA6B,UAAU,EAAE;EAAzC,SAFF,CA7BF,eAmCE,oBAAC,eAAD;IACE,MAAM,EAAElB,MADV;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAEE,OAHX;IAIE,SAAS,EAAEG,SAJb;IAKE,SAAS,EAAEE,SALb;IAME,SAAS,EAAEY,SANb;IAOE,OAAO,EAAEA;EAPX,EAnCF,CADF;AA+CD"}

package/lib/typescript/Date/DateRangeInput.d.ts

@@ -1,4 +0,0 @@
-export default function DateRangeInput({ locale, calendarIcon, }: {
-    locale: string;
-    calendarIcon?: string;
-}): JSX.Element;

package/src/Date/DateRangeInput.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react'
-import { View } from 'react-native'
-import { Text, IconButton } from 'react-native-paper'
-
-import DatePickerModal from './DatePickerModal'
-
-// WORK IN PROGRESS
-export default function DateRangeInput({
-  locale,
-  calendarIcon = 'calendar',
-}: {
-  locale: string
-  calendarIcon?: string
-}) {
-  const [visible, setVisible] = React.useState<boolean>(false)
-  const onDismiss = React.useCallback(() => {
-    setVisible(false)
-  }, [setVisible])
-  const onConfirm = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ({ startDate, endDate }: { startDate: any; endDate: any }) => {
-      setVisible(false)
-      console.log({ startDate, endDate })
-    },
-    [setVisible]
-  )
-
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <View style={{ flex: 1 }}>
-        {/*<DatePickerInput*/}
-        {/*  value={''}*/}
-        {/*  keyboardType={'numeric'}*/}
-        {/*  placeholder={'DD-MM-YYY'}*/}
-        {/*  mask={'DD-MM-YYY'}*/}
-        {/*  onChangeText={() => {}}*/}
-        {/*/>*/}
-        <Text>Van</Text>
-      </View>
-      <View>
-        <Text style={{ fontSize: 16, marginLeft: 12, marginRight: 12 }}>
-          to
-        </Text>
-        <Text style={{ opacity: 0 }} accessible={false}>
-          tot
-        </Text>
-      </View>
-      <View style={{ flex: 1 }}>
-        {/*<DatePickerInput*/}
-        {/*  // value={''}*/}
-        {/*  // keyboardType={'numeric'}*/}
-        {/*  // placeholder={'DD-MM-YYY'}*/}
-        {/*  // mask={'DD-MM-YYY'}*/}
-        {/*  // onChangeText={() => {}}*/}
-        {/*/>*/}
-        <Text>Tot</Text>
-      </View>
-      <View>
-        <IconButton icon={calendarIcon} onPress={() => setVisible(true)} />
-        <Text style={{ opacity: 0 }} accessible={false}>
-          tot
-        </Text>
-      </View>
-      <DatePickerModal
-        locale={locale}
-        mode="range"
-        visible={visible}
-        onDismiss={onDismiss}
-        onConfirm={onConfirm}
-        startDate={undefined}
-        endDate={undefined}
-      />
-    </View>
-  )
-}