Skip to content

Instantly share code, notes, and snippets.

@a2ndrade
Last active August 29, 2015 14:19
Show Gist options
  • Save a2ndrade/127a422c194738e4ddb4 to your computer and use it in GitHub Desktop.
Save a2ndrade/127a422c194738e4ddb4 to your computer and use it in GitHub Desktop.
React Native Scratchpad
'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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment