|
|
@@ -1,55 +1,81 @@
|
|
|
import React, { useState } from 'react';
|
|
|
-import {View, Text, TextInput, StyleSheet} from 'react-native';
|
|
|
+import { View, Text, TextInput, StyleSheet } from 'react-native';
|
|
|
+import InjectionSystem from 'trapilib/dist/lib/systems/InjectionSystem';
|
|
|
+import { Picker } from 'react-native';
|
|
|
+
|
|
|
+
|
|
|
|
|
|
export default function ActionEditor(props) {
|
|
|
let [action, setAction] = useState(props.value || {});
|
|
|
- if(!action.data || typeof action.data !== "object") action.data = {};
|
|
|
+
|
|
|
+ let ActionSystem = InjectionSystem.inject('Actions');
|
|
|
+ let RoutingSystem = InjectionSystem.inject('Routing');
|
|
|
+ let Routes = RoutingSystem.topology.nodes
|
|
|
+ if (!action.data || typeof action.data !== "object") action.data = {};
|
|
|
+ if (!action.type) action.type = ActionSystem.constructor.Actions[0].id
|
|
|
return (
|
|
|
- <View style={styles.container}>
|
|
|
- <Text>{props.title}</Text>
|
|
|
- <View style={styles.row}>
|
|
|
- <Text style={[styles.title, styles.capFirst]}>Type</Text>
|
|
|
- <TextInput style={styles.defaultInput}
|
|
|
- onChangeText={(text) => {
|
|
|
- action.type = text;
|
|
|
- props.onChange && props.onChange(action);
|
|
|
- setAction(action);
|
|
|
- }}
|
|
|
- value={action.type}/>
|
|
|
- </View>
|
|
|
- <View style={styles.row}>
|
|
|
- <Text style={[styles.title, styles.capFirst]}>Data</Text>
|
|
|
- <TextInput style={styles.defaultInput}
|
|
|
- onChangeText={(text) => {
|
|
|
- action.data.route = text;
|
|
|
- props.onChange && props.onChange(action);
|
|
|
- setAction(action);
|
|
|
- }}
|
|
|
- value={action.data.route}/>
|
|
|
- </View>
|
|
|
+ <View style={styles.container}>
|
|
|
+
|
|
|
+ <Text>{props.title}</Text>
|
|
|
+
|
|
|
+ <View style={styles.row}>
|
|
|
+ <Text>Action</Text>
|
|
|
+ <Picker
|
|
|
+ selectedValue={action.name}
|
|
|
+ style={styles.picker}
|
|
|
+ onValueChange={(itemValue, itemIndex) => {
|
|
|
+ action.type = itemValue;
|
|
|
+ props.onChange && props.onChange(action);
|
|
|
+ setAction(action)
|
|
|
+ }}>
|
|
|
+ {ActionSystem.constructor.Actions.map((itemAction, index) => {
|
|
|
+ return <Picker.Item label={itemAction.name} value={itemAction.id} key={index} />
|
|
|
+ })}
|
|
|
+ <Picker.Item label="java" value="java" />
|
|
|
+ </Picker>
|
|
|
+ </View>
|
|
|
+
|
|
|
+
|
|
|
+ <View style={styles.row}>
|
|
|
+
|
|
|
+ <Text>Page</Text>
|
|
|
+ <Picker
|
|
|
+ selectedValue={action.data.route}
|
|
|
+ style={styles.picker}
|
|
|
+ onValueChange={(itemValue, itemIndex) => {
|
|
|
+ action.data.route = itemValue;
|
|
|
+ props.onChange && props.onChange(action);
|
|
|
+ setAction(action)
|
|
|
+ }}>
|
|
|
+ {Object.keys(Routes).map((k, index) => {
|
|
|
+ return <Picker.Item label={k} value={k} key={index} />
|
|
|
+ })}
|
|
|
+ </Picker>
|
|
|
+
|
|
|
</View>
|
|
|
- );
|
|
|
+ </View>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
- container:{
|
|
|
+ container: {
|
|
|
flexDirection: 'column',
|
|
|
borderBottomWidth: 1,
|
|
|
- borderColor: '#cecece'
|
|
|
- },
|
|
|
- row: {
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'baseline',
|
|
|
- justifyContent: 'space-between',
|
|
|
+ borderColor: '#cecece',
|
|
|
},
|
|
|
capFirst: {
|
|
|
- fontSize: 14,
|
|
|
+ fontSize: 14,
|
|
|
fontFamily: 'roboto-light',
|
|
|
textTransform: 'capitalize'
|
|
|
},
|
|
|
- defaultInput: {
|
|
|
- marginTop:6,
|
|
|
- borderWidth:1,
|
|
|
+ row:{
|
|
|
+ flexDirection:'row',
|
|
|
+ justifyContent:"space-between",
|
|
|
+ alignItems:"center"
|
|
|
+ },
|
|
|
+ picker: {
|
|
|
+ marginTop: 6,
|
|
|
+ borderWidth: 1,
|
|
|
backgroundColor: 'white',
|
|
|
boxShadow: '0px 3px 6px #00000029',
|
|
|
borderColor: '#FFFFFF66',
|
sxoinas12