ilink-world/components/TextInput/index.js

91 lines
2.7 KiB
JavaScript
Raw Normal View History

2020-04-24 15:11:08 +00:00
import React from 'react';
import { TextInput, View } from 'react-native';
import PropTypes from 'prop-types';
import { Color } from '../../config/Color';
export default function Index(props) {
const cardColor = Color.cardBackgroundColor;
const {
style,
onChangeText,
onFocus,
placeholder,
value,
success,
secureTextEntry,
keyboardType,
multiline,
textAlignVertical,
icon,
onSubmitEditing,
} = props;
return (
<View style={[{
textInput: {
height: 46,
borderRadius: 5,
paddingHorizontal: 10,
width: '100%',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
}, backgroundColor: cardColor
}, style]}>
<TextInput
style={{
fontFamily: 'Raleway',
flex: 1,
height: '100%',
color: colors.text,
paddingTop: 5,
paddingBottom: 5,
}}
onChangeText={text => onChangeText(text)}
onFocus={() => onFocus()}
autoCorrect={false}
placeholder={placeholder}
placeholderTextColor={success ? Color.grayColor : Color.primaryColor}
secureTextEntry={secureTextEntry}
value={value}
selectionColor={Color.primaryColor}
keyboardType={keyboardType}
multiline={multiline}
textAlignVertical={textAlignVertical}
onSubmitEditing={onSubmitEditing}
/>
{icon}
</View>
);
}
Index.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
onChangeText: PropTypes.func,
onFocus: PropTypes.func,
placeholder: PropTypes.string,
value: PropTypes.string,
success: PropTypes.bool,
secureTextEntry: PropTypes.bool,
keyboardType: PropTypes.string,
multiline: PropTypes.bool,
textAlignVertical: PropTypes.string,
icon: PropTypes.node,
onSubmitEditing: PropTypes.func,
};
Index.defaultProps = {
style: {},
onChangeText: text => { },
onFocus: () => { },
placeholder: 'Placeholder',
value: '',
success: true,
secureTextEntry: false,
keyboardType: 'default',
multiline: false,
textAlignVertical: 'center',
icon: null,
onSubmitEditing: () => { },
};