web-ridge · RichardLindhout · Mar 2, 2023 · Feb 4, 2023 · Feb 18, 2023 · Feb 18, 2023
diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/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).*
diff --git a/docusaurus/docs/date-picker/range-date-picker.md b/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`.
diff --git a/docusaurus/docs/date-picker/single-date-picker.md b/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`.
diff --git a/src/Date/CalendarEdit.tsx b/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}

diff --git a/src/Date/DatePickerInput.shared.tsx b/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'

diff --git a/src/Date/DatePickerInput.tsx b/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
       }

diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/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,
       })}
     </>
   )

diff --git a/src/Date/DatePickerModal.tsx b/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>

diff --git a/src/Date/DatePickerModalContent.tsx b/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}
           />
         }
       />

diff --git a/src/Date/DatePickerModalContentHeader.tsx b/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

diff --git a/src/TextInputMask.tsx b/src/TextInputMask.tsx
@@ -72,6 +72,7 @@ function TextInputWithMask(
     onChange,
     value,
     mask,
+    disabled,
     ...rest
   }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
   ref: any
@@ -100,6 +101,7 @@ function TextInputWithMask(
     <TextInput
       ref={ref}
       {...rest}
+      disabled={disabled}
       value={controlledValue}
       onChangeText={onInnerChange}
       onChange={(e) => {

diff --git a/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap
@@ -20,7 +20,6 @@ exports[`renders TimeInput 1`] = `
     style={
       [
         {
-          "fontSize": 57,
           "textAlign": "center",
           "textAlignVertical": "center",
           "width": 96,
@@ -31,6 +30,7 @@ exports[`renders TimeInput 1`] = `
           "borderRadius": 8,
           "borderWidth": 2,
           "color": "rgba(33, 0, 93, 1)",
+          "fontSize": 57,
           "height": 80,
         },
       ]

diff --git a/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap
@@ -43,7 +43,6 @@ exports[`renders TimeInputs 1`] = `
         style={
           [
             {
-              "fontSize": 57,
               "textAlign": "center",
               "textAlignVertical": "center",
               "width": 96,
@@ -54,6 +53,7 @@ exports[`renders TimeInputs 1`] = `
               "borderRadius": 8,
               "borderWidth": 0,
               "color": "rgba(28, 27, 31, 1)",
+              "fontSize": 57,
               "height": 72,
             },
           ]
@@ -178,7 +178,6 @@ exports[`renders TimeInputs 1`] = `
         style={
           [
             {
-              "fontSize": 57,
               "textAlign": "center",
               "textAlignVertical": "center",
               "width": 96,
@@ -189,6 +188,7 @@ exports[`renders TimeInputs 1`] = `
               "borderRadius": 8,
               "borderWidth": 0,
               "color": "rgba(28, 27, 31, 1)",
+              "fontSize": 57,
               "height": 72,
             },
           ]

diff --git a/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap
@@ -51,7 +51,6 @@ exports[`renders TimePicker 1`] = `
           style={
             [
               {
-                "fontSize": 57,
                 "textAlign": "center",
                 "textAlignVertical": "center",
                 "width": 96,
@@ -62,6 +61,7 @@ exports[`renders TimePicker 1`] = `
                 "borderRadius": 8,
                 "borderWidth": 0,
                 "color": "rgba(28, 27, 31, 1)",
+                "fontSize": 57,
                 "height": 72,
               },
             ]
@@ -186,7 +186,6 @@ exports[`renders TimePicker 1`] = `
           style={
             [
               {
-                "fontSize": 57,
                 "textAlign": "center",
                 "textAlignVertical": "center",
                 "width": 96,
@@ -197,6 +196,7 @@ exports[`renders TimePicker 1`] = `
                 "borderRadius": 8,
                 "borderWidth": 0,
                 "color": "rgba(28, 27, 31, 1)",
+                "fontSize": 57,
                 "height": 72,
               },
             ]