Adding setters for every field

MichaelCereda · MichaelCereda · commit 291f566f9210 · 2016-07-17T13:05:40.000+02:00
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ Generate forms with native look and feel in a breeze
 * You don't need to create a 'Model' or a 'Struct' that contains your data, just create a form component (the React's way)
 * Validate InputFields based on keyboardType (can be overridden using validationFunction)
 * Multiple validators
-* Reset/Set Fields programmatically
+* Reset/Set Fields programmatically (setValue, setDate, setTime)
 * Custom Wrapper for Picker & DatePicker Components (iOS Only)
 
 [My blogpost about React Native Form Generator](https://medium.com/@michaelcereda/react-native-forms-the-right-way-315802f989d6#.p9oj79vt3)
diff --git a/examples/FormView.js b/examples/FormView.js
@@ -89,6 +89,8 @@ export class FormView extends React.Component{
     this.refs.registrationForm.refs.first_name.setValue("");
     this.refs.registrationForm.refs.last_name.setValue("");
     this.refs.registrationForm.refs.other_input.setValue("");
+    this.refs.registrationForm.refs.meeting.setDate(new Date());
+    this.refs.registrationForm.refs.has_accepted_conditions.setValue(false);
   }
   render(){
 
@@ -160,7 +162,7 @@ export class FormView extends React.Component{
             male: 'Male',
             female: 'Female'
           }}
-          
+
           />
           <DatePickerField ref='birthday'
           minimumDate={new Date('1/1/1900')}
diff --git a/npm-debug.log b/npm-debug.log
diff --git a/package.json b/package.json
@@ -68,5 +68,5 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
     },
-  "version": "0.9.3"
+  "version": "0.9.4"
 }
diff --git a/src/fields/DatePickerField.ios.js b/src/fields/DatePickerField.ios.js
@@ -8,11 +8,13 @@ let { View, StyleSheet, TextInput, Text, PickerIOS} = ReactNative;
 import {DatePickerComponent} from '../lib/DatePickerComponent';
 
 export class DatePickerField extends React.Component{
-
+  setDate(date){
+    this.refs.datePickerComponent.setDate(date);
+  }
   render(){
     return(<DatePickerComponent
       {...this.props}
-
+      ref='datePickerComponent'
       labelStyle={formStyles.fieldText}
       valueStyle = {formStyles.fieldValue}
 
diff --git a/src/fields/PickerField.android.js b/src/fields/PickerField.android.js
@@ -8,21 +8,13 @@ let { View, StyleSheet, TextInput, Text, PickerIOS} = ReactNative;
 import {PickerComponent} from '../lib/PickerComponent';
 
 export class PickerField extends React.Component{
-
+  setValue(value){
+    this.refs.fieldComponent.setValue(value)
+  }
   render(){
-    /*
-    labelStyle={formStyles.fieldText}
-    valueStyle = {formStyles.fieldValue}
-    valueContainerStyle = {[formStyles.alignRight,
-        formStyles.horizontalContainer]}
-    containerStyle={[formStyles.fieldContainer,
-      formStyles.horizontalContainer,
-      this.props.containerStyle,
-    ]}
-     */
     return(<PickerComponent
       {...this.props}
-  
+      ref='fieldComponent'
       pickerProps={{
         style:
           [
diff --git a/src/fields/PickerField.ios.js b/src/fields/PickerField.ios.js
@@ -8,13 +8,13 @@ let { View, StyleSheet, TextInput, Text, PickerIOS} = ReactNative;
 import {PickerComponent} from '../lib/PickerComponent';
 
 export class PickerField extends React.Component{
-
+  setValue(value){
+    this.refs.fieldComponent.setValue(value)
+  }
   render(){
-/*
-
- */
     return(<PickerComponent
       {...this.props}
+      ref='fieldComponent'
       labelStyle={[formStyles.fieldText, this.props.labelStyle]}
       valueStyle = {[formStyles.fieldValue,this.props.valueStyle]}
       valueContainerStyle = {[formStyles.alignRight,
diff --git a/src/fields/SwitchField.android.js b/src/fields/SwitchField.android.js
@@ -6,12 +6,14 @@ let { View, StyleSheet, Text, Switch} = require('react-native');
 import {SwitchComponent} from '../lib/SwitchComponent';
 
 export class SwitchField extends React.Component{
-
+  setValue(value){
+    this.refs.fieldComponent.setValue(value)
+  }
   render(){
 
     return(<SwitchComponent
       {...this.props}
-
+      ref='fieldComponent'
       containerStyle={[
         formStyles.fieldContainer,
         formStyles.horizontalContainer,
diff --git a/src/fields/SwitchField.ios.js b/src/fields/SwitchField.ios.js
@@ -6,12 +6,14 @@ let { View, StyleSheet, Text, Switch} = require('react-native');
 import {SwitchComponent} from '../lib/SwitchComponent';
 
 export class SwitchField extends React.Component{
-
+  setValue(value){
+    this.refs.fieldComponent.setValue(value)
+  }
   render(){
 
     return(<SwitchComponent
       {...this.props}
-
+      ref='fieldComponent'
       containerStyle={[
         formStyles.fieldContainer,
         formStyles.horizontalContainer,
diff --git a/src/fields/TimePickerField.android.js b/src/fields/TimePickerField.android.js
@@ -8,14 +8,16 @@ let { View, StyleSheet, TextInput, Text} = ReactNative;
 import {TimePickerComponent} from '../lib/TimePickerComponent';
 
 export class TimePickerField extends React.Component{
-
+  setTime(date){
+    this.refs.datePickerComponent.setTime(date);
+  }
   render(){
 /*
 
  */
     return(<TimePickerComponent
       {...this.props}
-
+      ref='fieldComponent'
       labelStyle={[formStyles.fieldText, this.props.labelStyle]}
       valueStyle = {[formStyles.fieldValue,this.props.valueStyle]}
       valueContainerStyle = {[formStyles.alignRight,
diff --git a/src/fields/TimePickerField.ios.js b/src/fields/TimePickerField.ios.js
@@ -8,7 +8,9 @@ let { View, StyleSheet, TextInput, Text, PickerIOS} = ReactNative;
 import {DatePickerComponent} from '../lib/DatePickerComponent';
 
 export class TimePickerField extends React.Component{
-
+  setTime(date){
+    this.refs.datePickerComponent.setDate(date);
+  }
   render(){
 /*
 
diff --git a/src/lib/DatePickerComponent.android.js b/src/lib/DatePickerComponent.android.js
@@ -15,6 +15,7 @@ import {Field} from './Field';
       }
 
     }
+
     handleLayoutChange(e){
       let {x, y, width, height} = {... e.nativeEvent.layout};
 
@@ -30,7 +31,7 @@ import {Field} from './Field';
       if(this.props.onValueChange) this.props.onValueChange(date);
     }
     setDate(date){
-      this.setState({value:date});
+      this.setState({date:date});
       if(this.props.onChange)      this.props.onChange((this.props.prettyPrint)?this.props.dateTimeFormat(date):date);
       if(this.props.onValueChange) this.props.onValueChange(date);
     }
@@ -74,7 +75,7 @@ import {Field} from './Field';
 
 
           </View>
-        
+
         </View>
         </Field>
         {(this.state.isPickerVisible)?
diff --git a/src/lib/DatePickerComponent.ios.js b/src/lib/DatePickerComponent.ios.js
@@ -15,6 +15,11 @@ export class DatePickerComponent extends React.Component{
     }
 
   }
+  setDate(date){
+    this.setState({date:date});
+    if(this.props.onChange)      this.props.onChange((this.props.prettyPrint)?this.props.dateTimeFormat(date):date);
+    if(this.props.onValueChange) this.props.onValueChange(date);
+  }
   handleLayoutChange(e){
     let {x, y, width, height} = {... e.nativeEvent.layout};
 
diff --git a/src/lib/PickerComponent.android.js b/src/lib/PickerComponent.android.js
@@ -15,6 +15,11 @@ var PickerItem = Picker.Item;
       }
       this.pickerMeasures = {};
     }
+    setValue(value){
+      this.setState({value:value});
+      if(this.props.onChange)      this.props.onChange(value);
+      if(this.props.onValueChange) this.props.onValueChange(value);
+    }
     handleLayoutChange(e){
       let {x, y, width, height} = {... e.nativeEvent.layout};
 
@@ -49,7 +54,7 @@ var PickerItem = Picker.Item;
         //this._scrollToInput(event);
     }
     render(){
-    
+
       return(<View><Field
         {...this.props}
         ref='inputBox'
diff --git a/src/lib/PickerComponent.ios.js b/src/lib/PickerComponent.ios.js
@@ -16,6 +16,11 @@ export class PickerComponent extends React.Component{
       }
       this.pickerMeasures = {};
     }
+    setValue(value){
+      this.setState({value:value});
+      if(this.props.onChange)      this.props.onChange(value);
+      if(this.props.onValueChange) this.props.onValueChange(value);
+    }
     handleLayoutChange(e){
       let {x, y, width, height} = {... e.nativeEvent.layout};
 
diff --git a/src/lib/SwitchComponent.js b/src/lib/SwitchComponent.js
@@ -18,6 +18,11 @@ export class SwitchComponent extends React.Component{
     this.setState(e.nativeEvent.layout);
     //e.nativeEvent.layout: {x, y, width, height}}}.
   }
+  setValue(value){
+    this.setState({value:value});
+    if(this.props.onChange)      this.props.onChange(value);
+    if(this.props.onValueChange) this.props.onValueChange(value);
+  }
 
   handleValueChange(value){
     // debugger;
diff --git a/src/lib/TimePickerComponent.android.js b/src/lib/TimePickerComponent.android.js
@@ -15,6 +15,7 @@ import {Field} from './Field';
       }
 
     }
+
     handleLayoutChange(e){
       let {x, y, width, height} = {... e.nativeEvent.layout};
 
@@ -31,7 +32,7 @@ import {Field} from './Field';
     }
 
     setTime(date){
-      this.setState({value:date});
+      this.setState({date:date});
       if(this.props.onChange)      this.props.onChange((this.props.prettyPrint)?this.props.dateTimeFormat(date):date);
       if(this.props.onValueChange) this.props.onValueChange(date);
     }

Original file line number	Diff line number	Diff line change
`@@ -68,5 +68,5 @@`
`68`	`68`	`"scripts": {`
`69`	`69`	`"test": "echo \"Error: no test specified\" && exit 1"`
`70`	`70`	`},`
`71`		`- "version": "0.9.3"`
	`71`	`+ "version": "0.9.4"`
`72`	`72`	`}`