From 34da2d415b8824fb062d3dce88580a41a6dcd43a Mon Sep 17 00:00:00 2001 From: Brandon Fitzwater Date: Sat, 4 Feb 2023 07:15:10 -0500 Subject: [PATCH 1/3] Commit work in progress. --- example/src/App.tsx | 1 + src/Date/CalendarEdit.tsx | 5 +++++ src/Date/DatePickerInput.shared.tsx | 1 + src/Date/DatePickerInputWithoutModal.tsx | 4 ++++ src/Date/DatePickerModal.tsx | 3 +++ src/Date/DatePickerModalContent.tsx | 1 + src/Date/DatePickerModalContentHeader.tsx | 8 +++++++- src/TextInputMask.tsx | 2 ++ .../AnimatedCrossView.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/CalendarEdit.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/DatePickerInput.test.tsx.snap | 16 ++++++++-------- .../DatePickerInputWithoutModal.test.tsx.snap | 16 ++++++++-------- .../Time/__snapshots__/TimeInput.test.tsx.snap | 2 +- .../Time/__snapshots__/TimeInputs.test.tsx.snap | 4 ++-- .../Time/__snapshots__/TimePicker.test.tsx.snap | 4 ++-- 15 files changed, 61 insertions(+), 38 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 570ec782..b891cc51 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -311,6 +311,7 @@ function App() { 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/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index 3647ec4f..afe70c5a 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 }, @@ -75,6 +77,7 @@ function DatePickerInputWithoutModal( value={formattedValue} keyboardType={rest.keyboardType ?? 'number-pad'} mask={inputFormat} + disabled={!inputEnabled} onChangeText={onDateInputChangeText} onChange={(e) => onChangeText && onChangeText(e.nativeEvent.text)} keyboardAppearance={theme.dark ? 'dark' : 'default'} @@ -99,6 +102,7 @@ function DatePickerInputWithoutModal( uppercase, startYear, endYear, + inputEnabled, })} ) diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx index 439031bc..b9d76eb2 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 + dateInput?: boolean } export interface DatePickerModalSingleProps @@ -49,6 +50,7 @@ export function DatePickerModal( animationType, disableStatusBar, disableStatusBarPadding, + dateInput, ...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..062d6b61 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 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..64ed7745 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 @@ -99,6 +100,7 @@ function TextInputWithMask( return ( Date: Sat, 18 Feb 2023 08:11:29 -0500 Subject: [PATCH 2/3] Input enabled appears to work. --- example/src/App.tsx | 1 - src/Date/DatePickerInput.tsx | 2 ++ src/Date/DatePickerInputWithoutModal.tsx | 12 +++++++++++- src/Date/DatePickerModal.tsx | 6 +++--- src/Date/DatePickerModalContent.tsx | 1 + src/TextInputMask.tsx | 2 +- .../AnimatedCrossView.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/CalendarEdit.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/DatePickerInput.test.tsx.snap | 16 ++++++++-------- .../DatePickerInputWithoutModal.test.tsx.snap | 16 ++++++++-------- 10 files changed, 50 insertions(+), 38 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index b891cc51..570ec782 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -311,7 +311,6 @@ function App() { withModal ? ( ) : null } diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index afe70c5a..7fa2fb66 100644 --- a/src/Date/DatePickerInputWithoutModal.tsx +++ b/src/Date/DatePickerInputWithoutModal.tsx @@ -61,6 +61,16 @@ function DatePickerInputWithoutModal( onValidationError, }) + let disabled + + if (inputEnabled !== undefined) { + disabled = !inputEnabled + } + + if (rest.disabled) { + disabled = rest.disabled + } + return ( <> @@ -77,7 +87,7 @@ function DatePickerInputWithoutModal( value={formattedValue} keyboardType={rest.keyboardType ?? 'number-pad'} mask={inputFormat} - disabled={!inputEnabled} + disabled={disabled} onChangeText={onDateInputChangeText} onChange={(e) => onChangeText && onChangeText(e.nativeEvent.text)} keyboardAppearance={theme.dark ? 'dark' : 'default'} diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx index b9d76eb2..8412ab29 100644 --- a/src/Date/DatePickerModal.tsx +++ b/src/Date/DatePickerModal.tsx @@ -22,7 +22,7 @@ interface DatePickerModalProps { animationType?: 'slide' | 'fade' | 'none' disableStatusBar?: boolean disableStatusBarPadding?: boolean - dateInput?: boolean + inputEnabled?: boolean } export interface DatePickerModalSingleProps @@ -50,7 +50,7 @@ export function DatePickerModal( animationType, disableStatusBar, disableStatusBarPadding, - dateInput, + inputEnabled, ...rest } = props const animationTypeCalculated = @@ -114,7 +114,7 @@ export function DatePickerModal( )} diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx index 062d6b61..02097027 100644 --- a/src/Date/DatePickerModalContent.tsx +++ b/src/Date/DatePickerModalContent.tsx @@ -196,6 +196,7 @@ export function DatePickerModalContent( onChange={onInnerChange} validRange={validRange} locale={locale} + inputEnabled={props.inputEnabled} /> } /> diff --git a/src/TextInputMask.tsx b/src/TextInputMask.tsx index 64ed7745..e8e99e14 100644 --- a/src/TextInputMask.tsx +++ b/src/TextInputMask.tsx @@ -100,8 +100,8 @@ function TextInputWithMask( return ( { diff --git a/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap b/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap index 78158494..99de8498 100644 --- a/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap +++ b/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap @@ -3506,7 +3506,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = ` style={ [ { - "backgroundColor": "rgba(29, 25, 43, 0.08)", + "backgroundColor": "rgba(231, 224, 236, 1)", "borderTopLeftRadius": 4, "borderTopRightRadius": 4, }, @@ -3520,7 +3520,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 0.38)", + "backgroundColor": "rgba(28, 27, 31, 1)", "bottom": 0, "height": 1, "left": 0, @@ -3576,7 +3576,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = ` onLayout={[Function]} style={ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(103, 80, 164, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -3613,7 +3613,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = ` numberOfLines={1} style={ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(73, 69, 79, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -3647,7 +3647,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = ` Date: Sat, 18 Feb 2023 09:24:04 -0500 Subject: [PATCH 3/3] docs: Add prop to component documentation. --- docusaurus/docs/date-picker/input-date-picker.md | 4 ++++ docusaurus/docs/date-picker/range-date-picker.md | 4 ++++ docusaurus/docs/date-picker/single-date-picker.md | 4 ++++ 3 files changed, 12 insertions(+) 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`.