react-native-paper-dates 0.11.8 → 0.11.10

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

@@ -7,8 +7,16 @@ declare const _default: React.ForwardRefExoticComponent<Pick<{
     validRange?: import("./Calendar").ValidRangeType | undefined;
     withModal?: boolean | undefined;
     withDateFormatInLabel?: boolean | undefined;
+    hideValidationErrors?: boolean | undefined;
+    hasError?: boolean | undefined;
+    onValidationError?: ((error: string | null) => void) | undefined;
     calendarIcon?: string | undefined;
     saveLabel?: string | undefined;
+    saveLabelDisabled?: boolean | undefined;
+    uppercase?: boolean | undefined;
+    startYear?: number | undefined;
+    endYear?: number | undefined;
+    onChangeText?: ((text: string | undefined) => void) | undefined;
 } & Omit<Pick<import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput> & {
     mode?: "flat" | "outlined" | undefined;
     left?: React.ReactNode;
@@ -51,7 +59,11 @@ declare const _default: React.ForwardRefExoticComponent<Pick<{
         inputMode: "end" | "start";
         validRange: import("./Calendar").ValidRangeType | undefined;
         saveLabel: string | undefined;
+        saveLabelDisabled: boolean | undefined;
+        uppercase: boolean | undefined;
+        startYear: number | undefined;
+        endYear: number | undefined;
     }) => any) | undefined;
     inputButtons?: any;
-}, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "disabled" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "value" | "mode" | "error" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onKeyPress" | "onScroll" | "defaultValue" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoComplete" | "maxLength" | "textAlign" | "textAlignVertical" | "multiline" | "onContentSizeChange" | "scrollEnabled" | "textColor" | "dense" | "render" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "textContentType" | "cursorColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "outlineStyle" | "underlineStyle" | "theme" | "locale" | "validRange" | "calendarIcon" | "inputMode" | "saveLabel" | "withDateFormatInLabel" | "modal" | "inputButtons" | "withModal"> & React.RefAttributes<unknown>>;
+}, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "disabled" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "value" | "mode" | "error" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onKeyPress" | "onScroll" | "defaultValue" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoComplete" | "maxLength" | "textAlign" | "textAlignVertical" | "multiline" | "onContentSizeChange" | "scrollEnabled" | "textColor" | "dense" | "render" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "textContentType" | "cursorColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "outlineStyle" | "underlineStyle" | "theme" | "locale" | "uppercase" | "validRange" | "startYear" | "endYear" | "calendarIcon" | "inputMode" | "onValidationError" | "saveLabel" | "saveLabelDisabled" | "withDateFormatInLabel" | "hasError" | "hideValidationErrors" | "modal" | "inputButtons" | "withModal"> & React.RefAttributes<unknown>>;
 export default _default;

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

@@ -1,10 +1,11 @@
 import type { ValidRangeType } from './Calendar';
-export default function useDateInput({ locale, value, validRange, inputMode, onChange, }: {
+export default function useDateInput({ locale, value, validRange, inputMode, onChange, onValidationError, }: {
     onChange: (d: Date) => void;
     locale: undefined | string;
     value: Date | undefined;
     validRange: ValidRangeType | undefined;
     inputMode: 'start' | 'end';
+    onValidationError?: ((error: string | null) => void) | undefined;
 }): {
     onChange: (d: Date) => void;
     error: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Date/DatePickerInput.shared.tsx

@@ -10,8 +10,16 @@ export type DatePickerInputProps = {
   validRange?: ValidRangeType | undefined
   withModal?: boolean
   withDateFormatInLabel?: boolean
+  hideValidationErrors?: boolean
+  hasError?: boolean
+  onValidationError?: ((error: string | null) => void) | undefined
   calendarIcon?: string
   saveLabel?: string
+  saveLabelDisabled?: boolean
+  uppercase?: boolean
+  startYear?: number
+  endYear?: number
+  onChangeText?: (text: string | undefined) => void
 } & Omit<
   React.ComponentProps<typeof TextInput>,
   'value' | 'onChange' | 'onChangeText'

package/src/Date/DatePickerInput.tsx

@@ -42,7 +42,18 @@ function DatePickerInput(
           />
         ) : null
       }
-      modal={({ value, locale, inputMode, validRange, saveLabel }) =>
+      // eslint-disable-next-line react/no-unstable-nested-components
+      modal={({
+        value,
+        locale,
+        inputMode,
+        validRange,
+        saveLabel,
+        saveLabelDisabled,
+        uppercase,
+        startYear,
+        endYear,
+      }) =>
         withModal ? (
           <DatePickerModal
             date={value}
@@ -54,6 +65,10 @@ function DatePickerInput(
             dateMode={inputMode}
             validRange={validRange}
             saveLabel={saveLabel}
+            saveLabelDisabled={saveLabelDisabled ?? false}
+            uppercase={uppercase ?? true}
+            startYear={startYear ?? 1800}
+            endYear={endYear ?? 2200}
           />
         ) : null
       }

package/src/Date/DatePickerInputWithoutModal.tsx

@@ -16,9 +16,17 @@ function DatePickerInputWithoutModal(
     validRange,
     inputMode,
     withDateFormatInLabel = true,
+    hasError,
+    hideValidationErrors,
+    onValidationError,
     modal,
     inputButtons,
     saveLabel,
+    saveLabelDisabled,
+    uppercase,
+    startYear,
+    endYear,
+    onChangeText,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -27,18 +35,28 @@ function DatePickerInputWithoutModal(
       inputMode: DatePickerInputProps['inputMode']
       validRange: DatePickerInputProps['validRange']
       saveLabel: DatePickerInputProps['saveLabel']
+      saveLabelDisabled: DatePickerInputProps['saveLabelDisabled']
+      uppercase: DatePickerInputProps['uppercase']
+      startYear: DatePickerInputProps['startYear']
+      endYear: DatePickerInputProps['endYear']
     }) => any
     inputButtons?: any
   },
   ref: any
 ) {
   const theme = useTheme()
-  const { formattedValue, inputFormat, onChangeText, error } = useDateInput({
+  const {
+    formattedValue,
+    inputFormat,
+    onChangeText: onDateInputChangeText,
+    error,
+  } = useDateInput({
     locale,
     value,
     validRange,
     inputMode,
     onChange,
+    onValidationError,
   })
 
   return (
@@ -55,23 +73,33 @@ function DatePickerInputWithoutModal(
               withDateFormatInLabel,
             })}
             value={formattedValue}
-            keyboardType={'number-pad'}
-            placeholder={inputFormat}
+            keyboardType={rest.keyboardType ?? 'number-pad'}
             mask={inputFormat}
-            onChangeText={onChangeText}
+            onChangeText={onDateInputChangeText}
+            onChange={(e) => onChangeText && onChangeText(e.nativeEvent.text)}
             keyboardAppearance={theme.dark ? 'dark' : 'default'}
-            error={!!error}
+            error={(!!error && !hideValidationErrors) || !!hasError}
             style={[styles.input, style]}
           />
           {inputButtons}
         </View>
-        {error ? (
-          <HelperText style={styles.helperText} type="error" visible={!!error}>
+        {error && !hideValidationErrors ? (
+          <HelperText type="error" visible={!!error}>
             {error}
           </HelperText>
         ) : null}
       </View>
-      {modal?.({ value, locale, inputMode, validRange, saveLabel })}
+      {modal?.({
+        value,
+        locale,
+        inputMode,
+        validRange,
+        saveLabel,
+        saveLabelDisabled,
+        uppercase,
+        startYear,
+        endYear,
+      })}
     </>
   )
 }
@@ -104,8 +132,5 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1,
   },
-  helperText: {
-    // flex: 1,
-  },
 })
 export default React.forwardRef(DatePickerInputWithoutModal)

package/src/Date/inputUtils.ts

@@ -9,19 +9,21 @@ export default function useDateInput({
   validRange,
   inputMode,
   onChange,
+  onValidationError,
 }: {
   onChange: (d: Date) => void
   locale: undefined | string
   value: Date | undefined
   validRange: ValidRangeType | undefined
   inputMode: 'start' | 'end'
+  onValidationError?: ((error: string | null) => void) | undefined
 }) {
   const { isDisabled, isWithinValidRange, validStart, validEnd } =
     useRangeChecker(validRange)
   const [error, setError] = React.useState<null | string>(null)
   const formatter = useInputFormatter({ locale })
   const inputFormat = useInputFormat({ formatter, locale })
-  const formattedValue = value !== null ? formatter.format(value) : ''
+  const formattedValue = value ? formatter.format(value) : ''
   const onChangeText = (date: string) => {
     const dayIndex = inputFormat.indexOf('DD')
     const monthIndex = inputFormat.indexOf('MM')
@@ -35,13 +37,13 @@ export default function useDateInput({
     const month = Number(date.slice(monthIndex, monthIndex + 2))
 
     if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
-      setError(
-        getTranslation(
-          locale,
-          'notAccordingToDateFormat',
-          () => 'notAccordingToDateFormat'
-        )(inputFormat)
-      )
+      const inputError = getTranslation(
+        locale,
+        'notAccordingToDateFormat',
+        () => 'notAccordingToDateFormat'
+      )(inputFormat)
+      setError(inputError)
+      onValidationError && onValidationError(inputError)
       return
     }
 
@@ -51,7 +53,9 @@ export default function useDateInput({
         : new Date(year, month - 1, day)
 
     if (isDisabled(finalDate)) {
-      setError(getTranslation(locale, 'dateIsDisabled'))
+      const inputError = getTranslation(locale, 'dateIsDisabled')
+      setError(inputError)
+      onValidationError && onValidationError(inputError)
       return
     }
     if (!isWithinValidRange(finalDate)) {
@@ -80,11 +84,14 @@ export default function useDateInput({
                   )(formatter.format(validEnd))
                 : '',
             ]
+      const inputError = errors.filter((n) => n).join(' ')
       setError(errors.filter((n) => n).join(' '))
+      onValidationError && onValidationError(inputError)
       return
     }
 
     setError(null)
+    onValidationError && onValidationError(null)
     if (inputMode === 'end') {
       onChange(finalDate)
     } else {

package/src/TextInputMask.tsx

@@ -69,6 +69,7 @@ function enhanceTextWithMask(
 function TextInputWithMask(
   {
     onChangeText,
+    onChange,
     value,
     mask,
     ...rest
@@ -101,6 +102,9 @@ function TextInputWithMask(
       {...rest}
       value={controlledValue}
       onChangeText={onInnerChange}
+      onChange={(e) => {
+        onChange && onChange(e)
+      }}
       onBlur={onInnerBlur}
     />
   )

package/src/Time/AnalogClock.tsx

@@ -63,7 +63,7 @@ function AnalogClock({
         let previousHourType = getHourType(hoursRef.current)
         let pickedHours = getHours(angle, previousHourType)
 
-        let hours12AndPm = !hours24 && modeRef.current === 'AM'
+        let hours12AndPm = !hours24 && modeRef.current === 'PM'
 
         let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)
         let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm

package/src/Time/AnalogClockHours.tsx

@@ -38,7 +38,7 @@ function AnalogClockHours({
               variant="bodyLarge"
               selectable={false}
             >
-              {mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1}
+              {mode === 'AM' && is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
         </View>

package/src/Time/timeUtils.ts

@@ -242,15 +242,18 @@ export function useInputColors(highlighted: boolean) {
 }
 
 export function toHourInputFormat(hours: number, is24Hour: boolean): number {
-  if (hours === 24) {
-    return 0
-  }
   if (is24Hour) {
+    if (hours === 24) {
+      return 0
+    }
     return hours
   }
   if (hours > 12) {
     return hours - 12
   }
+  if (hours === 0) {
+    return hours + 12
+  }
   return hours
 }
 
@@ -262,7 +265,7 @@ export function toHourOutputFormat(
   if (is24Hour) {
     return newHours
   }
-  if (previousHours > 12 && newHours < 12) {
+  if ((!is24Hour && previousHours === 0) || newHours === 0) {
     return newHours + 12
   }
   return newHours