Editor/Components/ActionEditor.js

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
import InjectionSystem from 'trapilib/dist/lib/systems/InjectionSystem';
import { Picker } from 'react-native';

const ActionSystem = InjectionSystem.inject('Actions')

export default function ActionEditor(props) {
	let [action, setAction] = useState(props.value || {});

	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>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>
			</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: {
		flexDirection: 'column',
		borderBottomWidth: 1,
		borderColor: '#cecece'
	},
	capFirst: {
		fontSize: 14,
		fontFamily: 'roboto-light',
		textTransform: 'capitalize'
	},
	row:{
		flexDirection:'row',
		justifyContent:"space-between",
		alignItems:"center"
	},
	picker: {
		marginTop: 6,
		borderWidth: 1,
		backgroundColor: 'white',
		boxShadow: '0px 3px 6px #00000029',
		borderColor: '#FFFFFF66',
		borderRadius: 14
	},
	title: {

	}
})