Add more props to date picker input.

Author: iM-GeeKy

docusaurus/docs/date-picker/input-date-picker.md

@@ -53,7 +53,11 @@ The value used to populate the component.
 
 **onChange**  
 `Type: Function`  
-Event handler when the component changes.
+Callback event when the component date mask length matches the text input length.
+
+**onChangeText**  
+`Type: Function`  
+Callback event when the component text input changes.
 
 **inputMode (Required)**  
 `Type: String`  
@@ -79,4 +83,20 @@ Flag indicating if the the component should hide error styles along with the `he
 `Type: Function | undefined`  
 Callback used to return any error messages from the components validation.
 
+**saveLabelDisabled**  
+`Type: boolean | undefined`  
+Flag indicating if the save label should be disabled and unable to receive events. Defaults to `false`.
+
+**uppercase**  
+`Type: boolean | undefined`  
+Flag indicating if the text in the component should be uppercase. Defaults to `true`.
+
+**startYear**  
+`Type: number | undefined`  
+The start year when the component is rendered. Defaults to `1800`.
+
+**endYear**  
+`Type: number | undefined`  
+The end year when the component is rendered. Defaults to `2200`.
+
 * Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).*

src/Date/DatePickerInput.shared.tsx

@@ -15,6 +15,11 @@ export type DatePickerInputProps = {
   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'

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
       }

src/Date/DatePickerInputWithoutModal.tsx

@@ -22,6 +22,11 @@ function DatePickerInputWithoutModal(
     modal,
     inputButtons,
     saveLabel,
+    saveLabelDisabled,
+    uppercase,
+    startYear,
+    endYear,
+    onChangeText,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -30,13 +35,22 @@ 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,
@@ -61,20 +75,31 @@ function DatePickerInputWithoutModal(
             value={formattedValue}
             keyboardType={'number-pad'}
             mask={inputFormat}
-            onChangeText={onChangeText}
+            onChangeText={onDateInputChangeText}
+            onChange={(e) => onChangeText && onChangeText(e.nativeEvent.text)}
             keyboardAppearance={theme.dark ? 'dark' : 'default'}
             error={(!!error && !hideValidationErrors) || !!hasError}
             style={[styles.input, style]}
           />
           {inputButtons}
         </View>
         {error && !hideValidationErrors ? (
-          <HelperText style={styles.helperText} type="error" visible={!!error}>
+          <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,
+      })}
     </>
   )
 }
@@ -107,8 +132,5 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1,
   },
-  helperText: {
-    // flex: 1,
-  },
 })
 export default React.forwardRef(DatePickerInputWithoutModal)

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}
     />
   )

src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap

@@ -3593,6 +3593,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                 maxFontSizeMultiplier={1.5}
                 multiline={false}
                 onBlur={[Function]}
+                onChange={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
                 onSubmitEditing={[Function]}

src/__tests__/Date/__snapshots__/CalendarEdit.test.tsx.snap

@@ -176,6 +176,7 @@ exports[`renders CalendarEdit 1`] = `
             maxFontSizeMultiplier={1.5}
             multiline={false}
             onBlur={[Function]}
+            onChange={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
             onSubmitEditing={[Function]}

src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap

@@ -170,6 +170,7 @@ exports[`renders DatePickerInput 1`] = `
             maxFontSizeMultiplier={1.5}
             multiline={false}
             onBlur={[Function]}
+            onChange={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
             placeholder=" "

src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap

@@ -169,6 +169,7 @@ exports[`renders DatePickerInput 1`] = `
           maxFontSizeMultiplier={1.5}
           multiline={false}
           onBlur={[Function]}
+          onChange={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "