Update of the react native components (#207)

* Update to react-native-element 1.x + add parser func for int + keyboardType func + remove actions.pop() that's display state update errors in render

* Update Show

added proptype + mapstate

Author: onadrog

templates/react-native/components/foo/Create.js

@@ -15,14 +15,12 @@ class Create extends Component {
 
   onSubmit = values => {
     this.props.create(values);
-    Actions.{{{lc}}}List();
+    Actions.pop();
     delayRefresh();
   };
 
   render() {
 
-    if (this.props.created) return Actions.pop();
-
     const {viewStyle, textStyle} = styles;
 
     return (

templates/react-native/components/foo/Form.js

@@ -2,47 +2,63 @@ import React, { Component } from 'react';
 import { Field, reduxForm } from 'redux-form';
 import { View } from 'react-native';
 import {
-  FormLabel,
-  FormInput,
-  FormValidationMessage,
+  Input,
   Button,
 } from 'react-native-elements';
 
 
 class Form extends Component {
 
   renderField(data) {
-    const hasError = data.meta.touched && !!data.meta.error;
+
     data.input.value = data.input.value.toString();
+
+    let keyboard = data.type === "number" ? keyboard = "numeric" : keyboard = "default"
+
     return (
       <View>
-        <FormLabel labelStyle={ {color: 'gray', fontSize: 20} }>
-            {data.input.name}
-        </FormLabel>
-        <FormInput containerStyle={ {flexDirection:'row'} }
-                   inputStyle={ {color: 'black', flex:1} }
+        <Input
+                   labeltStyle={ {color: 'gray', flex:1} }
                    {...data.input}
                    step={data.step}
                    required={data.required}
                    placeholder={data.placeholder}
                    id={`{{{lc}}}_${data.input.name}`}
-                   multiline={true}
-                   keyboardType='numeric'
+                   errorMessage={data.meta.error}
+                   keyboardType={keyboard}
+                   label={data.input.name}
         />
-        {hasError &&
-          <FormValidationMessage>{data.meta.error}</FormValidationMessage> }
       </View>
     );
   }
 
+  intParser = (value) => {
+    if(isNaN(value)) {
+      value
+    }
+    else if(this.props.initialValues) {
+      if ((isNaN(value)) && (typeof value === 'string')){
+         value
+      } else if(value) {
+        return parseInt(value, 10)
+      } else{
+        value
+      }
+    } 
+    else {
+      return parseInt(value, 10)
+    } 
+    return value
+  }
+
   render() {
     const {handleSubmit, mySubmit} = this.props;
 
     return (
       <View style={ {backgroundColor: 'white', paddingBottom: 20} }>
 {{#each formFields}}
         <Field component={this.renderField} name="{{{name}}}" type="{{{type}}}"
-          placeholder="{{{description}}}"{{#if required}} required={true}{{/if}} />
+          placeholder="{{{description}}}"{{#if required}} required={true}{{/if}} parse={this.intParser} value="" />
 {{/each}}
         <Button buttonStyle={styles.button}
           title='SAVE'

templates/react-native/components/foo/List.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { ScrollView, View, Text } from 'react-native';
-import { List, ListItem } from 'react-native-elements';
+import { ListItem, Icon } from 'react-native-elements';
 import { Actions } from 'react-native-router-flux';
 import Spinner from '../Spinner';
 import { list, reset } from '../../actions/{{{lc}}}/list';
@@ -36,7 +36,9 @@ class ListComponent extends Component {
     return (
         <ListItem
             key={Math.random()}
-            onPressRightIcon={() => ListComponent.show(item['@id'])}
+            rightIcon={
+              <Icon name='eye' onPress={() => ListComponent.show(item['@id'])}
+             reverse={true} type='font-awesome' color='#3faab4'/>}
             subtitle={
               <View>
                 <View style={viewList}>

templates/react-native/components/foo/Show.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { ScrollView, View, Text } from 'react-native';
-import { Card, List, ListItem, SocialIcon } from 'react-native-elements';
+import { Card, ListItem, SocialIcon } from 'react-native-elements';
 import { Actions } from 'react-native-router-flux';
 import Spinner from '../Spinner';
 import { retrieve, reset } from '../../actions/{{{lc}}}/show';
@@ -51,7 +51,6 @@ class Show extends Component {
             subtitleStyle={ {color: 'black', fontSize: 16} }
             titleStyle={ {color: 'gray', fontSize: 16, paddingBottom: 10} }
             key={value}
-            hideChevron={true}
             title={title}
             subtitle={Array.isArray(value) ? value.length.toString() : value}
             subtitleNumberOfLines={100}
@@ -87,9 +86,8 @@ class Show extends Component {
   render() {
 
     if (this.props.loading) return <Spinner size="large"/>;
-    if (this.props.deleted) return Actions.pop();
 
-    const item = this.props.retrieved;
+    const item = this.props.updated ? this.props.updated : this.props.retrieved;
 
     const {viewStyle, textStyleAlert } = styles;
 
@@ -98,14 +96,12 @@ class Show extends Component {
           <ScrollView>
             {item &&
             <Card title="{{{title}}}">
-              <List title="title">
                 {Show.renderRow('id', item['@id'])}
 {{#each fields}}
     {{#ifNotResource reference }}
                 {Show.renderRow('{{{name}}}', item['{{{name}}}'])}
     {{/ifNotResource}}
 {{/each}}
-              </List>
             </Card>
             }
             {this.props.deleteLoading && <View style={viewStyle}><Spinner size='large'/></View>}
@@ -133,6 +129,7 @@ const mapStateToProps = (state) => {
     deleteError: state.{{{lc}}}.del.error,
     deleteLoading: state.{{{lc}}}.del.loading,
     deleted: state.{{{lc}}}.del.deleted,
+    update: state.{{{lc}}}.update.updated
   };
 };
 
@@ -179,7 +176,8 @@ Show.propTypes = {
   showModal:PropTypes.bool,
   refresh:PropTypes.number,
   id:PropTypes.string,
-  list: PropTypes.func.isRequired
+  list: PropTypes.func.isRequired,
+  updated: PropTypes.object
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Show);

templates/react-native/components/foo/Update.js

@@ -29,8 +29,6 @@ class Update extends Component {
 
   render() {
 
-    if (this.props.deleted) return Actions.pop();
-
     const item = this.props.updated ? this.props.updated : this.props.retrieved;
 
     const {viewStyle, textStyleAlert, textStyleSuccess} = styles;
@@ -101,7 +99,7 @@ Update.propTypes = {
   update: PropTypes.func.isRequired,
   reset: PropTypes.func.isRequired,
   id: PropTypes.string,
-  created:PropTypes.func
+  created:PropTypes.object
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Update);

templates/react-native/routes/foo.js

@@ -17,7 +17,6 @@ export default [
           <Scene key="{{{lc}}}Create" component={Create}
                  title="Add a new {{{lc}}}"/>,
           <Scene key="{{{lc}}}Show" component={Show}
-                 title="{{{title}}}"
                  leftTitle="< List of {{{title}}}s"
                  onLeft={() => {
                    Actions.pop();