verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

chore: Evaluate SearchBox (#3909)

This commit is contained in:
Gleidson Daniel Silva 2022-03-21 16:23:59 -03:00 committed by GitHub
parent 1a3d2fbc10
commit 2ff48471d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/containers/SearchBox.tsx
View File

@ -1,22 +1,14 @@
import React from 'react'; import React from 'react';
import { import { StyleSheet, Text, TextInput as RNTextInput, TextInputProps, View } from 'react-native';
NativeSyntheticEvent,
StyleSheet,
TextInput as RNTextInput,
Text,
TextInputFocusEventData,
TextInputProps,
View
} from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import TextInput from '../presentation/TextInput'; import { themes } from '../constants/colors';
import I18n from '../i18n'; import I18n from '../i18n';
import { CustomIcon } from '../lib/Icons'; import { CustomIcon } from '../lib/Icons';
import sharedStyles from '../views/Styles'; import TextInput from '../presentation/TextInput';
import { withTheme } from '../theme'; import { useTheme } from '../theme';
import { themes } from '../constants/colors';
import { isIOS } from '../utils/deviceInfo'; import { isIOS } from '../utils/deviceInfo';
import sharedStyles from '../views/Styles';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -52,41 +44,32 @@ const styles = StyleSheet.create({
} }
}); });
interface ISearchBox { interface ISearchBox extends TextInputProps {
value?: string; value?: string;
onChangeText: TextInputProps['onChangeText'];
onSubmitEditing?: () => void;
hasCancel?: boolean; hasCancel?: boolean;
onCancelPress?: Function; onCancelPress?: Function;
theme?: string;
inputRef?: React.Ref<RNTextInput>; inputRef?: React.Ref<RNTextInput>;
testID?: string;
onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
} }
const CancelButton = (onCancelPress: Function, theme: string) => ( const CancelButton = ({ onCancelPress }: { onCancelPress?: Function }) => {
const { theme } = useTheme();
return (
<Touchable onPress={onCancelPress} style={styles.cancel}> <Touchable onPress={onCancelPress} style={styles.cancel}>
<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text> <Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
</Touchable> </Touchable>
); );
};
const SearchBox = ({ const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
onChangeText, const { theme } = useTheme();
onSubmitEditing, return (
testID,
hasCancel,
onCancelPress,
inputRef,
theme,
...props
}: ISearchBox) => (
<View <View
style={[ style={[
styles.container, styles.container,
{ backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground } { backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
]}> ]}>
<View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}> <View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
<CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} /> <CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
<TextInput <TextInput
ref={inputRef} ref={inputRef}
autoCapitalize='none' autoCapitalize='none'
@ -96,16 +79,14 @@ const SearchBox = ({
placeholder={I18n.t('Search')} placeholder={I18n.t('Search')}
returnKeyType='search' returnKeyType='search'
style={styles.input} style={styles.input}
testID={testID}
underlineColorAndroid='transparent' underlineColorAndroid='transparent'
onChangeText={onChangeText} theme={theme}
onSubmitEditing={onSubmitEditing}
theme={theme!}
{...props} {...props}
/> />
</View> </View>
{hasCancel ? CancelButton(onCancelPress!, theme!) : null} {hasCancel ? <CancelButton onCancelPress={onCancelPress} /> : null}
</View> </View>
); );
};
export default withTheme(SearchBox); export default SearchBox;