ilink-world/components/OutlineTextInput/index.js

91 lines
3.0 KiB
JavaScript

import React from 'react';
import { TextInput, TouchableOpacity, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import { Color } from '../../config/Color';
import { Typography } from '../../config/typography';
export default function Index(props) {
const cardColor = Color.cardBackgroundColor;
const {
style,
onChangeText,
onFocus,
placeholder,
value,
success,
secureTextEntry,
keyboardType,
textAlignVertical,
label,
onSubmitEditing,
borderBottomColor,
icon
} = props;
return (
<TouchableOpacity
activeOpacity={0.99}>
<View style={{
borderBottomWidth: 1,
borderBottomColor: borderBottomColor,
}}>
{!!label && <Text style={{ fontWeight: 'bold' }}>{label}</Text>}
<TextInput
keyboardType={keyboardType}
autoCapitalise="words"
autoCorrect={false}
style={{
height: 40,
color: "black",
fontFamily: 'Raleway',
flex: 1,
height: '100%',
color: Color.textColor,
paddingTop: 5,
paddingBottom: 5,
}}
underlineColorAndroid={"transparent"}
placeholderTextColor={success ? Color.grayColor : Color.primaryColor}
placeholder={placeholder}
secureTextEntry={secureTextEntry}
value={value}
onChangeText={text => onChangeText(text)}
onFocus={() => onFocus()}
textAlignVertical={textAlignVertical}
onSubmitEditing={onSubmitEditing} />
{icon}
</View>
</TouchableOpacity>
);
}
Index.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
onChangeText: PropTypes.func,
onFocus: PropTypes.func,
placeholder: PropTypes.string,
value: PropTypes.string,
success: PropTypes.bool,
label: PropTypes.string,
secureTextEntry: PropTypes.bool,
keyboardType: PropTypes.string,
textAlignVertical: PropTypes.string,
icon: PropTypes.node,
onSubmitEditing: PropTypes.func,
};
Index.defaultProps = {
style: {},
onChangeText: text => { },
onFocus: () => { },
placeholder: 'Placeholder',
value: '',
label: '',
borderBottomColor: "black",
success: true,
secureTextEntry: false,
keyboardType: 'default',
textAlignVertical: 'center',
icon: null,
onSubmitEditing: () => { },
};