108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
useState,
|
|
useRef
|
|
} from 'react';
|
|
import { FormControl } from 'native-base';
|
|
import { connect } from "react-redux";
|
|
import { TouchableOpacity, View } from "react-native";
|
|
import { TextInput } from 'react-native-gesture-handler';
|
|
import Icon from '../../components/icons.js';
|
|
import Theme from '../../components/theme.style';
|
|
|
|
CustomForm = (props) => {
|
|
const styles = {
|
|
activeText: {fontFamily: 'Arial', fontSize: 12, color: Theme.colors.accent},
|
|
default: {fontFamily: 'Arial', paddingBottom: 0, fontSize: 14, color: Theme.colors.gray},
|
|
input: {fontFamily: 'Arial', fontSize: 15, flex: 1, borderWidth: 1, borderColor: Theme.colors.gray, borderRadius: 5, height: 35, padding: 10},
|
|
placeholder: {fontFamily: 'Arial', fontSize: 14, color: Theme.colors.lightGray},
|
|
iconButton: { marginLeft: 10, backgroundColor: Theme.colors.gray, borderRadius: 20 }
|
|
}
|
|
|
|
let labelRefs = [useRef()]
|
|
const [focus, setfocus] = useState(false)
|
|
const [activeIndex, setactiveindex] = useState(0)
|
|
|
|
const renderItem = (prop, index) => {
|
|
const [value, setValue] = useState();
|
|
|
|
React.useEffect(() => {
|
|
setValue(prop.value)
|
|
}, [prop.value])
|
|
|
|
React.useEffect(() => {
|
|
|
|
if(prop.automaticCategory) {
|
|
setValue(prop.value + ` ${prop.category}`)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<View style={{marginBottom: 5}}>
|
|
<FormControl.Label
|
|
ref={(r) => labelRefs[index - 1] = r}
|
|
style={activeIndex == index && focus ? styles.activeText : styles.default}>
|
|
{prop.name}
|
|
</FormControl.Label>
|
|
<View style={{flexDirection: 'row', width: '100%', alignItems: 'flex-end'}}>
|
|
<TextInput
|
|
keyboardType={prop.kb || 'default'}
|
|
returnKeyType={'done'}
|
|
value={value}
|
|
onFocus={() => {
|
|
if(!value && props.type === "button") return;
|
|
|
|
setactiveindex(index);
|
|
setfocus(true)
|
|
prop.onFocus ? prop.onFocus() : prop.category && prop.value && setValue(value.replace(` ${prop.category}`, ""))
|
|
}}
|
|
maxLength={prop.maxLength || 255}
|
|
editable={prop.disabled}
|
|
onTouchStart={() => prop.onClick ? prop.onClick() : null}
|
|
onChangeText={(val) => prop.onChangeText ? prop.onChangeText(val) : null}
|
|
onBlur={(e) => {
|
|
if(!value || props.type === "button") return;
|
|
let newValue;
|
|
setactiveindex(0);
|
|
setfocus(false);
|
|
|
|
if(value && value.includes(".") && value.split(".")[1].length === 0) {
|
|
newValue = value.includes(".") && value.length > 0 && value.split(".")[0];
|
|
} else {
|
|
newValue = value.includes(".") && value.length > 0 && value.split(".")[1].length === 1 ? `${value}0` : value;
|
|
}
|
|
|
|
prop.onBlur ? prop.onBlur() : prop.category && prop.value && setValue(newValue + ` ${prop.category}`)
|
|
}}
|
|
style={[styles.input, { color: props.app_theme?.theme.colors.text }]}
|
|
/>
|
|
{prop.icon ?
|
|
<TouchableOpacity style={styles.iconButton} onPress={prop.onIconClick}>
|
|
<Icon.AntDesign name="info" size={16} color={Theme.colors.white} />
|
|
</TouchableOpacity> : null
|
|
}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const renderItems = () => {
|
|
return props.items.map((item, i) => {
|
|
return renderItem(item, i)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<FormControl style={{padding: 0, width: '95%'}}>
|
|
{renderItems()}
|
|
</FormControl>
|
|
)
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(CustomForm); |