-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrate SearchRouterInput to RNMarkdownTextInput
- Loading branch information
1 parent
5d38a05
commit 44c8aae
Showing
7 changed files
with
192 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
src/components/Search/SearchRouter/SearchRouterInput/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import type {ForwardedRef} from 'react'; | ||
| import React, {forwardRef, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import FormHelpMessage from '@components/FormHelpMessage'; | ||
| import TextInput from '@components/TextInput'; | ||
| import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useNetwork from '@hooks/useNetwork'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import {workletizedParser} from '@libs/SearchAutocompleteUtils'; | ||
| import shouldDelayFocus from '@libs/shouldDelayFocus'; | ||
| import variables from '@styles/variables'; | ||
| import CONST from '@src/CONST'; | ||
| import type SearchRouterInputProps from './types'; | ||
|
|
||
| function SearchRouterInput( | ||
| { | ||
| value, | ||
| onSearchQueryChange, | ||
| onSubmit = () => {}, | ||
| routerListRef, | ||
| isFullWidth, | ||
| disabled = false, | ||
| shouldShowOfflineMessage = false, | ||
| autoFocus = true, | ||
| onFocus, | ||
| onBlur, | ||
| caretHidden = false, | ||
| wrapperStyle, | ||
| wrapperFocusedStyle, | ||
| outerWrapperStyle, | ||
| rightComponent, | ||
| isSearchingForReports, | ||
| selection, | ||
| }: SearchRouterInputProps, | ||
| ref: ForwardedRef<BaseTextInputRef>, | ||
| ) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
| const [isFocused, setIsFocused] = useState<boolean>(false); | ||
| const {isOffline} = useNetwork(); | ||
| const offlineMessage: string = isOffline && shouldShowOfflineMessage ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''; | ||
|
|
||
| const inputWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth}; | ||
|
|
||
| return ( | ||
| <View style={[outerWrapperStyle]}> | ||
| <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}> | ||
| <View style={styles.flex1}> | ||
| <TextInput | ||
| testID="search-router-text-input" | ||
| value={value} | ||
| onChangeText={onSearchQueryChange} | ||
| autoFocus={autoFocus} | ||
| shouldDelayFocus={shouldDelayFocus} | ||
| caretHidden={caretHidden} | ||
| loadingSpinnerStyle={[styles.mt0, styles.mr2]} | ||
| role={CONST.ROLE.PRESENTATION} | ||
| placeholder={translate('search.searchPlaceholder')} | ||
| autoCapitalize="none" | ||
| autoCorrect={false} | ||
| spellCheck={false} | ||
| enterKeyHint="search" | ||
| accessibilityLabel={translate('search.searchPlaceholder')} | ||
| disabled={disabled} | ||
| onSubmitEditing={onSubmit} | ||
| shouldUseDisabledStyles={false} | ||
| textInputContainerStyles={[styles.borderNone, styles.pb0]} | ||
| inputStyle={[inputWidth, styles.p3]} | ||
| onFocus={() => { | ||
| setIsFocused(true); | ||
| routerListRef?.current?.updateExternalTextInputFocus(true); | ||
| onFocus?.(); | ||
| }} | ||
| onBlur={() => { | ||
| setIsFocused(false); | ||
| routerListRef?.current?.updateExternalTextInputFocus(false); | ||
| onBlur?.(); | ||
| }} | ||
| isLoading={!!isSearchingForReports} | ||
| ref={ref} | ||
| isMarkdownEnabled | ||
| multiline={false} | ||
| parser={workletizedParser} | ||
| selection={selection} | ||
| /> | ||
| </View> | ||
| {!!rightComponent && <View style={styles.pr3}>{rightComponent}</View>} | ||
| </View> | ||
| <FormHelpMessage | ||
| style={styles.ph3} | ||
| isError={false} | ||
| message={offlineMessage} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| SearchRouterInput.displayName = 'SearchRouterInput'; | ||
|
|
||
| export default forwardRef(SearchRouterInput); |
49 changes: 49 additions & 0 deletions
49
src/components/Search/SearchRouter/SearchRouterInput/types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import type {ReactNode, RefObject} from 'react'; | ||
| import type {StyleProp, TextInputProps, ViewStyle} from 'react-native'; | ||
| import type {SelectionListHandle} from '@components/SelectionList/types'; | ||
|
|
||
| type SearchRouterInputProps = { | ||
| /** Value of TextInput */ | ||
| value: string; | ||
|
|
||
| /** Callback to update search in SearchRouter */ | ||
| onSearchQueryChange: (searchTerm: string) => void; | ||
|
|
||
| /** Callback invoked when the user submits the input */ | ||
| onSubmit?: () => void; | ||
|
|
||
| /** SearchRouterList ref for managing TextInput and SearchRouterList focus */ | ||
| routerListRef?: RefObject<SelectionListHandle>; | ||
|
|
||
| /** Whether the input is full width */ | ||
| isFullWidth: boolean; | ||
|
|
||
| /** Whether the input is disabled */ | ||
| disabled?: boolean; | ||
|
|
||
| /** Whether the offline message should be shown */ | ||
| shouldShowOfflineMessage?: boolean; | ||
|
|
||
| /** Callback to call when the input gets focus */ | ||
| onFocus?: () => void; | ||
|
|
||
| /** Callback to call when the input gets blur */ | ||
| onBlur?: () => void; | ||
|
|
||
| /** Any additional styles to apply */ | ||
| wrapperStyle?: StyleProp<ViewStyle>; | ||
|
|
||
| /** Any additional styles to apply when input is focused */ | ||
| wrapperFocusedStyle?: StyleProp<ViewStyle>; | ||
|
|
||
| /** Any additional styles to apply to text input along with FormHelperMessage */ | ||
| outerWrapperStyle?: StyleProp<ViewStyle>; | ||
|
|
||
| /** Component to be displayed on the right */ | ||
| rightComponent?: ReactNode; | ||
|
|
||
| /** Whether the search reports API call is running */ | ||
| isSearchingForReports?: boolean; | ||
| } & Pick<TextInputProps, 'caretHidden' | 'autoFocus' | 'selection'>; | ||
|
|
||
| export default SearchRouterInputProps; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters