Merge pull request #256 from web-ridge/disable-datepickermodal-field

Disable datepickermodal field

Author: RichardLindhout

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

@@ -99,4 +99,8 @@ The start year when the component is rendered. Defaults to `1800`.
 `Type: number | undefined`  
 The end year when the component is rendered. Defaults to `2200`.
 
+**inputEnabled**  
+`Type: boolean | undefined`  
+Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.
+
 * Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).*

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

@@ -145,3 +145,7 @@ The edit icon used to toggle between calendar and input. Defaults to `pencil`. Y
 **calendarIcon**  
 `Type: string | undefined`  
 The edit icon used to toggle between input and calendar. Defaults to `calendar`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
+
+**inputEnabled**  
+`Type: boolean | undefined`  
+Flag indicating if the component should be enabled or not. Defaults to `true`.

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

@@ -132,3 +132,7 @@ The edit icon used to toggle between calendar and input. Defaults to `pencil`. Y
 **calendarIcon**  
 `Type: string | undefined`  
 The edit icon used to toggle between input and calendar. Defaults to `calendar`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
+
+**inputEnabled**  
+`Type: boolean | undefined`  
+Flag indicating if the component should be enabled or not. Defaults to `true`.

src/Date/CalendarEdit.tsx

@@ -21,6 +21,7 @@ function CalendarEdit({
   onChange,
   validRange,
   locale,
+  inputEnabled,
 }: {
   mode: ModeType
   label?: string
@@ -31,6 +32,7 @@ function CalendarEdit({
   onChange: (s: LocalState) => any
   validRange: ValidRangeType | undefined
   locale: string
+  inputEnabled?: boolean
 }) {
   const dateInput = React.useRef<TextInputNative | null>(null)
   const startInput = React.useRef<TextInputNative | null>(null)
@@ -88,6 +90,7 @@ function CalendarEdit({
           locale={locale}
           withModal={false}
           autoComplete={'off'}
+          inputEnabled={inputEnabled}
         />
       ) : null}
       {mode === 'range' ? (
@@ -104,6 +107,7 @@ function CalendarEdit({
             locale={locale}
             withModal={false}
             autoComplete={'off'}
+            inputEnabled={inputEnabled}
           />
           <View style={styles.separator} />
           <DatePickerInputWithoutModal
@@ -117,6 +121,7 @@ function CalendarEdit({
             locale={locale}
             withModal={false}
             autoComplete="off"
+            inputEnabled={inputEnabled}
           />
         </View>
       ) : null}

src/Date/DatePickerInput.shared.tsx

@@ -20,6 +20,7 @@ export type DatePickerInputProps = {
   startYear?: number
   endYear?: number
   onChangeText?: (text: string | undefined) => void
+  inputEnabled?: boolean
 } & Omit<
   React.ComponentProps<typeof TextInput>,
   'value' | 'onChange' | 'onChangeText'

src/Date/DatePickerInput.tsx

@@ -54,6 +54,7 @@ function DatePickerInput(
         uppercase,
         startYear,
         endYear,
+        inputEnabled,
       }) =>
         withModal ? (
           <DatePickerModal
@@ -70,6 +71,7 @@ function DatePickerInput(
             uppercase={uppercase ?? true}
             startYear={startYear ?? 1800}
             endYear={endYear ?? 2200}
+            inputEnabled={inputEnabled}
           />
         ) : null
       }

src/Date/DatePickerInputWithoutModal.tsx

@@ -27,6 +27,7 @@ function DatePickerInputWithoutModal(
     startYear,
     endYear,
     onChangeText,
+    inputEnabled,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -39,6 +40,7 @@ function DatePickerInputWithoutModal(
       uppercase: DatePickerInputProps['uppercase']
       startYear: DatePickerInputProps['startYear']
       endYear: DatePickerInputProps['endYear']
+      inputEnabled: DatePickerInputProps['inputEnabled']
     }) => any
     inputButtons?: any
   },
@@ -59,6 +61,16 @@ function DatePickerInputWithoutModal(
     onValidationError,
   })
 
+  let disabled
+
+  if (inputEnabled !== undefined) {
+    disabled = !inputEnabled
+  }
+
+  if (rest.disabled) {
+    disabled = rest.disabled
+  }
+
   return (
     <>
       <View style={styles.root}>
@@ -75,6 +87,7 @@ function DatePickerInputWithoutModal(
             value={formattedValue}
             keyboardType={rest.keyboardType ?? 'number-pad'}
             mask={inputFormat}
+            disabled={disabled}
             onChangeText={onDateInputChangeText}
             onChange={(e) => onChangeText && onChangeText(e.nativeEvent.text)}
             keyboardAppearance={theme.dark ? 'dark' : 'default'}
@@ -99,6 +112,7 @@ function DatePickerInputWithoutModal(
         uppercase,
         startYear,
         endYear,
+        inputEnabled,
       })}
     </>
   )

src/Date/DatePickerModal.tsx

@@ -22,6 +22,7 @@ interface DatePickerModalProps {
   animationType?: 'slide' | 'fade' | 'none'
   disableStatusBar?: boolean
   disableStatusBarPadding?: boolean
+  inputEnabled?: boolean
 }
 
 export interface DatePickerModalSingleProps
@@ -49,6 +50,7 @@ export function DatePickerModal(
     animationType,
     disableStatusBar,
     disableStatusBarPadding,
+    inputEnabled,
     ...rest
   } = props
   const animationTypeCalculated =
@@ -112,6 +114,7 @@ export function DatePickerModal(
               )}
               <DatePickerModalContent
                 {...rest}
+                inputEnabled={inputEnabled}
                 disableSafeTop={disableStatusBar}
               />
             </View>

src/Date/DatePickerModalContent.tsx

@@ -32,6 +32,7 @@ interface DatePickerModalContentBaseProps {
   disableSafeTop?: boolean
   saveLabelDisabled?: boolean
   uppercase?: boolean
+  inputEnabled?: boolean
 }
 
 export interface DatePickerModalContentRangeProps
@@ -195,6 +196,7 @@ export function DatePickerModalContent(
             onChange={onInnerChange}
             validRange={validRange}
             locale={locale}
+            inputEnabled={props.inputEnabled}
           />
         }
       />

src/Date/DatePickerModalContentHeader.tsx

@@ -27,6 +27,7 @@ export interface HeaderContentProps extends HeaderPickProps {
   collapsed: boolean
   onToggle: () => any
   locale: string | undefined
+  inputDate?: boolean
 }
 
 function getLabel(
@@ -60,13 +61,18 @@ export default function DatePickerModalContentHeader(
     uppercase,
     editIcon,
     calendarIcon,
+    inputDate,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
   const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
-  const allowEditing = mode !== 'multiple'
+  let allowEditing = mode !== 'multiple'
+
+  if (inputDate !== undefined) {
+    allowEditing = inputDate
+  }
 
   let textFont = theme?.isV3
     ? theme.fonts.labelMedium