drnaf
Version:
Dynamic React-Native Application Framework
293 lines (233 loc) • 9.19 kB
JavaScript
import React, { Component } from 'react'
import {
View,
RefreshControl,
ScrollView,
Image,
Text, TouchableHighlight
} from 'react-native'
// import { Fire, DRNAFButton, } from 'drnaf'
import { DRNAFInputText } from './elements/DRNAFInputText'
import { DRNAFButton } from './elements/DRNAFButton'
import { DRNAFComponent } from './inherites/DRNAFComponent';
import { DRNAFImageView } from './elements/DRNAFImageView';
import { DRNAFCamera } from './elements/DRNAFCamera';
import { l } from './utilities/Logs';
import ActionLogicals from './logicals/ActionLogicals';
import ResponseLogicals from './logicals/ResponseLogicals';
import { ResponseTypes } from './constants/ResponseTypes';
import { DRNAFLocationLabel } from './elements/DRNAFLocationLabel';
import { ActionTypes } from './constants/ActionTypes';
export class DRNAFView extends DRNAFComponent {
constructor(props) {
super(props, 'DRNAFView')
this.state = {
request: props.request,
navigation: props.navigation,
pages: [],
reference_keys: [],
response_templates: null,
elements: (props.elements)
? props.elements : [],
refreshing: false,
}
// --> receive callback
this.receiveCallback = this.receiveCallback.bind(this);
// --> data collection props
this.dataCollection = {};
this.collectionCallback = this.collectionCallback.bind(this);
}
/** Feature methods */
drnafRender() {
if (this.state.elements.length <= 0)
return <>
<Text>welcome to DRNAF</Text>
</>
else {
// prepare usage variables
const elems = this.state.elements;
const views = [];
for (var a = 0; a < elems.length; a++) {
// prepare usage variables
const elem = elems[a];
const request = elem.props;
if (elem.name === 'Button') {
// keep view
views.push(<DRNAFButton
ref={super.referenceKey(elem)}
key={'button-' + a}
request={request}
callback={this.receiveCallback} />);
} else if (elem.name === 'InputText') {
// prepare usage variables
const rk = super.referenceKey(elem);
// keep rk
this.state.reference_keys.push(rk);
// keep view
views.push(<DRNAFInputText
ref={rk}
reference_key={rk}
key={'inputtext-' + a}
request={request}
collectionCallback={this.collectionCallback}
callback={this.receiveCallback.bind(this)} />);
} else if (elem.name === 'Image') {
views.push(<DRNAFImageView
key={"imageview-" + a}
source={{
uri: request.src
}}
style={{
width: 50,
height: 50,
backgroundColor: 'red',
}} />);
} else if (elem.name === "CameraPreview") {
views.push(<DRNAFCamera
key={"camerapreview-" + a}
reference_key={super.referenceKey(elem)}
collectionCallback={this.collectionCallback}
request={request}
/>);
} else if (elem.name === 'CoordinatesLabel') {
views.push(<DRNAFLocationLabel
key={'coordinateslabel' + a}
collectionCallback={this.collectionCallback}
reference_key={super.referenceKey(elem)} />)
} else
// keep view
views.push(<View key={"container-text" + a}>
<Text key={'text' + a}>{'HELLO ' + a}</Text>
</View>)
}
return (<RefreshControl refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({
refreshing: true,
}, () => {
setTimeout(() => {
this.setState({
refreshing: false,
})
}, 100);
})
}}>
<ScrollView>
{
this.state.refreshing
? null
: <View>{views}</View>
}
</ScrollView>
</RefreshControl >)
// return <BlankTemplate childViews={views}></BlankTemplate>
}
}
/** Feature methods */
createNewPage(response) {
if (response.type === ResponseTypes.NEW_PAGE.NAME) {
alert('Create New Page: ' + JSON.stringify(response));
// prepare usage variables
const { navigation } = this.state;
// navigation.push('View', {})
} else if (response.type === ResponseTypes.DIALOG.NAME) {
alert('Display Dialog');
} else alert('response-type does not matched.: ' + response.type);
}
collectionCallback(props = {
fieldName: null,
data: null,
}) {
// prepare usage variables
const mtn = this.ct + "receiveCollection() ";
// to object collection
this.dataCollection[props.fieldName + ""] = props.data;
// print
// l.obj(mtn + "props: ", this.dataCollection);
}
mapFieldsToParameters(incoming) {
// prepare usage variables
const mtn = this.ct + "mapFieldsToParameters() ";
//--> action props
const action = incoming.action;
const actionType = action.type;
//--> props
const props = action.props;
const mapFields = props.map_fields_to_params
const apiPostRequest = props.params;
// l.m(mtn + "Action Type: " + actionType);
// l.m(mtn + "- - Map Field To Params - - ");
// l.obj(mtn + "")
// l.obj('props: ', props);
// l.m(mtn + "- - - - -")
// l.obj('map fields: ', fields);
l.obj('dataCollection: ', this.dataCollection);
// l.m("\n\n")
for (var a = 0; a < mapFields.length; a++) {
// prepare usage variables
const field = mapFields[a];
// map props
apiPostRequest[field.to_field_name + ""] = this.dataCollection[field.reference_key + ""];
}
// for (var a = 0; a < fields.length; a++) {
// // prepare usage variables
// const field = fields[a];
// const vals = context.refs[field.reference_key].entities.value;
// const value = vals.data;
// apiPostRequest[field.to_field_name] = value;
// }
return apiPostRequest;
}
receiveCallback(props = {
action: null,
}) {
// prepare usage variables
const mtn = this.ct + "receiveCallback(on-test) ";
ActionLogicals.doIt({
action: props.actions[0].action,
dataCollection: this.dataCollection,
callback: (_) => {
// prepare usage variables
const networkStatus = _.status;
// log
l.e(mtn + "network-status: " + networkStatus);
// network failed condition
if (!networkStatus) {
// alert
alert('failed during connect to API');
// exit from this process
return;
}
// alert result
alert('API Result: '+ JSON.stringify( _.data ));
// log
l.obj(mtn + "network-data: ", _.data);
}
})
// action & response
// ResponseLogicals.doIt(props.action[0], this);
// ActionLogicals.doIt(this.dataCollection, props.action[0], this);
}
_receiveCallback(props = {
actions: null,
}) {
// prepare usage variables
const { navigation, elements } = this.state;
const _entities = [props.actions]
for (var a = 0; a < this.state.reference_keys.length; a++) {
// prepare usage variables
const ref = this.state.reference_keys[a];
// keep entity
_entities.push(this.refs[ref + ""].entities);
}
// action & response
ResponseLogicals.doIt(props.actions[0], this);
ActionLogicals.doIt(props.actions[0], this);
}
/** Life cycle */
componentDidMount() {
}
render() {
return this.drnafRender()
}
}