diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md index d3e64c7f..e11abd64 100644 --- 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 index a9ebb1c4..c9ed7ef6 100644 --- 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 index 3311b1eb..ade155f5 100644 --- 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 index 2438b520..83fe10eb 100644 --- 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(null) const startInput = React.useRef(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} /> ) : null} diff --git a/src/Date/DatePickerInput.shared.tsx b/src/Date/DatePickerInput.shared.tsx index 9c906dc0..bbcb3cd6 100644 --- 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, 'value' | 'onChange' | 'onChangeText' diff --git a/src/Date/DatePickerInput.tsx b/src/Date/DatePickerInput.tsx index 5fc58a70..333a2927 100644 --- a/src/Date/DatePickerInput.tsx +++ b/src/Date/DatePickerInput.tsx @@ -54,6 +54,7 @@ function DatePickerInput( uppercase, startYear, endYear, + inputEnabled, }) => withModal ? ( ) : null } diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index 3647ec4f..7fa2fb66 100644 --- 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 ( <> @@ -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 index 439031bc..8412ab29 100644 --- 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( )} diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx index cf2c2faa..02097027 100644 --- 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 index acde2ff6..cca0d19b 100644 --- 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 index d415a80f..e8e99e14 100644 --- a/src/TextInputMask.tsx +++ b/src/TextInputMask.tsx @@ -72,6 +72,7 @@ function TextInputWithMask( onChange, value, mask, + disabled, ...rest }: React.ComponentProps & { mask: string; value: string }, ref: any @@ -100,6 +101,7 @@ function TextInputWithMask( { diff --git a/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap index 4ec88cca..090d87b0 100644 --- 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 index 17c42666..9c78818f 100644 --- 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 index c39bc492..7f036c1f 100644 --- 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, }, ]