105 lines
2.7 KiB
JavaScript
105 lines
2.7 KiB
JavaScript
import React, {useState} from 'react';
|
|
import {View, TextInput, StyleSheet, Dimensions, Text} from 'react-native';
|
|
import {Colors, FONTS} from 'global-styles';
|
|
import {RFValue} from 'react-native-responsive-fontsize';
|
|
import {Icon} from 'components';
|
|
const {width} = Dimensions.get('window');
|
|
|
|
const _Text = props => {
|
|
const {label, editable, note, error, required, counter} = props;
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
return (
|
|
<View style={styles.container}>
|
|
{label && (
|
|
<Text style={styles.label}>
|
|
{label}
|
|
{required && <Text style={{color: Colors.RED}}>*</Text>}
|
|
</Text>
|
|
)}
|
|
<View style={styles.inputSection(editable)}>
|
|
<TextInput
|
|
{...props}
|
|
style={styles.input(isFocused)}
|
|
editable={editable}
|
|
maxLength={counter ? counter : undefined}
|
|
onChange={e => setIsFocused(e.nativeEvent.text.length > 0)}
|
|
placeholderTextColor={Colors.GREY}
|
|
/>
|
|
</View>
|
|
{counter && (
|
|
<Text
|
|
style={styles.counterText}>{`${props.value.length}/${counter}`}</Text>
|
|
)}
|
|
{note && <Text style={styles.note}>{note}</Text>}
|
|
{error && (
|
|
<View style={styles.errorSection}>
|
|
<Icon name="error" type="MaterialIcons" style={styles.errorIcon} />
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
_Text.defaultProps = {
|
|
editable: true,
|
|
note: undefined,
|
|
error: undefined,
|
|
required: false,
|
|
counter: false,
|
|
value: '',
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {},
|
|
label: {
|
|
fontFamily: FONTS.poppins[600],
|
|
fontSize: RFValue(11.5),
|
|
color: Colors.TEXT,
|
|
},
|
|
inputSection: editable => ({
|
|
height: width * 0.12,
|
|
borderWidth: 1,
|
|
borderColor: Colors.LINE_STROKE,
|
|
borderRadius: width * 0.02,
|
|
marginVertical: width * 0.023,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: width * 0.04,
|
|
backgroundColor: editable ? Colors.WHITE : Colors.DISABLED,
|
|
}),
|
|
input: isFocused => ({
|
|
fontFamily: FONTS.poppins[isFocused ? 500 : 400],
|
|
fontSize: RFValue(isFocused ? 13 : 12),
|
|
color: Colors.TEXT,
|
|
}),
|
|
note: {
|
|
fontFamily: FONTS.poppins[400],
|
|
fontSize: RFValue(10),
|
|
color: Colors.TEXT_LIGHT,
|
|
marginTop: -width * 0.005,
|
|
},
|
|
errorSection: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: width * 0.002,
|
|
},
|
|
errorIcon: {
|
|
color: Colors.RED,
|
|
},
|
|
errorText: {
|
|
fontFamily: FONTS.poppins[400],
|
|
fontSize: RFValue(10),
|
|
color: Colors.RED,
|
|
marginTop: -width * 0.001,
|
|
marginLeft: width * 0.01,
|
|
},
|
|
counterText: {
|
|
fontFamily: FONTS.poppins[400],
|
|
fontSize: RFValue(10),
|
|
color: Colors.TEXT_LIGHT,
|
|
alignSelf: 'flex-end',
|
|
},
|
|
});
|
|
|
|
export default _Text;
|