|
|
@@ -1,9 +1,17 @@
|
|
|
import React from 'react';
|
|
|
import Module from '../lib/Module';
|
|
|
-import {StyleSheet ,TextInput, View, Button } from 'react-native';
|
|
|
+import {StyleSheet ,TextInput, View, Button , Text } from 'react-native';
|
|
|
|
|
|
import Types from '../lib/Types';
|
|
|
-
|
|
|
+const Inp = [
|
|
|
+ {
|
|
|
+ textContentType :"username",
|
|
|
+ placeholder:"username"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ textContentType :"password",
|
|
|
+ placeholder:"password"
|
|
|
+ }]
|
|
|
|
|
|
|
|
|
export default class FormComp extends Module {
|
|
|
@@ -19,29 +27,42 @@ export default class FormComp extends Module {
|
|
|
}
|
|
|
display() {
|
|
|
let {
|
|
|
- inputsNum,
|
|
|
+ inputs, // number of inputs this must be Object
|
|
|
+ inputsMargin,
|
|
|
ButtonText,
|
|
|
ButtonColor,
|
|
|
- container
|
|
|
+ backgroundColor,
|
|
|
+ Formtitle
|
|
|
} = this.props
|
|
|
- if(!inputsNum) inputsNum = 2;
|
|
|
- let Inputs = [];
|
|
|
- for(let i = 0; i<inputsNum; i++){
|
|
|
- let key = i+1;
|
|
|
- let state = {};
|
|
|
- let input = <TextInput key={i}
|
|
|
- style={{height: 20, borderColor: 'gray', borderWidth: 1 , marginBottom:5}}
|
|
|
+
|
|
|
+ //Init
|
|
|
+ if(!inputs) inputs = Inp;
|
|
|
+ if(!inputsMargin) inputsMargin = 7
|
|
|
+ if(!backgroundColor) backgroundColor = "#f7e6ff"
|
|
|
+
|
|
|
+
|
|
|
+ let Inputs = Object.keys(inputs).map((key,indx) => {
|
|
|
+ let state = {}
|
|
|
+ return (<TextInput key={indx}
|
|
|
+ style={[{height: 20, borderColor: 'gray', borderWidth: 1 , marginBottom:inputsMargin},StaticRules.text]}
|
|
|
onChangeText={(text) => {
|
|
|
- state[key] = text;
|
|
|
+ state[indx] = text;
|
|
|
this.setState(state)}}
|
|
|
value={this.state.key}
|
|
|
- placeholder={'placeholder'}
|
|
|
- />
|
|
|
- Inputs.push(input);
|
|
|
- }
|
|
|
+ placeholder={inputs[key].placeholder}
|
|
|
+ textContentType={inputs[key].textContentType}
|
|
|
+ secureTextEntry={ inputs[key].textContentType === "password" ? true :false}
|
|
|
+ />)
|
|
|
+ })
|
|
|
+
|
|
|
let fn = this.props.submit || this.submit
|
|
|
return (
|
|
|
- <View style={{backgroundColor:"#f7e6ff",width:250,height:100,padding:10}}>
|
|
|
+ <View style={[{backgroundColor:backgroundColor},StaticRules.container]}>
|
|
|
+ {this.props.Formtitle ? (
|
|
|
+ <Text>{this.props.Formtitle}</Text>
|
|
|
+ ):(null)}
|
|
|
+
|
|
|
+
|
|
|
{Inputs}
|
|
|
<Button
|
|
|
onPress = {(e) => fn(e)}
|
|
|
@@ -52,12 +73,41 @@ export default class FormComp extends Module {
|
|
|
</View>)
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+//Predefined Rules that the User cant change
|
|
|
+let StaticRules = StyleSheet.create({
|
|
|
+ container:{
|
|
|
+ padding:10
|
|
|
+ },
|
|
|
+ text:{
|
|
|
+ fontSize:7
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
FormComp.Inputs = {
|
|
|
- inputsNum: new Types.Integer().require().default(2),
|
|
|
+ //inputsNum: new Types.Integer().require().default(2),
|
|
|
+ /*inputs:[
|
|
|
+ {
|
|
|
+ textContentType :"username",
|
|
|
+ placeholder:"username"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ textContentType :"password",
|
|
|
+ placeholder:"password"
|
|
|
+ },
|
|
|
+ ],*/
|
|
|
+ inputs:new Types.Object().require(),
|
|
|
ButtonText:new Types.Text().require().default('Submit'),
|
|
|
- ButtonColor: new Types.Text().require().color().default('#008CBA')
|
|
|
+ ButtonColor: new Types.Text().require().color().default('#008CBA'),
|
|
|
+ backgroundColor: new Types.Text().require().color().default('#03DAC6'),
|
|
|
+ Formtitle: new Types.Text().require()
|
|
|
}
|
|
|
|
|
|
+/*
|
|
|
+inputs, // number of inputs this must be Object
|
|
|
+ inputsMargin,
|
|
|
+ ButtonText,
|
|
|
+ ButtonColor,
|
|
|
+ backgroundColor,
|
|
|
+ Formtitle
|
|
|
+
|
|
|
+*/
|
sxoinas12