97 lines
2.6 KiB
JavaScript
97 lines
2.6 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 CurrencyInput from 'react-native-currency-input';
|
|
import {Icon} from 'components';
|
|
const {width} = Dimensions.get('window');
|
|
|
|
const _Currency = props => {
|
|
const {label, editable, note, error, required} = 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)}>
|
|
<CurrencyInput
|
|
{...props}
|
|
prefix="Rp"
|
|
delimiter="."
|
|
minValue={0}
|
|
precision={0}
|
|
style={styles.input(isFocused)}
|
|
editable={editable}
|
|
onChange={e => setIsFocused(e.nativeEvent.text.length > 0)}
|
|
placeholderTextColor={Colors.GREY}
|
|
/>
|
|
</View>
|
|
{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>
|
|
);
|
|
};
|
|
|
|
_Currency.defaultProps = {
|
|
editable: true,
|
|
note: undefined,
|
|
error: undefined,
|
|
required: false,
|
|
};
|
|
|
|
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,
|
|
},
|
|
});
|
|
|
|
export default _Currency;
|