react-native-paper-dates 0.8.5 → 0.9.0

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}
+          saveLabelDisabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? true}
           disableSafeTop={disableSafeTop}
+          closeIcon={props.closeIcon}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -158,6 +163,8 @@ export function DatePickerModalContent(
           endLabel={props.endLabel}
           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,6 +43,7 @@ export default function DatePickerModalHeader(
             <Button
               color={color}
               onPress={props.onSave}
+              disabled={props.saveLabelDisabled ?? false}
               uppercase={props.uppercase ?? true}
               testID="react-native-paper-dates-save"
             >

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/AnalogClock.tsx

@@ -12,18 +12,17 @@ import {
   getAngle,
   getHours,
   getHourType,
+  getHourTypeFromOffset,
   getMinutes,
+  hourTypes,
   PossibleClockTypes,
 } from './timeUtils'
 import * as React from 'react'
-
 import { useLatest } from '../utils'
 import AnalogClockHours from './AnalogClockHours'
-
 import AnimatedClockSwitcher from './AnimatedClockSwitcher'
 import AnalogClockMinutes from './AnalogClockMinutes'
 import { DisplayModeContext } from './TimePicker'
-
 function AnalogClock({
   hours,
   minutes,
@@ -45,9 +44,7 @@ function AnalogClock({
   const { mode } = React.useContext(DisplayModeContext)
   // used to make pointer shorter if hours are selected and above 12
   const shortPointer = (hours === 0 || hours > 12) && is24Hour
-
   const clockRef = React.useRef<View | null>(null)
-
   // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
   const hoursRef = useLatest(hours)
@@ -56,31 +53,35 @@ function AnalogClock({
   const focusedRef = useLatest(focused)
   const is24HourRef = useLatest(is24Hour)
   const modeRef = useLatest(mode)
-
   const onPointerMove = React.useCallback(
     (e: GestureResponderEvent, final: boolean) => {
       let x = e.nativeEvent.locationX
       let y = e.nativeEvent.locationY
-
       let angle = getAngle(x, y, circleSize)
-
       if (focusedRef.current === clockTypes.hours) {
         let hours24 = is24HourRef.current
         let previousHourType = getHourType(hoursRef.current)
         let pickedHours = getHours(angle, previousHourType)
 
-        let hours12AndPm = !hours24 && modeRef.current === 'PM'
+        let hours12AndPm = !hours24 && modeRef.current === 'AM'
+
+        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)
+        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm
 
         // Avoiding the "24h"
         // Should be 12h for 12 hours and PM mode
-        if ((hours12AndPm || hours24) && pickedHours + 12 < 24) {
+
+        if (hours12AndPm || hours24AndPM) {
           pickedHours += 12
         }
         if (modeRef.current === 'AM' && pickedHours === 12) {
           pickedHours = 0
         }
 
-        if (pickedHours === 24) {
+        if (
+          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||
+          pickedHours === 24
+        ) {
           pickedHours = 0
         }
 
@@ -103,13 +104,11 @@ function AnalogClock({
     },
     [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]
   )
-
   const panResponder = React.useRef(
     PanResponder.create({
       onPanResponderGrant: (e) => onPointerMove(e, false),
       onPanResponderMove: (e) => onPointerMove(e, false),
       onPanResponderRelease: (e) => onPointerMove(e, true),
-
       onStartShouldSetPanResponder: returnTrue,
       onStartShouldSetPanResponderCapture: () => false,
       onMoveShouldSetPanResponder: returnTrue,
@@ -118,7 +117,6 @@ function AnalogClock({
       onShouldBlockNativeResponder: returnTrue,
     })
   ).current
-
   const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0
   const pointerNumber = focused === clockTypes.hours ? hours : minutes
   const degreesPerNumber = focused === clockTypes.hours ? 30 : 6
@@ -178,7 +176,6 @@ function AnalogClock({
     </View>
   )
 }
-
 const styles = StyleSheet.create({
   clock: {
     height: circleSize,
@@ -204,15 +201,12 @@ const styles = StyleSheet.create({
   },
   line: {
     position: 'absolute',
-
     marginBottom: -1,
     height: 2,
     borderRadius: 4,
   },
 })
-
 function returnTrue() {
   return true
 }
-
 export default React.memo(AnalogClock)

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