heinrich/klatab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed to rnpickerselect

Browse Source
This commit is contained in:
Heinrich Thaler
2024-09-19 16:25:57 +02:00
parent 0776505a6a
commit b7a7dbec61
3 changed files with 803 additions and 2241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
common/FilterModal.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Modal, View, StyleSheet, Text } from 'react-native'; import { Modal, View, StyleSheet, Text } from 'react-native';
import { useColors } from '../common/colors'; import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes'; import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import { Picker } from '@react-native-picker/picker'; import RNPickerSelect from 'react-native-picker-select';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
import { getDefaultFilter } from '../utils/getDefaultFilter'; import { getDefaultFilter } from '../utils/getDefaultFilter';
@@ -14,6 +14,7 @@ type FilterModalTypes = {
userInformation: any, userInformation: any,
baseData: any, baseData: any,
} }
const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => { const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => {
const colors = useColors(); const colors = useColors();
const [tempFilter, setTempFilter] = useState(filter); const [tempFilter, setTempFilter] = useState(filter);
@@ -21,59 +22,59 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end', justifyContent: 'flex-end',
alignItems: 'center', alignItems: 'center',
paddingRight: 10, paddingRight: 10,
gap: 10, gap: 10,
}, },
modalContainer: { modalContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginTop: 22, marginTop: 22,
}, },
modalView: { modalView: {
margin: 20, margin: 20,
backgroundColor: colors.backSecondary, backgroundColor: colors.backSecondary,
borderRadius: 20, borderRadius: 20,
width: '80%', width: '80%',
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
}, },
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 4, shadowRadius: 4,
elevation: 5, elevation: 5,
borderWidth: 5, borderWidth: 5,
borderColor: colors.backSecondary, borderColor: colors.backSecondary,
padding: 20, padding: 20,
}, },
modalTitle: { modalTitle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 20, fontSize: 20,
}, },
modalSubtitle: { modalSubtitle: {
fontSize: 16, fontSize: 16,
marginTop: 20, marginTop: 20,
marginBottom: 10, marginBottom: 10,
}, },
picker: { picker: {
color: colors.text, color: colors.text,
backgroundColor: colors.backPrimary, backgroundColor: colors.backPrimary,
}, },
pickerDisabled: { pickerDisabled: {
color: colors.backPrimary, color: colors.backPrimary,
backgroundColor: colors.backSecondary, backgroundColor: colors.backSecondary,
borderColor: colors.backPrimary, borderColor: colors.backPrimary,
}, },
modalButtons: { modalButtons: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginTop: 20, marginTop: 20,
}, },
}); });
const renderFilterModal = () => ( const renderFilterModal = () => (
<Modal <Modal
@@ -84,47 +85,61 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
<View style={styles.modalContainer}> <View style={styles.modalContainer}>
<View style={styles.modalView}> <View style={styles.modalView}>
<ThemeText style={styles.modalSubtitle}>Kriterium</ThemeText> <ThemeText style={styles.modalSubtitle}>Kriterium</ThemeText>
<Picker <RNPickerSelect
style={styles.picker} style={{
selectedValue={tempFilter.type??""} inputIOS: styles.picker,
onValueChange={(itemValue, itemIndex) => { inputAndroid: styles.picker,
setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }))
}} }}
> value={tempFilter.type ?? ""}
{Object.keys(baseData).map((item) => ( onValueChange={(itemValue) => {
<Picker.Item key={item} label={categories[item]} value={item} /> setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }));
))} }}
</Picker> items={Object.keys(baseData).map((item) => ({
{tempFilter.type && label: categories[item],
value: item,
}))}
placeholder={{}}
/>
{tempFilter.type && (
<View> <View>
<ThemeText style={styles.modalSubtitle}>Suchbegriff</ThemeText> <ThemeText style={styles.modalSubtitle}>Suchbegriff</ThemeText>
<Picker <RNPickerSelect
style={styles.picker} style={{
selectedValue={tempFilter.value??""} inputIOS: styles.picker,
onValueChange={(itemValue, itemIndex) => { inputAndroid: styles.picker,
setTempFilter(prevState => ({ ...prevState, value: itemValue }))
}} }}
> value={tempFilter.value ?? ""}
<Picker.Item label="Bitte wählen" value="" /> onValueChange={(itemValue) => {
{baseData[tempFilter.type].map((item) => ( setTempFilter(prevState => ({ ...prevState, value: itemValue }));
<Picker.Item key={item.id} label={item.name} value={item.id} /> }}
))} items={baseData[tempFilter.type].map((item) => ({
</Picker> label: item.name,
value: item.id,
}))}
placeholder={{}}
/>
</View> </View>
} )}
<View> <View>
<ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText> <ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
<Picker <RNPickerSelect
style={tempFilter.type === "class" ? styles.picker : styles.pickerDisabled} style={{
enabled={tempFilter.type === "class"} inputIOS: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
selectedValue={tempFilter.group??1} inputAndroid: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
onValueChange={(itemValue, itemIndex) => {
setTempFilter(prevState => ({ ...prevState, group: itemValue }))
}} }}
> value={tempFilter.group ?? "1"}
<Picker.Item label="1" value="1" /> onValueChange={(itemValue) => {
<Picker.Item label="2" value="2" /> setTempFilter(prevState => ({ ...prevState, group: itemValue }));
</Picker> }}
disabled={tempFilter.type !== "class"}
items={[
{ label: '1', value: '1' },
{ label: '2', value: '2' }
]}
placeholder={{}}
/>
</View> </View>
<View style={styles.modalButtons}> <View style={styles.modalButtons}>
<ThemeButton onPress={() => { setTempFilter(getDefaultFilter(userInformation)); }}><Text>Zurücksetzen</Text></ThemeButton> <ThemeButton onPress={() => { setTempFilter(getDefaultFilter(userInformation)); }}><Text>Zurücksetzen</Text></ThemeButton>
@@ -135,12 +150,12 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
</Modal> </Modal>
); );
return ( return (
<> <>
<ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true) }} ><FontAwesome name="filter" size={24} /></ThemeButton> <ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true) }} ><FontAwesome name="filter" size={24} /></ThemeButton>
{renderFilterModal()} {renderFilterModal()}
</> </>
); );
}; };
export default FilterModal; export default FilterModal;

2872
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -33,6 +33,7 @@
"react-native": "0.74.5", "react-native": "0.74.5",
"react-native-error-boundary": "^1.2.4", "react-native-error-boundary": "^1.2.4",
"react-native-gesture-handler": "~2.16.1", "react-native-gesture-handler": "~2.16.1",
"react-native-picker-select": "^9.3.1",
"react-native-reanimated": "~3.10.1", "react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5", "react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1", "react-native-screens": "3.31.1",