Rocket.Chat.ReactNative/app/containers/SearchBox.tsx

112 lines
2.5 KiB
TypeScript
Raw Normal View History

import React from 'react';
import {
NativeSyntheticEvent,
StyleSheet,
TextInput as RNTextInput,
Text,
TextInputFocusEventData,
TextInputProps,
View
} from 'react-native';
2019-07-29 16:33:28 +00:00
import Touchable from 'react-native-platform-touchable';
2019-12-04 16:39:53 +00:00
import TextInput from '../presentation/TextInput';
import I18n from '../i18n';
import { CustomIcon } from '../lib/Icons';
2019-03-29 19:36:07 +00:00
import sharedStyles from '../views/Styles';
2019-12-04 16:39:53 +00:00
import { withTheme } from '../theme';
import { themes } from '../constants/colors';
import { isIOS } from '../utils/deviceInfo';
const styles = StyleSheet.create({
container: {
2019-07-29 16:33:28 +00:00
flexDirection: 'row',
alignItems: 'center',
flex: 1
},
searchBox: {
alignItems: 'center',
borderRadius: 10,
flexDirection: 'row',
fontSize: 17,
height: 36,
margin: 16,
marginVertical: 10,
2019-07-29 16:33:28 +00:00
paddingHorizontal: 10,
flex: 1
},
input: {
flex: 1,
fontSize: 17,
marginLeft: 8,
paddingTop: 0,
2019-03-29 19:36:07 +00:00
paddingBottom: 0,
...sharedStyles.textRegular
2019-07-29 16:33:28 +00:00
},
cancel: {
2020-02-13 19:24:39 +00:00
marginRight: 15
2019-07-29 16:33:28 +00:00
},
cancelText: {
...sharedStyles.textRegular,
fontSize: 17
}
});
interface ISearchBox {
value?: string;
onChangeText: TextInputProps['onChangeText'];
onSubmitEditing?: () => void;
hasCancel?: boolean;
onCancelPress?: Function;
theme?: string;
inputRef?: React.Ref<RNTextInput>;
testID?: string;
onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
}
const CancelButton = (onCancelPress: Function, theme: string) => (
2019-07-29 16:33:28 +00:00
<Touchable onPress={onCancelPress} style={styles.cancel}>
<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
2019-07-29 16:33:28 +00:00
</Touchable>
);
const SearchBox = ({
onChangeText,
onSubmitEditing,
testID,
hasCancel,
onCancelPress,
inputRef,
theme,
...props
}: ISearchBox) => (
2019-12-04 16:39:53 +00:00
<View
style={[
styles.container,
{ backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground }
]}>
<View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}>
<CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} />
<TextInput
2019-11-25 20:01:17 +00:00
ref={inputRef}
autoCapitalize='none'
autoCorrect={false}
blurOnSubmit
clearButtonMode='while-editing'
placeholder={I18n.t('Search')}
returnKeyType='search'
style={styles.input}
testID={testID}
underlineColorAndroid='transparent'
onChangeText={onChangeText}
onSubmitEditing={onSubmitEditing}
theme={theme!}
2019-07-29 16:33:28 +00:00
{...props}
/>
</View>
{hasCancel ? CancelButton(onCancelPress!, theme!) : null}
</View>
);
2019-12-04 16:39:53 +00:00
export default withTheme(SearchBox);