react-native-paper-dates 0.8.7 → 0.9.2

package/src/Date/DatePickerInput.shared.tsx

@@ -0,0 +1,17 @@
+import type { ValidRangeType } from './Calendar'
+import type * as React from 'react'
+import type { TextInput } from 'react-native-paper'
+
+export type DatePickerInputProps = {
+  inputMode: 'start' | 'end'
+  locale: string
+  onChange: (date: Date | undefined) => void
+  value: Date | undefined
+  validRange?: ValidRangeType | undefined
+  withModal?: boolean
+  withDateFormatInLabel?: boolean
+  calendarIcon?: string
+} & Omit<
+  React.ComponentProps<typeof TextInput>,
+  'value' | 'onChange' | 'onChangeText'
+>

package/src/Date/DatePickerInput.tsx

@@ -1,55 +1,27 @@
 import * as React from 'react'
 
-import TextInputWithMask from '../TextInputMask'
-import { HelperText, IconButton, TextInput, useTheme } from 'react-native-paper'
-import { View, StyleSheet } from 'react-native'
+import { IconButton } from 'react-native-paper'
+import { StyleSheet } from 'react-native'
 import DatePickerModal from './DatePickerModal'
-import useDateInput from './inputUtils'
-import type { ValidRangeType } from './Calendar'
 import { useLatest } from '../utils'
+import type { DatePickerInputProps } from './DatePickerInput.shared'
+import DatePickerInputWithoutModal from './DatePickerInputWithoutModal'
 
 function DatePickerInput(
   {
-    label,
-    value,
-    onChange,
-    style,
-    locale,
-    validRange,
-    inputMode,
     withModal = true,
-    withDateFormatInLabel = true,
+    calendarIcon = 'calendar',
     ...rest
-  }: {
-    inputMode: 'start' | 'end'
-    locale: string
-    onChange: (date: Date | undefined) => void
-    value: Date | undefined
-    validRange?: ValidRangeType | undefined
-    withModal?: boolean
-    withDateFormatInLabel?: boolean
-  } & Omit<
-    React.ComponentProps<typeof TextInput>,
-    'value' | 'onChange' | 'onChangeText'
-  >,
+  }: DatePickerInputProps,
   ref: any
 ) {
-  const theme = useTheme()
-  const { formattedValue, inputFormat, onChangeText, error } = useDateInput({
-    locale,
-    value,
-    validRange,
-    inputMode,
-    onChange,
-  })
-
   const [visible, setVisible] = React.useState<boolean>(false)
   const onDismiss = React.useCallback(() => {
     setVisible(false)
   }, [setVisible])
-  const onChangeRef = useLatest(onChange)
+  const onChangeRef = useLatest(rest.onChange)
   const onInnerConfirm = React.useCallback(
-    ({ date }) => {
+    ({ date }: any) => {
       setVisible(false)
       onChangeRef.current(date)
     },
@@ -57,81 +29,39 @@ function DatePickerInput(
   )
 
   return (
-    <>
-      <View style={styles.root}>
-        <TextInputWithMask
-          {...rest}
-          ref={ref}
-          label={getLabel({
-            // TODO: support label components?
-            label: label as any,
-            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 ? (
+    <DatePickerInputWithoutModal
+      ref={ref}
+      {...rest}
+      inputButtons={
+        withModal ? (
           <IconButton
             size={24}
             style={styles.calendarButton}
-            icon="calendar"
+            icon={calendarIcon}
             onPress={() => setVisible(true)}
           />
-        ) : null}
-      </View>
-      <HelperText type="error" visible={!!error}>
-        {error}
-      </HelperText>
-
-      {withModal ? (
-        <DatePickerModal
-          date={value}
-          mode="single"
-          visible={visible}
-          onDismiss={onDismiss}
-          onConfirm={onInnerConfirm}
-          locale={locale}
-          dateMode={inputMode}
-          validRange={validRange}
-        />
-      ) : null}
-    </>
+        ) : null
+      }
+      modal={({ value, locale, inputMode, validRange }) =>
+        withModal ? (
+          <DatePickerModal
+            date={value}
+            mode="single"
+            visible={visible}
+            onDismiss={onDismiss}
+            onConfirm={onInnerConfirm}
+            locale={locale}
+            dateMode={inputMode}
+            validRange={validRange}
+          />
+        ) : 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',
-    flexGrow: 1,
-  },
-  input: {
-    flexGrow: 1,
-  },
   calendarButton: { position: 'absolute', right: 0, zIndex: 10 },
 })
+
 export default React.forwardRef(DatePickerInput)

package/src/Date/DatePickerInputWithoutModal.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react'
+
+import TextInputWithMask from '../TextInputMask'
+import { HelperText, useTheme } from 'react-native-paper'
+import { View, StyleSheet } from 'react-native'
+import useDateInput from './inputUtils'
+import type { DatePickerInputProps } from './DatePickerInput.shared'
+
+function DatePickerInputWithoutModal(
+  {
+    label,
+    value,
+    onChange,
+    style,
+    locale,
+    validRange,
+    inputMode,
+    withDateFormatInLabel = true,
+    modal,
+    inputButtons,
+    ...rest
+  }: DatePickerInputProps & {
+    modal?: (params: {
+      value: DatePickerInputProps['value']
+      locale: DatePickerInputProps['locale']
+      inputMode: DatePickerInputProps['inputMode']
+      validRange: DatePickerInputProps['validRange']
+    }) => any
+    inputButtons?: any
+  },
+  ref: any
+) {
+  const theme = useTheme()
+  const { formattedValue, inputFormat, onChangeText, error } = useDateInput({
+    locale,
+    value,
+    validRange,
+    inputMode,
+    onChange,
+  })
+
+  return (
+    <>
+      <View style={styles.root}>
+        <TextInputWithMask
+          {...rest}
+          ref={ref}
+          label={getLabel({
+            // TODO: support label components?
+            label: label as any,
+            inputFormat,
+            withDateFormatInLabel,
+          })}
+          value={formattedValue}
+          keyboardType={'number-pad'}
+          placeholder={inputFormat}
+          mask={inputFormat}
+          onChangeText={onChangeText}
+          keyboardAppearance={theme.dark ? 'dark' : 'default'}
+          error={!!error}
+          style={[styles.input, style]}
+        />
+        {inputButtons}
+        {!!error ? (
+          <View style={styles.helperText}>
+            <HelperText
+              style={styles.helperText}
+              type="error"
+              visible={!!error}
+            >
+              {error}
+            </HelperText>
+          </View>
+        ) : null}
+      </View>
+      {modal?.({ value, locale, inputMode, validRange })}
+    </>
+  )
+}
+
+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,
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  helperTextContainer: {
+    flexDirection: 'row',
+  },
+  helperText: {
+    flex: 1,
+  },
+  input: {},
+})
+export default React.forwardRef(DatePickerInputWithoutModal)

package/src/Date/DatePickerModalContent.tsx

@@ -31,6 +31,7 @@ interface DatePickerModalContentBaseProps {
   locale: string
   onDismiss: () => any
   disableSafeTop?: boolean
+  saveLabelDisabled?: boolean
 }
 
 export interface DatePickerModalContentRangeProps
@@ -81,6 +82,8 @@ export function DatePickerModalContent(
     locale,
     validRange,
     dateMode,
+    startYear,
+    endYear,
   } = props
 
   const anyProps = props as any
@@ -106,7 +109,7 @@ export function DatePickerModalContent(
   const [collapsed, setCollapsed] = React.useState<boolean>(true)
 
   const onInnerChange = React.useCallback(
-    (params) => {
+    (params: any) => {
       onChange && onChange(params)
       setState((prev) => ({ ...prev, ...params }))
     },
@@ -142,8 +145,10 @@ export function DatePickerModalContent(
           onSave={onInnerConfirm}
           onDismiss={onDismiss}
           saveLabel={props.saveLabel}
-          uppercase={props.uppercase ?? true}
+          saveLabelDisabled={props.saveLabelDisabled || false}
+          uppercase={props.uppercase || true}
           disableSafeTop={disableSafeTop}
+          closeIcon={props.closeIcon}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -156,8 +161,10 @@ export function DatePickerModalContent(
           moreLabel={props.moreLabel}
           startLabel={props.startLabel}
           endLabel={props.endLabel}
-          uppercase={props.uppercase ?? true}
+          uppercase={props.uppercase || true}
           locale={locale}
+          editIcon={props.editIcon}
+          calendarIcon={props.calendarIcon}
         />
       </DatePickerModalHeaderBackground>
 
@@ -175,6 +182,8 @@ export function DatePickerModalContent(
             dates={state.dates}
             validRange={validRange}
             dateMode={dateMode}
+            startYear={startYear}
+            endYear={endYear}
           />
         }
         calendarEdit={

package/src/Date/DatePickerModalContentHeader.tsx

@@ -16,6 +16,9 @@ export interface HeaderPickProps {
   headerSeparator?: string
   startLabel?: string
   endLabel?: string
+  editIcon?: string
+  calendarIcon?: string
+  closeIcon?: string
 }
 
 export interface HeaderContentProps extends HeaderPickProps {
@@ -49,7 +52,15 @@ function getLabel(
 export default function DatePickerModalContentHeader(
   props: HeaderContentProps
 ) {
-  const { onToggle, collapsed, mode, moreLabel, uppercase } = props
+  const {
+    onToggle,
+    collapsed,
+    mode,
+    moreLabel,
+    uppercase,
+    editIcon = 'pencil',
+    calendarIcon = 'calendar',
+  } = props
 
   const label = getLabel(props.locale, props.mode, props.label)
 
@@ -80,7 +91,7 @@ export default function DatePickerModalContentHeader(
       <View style={styles.fill} />
       {allowEditing ? (
         <IconButton
-          icon={collapsed ? 'pencil' : 'calendar'}
+          icon={collapsed ? editIcon : calendarIcon}
           accessibilityLabel={
             collapsed
               ? getTranslation(props.locale, 'typeInDate')

package/src/Date/DatePickerModalHeader.tsx

@@ -8,16 +8,18 @@ import { getTranslation } from '../translations/utils'
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
   saveLabel?: string
+  saveLabelDisabled?: boolean
   uppercase?: boolean
   onDismiss: () => void
   onSave: () => void
   locale: string | undefined
+  closeIcon?: string
 }
 
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
-  const { disableSafeTop, locale } = props
+  const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
   return (
@@ -31,7 +33,7 @@ export default function DatePickerModalHeader(
         >
           <Appbar style={styles.appbarHeader}>
             <Appbar.Action
-              icon="close"
+              icon={closeIcon}
               accessibilityLabel={getTranslation(locale, 'close')}
               onPress={props.onDismiss}
               color={color}
@@ -41,7 +43,8 @@ export default function DatePickerModalHeader(
             <Button
               color={color}
               onPress={props.onSave}
-              uppercase={props.uppercase ?? true}
+              disabled={props.saveLabelDisabled || false}
+              uppercase={props.uppercase || true}
               testID="react-native-paper-dates-save"
             >
               {saveLabel}

package/src/Date/DateRangeInput.tsx

@@ -5,7 +5,13 @@ import { Text, IconButton } from 'react-native-paper'
 import DatePickerModal from './DatePickerModal'
 
 // WORK IN PROGRESS
-export default function DateRangeInput({ locale }: { locale: string }) {
+export default function DateRangeInput({
+  locale,
+  calendarIcon = 'calendar',
+}: {
+  locale: string
+  calendarIcon?: string
+}) {
   const [visible, setVisible] = React.useState<boolean>(false)
   const onDismiss = React.useCallback(() => {
     setVisible(false)
@@ -50,7 +56,7 @@ export default function DateRangeInput({ locale }: { locale: string }) {
         <Text>Tot</Text>
       </View>
       <View>
-        <IconButton icon="calendar" onPress={() => setVisible(true)} />
+        <IconButton icon={calendarIcon} onPress={() => setVisible(true)} />
         <Text style={{ opacity: 0 }} accessible={false}>
           tot
         </Text>

package/src/Date/Swiper.native.tsx

@@ -147,6 +147,7 @@ function SwiperInner({
   return (
     <>
       <ScrollView
+        scrollsToTop={false}
         ref={parentRef}
         horizontal={isHorizontal}
         pagingEnabled={isHorizontal}

package/src/Date/YearPicker.tsx

@@ -5,21 +5,22 @@ import { range } from '../utils'
 
 const ITEM_HEIGHT = 62
 
-const startYear = 1800
-const endYear = 2200
-const years = range(startYear, endYear)
-
 export default function YearPicker({
   selectedYear,
   selectingYear,
   onPressYear,
+  startYear,
+  endYear,
 }: {
   selectedYear: number | undefined
   selectingYear: boolean
   onPressYear: (year: number) => any
+  startYear: number
+  endYear: number
 }) {
   const theme = useTheme()
   const flatList = React.useRef<FlatList<number> | null>(null)
+  const years = range(isNaN(startYear) ? 1800 : startYear, isNaN(endYear) ? 2200 : endYear)
 
   // scroll to selected year
   React.useEffect(() => {

package/src/Date/inputUtils.ts

@@ -21,7 +21,7 @@ export default function useDateInput({
   const [error, setError] = React.useState<null | string>(null)
   const formatter = useInputFormatter({ locale })
   const inputFormat = useInputFormat({ formatter, locale })
-  const formattedValue = formatter.format(value)
+  const formattedValue = value !== null ? formatter.format(value) : '';
   const onChangeText = (date: string) => {
     const dayIndex = inputFormat.indexOf('DD')
     const monthIndex = inputFormat.indexOf('MM')

package/src/Time/AnalogClockHours.tsx

@@ -34,7 +34,7 @@ function AnalogClockHours({
           <View style={styles.outerHourInner}>
             {/* Display 00 instead of 12 for AM hours */}
             <Text style={hours === i + 1 ? { color } : null} selectable={false}>
-              {mode === 'AM' && i + 1 === 12 ? '00' : i + 1}
+              {mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
         </View>

package/src/Time/TimeInputs.tsx

@@ -118,8 +118,8 @@ function TimeInputs({
         onSubmitEditing={onSubmitEndInput}
         onChanged={(newMinutesFromInput) => {
           let newMinutes = newMinutesFromInput
-          if (newMinutesFromInput > 60) {
-            newMinutes = 60
+          if (newMinutesFromInput > 59) {
+            newMinutes = 59
           }
           onChange({
             hours,

package/src/Time/TimePickerModal.tsx

@@ -13,7 +13,7 @@ import { Button, IconButton, overlay, useTheme } from 'react-native-paper'
 import TimePicker from './TimePicker'
 import {
   clockTypes,
-  inputTypeIcons,
+  getTimeInputTypeIcon,
   inputTypes,
   PossibleClockTypes,
   PossibleInputTypes,
@@ -40,6 +40,8 @@ export function TimePickerModal({
   confirmLabel = 'Ok',
   animationType = 'none',
   locale,
+  keyboardIcon = 'keyboard-outline',
+  clockIcon = 'clock-outline',
 }: {
   locale?: undefined | string
   label?: string
@@ -52,6 +54,8 @@ export function TimePickerModal({
   onDismiss: () => any
   onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any
   animationType?: 'slide' | 'fade' | 'none'
+  keyboardIcon?: string
+  clockIcon?: string
 }) {
   const theme = useTheme()
 
@@ -152,7 +156,10 @@ export function TimePickerModal({
               </View>
               <View style={styles.bottom}>
                 <IconButton
-                  icon={inputTypeIcons[reverseInputTypes[inputType]]}
+                  icon={getTimeInputTypeIcon(inputType, {
+                    keyboard: keyboardIcon,
+                    picker: clockIcon,
+                  })}
                   onPress={() => setInputType(reverseInputTypes[inputType])}
                   size={24}
                   style={styles.inputTypeToggle}

package/src/Time/timeUtils.ts

@@ -45,6 +45,16 @@ export const inputTypeIcons: InputIconMap = {
   picker: 'clock-outline',
 }
 
+export const getTimeInputTypeIcon = (
+  inputType: PossibleInputTypes,
+  inputIconMap?: InputIconMap
+) => {
+  return (
+    inputIconMap?.[reverseInputTypes[inputType]] ||
+    inputTypeIcons?.[reverseInputTypes[inputType]]
+  )
+}
+
 export type PossibleClockTypes = 'hours' | 'minutes'
 export type ClockTypeMap = {
   [clockType in PossibleClockTypes]: PossibleClockTypes

package/src/translations/ar.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const ar: TranslationsType = {
+  save: 'حفظ',
+  selectSingle: 'حدد تاريخ',
+  selectMultiple: 'حدد التواريخ',
+  selectRange: 'حدد الفترة',
+  notAccordingToDateFormat: (inputFormat:string) =>
+    `يجب أن يكون تنسيق التاريخ ${inputFormat}`,
+  mustBeHigherThan: (date) => `يجب أن يكون بعد  ${date}`,
+  mustBeLowerThan: (date) => `يجب أن يكون قبل  ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `يجب أن يكون بين ${startDate} - ${endDate}`,
+  dateIsDisabled: 'اليوم غير مسموح به',
+  previous: 'السابق',
+  next: 'التالي',
+  typeInDate: 'اكتب التاريخ',
+  pickDateFromCalendar: 'اختر التاريخ من التقويم',
+  close: 'أغلق',
+}
+export default ar

package/src/translations/fr.ts

@@ -0,0 +1,23 @@
+
+   
+import type { TranslationsType } from './utils'
+
+const fr: TranslationsType = {
+    save: 'Enregistrer',
+    selectSingle: 'Sélectionner une date',
+    selectMultiple: 'Sélectionner plusieurs dates',
+    selectRange: 'Sélectionner une période',
+    notAccordingToDateFormat: (inputFormat) =>
+        `La date doit être au format ${inputFormat}`,
+    mustBeHigherThan: (date) => `La date doit être après le ${date}`,
+    mustBeLowerThan: (date) => `La date doit être avant le ${date}`,
+    mustBeBetween: (startDate, endDate) =>
+        `La date doit être en le ${startDate} et le ${endDate}`,
+    dateIsDisabled: 'Le jour n\'est pas autorisé',
+    previous: 'Précédent',
+    next: 'Suivant',
+    typeInDate: 'Entrer la date',
+    pickDateFromCalendar: 'Sélectionner une date dans le calendrier',
+    close: 'Fermer',
+}
+export default fr

package/src/translations/ko.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const ko: TranslationsType = {
+  save: '저장',
+  selectSingle: '날짜 선택',
+  selectMultiple: '여러 날짜 선택',
+  selectRange: '기간 선택',
+  notAccordingToDateFormat: (inputFormat) =>
+    `날짜 형식은 ${inputFormat}가 되어야 합니다`,
+  mustBeHigherThan: (date) => `${date} 보다 커야 합니다`,
+  mustBeLowerThan: (date) => `${date} 보다 작아야 합니다`,
+  mustBeBetween: (startDate, endDate) =>
+    `${startDate} - ${endDate} 사이여야 합니다`,
+  dateIsDisabled: '날짜는 허용되지 않습니다',
+  previous: '이전',
+  next: '다음',
+  typeInDate: '날짜 입력',
+  pickDateFromCalendar: '달력에서 날짜 선택',
+  close: '닫기',
+}
+export default ko

package/src/translations/utils.ts

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