react-native-paper-dates 0.4.5 → 0.6.0

package/src/Date/CalendarEdit.tsx

@@ -6,11 +6,10 @@ import {
   Keyboard,
 } from 'react-native'
 
-import { CalendarDate, ModeType, ValidRangeType } from './Calendar'
-import { LocalState } from './DatePickerModalContent'
-import TextInputWithMask from '../TextInputMask'
-import { HelperText, useTheme } from 'react-native-paper'
-import { dateToUnix, isDateWithinOptionalRange } from './dateUtils'
+import type { ModeType, ValidRangeType } from './Calendar'
+import type { LocalState } from './DatePickerModalContent'
+
+import DatePickerInput from './DatePickerInput'
 
 function CalendarEdit({
   mode,
@@ -21,6 +20,7 @@ function CalendarEdit({
   collapsed,
   onChange,
   validRange,
+  locale,
 }: {
   mode: ModeType
   label?: string
@@ -30,6 +30,7 @@ function CalendarEdit({
   collapsed: boolean
   onChange: (s: LocalState) => any
   validRange: ValidRangeType | undefined
+  locale: string
 }) {
   const dateInput = React.useRef<TextInputNative | null>(null)
   const startInput = React.useRef<TextInputNative | null>(null)
@@ -77,18 +78,23 @@ function CalendarEdit({
     <View style={styles.root}>
       <View style={styles.inner}>
         {mode === 'single' ? (
-          <CalendarInput
+          <DatePickerInput
+            inputMode="start"
             ref={dateInput}
             label={label}
             value={state.date}
             onChange={(date) => onChange({ ...state, date })}
             onSubmitEditing={onSubmitInput}
             validRange={validRange}
+            locale={locale}
+            withModal={false}
+            autoCompleteType={'off'}
           />
         ) : null}
         {mode === 'range' ? (
           <>
-            <CalendarInput
+            <DatePickerInput
+              inputMode="start"
               ref={startInput}
               label={startLabel}
               value={state.startDate}
@@ -96,16 +102,22 @@ function CalendarEdit({
               returnKeyType={'next'}
               onSubmitEditing={onSubmitStartInput}
               validRange={validRange}
+              locale={locale}
+              withModal={false}
+              autoCompleteType={'off'}
             />
             <View style={styles.separator} />
-            <CalendarInput
+            <DatePickerInput
+              inputMode="end"
               ref={endInput}
               label={endLabel}
               value={state.endDate}
               onChange={(endDate) => onChange({ ...state, endDate })}
-              isEndDate
               onSubmitEditing={onSubmitEndInput}
               validRange={validRange}
+              locale={locale}
+              withModal={false}
+              autoCompleteType={'off'}
             />
           </>
         ) : null}
@@ -114,117 +126,6 @@ function CalendarEdit({
   )
 }
 
-function CalendarInputPure(
-  {
-    label,
-    value,
-    onChange,
-    isEndDate,
-    returnKeyType,
-    onSubmitEditing,
-    locale,
-    validRange,
-  }: {
-    locale?: undefined | string
-    label: string
-    value: CalendarDate
-    onChange: (d: Date | undefined) => any
-    isEndDate?: boolean
-    returnKeyType?: string
-    onSubmitEditing?: () => any
-    validRange: ValidRangeType | undefined
-  },
-  ref: any
-) {
-  const theme = useTheme()
-  const [error, setError] = React.useState<null | string>(null)
-  const formatter = React.useMemo(() => {
-    return new Intl.DateTimeFormat(locale, {
-      month: '2-digit',
-      day: '2-digit',
-      year: 'numeric',
-    })
-  }, [locale])
-
-  const inputFormat = React.useMemo(() => {
-    // TODO: something cleaner and more universal?
-    const inputDate = formatter.format(new Date(2020, 10 - 1, 1))
-    return inputDate
-      .replace('2020', 'YYYY')
-      .replace('10', 'MM')
-      .replace('01', 'DD')
-  }, [formatter])
-
-  const formattedValue = formatter.format(value)
-  const onChangeText = (date: string) => {
-    const dayIndex = inputFormat.indexOf('DD')
-    const monthIndex = inputFormat.indexOf('MM')
-    const yearIndex = inputFormat.indexOf('YYYY')
-
-    const day = Number(date.slice(dayIndex, dayIndex + 2))
-    const year = Number(date.slice(yearIndex, yearIndex + 4))
-    const month = Number(date.slice(monthIndex, monthIndex + 2))
-
-    if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
-      setError(inputFormat)
-      return
-    }
-
-    const finalDate = isEndDate
-      ? new Date(year, month - 1, day, 23, 59, 59)
-      : new Date(year, month - 1, day)
-
-    const validStart = validRange?.startDate
-    const validEnd = validRange?.endDate
-    if (
-      !isDateWithinOptionalRange(finalDate, {
-        startUnix: validStart ? dateToUnix(validStart) : undefined,
-        endUnix: validEnd ? dateToUnix(validEnd) : undefined,
-      })
-    ) {
-      let errors =
-        validStart && validEnd
-          ? [`${formatter.format(validStart)} - ${formatter.format(validEnd)}`]
-          : [
-              validStart ? `> ${formatter.format(validStart)}` : '',
-              validEnd ? `< ${formatter.format(validEnd)}` : '',
-            ]
-      setError(errors.filter((n) => n).join(' '))
-      return
-    }
-
-    setError(null)
-    if (isEndDate) {
-      onChange(finalDate)
-    } else {
-      onChange(finalDate)
-    }
-  }
-  return (
-    <View style={styles.inputContainer}>
-      <TextInputWithMask
-        ref={ref}
-        value={formattedValue}
-        style={styles.input}
-        label={`${label} (${inputFormat})`}
-        keyboardType={'number-pad'}
-        placeholder={inputFormat}
-        mask={inputFormat}
-        onChangeText={onChangeText}
-        returnKeyType={returnKeyType}
-        onSubmitEditing={onSubmitEditing}
-        keyboardAppearance={theme.dark ? 'dark' : 'default'}
-        error={!!error}
-      />
-      <HelperText type="error" visible={!!error}>
-        {error}
-      </HelperText>
-    </View>
-  )
-}
-
-const CalendarInput = React.forwardRef(CalendarInputPure)
-
 const styles = StyleSheet.create({
   root: { padding: 12 },
   inner: { flexDirection: 'row' },

package/src/Date/CalendarHeader.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { IconButton, useTheme } from 'react-native-paper'
 import DayNames, { dayNamesHeight } from './DayNames'
-import { DisableWeekDaysType } from './dateUtils'
+import type { DisableWeekDaysType } from './dateUtils'
 
 const buttonContainerHeight = 56
 const buttonContainerMarginTop = 4
@@ -46,7 +46,13 @@ function CalendarHeader({
               { backgroundColor: theme.colors.surface },
             ]}
           >
-            <IconButton icon="chevron-left" onPress={onPrev} />
+            <IconButton
+              icon="chevron-left"
+              onPress={onPrev}
+              // RN types bug
+              hasTVPreferredFocus={undefined}
+              tvParallaxProperties={undefined}
+            />
           </View>
 
           <View
@@ -55,7 +61,13 @@ function CalendarHeader({
               { backgroundColor: theme.colors.surface },
             ]}
           >
-            <IconButton icon="chevron-right" onPress={onNext} />
+            <IconButton
+              icon="chevron-right"
+              onPress={onNext}
+              // RN types bug
+              hasTVPreferredFocus={undefined}
+              tvParallaxProperties={undefined}
+            />
           </View>
         </View>
       ) : null}

package/src/Date/DatePickerInput.tsx

@@ -1,54 +1,132 @@
 import * as React from 'react'
 
 import TextInputWithMask from '../TextInputMask'
-import { IconButton } from 'react-native-paper'
+import { HelperText, IconButton, TextInput, useTheme } from 'react-native-paper'
 import { View, StyleSheet } from 'react-native'
 import DatePickerModal from './DatePickerModal'
+import useDateInput from './inputUtils'
+import type { ValidRangeType } from './Calendar'
+import { useLatest } from '../utils'
+
+function DatePickerInput(
+  {
+    label,
+    value,
+    onChange,
+    style,
+    locale,
+    validRange,
+    inputMode,
+    withModal = true,
+    withDateFormatInLabel = true,
+    ...rest
+  }: Omit<React.ComponentProps<typeof TextInput>, 'value' | 'onChange'> & {
+    inputMode: 'start' | 'end'
+    locale: string
+    onChange: (date: Date | undefined) => void
+    value: Date | undefined
+    validRange?: ValidRangeType | undefined
+    withModal?: boolean
+    withDateFormatInLabel?: boolean
+  },
+  ref: any
+) {
+  const theme = useTheme()
+  const { formattedValue, inputFormat, onChangeText, error } = useDateInput({
+    locale,
+    value,
+    validRange,
+    inputMode,
+    onChange,
+  })
 
-export default function DatePickerInput() {
   const [visible, setVisible] = React.useState<boolean>(false)
   const onDismiss = React.useCallback(() => {
     setVisible(false)
   }, [setVisible])
-  const onConfirm = React.useCallback(() => {
-    setVisible(false)
-  }, [setVisible])
+  const onChangeRef = useLatest(onChange)
+  const onInnerConfirm = React.useCallback(
+    ({ date }) => {
+      setVisible(false)
+      onChangeRef.current(date)
+    },
+    [setVisible, onChangeRef]
+  )
 
   return (
     <>
       <View style={styles.root}>
         <TextInputWithMask
-          value={''}
-          keyboardType={'numeric'}
-          placeholder={'DD-MM-YYY'}
-          mask={'DD-MM-YYY'}
-          onChangeText={() => {}}
-          style={styles.input}
-        />
-        <IconButton
-          size={24}
-          style={styles.calendarButton}
-          icon="calendar"
-          onPress={() => setVisible(true)}
+          {...rest}
+          ref={ref}
+          label={getLabel({ label, inputFormat, withDateFormatInLabel })}
+          value={formattedValue}
+          keyboardType={'number-pad'}
+          placeholder={inputFormat}
+          mask={inputFormat}
+          onChangeText={onChangeText}
+          keyboardAppearance={theme.dark ? 'dark' : 'default'}
+          error={!!error}
+          style={[styles.input, style]}
         />
+        {withModal ? (
+          <IconButton
+            size={24}
+            style={styles.calendarButton}
+            icon="calendar"
+            onPress={() => setVisible(true)}
+            // RN types bug
+            hasTVPreferredFocus={undefined}
+            tvParallaxProperties={undefined}
+          />
+        ) : null}
       </View>
-      <DatePickerModal
-        mode="single"
-        visible={visible}
-        onDismiss={onDismiss}
-        onConfirm={onConfirm}
-      />
+      <HelperText type="error" visible={!!error}>
+        {error}
+      </HelperText>
+
+      {withModal ? (
+        <DatePickerModal
+          date={value}
+          mode="single"
+          visible={visible}
+          onDismiss={onDismiss}
+          onConfirm={onInnerConfirm}
+          locale={locale}
+          dateMode={inputMode}
+        />
+      ) : null}
     </>
   )
 }
 
+function getLabel({
+  withDateFormatInLabel,
+  inputFormat,
+  label,
+}: {
+  withDateFormatInLabel: boolean
+  inputFormat: string
+  label: string | undefined
+}) {
+  if (withDateFormatInLabel) {
+    return label ? `${label} (${inputFormat})` : inputFormat
+  }
+  return label || ''
+}
+
 const styles = StyleSheet.create({
   root: {
+    minWidth: 150,
     flexDirection: 'row',
     position: 'relative',
     alignItems: 'center',
-    flex: 1,
+    flexGrow: 1,
+    alignSelf: 'flex-start',
+  },
+  input: {
+    flexGrow: 1,
   },
-  input: { flex: 1 },
   calendarButton: { position: 'absolute', right: 0 },
 })
+export default React.forwardRef(DatePickerInput)

package/src/Date/DatePickerModal.tsx

@@ -15,9 +15,7 @@ import DatePickerModalContent, {
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
 } from './DatePickerModalContent'
-import { useMemo } from 'react'
-import Color from 'color'
-import { useHeaderColorIsLight } from '../utils'
+import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils'
 
 interface DatePickerModalProps {
   visible: boolean
@@ -61,10 +59,7 @@ export function DatePickerModal(
     })
 
   const isLight = useHeaderColorIsLight()
-  const statusBarColor = useMemo<string>(
-    () => Color(theme.colors.primary).darken(0.2).hex(),
-    [theme]
-  )
+  const headerBackgroundColor = useHeaderBackgroundColor()
 
   return (
     <View style={[StyleSheet.absoluteFill]} pointerEvents="box-none">
@@ -110,7 +105,7 @@ export function DatePickerModal(
                   style={[
                     {
                       height: StatusBar.currentHeight,
-                      backgroundColor: statusBarColor,
+                      backgroundColor: headerBackgroundColor,
                     },
                   ]}
                 />

package/src/Date/DatePickerModalContent.tsx

@@ -28,6 +28,7 @@ export type LocalState = {
 
 interface DatePickerModalContentBaseProps {
   inputFormat?: string
+  locale: string
   onDismiss: () => any
   disableSafeTop?: boolean
 }
@@ -51,6 +52,7 @@ export interface DatePickerModalContentSingleProps
   date?: CalendarDate
   onChange?: SingleChange
   onConfirm: SingleChange
+  dateMode?: 'start' | 'end'
 }
 
 export interface DatePickerModalContentMultiProps
@@ -78,6 +80,7 @@ export function DatePickerModalContent(
     disableWeekDays,
     locale,
     validRange,
+    dateMode,
   } = props
 
   const anyProps = props as any
@@ -135,6 +138,7 @@ export function DatePickerModalContent(
     <>
       <DatePickerModalHeaderBackground>
         <DatePickerModalHeader
+          locale={locale}
           onSave={onInnerConfirm}
           onDismiss={onDismiss}
           saveLabel={props.saveLabel}
@@ -168,6 +172,7 @@ export function DatePickerModalContent(
             disableWeekDays={disableWeekDays}
             dates={state.dates}
             validRange={validRange}
+            dateMode={dateMode}
           />
         }
         calendarEdit={
@@ -180,6 +185,7 @@ export function DatePickerModalContent(
             collapsed={collapsed}
             onChange={onInnerChange}
             validRange={validRange}
+            locale={locale}
           />
         }
       />

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { IconButton, Text } from 'react-native-paper'
-import { ModeType } from './Calendar'
-import { LocalState } from './DatePickerModalContent'
+import type { ModeType } from './Calendar'
+import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../utils'
 import Color from 'color'
+import { getTranslation } from '../translations/utils'
 
 export interface HeaderPickProps {
   moreLabel?: string
@@ -21,30 +22,35 @@ export interface HeaderContentProps extends HeaderPickProps {
   mode: ModeType
   collapsed: boolean
   onToggle: () => any
-  locale: undefined | string
+  locale: string | undefined
 }
 
-function getLabel(mode: ModeType, configuredLabel?: string) {
+function getLabel(
+  locale: string | undefined,
+  mode: ModeType,
+  configuredLabel?: string
+) {
   if (configuredLabel) {
     return configuredLabel
   }
   if (mode === 'range') {
-    return 'Select period'
+    return getTranslation(locale, 'selectRange')
   }
-  if (mode === 'single') {
-    return 'Select date'
-  }
-
   if (mode === 'multiple') {
-    return 'Select dates'
+    return getTranslation(locale, 'selectMultiple')
+  }
+  if (mode === 'single') {
+    return getTranslation(locale, 'selectSingle')
   }
   return '...?'
 }
 
-export default function DatePickerModalHeader(props: HeaderContentProps) {
+export default function DatePickerModalContentHeader(
+  props: HeaderContentProps
+) {
   const { onToggle, collapsed, mode, moreLabel } = props
 
-  const label = getLabel(props.mode, props.label)
+  const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
   const allowEditing = mode !== 'multiple'
@@ -75,6 +81,9 @@ export default function DatePickerModalHeader(props: HeaderContentProps) {
           icon={collapsed ? 'pencil' : 'calendar'}
           color={color}
           onPress={onToggle}
+          // RN types bug
+          hasTVPreferredFocus={undefined}
+          tvParallaxProperties={undefined}
         />
       ) : null}
     </View>

package/src/Date/DatePickerModalHeader.tsx

@@ -3,18 +3,21 @@ import { Animated, StyleSheet, SafeAreaView } from 'react-native'
 import { Appbar, Button } from 'react-native-paper'
 
 import { useHeaderTextColor } from '../utils'
+import { getTranslation } from '../translations/utils'
 
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
   saveLabel?: string
   onDismiss: () => void
   onSave: () => void
+  locale: string | undefined
 }
 
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
-  const { saveLabel = 'Save', disableSafeTop } = props
+  const { disableSafeTop, locale } = props
+  const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
   return (
     <>
@@ -30,9 +33,17 @@ export default function DatePickerModalHeader(
               icon="close"
               onPress={props.onDismiss}
               color={color}
+              testID="react-native-paper-dates-close"
+              // RN types bug
+              hasTVPreferredFocus={undefined}
+              tvParallaxProperties={undefined}
             />
             <Appbar.Content title={''} />
-            <Button color={color} onPress={props.onSave}>
+            <Button
+              color={color}
+              onPress={props.onSave}
+              testID="react-native-paper-dates-save"
+            >
               {saveLabel}
             </Button>
           </Appbar>

package/src/Date/DateRangeInput.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import { View } from 'react-native'
 import { Text, IconButton } from 'react-native-paper'
 
-import TextInputWithMask from '../TextInputMask'
 import DatePickerModal from './DatePickerModal'
 
-export default function DateRangeInput() {
+// WORK IN PROGRESS
+export default function DateRangeInput({ locale }: { locale: string }) {
   const [visible, setVisible] = React.useState<boolean>(false)
   const onDismiss = React.useCallback(() => {
     setVisible(false)
@@ -14,19 +14,21 @@ export default function DateRangeInput() {
     // 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 }}>
-        <TextInputWithMask
-          value={''}
-          keyboardType={'numeric'}
-          placeholder={'DD-MM-YYY'}
-          mask={'DD-MM-YYY'}
-          onChangeText={() => {}}
-        />
+        {/*<DatePickerInput*/}
+        {/*  value={''}*/}
+        {/*  keyboardType={'numeric'}*/}
+        {/*  placeholder={'DD-MM-YYY'}*/}
+        {/*  mask={'DD-MM-YYY'}*/}
+        {/*  onChangeText={() => {}}*/}
+        {/*/>*/}
         <Text>Van</Text>
       </View>
       <View>
@@ -38,22 +40,29 @@ export default function DateRangeInput() {
         </Text>
       </View>
       <View style={{ flex: 1 }}>
-        <TextInputWithMask
-          value={''}
-          keyboardType={'numeric'}
-          placeholder={'DD-MM-YYY'}
-          mask={'DD-MM-YYY'}
-          onChangeText={() => {}}
-        />
+        {/*<DatePickerInput*/}
+        {/*  // value={''}*/}
+        {/*  // keyboardType={'numeric'}*/}
+        {/*  // placeholder={'DD-MM-YYY'}*/}
+        {/*  // mask={'DD-MM-YYY'}*/}
+        {/*  // onChangeText={() => {}}*/}
+        {/*/>*/}
         <Text>Tot</Text>
       </View>
       <View>
-        <IconButton icon="calendar" onPress={() => setVisible(true)} />
+        <IconButton
+          icon="calendar"
+          onPress={() => setVisible(true)}
+          // RN types bug
+          hasTVPreferredFocus={undefined}
+          tvParallaxProperties={undefined}
+        />
         <Text style={{ opacity: 0 }} accessible={false}>
           tot
         </Text>
       </View>
       <DatePickerModal
+        locale={locale}
         mode="range"
         visible={visible}
         onDismiss={onDismiss}

package/src/Date/Day.tsx

@@ -65,6 +65,7 @@ function Day(props: {
       />
 
       <TouchableRipple
+        testID={`react-native-paper-dates-day-${year}-${month}-${day}`}
         disabled={disabled}
         borderless={true}
         onPress={disabled ? undefined : onPress}
@@ -72,6 +73,9 @@ function Day(props: {
           styles.button,
           { backgroundColor: inRange ? selectColor : undefined },
         ]}
+        // RN types bug
+        hasTVPreferredFocus={undefined}
+        tvParallaxProperties={undefined}
       >
         <View
           style={[