React Native Scratchpad

gistfile1.txt

'use strict';

var React = require('react-native');
var {
  TextInput,
  Text,
  View,
  ListView
} = React;

var styles = React.StyleSheet.create({

  container: {
    flex: 1,
    paddingTop: 5,
    flexDirection: 'column',
    backgroundColor: 'white',
    paddingLeft:8,
    borderWidth:.5,
    borderColor:'gray'
  },
  label: {
    height: 14,
    fontSize: 13,
    textAlign: 'left',
  },
  instructions: {
    height: 14,
    fontSize: 11,
    textAlign: 'left',

  },
  validations: {
    height: 14,
    fontSize: 11,
    textAlign: 'left',
    color: 'red'
  },
  input: {
    height: 26,
    fontSize: 15,
  },
  paragraphInput: {
    height: 85,
    fontSize: 15,
  },
  listView: {
    paddingTop: 20,
    backgroundColor: 'white',
  },
  formTitle: {
    fontSize:24,
    backgroundColor: '#F5FCFF',
  },
  sectionTitle: {
    fontSize:18,
    paddingBottom:5,
    backgroundColor: '#F5FCFF',
  },
  formInstructions: {
    fontSize:14,
    backgroundColor: '#F5FCFF',
  },
  sectionContainer: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#F5FCFF',
    paddingLeft:8,
    borderWidth:.5,
    borderColor:'gray',
    paddingTop:5,
  },

});

var SailTextField = React.createClass({
  getInitialState : function() {
    return {
      value:this.props.value
    };
  },
  render: function() {
    var config = this.props.config;
    var errorMessage;
    if (config.validations) {
      errorMessage = config.validations[0].message
    };
    var keyboard = 'default';
    if (config.keyboard === "DECIMAL" || config.keyboard === "INTEGER") {
      keyboard = 'numeric';
    }
    return (<View style={styles.container}>
              <Text style={styles.label}>{config.label}</Text>
              <TextInput
                style={styles.input}
                onChangeText={this.onChanged}
                clearButtonMode='while-editing'
                onBlur={()=>this.setState({value:config.value})}
                value = {this.state.value}
                keyboardType ={keyboard}/>
              <Text style={styles.instructions}>{config.instructions}</Text>
              <Text style={styles.validations}>{errorMessage}</Text>
            </View>)
  },
  onChanged: function(text) {
    this.setState({
      value:text
    });
    var v = {};
    v["#t"] = "string";
    v["#v"] = text;
    this.props.reevaluate(this.props.config.saveInto[0], v);
  }
}
);

var SailParagraphField = React.createClass({
  render: function() {
    var config = this.props.config;
    var errorMessage;
    if (config.validations) {
      errorMessage = config.validations[0].message
    };

    return <View style={styles.container}>
            <Text style={styles.label}>{config.label}</Text>
            <TextInput
            style={styles.paragraphInput}
            onChangeText={this.onChanged}
            clearButtonMode='while-editing'
            value = {config.value}
            multiline={false}/>
            <Text style={styles.instructions}>{config.instructions}</Text>
            <Text style={styles.validations}>{errorMessage}</Text>
          </View>
  },
  onChanged: function(text) {
    var v = {};
    v["#t"] = "string";
    v["#v"] = text;
    this.props.reevaluate(this.props.config.saveInto[0], v);
  }
}
);

var SailFormHeader = React.createClass({
  render: function() {
    var config = this.props.config;
    return <View style={styles.sectionContainer}>
              <Text style={styles.formTitle}>{config.label}</Text>
              <Text style={styles.formInstructions}>{config.instructions}</Text>

          </View>
  }
}
);

var SailSectionHeader = React.createClass({
  render: function() {
    var config = this.props.config;
    return <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>{config.label}</Text>
          </View>
  }
}
);

var Appian = React.createClass( {
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      uiConfig:null,
      loaded: false
    };
  },

  render: function() {
    if (this.state.loaded) {
      return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderComponent}
        style={styles.listView}/>
    );
    }
    else {
      return  (<View style={styles.container}>
                <Text style={styles.title}>Loading</Text>
              </View>);
    }

  },
  reevaluate: function (saveInto, newValue){
    var uiConfig = this.state.uiConfig;

    var saveRequest = {
      name : saveInto,
      value : newValue
    };

    var updates = {};
    updates["#t"] = "NamedTypedValue?list";
    updates["#v"] = [saveRequest];

    var reevaluationRequest = {
      context : uiConfig.context,
      uuid : uiConfig.uuid,
      updates : updates
    };
    reevaluationRequest["#t"] = "UiConfig";

    reevaluate(reevaluationRequest, this.onSuccess, this.onError);
  },
  onSuccess: function(uiConfig) {
    this.setState({
      uiConfig:uiConfig,
      dataSource: this.state.dataSource.cloneWithRows(this.generateRows(uiConfig.ui)),
      loaded:true
    });
  },
  onError : function(msg) {
    console.log(msg);
  },
  componentDidMount: function() {
    evaluate(this.onSuccess, this.onError);
  },
  renderComponent: function(component) {
    if (component['#t'] === "TextField" ) {
      return <SailTextField config = {component} reevaluate={this.reevaluate}/>;
    };
    if (component['#t'] === "FormLayout") {
      return <SailFormHeader config = {component} reevaluate={this.reevaluate}/>;
    }
    if (component['#t'] === "SectionLayout") {
      return <SailSectionHeader config = {component} reevaluate={this.reevaluate}/>;
    }
    if (component['#t'] === "ParagraphField") {
      return <SailParagraphField config = {component} reevaluate={this.reevaluate}/>;
    }
    return <SailTextField config = {component} reevaluate={this.reevaluate}/>;
  },
  generateRows: function(ui) {
    if (ui['#t'] === "ColumnArrayLayout" ) {
      var array = [];
      for (var i = 0;i < ui.columns[0].contents.length; i++) {
        array = array.concat(this.generateRows(ui.columns[0].contents[i]));
      }
      return array;
    };
    if (ui['#t'] === "FormLayout") {
      var array = [ui];
      for (var i = 0;i < ui.content.columns[0].contents.length; i++) {
        array = array.concat(this.generateRows(ui.content.columns[0].contents[i]));
      }
      return array;
    };
    if (ui['#t'] === "SectionLayout") {
      var array = [ui];
      for (var i = 0;i < ui.content.columns[0].contents.length; i++) {
        array = array.concat(this.generateRows(ui.content.columns[0].contents[i]));
      }
      return array;
    };
    return ui;
  },
});

var evaluate = function(onSuccess, onError) {
  fetch('https://react.appianci.net/suite/rest/a/uicontainer/latest/EgbC8A/view', {
      method: 'get',
      headers: {
      'Accept': 'application/vnd.appian.tv.ui+json;c=1',
      'Content-Type': 'text/plain',
      'X-Appian-features': '3c',
      'Authorization': 'Basic a2V2aW4ud3JpZ2h0LnM6YQ=='
      }
    }).then((response) => response.json())
      .then((responseData) => {
        onSuccess(responseData);
    }).catch(function(ex) {
      onError(ex);
    });
};

var reevaluate = function(payload, onSuccess, onError) {
  fetch('https://react.appianci.net/suite/rest/a/uicontainer/latest/EgbC8A/view', {
      method: 'post',
      headers: {
      'Accept': 'application/vnd.appian.tv.ui+json;c=1',
      'Content-Type': 'application/vnd.appian.tv+json',
      'X-Appian-features': '3c',
      'Authorization': 'Basic a2V2aW4ud3JpZ2h0LnM6YQ=='
      },
      body: JSON.stringify(payload)
    }).then((response) => response.json())
      .then((responseData) => {
        onSuccess(responseData);
    }).catch(function(ex) {
      onError(ex);
    });
}
React.AppRegistry.registerComponent('Appian', () => Appian);