Rocket.Chat.ReactNative/app/containers/SearchHeader.js

53 lines
1.3 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import { withDimensions } from '../dimensions';
import { isIOS, isTablet } from '../utils/deviceInfo';
import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
import TextInput from '../presentation/TextInput';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
marginLeft: 0
},
title: {
...sharedStyles.textSemibold
}
});
const SearchHeader = ({
onSearchChangeText, placeholder, theme, testID, width, height
}) => {
const isLight = theme === 'light';
const isLandscape = width > height;
const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
const titleFontSize = 16 * scale;
return (
<View style={styles.container}>
<TextInput
autoFocus
style={[styles.title, isLight && { color: themes[theme].headerTitleColor }, { fontSize: titleFontSize }]}
placeholder={placeholder}
onChangeText={onSearchChangeText}
theme={theme}
testID={testID}
/>
</View>
);
};
SearchHeader.propTypes = {
onSearchChangeText: PropTypes.func.isRequired,
placeholder: PropTypes.string.isRequired,
theme: PropTypes.string,
testID: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number
};
export default withDimensions(SearchHeader);