80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
useState,
|
|
useRef
|
|
} from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
FormControl,
|
|
Stack,
|
|
Input,
|
|
Icon
|
|
} from 'native-base';
|
|
import Theme from '../../components/theme.style';
|
|
|
|
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},
|
|
placeholder: {fontFamily: 'Arial', fontSize: 14, color: Theme.colors.lightGray}
|
|
}
|
|
|
|
CustomForm = (props) => {
|
|
|
|
let labelRefs = [useRef()]
|
|
const [focus, setfocus] = useState(false)
|
|
const [activeIndex, setactiveindex] = useState(0)
|
|
|
|
const renderItem = (prop, index) => {
|
|
return (
|
|
<>
|
|
<FormControl.Label
|
|
ref={(r) => labelRefs[index - 1] = r}
|
|
style={activeIndex == index && focus ? styles.activeText : styles.default}>
|
|
{prop.name}
|
|
</FormControl.Label>
|
|
<Input
|
|
|
|
keyboardType={prop.kb || 'default'}
|
|
returnKeyType={'done'}
|
|
value={prop.value}
|
|
onFocus={() => {
|
|
setactiveindex(index);
|
|
setfocus(true)
|
|
prop.onFocus ? prop.onFocus() : null
|
|
}}
|
|
maxLength={prop.maxLength || 255}
|
|
disabled={prop.disabled}
|
|
onTouchStart={() => prop.onClick ? prop.onClick() : null}
|
|
onChangeText={(val) => prop.onChangeText ? prop.onChangeText(val) : null}
|
|
onBlur={(e) => {
|
|
setactiveindex(0);
|
|
setfocus(false);
|
|
prop.onBlur ? prop.onBlur() : null
|
|
}}
|
|
style={[styles.input, { color: props.app_theme?.theme.colors.text }]}
|
|
/>
|
|
{prop.icon ? <Icon onPress={prop.onIconClick} active name={prop.icon} style={{ fontSize: 20, color: 'gray' }} /> : null}
|
|
</>)
|
|
}
|
|
|
|
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); |