verdnatura-chat/app/views/ShareListView/Header/SearchBox.tsx

93 lines
2.4 KiB
TypeScript
Raw Permalink Normal View History

import React from 'react';
2022-03-21 19:23:59 +00:00
import { StyleSheet, Text, TextInput as RNTextInput, TextInputProps, View } from 'react-native';
2019-07-29 16:33:28 +00:00
import Touchable from 'react-native-platform-touchable';
import { themes } from '../../../lib/constants';
import I18n from '../../../i18n';
import { CustomIcon } from '../../../containers/CustomIcon';
import { TextInput } from '../../../containers/TextInput';
import { useTheme } from '../../../theme';
import { isIOS } from '../../../lib/methods/helpers';
import sharedStyles from '../../Styles';
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
}
});
2022-03-21 19:23:59 +00:00
interface ISearchBox extends TextInputProps {
value?: string;
hasCancel?: boolean;
onCancelPress?: () => void;
inputRef?: React.Ref<RNTextInput>;
}
const CancelButton = ({ onCancelPress }: { onCancelPress?: () => void }) => {
2022-03-21 19:23:59 +00:00
const { theme } = useTheme();
return (
<Touchable onPress={onCancelPress} style={styles.cancel}>
<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
</Touchable>
);
};
2019-07-29 16:33:28 +00:00
2022-03-21 19:23:59 +00:00
const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
const { theme } = useTheme();
return (
<View
style={[
styles.container,
{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
]}
>
2022-03-21 19:23:59 +00:00
<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
<TextInput
ref={inputRef}
autoCapitalize='none'
autoCorrect={false}
blurOnSubmit
clearButtonMode='while-editing'
placeholder={I18n.t('Search')}
returnKeyType='search'
style={styles.input}
underlineColorAndroid='transparent'
{...props}
/>
</View>
{hasCancel && onCancelPress ? <CancelButton onCancelPress={onCancelPress} /> : null}
</View>
2022-03-21 19:23:59 +00:00
);
};
2022-03-21 19:23:59 +00:00
export default SearchBox;