53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
|
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);
|