🩹 Ensure elements that share rows can always all be seen

pull/11/head
Alexis Drai 2 years ago
parent d1ad460e49
commit da02d7f543

@ -21,9 +21,9 @@ A React Native app for education purposes. Refer
to [instructions here](https://react-native-courses.clubinfo-clermont.fr/docs/notation).
+ [Sketches](#sketches)
- [Trainers](#trainers)
- [Pokemongs](#pokemongs)
- [Moves](#moves)
- [Trainers](#trainers)
- [Pokemongs](#pokemongs)
- [Moves](#moves)
+ [Using the app](#using-the-app)
## Sketches

@ -1,17 +1,19 @@
// components/MoveListItem.test.ts
import { Move } from "../entities/Move";
import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";
import { Move } from "../entities/Move";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native";
type MoveListItemProps = {
move: Move;
onPress: () => void;
style?: ViewStyle;
};
const MoveListItem: React.FC<MoveListItemProps> = ({ move, onPress }) => (
<TouchableOpacity style={styles.listItem} onPress={onPress}>
<Text style={styles.listItemText}>{move.name}, {move.type.name}: {move.power}</Text>
const MoveListItem: React.FC<MoveListItemProps> = ({ move, onPress, style }) => (
<TouchableOpacity style={[styles.listItem, style]} onPress={onPress}>
<Text style={styles.listItemText} numberOfLines={1}
ellipsizeMode="tail">{move.name}, {move.type.name}: {move.power}</Text>
</TouchableOpacity>
);

@ -10,7 +10,7 @@ type TypeListProps = {
const TypeTacticsInfoList = ({ isWeakness, types }: TypeListProps) => {
if (!types || types.length === 0) {
types = ['Nothing'];
types = ['NOTHING'];
}
return (

@ -49,6 +49,7 @@
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-gesture-handler": "~2.9.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-multiple-select": "^0.5.12",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",

@ -1,6 +1,6 @@
// redux/constants.ts
export const GET_MOVES = 'FETCH_MOVES';
export const GET_MOVES = 'GET_MOVES';
export const CREATE_MOVE = 'CREATE_MOVE';
export const UPDATE_MOVE = 'UPDATE_MOVE';
export const DELETE_MOVE = 'DELETE_MOVE';

@ -66,7 +66,8 @@ const styles = StyleSheet.create({
},
typeListsContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
flexWrap: 'wrap',
justifyContent: 'space-around',
marginTop: 10,
},
});

@ -1,20 +1,21 @@
// screens/moves/MoveFormScreen.tsx
import React, { useState } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from "../../navigation/navigationTypes";
import { useDispatch } from 'react-redux';
import { createMove, updateMove } from '../../redux/actions/moveActions';
import { AppDispatch } 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 React, { useState } from 'react';
import { Button, StyleSheet, Text, TextInput } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from "../../navigation/navigationTypes";
import { useDispatch } from 'react-redux';
import { createMove, updateMove } from '../../redux/actions/moveActions';
import { AppDispatch } 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";
type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;
@ -67,7 +68,7 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
};
return (
<View style={styles.container}>
<KeyboardAwareScrollView style={styles.container}>
<Text style={styles.label}>Name: </Text>
<TextInput
value={move.name}
@ -135,7 +136,8 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
displayKey="name"
/>
<Button title="Save" onPress={handleSave}/>
</View>
</KeyboardAwareScrollView>
);
};

@ -46,6 +46,7 @@ const MoveListScreen = ({ navigation }: Props) => {
<View style={styles.listItemContainer}>
<MoveListItem
move={item}
style={styles.moveListItem}
onPress={() => navigation.navigate(MOVE_DETAIL, { move: item })}
/>
<Button title="X"
@ -71,6 +72,10 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
},
moveListItem: {
flex: 1,
marginRight: 10
}
});
export default MoveListScreen;

@ -8301,7 +8301,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@*, prop-types@^15.7.2:
prop-types@*, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -8477,6 +8477,19 @@ react-native-gradle-plugin@^0.71.18:
resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.18.tgz"
integrity sha512-7F6bD7B8Xsn3JllxcwHhFcsl9aHIig47+3eN4IHFNqfLhZr++3ElDrcqfMzugM+niWbaMi7bJ0kAkAL8eCpdWg==
react-native-iphone-x-helper@^1.0.3:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
react-native-keyboard-aware-scroll-view@^0.9.5:
version "0.9.5"
resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz#e2e9665d320c188e6b1f22f151b94eb358bf9b71"
integrity sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==
dependencies:
prop-types "^15.6.2"
react-native-iphone-x-helper "^1.0.3"
react-native-multiple-select@^0.5.12:
version "0.5.12"
resolved "https://registry.yarnpkg.com/react-native-multiple-select/-/react-native-multiple-select-0.5.12.tgz#be9204f49bc1bb734c40422a89acc173959bcd70"

Loading…
Cancel
Save