132 lines
3.2 KiB
TypeScript
132 lines
3.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
|
|
import { Input, BottomSheet, ListItem, Text } from '@rneui/themed';
|
|
import { Task, RobotAction } from '../types/task';
|
|
import {
|
|
LOCATIONS,
|
|
ROBOT_ACTIONS,
|
|
PAYLOADS,
|
|
LOCATIONS_BAYS,
|
|
} from '../data/mockData';
|
|
|
|
interface TaskFormProps {
|
|
task: Task;
|
|
onTaskChange: (updatedTask: Task) => void;
|
|
}
|
|
|
|
const TaskForm: React.FC<TaskFormProps> = ({ task, onTaskChange }) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [currentField, setCurrentField] = useState('');
|
|
const [currentItems, setCurrentItems] = useState<
|
|
{ label: string; value: string }[]
|
|
>([]);
|
|
|
|
const handleParamChange = (field: string, value: string | RobotAction) => {
|
|
const updatedTask = {
|
|
...task,
|
|
parameters: {
|
|
...task.parameters,
|
|
[field]: value,
|
|
},
|
|
};
|
|
onTaskChange(updatedTask);
|
|
};
|
|
|
|
const openBottomSheet = (
|
|
field: string,
|
|
items: { label: string; value: string }[],
|
|
) => {
|
|
setCurrentField(field);
|
|
setCurrentItems(items);
|
|
setIsVisible(true);
|
|
};
|
|
|
|
const renderDropdown = (
|
|
name: string,
|
|
label: string,
|
|
value: string,
|
|
items: { label: string; value: string }[],
|
|
) => (
|
|
<TouchableOpacity onPress={() => openBottomSheet(name, items)}>
|
|
<Input
|
|
label={label}
|
|
value={value}
|
|
editable={false}
|
|
rightIcon={{ name: 'arrow-drop-down' }}
|
|
/>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
return (
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<Input
|
|
label="任务名称"
|
|
value={task.name}
|
|
onChangeText={text => onTaskChange({ ...task, name: text })}
|
|
/>
|
|
|
|
{renderDropdown(
|
|
'startLocation',
|
|
'起点',
|
|
task.parameters.startLocation,
|
|
LOCATIONS,
|
|
)}
|
|
{renderDropdown(
|
|
'endLocation',
|
|
'终点',
|
|
task.parameters.endLocation,
|
|
LOCATIONS,
|
|
)}
|
|
|
|
<Input
|
|
label="途经点 (可选)"
|
|
value={task.parameters.waypoint || ''}
|
|
onChangeText={text => handleParamChange('waypoint', text)}
|
|
/>
|
|
|
|
{renderDropdown(
|
|
'robotAction',
|
|
'机器人动作',
|
|
task.parameters.robotAction,
|
|
ROBOT_ACTIONS,
|
|
)}
|
|
{renderDropdown('payload', '载荷', task.parameters.payload, PAYLOADS)}
|
|
{renderDropdown(
|
|
'locationBay',
|
|
'库位',
|
|
task.parameters.locationBay,
|
|
LOCATIONS_BAYS,
|
|
)}
|
|
|
|
<BottomSheet
|
|
isVisible={isVisible}
|
|
onBackdropPress={() => setIsVisible(false)}
|
|
>
|
|
<ScrollView>
|
|
{currentItems.map((item, index) => (
|
|
<ListItem
|
|
key={index}
|
|
onPress={() => {
|
|
handleParamChange(currentField, item.value);
|
|
setIsVisible(false);
|
|
}}
|
|
>
|
|
<ListItem.Content>
|
|
<ListItem.Title>{item.label}</ListItem.Title>
|
|
</ListItem.Content>
|
|
</ListItem>
|
|
))}
|
|
</ScrollView>
|
|
</BottomSheet>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 16,
|
|
},
|
|
});
|
|
|
|
export default TaskForm;
|