|
|
|
|
@ -1,23 +1,32 @@
|
|
|
|
|
// screens/moves/MoveFormScreen.tsx
|
|
|
|
|
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import { Button, StyleSheet, Text, TextInput } from 'react-native';
|
|
|
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
|
|
|
import { RootStackParamList } from "../../navigation/navigationTypes";
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
import { createMove, updateMove } from '../../redux/actions/moveActions';
|
|
|
|
|
import { AppDispatch, RootState } from "../../redux/store";
|
|
|
|
|
import { Move } from "../../entities/Move";
|
|
|
|
|
import { RouteProp } from "@react-navigation/native";
|
|
|
|
|
import { MOVE_FORM } from "../../navigation/constants";
|
|
|
|
|
import { Picker } from "@react-native-community/picker";
|
|
|
|
|
import { ItemValue } from "@react-native-community/picker/typings/Picker";
|
|
|
|
|
import { MoveCategoryName } from "../../entities/MoveCategoryName";
|
|
|
|
|
import { TypeName } from "../../entities/TypeName";
|
|
|
|
|
import MultiSelect from "react-native-multiple-select";
|
|
|
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
|
|
|
|
|
import AlertModal from "../../components/AlertModal";
|
|
|
|
|
import { MOVE_ERROR } from "../../redux/constants";
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import {
|
|
|
|
|
Button,
|
|
|
|
|
KeyboardAvoidingView,
|
|
|
|
|
Modal,
|
|
|
|
|
Platform,
|
|
|
|
|
ScrollView,
|
|
|
|
|
StyleSheet,
|
|
|
|
|
Text,
|
|
|
|
|
TextInput,
|
|
|
|
|
View
|
|
|
|
|
} from 'react-native';
|
|
|
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
|
|
|
import { RootStackParamList } from "../../navigation/navigationTypes";
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
import { createMove, updateMove } from '../../redux/actions/moveActions';
|
|
|
|
|
import { AppDispatch, RootState } from "../../redux/store";
|
|
|
|
|
import { Move } from "../../entities/Move";
|
|
|
|
|
import { RouteProp } from "@react-navigation/native";
|
|
|
|
|
import { MOVE_FORM } from "../../navigation/constants";
|
|
|
|
|
import { Picker } from "@react-native-community/picker";
|
|
|
|
|
import { ItemValue } from "@react-native-community/picker/typings/Picker";
|
|
|
|
|
import { MoveCategoryName } from "../../entities/MoveCategoryName";
|
|
|
|
|
import { TypeName } from "../../entities/TypeName";
|
|
|
|
|
import MultiSelect from "react-native-multiple-select";
|
|
|
|
|
import AlertModal from "../../components/AlertModal";
|
|
|
|
|
import { MOVE_ERROR } from "../../redux/constants";
|
|
|
|
|
|
|
|
|
|
type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
|
|
|
|
|
type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;
|
|
|
|
|
@ -50,6 +59,14 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
|
|
|
|
|
});
|
|
|
|
|
}, [navigation, route.params?.move]);
|
|
|
|
|
|
|
|
|
|
const [isModalVisible, setModalVisible] = useState(false);
|
|
|
|
|
const [currentMultiSelect, setCurrentMultiSelect] = useState<'weakAgainst' | 'effectiveAgainst'>('weakAgainst');
|
|
|
|
|
|
|
|
|
|
const handleOpenModal = (multiSelect: 'weakAgainst' | 'effectiveAgainst') => {
|
|
|
|
|
setCurrentMultiSelect(multiSelect);
|
|
|
|
|
setModalVisible(true);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const [selectedWeakAgainst, setSelectedWeakAgainst] = useState<string[]>(move.type.weakAgainst);
|
|
|
|
|
const [selectedEffectiveAgainst, setSelectedEffectiveAgainst] = useState<string[]>(move.type.effectiveAgainst);
|
|
|
|
|
|
|
|
|
|
@ -76,89 +93,113 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<KeyboardAwareScrollView style={styles.container}>
|
|
|
|
|
<AlertModal
|
|
|
|
|
visible={!!error}
|
|
|
|
|
message={error || ''}
|
|
|
|
|
onClose={() => dispatch({ type: MOVE_ERROR, payload: null })}
|
|
|
|
|
/>
|
|
|
|
|
<Text style={styles.label}>Name: </Text>
|
|
|
|
|
<TextInput
|
|
|
|
|
value={move.name}
|
|
|
|
|
onChangeText={(text) => setMove({ ...move, name: text })}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
/>
|
|
|
|
|
<Text style={styles.label}>Category: </Text>
|
|
|
|
|
<Picker
|
|
|
|
|
selectedValue={move.category}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
onValueChange={(itemValue: ItemValue) =>
|
|
|
|
|
setMove({ ...move, category: itemValue as MoveCategoryName })
|
|
|
|
|
}>
|
|
|
|
|
{Object.values(MoveCategoryName).map((value) =>
|
|
|
|
|
<Picker.Item key={value} label={value} value={value}/>
|
|
|
|
|
)}
|
|
|
|
|
</Picker>
|
|
|
|
|
<Text style={styles.label}>Power: </Text>
|
|
|
|
|
<TextInput
|
|
|
|
|
value={move.power.toString()}
|
|
|
|
|
onChangeText={(text) => {
|
|
|
|
|
if (!isNaN(Number(text))) {
|
|
|
|
|
setMove({ ...move, power: Number(text) });
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
keyboardType="numeric"
|
|
|
|
|
/>
|
|
|
|
|
<Text style={styles.label}>Accuracy: </Text>
|
|
|
|
|
<TextInput
|
|
|
|
|
value={move.accuracy.toString()}
|
|
|
|
|
onChangeText={(text) => {
|
|
|
|
|
if (!isNaN(Number(text))) {
|
|
|
|
|
setMove({ ...move, accuracy: Number(text) });
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
keyboardType="numeric"
|
|
|
|
|
/>
|
|
|
|
|
<Text style={styles.label}>Type: </Text>
|
|
|
|
|
<Picker
|
|
|
|
|
selectedValue={move.type.name}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
onValueChange={(itemValue: ItemValue) =>
|
|
|
|
|
setMove({ ...move, type: { ...move.type, name: itemValue as TypeName } })
|
|
|
|
|
}>
|
|
|
|
|
{Object.values(TypeName).map((value) =>
|
|
|
|
|
<Picker.Item key={value} label={value} value={value}/>
|
|
|
|
|
)}
|
|
|
|
|
</Picker>
|
|
|
|
|
<Text style={styles.label}>Weak Against: </Text>
|
|
|
|
|
<MultiSelect
|
|
|
|
|
items={
|
|
|
|
|
Object.values(TypeName).map((value) => ({ id: value, name: value }))
|
|
|
|
|
}
|
|
|
|
|
uniqueKey="id"
|
|
|
|
|
onSelectedItemsChange={
|
|
|
|
|
(selectedItems) => handleSelectType(selectedItems, setSelectedWeakAgainst, selectedEffectiveAgainst)
|
|
|
|
|
}
|
|
|
|
|
selectedItems={selectedWeakAgainst}
|
|
|
|
|
displayKey="name"
|
|
|
|
|
/>
|
|
|
|
|
<Text style={styles.label}>Effective Against: </Text>
|
|
|
|
|
<MultiSelect
|
|
|
|
|
items={
|
|
|
|
|
Object.values(TypeName).map((value) => ({ id: value, name: value }))
|
|
|
|
|
}
|
|
|
|
|
uniqueKey="id"
|
|
|
|
|
onSelectedItemsChange={
|
|
|
|
|
(selectedItems) => handleSelectType(selectedItems, setSelectedEffectiveAgainst, selectedWeakAgainst)
|
|
|
|
|
}
|
|
|
|
|
selectedItems={selectedEffectiveAgainst}
|
|
|
|
|
displayKey="name"
|
|
|
|
|
/>
|
|
|
|
|
<Button title="Save" onPress={handleSave}/>
|
|
|
|
|
|
|
|
|
|
</KeyboardAwareScrollView>
|
|
|
|
|
<KeyboardAvoidingView
|
|
|
|
|
style={styles.container}
|
|
|
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
|
|
|
>
|
|
|
|
|
<ScrollView contentContainerStyle={{ paddingBottom: 20 }}>
|
|
|
|
|
<AlertModal
|
|
|
|
|
visible={!!error}
|
|
|
|
|
message={error || ''}
|
|
|
|
|
onClose={() => dispatch({ type: MOVE_ERROR, payload: null })}
|
|
|
|
|
/>
|
|
|
|
|
<View style={styles.row}>
|
|
|
|
|
<Text style={styles.label}>Name: </Text>
|
|
|
|
|
<TextInput
|
|
|
|
|
value={move.name}
|
|
|
|
|
onChangeText={(text) => setMove({ ...move, name: text })}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.row}>
|
|
|
|
|
<Text style={styles.label}>Category: </Text>
|
|
|
|
|
<Picker
|
|
|
|
|
selectedValue={move.category}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
onValueChange={(itemValue: ItemValue) =>
|
|
|
|
|
setMove({ ...move, category: itemValue as MoveCategoryName })
|
|
|
|
|
}>
|
|
|
|
|
{Object.values(MoveCategoryName).map((value) =>
|
|
|
|
|
<Picker.Item key={value} label={value} value={value}/>
|
|
|
|
|
)}
|
|
|
|
|
</Picker>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.row}>
|
|
|
|
|
<Text style={styles.label}>Power: </Text>
|
|
|
|
|
<TextInput
|
|
|
|
|
value={move.power.toString()}
|
|
|
|
|
onChangeText={(text) => {
|
|
|
|
|
if (!isNaN(Number(text))) {
|
|
|
|
|
setMove({ ...move, power: Number(text) });
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
keyboardType="numeric"
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.row}>
|
|
|
|
|
<Text style={styles.label}>Accuracy: </Text>
|
|
|
|
|
<TextInput
|
|
|
|
|
value={move.accuracy.toString()}
|
|
|
|
|
onChangeText={(text) => {
|
|
|
|
|
if (!isNaN(Number(text))) {
|
|
|
|
|
setMove({ ...move, accuracy: Number(text) });
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
keyboardType="numeric"
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.row}>
|
|
|
|
|
<Text style={styles.label}>Type: </Text>
|
|
|
|
|
<Picker
|
|
|
|
|
selectedValue={move.type.name}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
onValueChange={(itemValue: ItemValue) =>
|
|
|
|
|
setMove({ ...move, type: { ...move.type, name: itemValue as TypeName } })
|
|
|
|
|
}>
|
|
|
|
|
{Object.values(TypeName).map((value) =>
|
|
|
|
|
<Picker.Item key={value} label={value} value={value}/>
|
|
|
|
|
)}
|
|
|
|
|
</Picker>
|
|
|
|
|
</View>
|
|
|
|
|
<Text>Weak Against: {selectedWeakAgainst.join(', ')}</Text>
|
|
|
|
|
<View style={styles.buttonContainer}>
|
|
|
|
|
<Button title="Select Weak Against" onPress={() => handleOpenModal('weakAgainst')}/>
|
|
|
|
|
</View>
|
|
|
|
|
<Text>Effective Against: {selectedEffectiveAgainst.join(', ')}</Text>
|
|
|
|
|
<View style={styles.buttonContainer}>
|
|
|
|
|
<Button title="Select Effective Against" onPress={() => handleOpenModal('effectiveAgainst')}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.buttonContainer}>
|
|
|
|
|
<Button title="Save" onPress={handleSave} color={styles.saveButton.backgroundColor}/>
|
|
|
|
|
</View>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
<Modal
|
|
|
|
|
animationType="slide"
|
|
|
|
|
transparent={true}
|
|
|
|
|
visible={isModalVisible}
|
|
|
|
|
onRequestClose={() => {
|
|
|
|
|
setModalVisible(!isModalVisible);
|
|
|
|
|
}}>
|
|
|
|
|
<View style={styles.centeredView}>
|
|
|
|
|
<View style={styles.modalView}>
|
|
|
|
|
<MultiSelect
|
|
|
|
|
items={
|
|
|
|
|
Object.values(TypeName).map((value) => ({ id: value, name: value }))
|
|
|
|
|
}
|
|
|
|
|
uniqueKey="id"
|
|
|
|
|
onSelectedItemsChange={
|
|
|
|
|
(selectedItems) => handleSelectType(selectedItems, currentMultiSelect === 'weakAgainst' ? setSelectedWeakAgainst : setSelectedEffectiveAgainst, currentMultiSelect === 'weakAgainst' ? selectedEffectiveAgainst : selectedWeakAgainst)
|
|
|
|
|
}
|
|
|
|
|
selectedItems={currentMultiSelect === 'weakAgainst' ? selectedWeakAgainst : selectedEffectiveAgainst}
|
|
|
|
|
displayKey="name"
|
|
|
|
|
/>
|
|
|
|
|
<Button title="Close" onPress={() => setModalVisible(false)}/>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</Modal>
|
|
|
|
|
</KeyboardAvoidingView>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -167,14 +208,49 @@ const styles = StyleSheet.create({
|
|
|
|
|
flex: 1,
|
|
|
|
|
padding: 16,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
marginRight: 8,
|
|
|
|
|
},
|
|
|
|
|
input: {
|
|
|
|
|
backgroundColor: '#CEC',
|
|
|
|
|
borderRadius: 8,
|
|
|
|
|
height: 32,
|
|
|
|
|
minHeight: 32,
|
|
|
|
|
flex: 1,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
row: {
|
|
|
|
|
flexDirection: 'row',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'flex-start',
|
|
|
|
|
margin: 8,
|
|
|
|
|
}
|
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
|
},
|
|
|
|
|
centeredView: {
|
|
|
|
|
flex: 1,
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
marginTop: 22
|
|
|
|
|
},
|
|
|
|
|
modalView: {
|
|
|
|
|
margin: 20,
|
|
|
|
|
backgroundColor: "white",
|
|
|
|
|
borderRadius: 20,
|
|
|
|
|
padding: 35,
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
shadowColor: "#000",
|
|
|
|
|
shadowOffset: {
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 2
|
|
|
|
|
},
|
|
|
|
|
shadowOpacity: 0.25,
|
|
|
|
|
shadowRadius: 4,
|
|
|
|
|
elevation: 5
|
|
|
|
|
},
|
|
|
|
|
buttonContainer: {
|
|
|
|
|
margin: 8,
|
|
|
|
|
},
|
|
|
|
|
saveButton: {
|
|
|
|
|
backgroundColor: '#BADA55',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export default MoveFormScreen;
|
|
|
|
|
|
