changed to rnpickerselect
This commit is contained in:
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { Modal, View, StyleSheet, Text } from 'react-native';
|
||||
import { useColors } from '../common/colors';
|
||||
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 { getDefaultFilter } from '../utils/getDefaultFilter';
|
||||
|
||||
@@ -14,6 +14,7 @@ type FilterModalTypes = {
|
||||
userInformation: any,
|
||||
baseData: any,
|
||||
}
|
||||
|
||||
const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => {
|
||||
const colors = useColors();
|
||||
const [tempFilter, setTempFilter] = useState(filter);
|
||||
@@ -21,59 +22,59 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
paddingRight: 10,
|
||||
gap: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
paddingRight: 10,
|
||||
gap: 10,
|
||||
},
|
||||
modalContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: 22,
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: 22,
|
||||
},
|
||||
modalView: {
|
||||
margin: 20,
|
||||
backgroundColor: colors.backSecondary,
|
||||
borderRadius: 20,
|
||||
width: '80%',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 4,
|
||||
elevation: 5,
|
||||
borderWidth: 5,
|
||||
borderColor: colors.backSecondary,
|
||||
padding: 20,
|
||||
margin: 20,
|
||||
backgroundColor: colors.backSecondary,
|
||||
borderRadius: 20,
|
||||
width: '80%',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 4,
|
||||
elevation: 5,
|
||||
borderWidth: 5,
|
||||
borderColor: colors.backSecondary,
|
||||
padding: 20,
|
||||
},
|
||||
modalTitle: {
|
||||
fontWeight: 'bold',
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 20,
|
||||
},
|
||||
modalSubtitle: {
|
||||
fontSize: 16,
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
fontSize: 16,
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
picker: {
|
||||
color: colors.text,
|
||||
backgroundColor: colors.backPrimary,
|
||||
color: colors.text,
|
||||
backgroundColor: colors.backPrimary,
|
||||
},
|
||||
pickerDisabled: {
|
||||
color: colors.backPrimary,
|
||||
backgroundColor: colors.backSecondary,
|
||||
borderColor: colors.backPrimary,
|
||||
color: colors.backPrimary,
|
||||
backgroundColor: colors.backSecondary,
|
||||
borderColor: colors.backPrimary,
|
||||
},
|
||||
modalButtons: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: 20,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const renderFilterModal = () => (
|
||||
<Modal
|
||||
@@ -84,47 +85,61 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
|
||||
<View style={styles.modalContainer}>
|
||||
<View style={styles.modalView}>
|
||||
<ThemeText style={styles.modalSubtitle}>Kriterium</ThemeText>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
selectedValue={tempFilter.type??""}
|
||||
onValueChange={(itemValue, itemIndex) => {
|
||||
setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }))
|
||||
<RNPickerSelect
|
||||
style={{
|
||||
inputIOS: styles.picker,
|
||||
inputAndroid: styles.picker,
|
||||
}}
|
||||
>
|
||||
{Object.keys(baseData).map((item) => (
|
||||
<Picker.Item key={item} label={categories[item]} value={item} />
|
||||
))}
|
||||
</Picker>
|
||||
{tempFilter.type &&
|
||||
value={tempFilter.type ?? ""}
|
||||
onValueChange={(itemValue) => {
|
||||
setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }));
|
||||
}}
|
||||
items={Object.keys(baseData).map((item) => ({
|
||||
label: categories[item],
|
||||
value: item,
|
||||
}))}
|
||||
placeholder={{}}
|
||||
/>
|
||||
|
||||
{tempFilter.type && (
|
||||
<View>
|
||||
<ThemeText style={styles.modalSubtitle}>Suchbegriff</ThemeText>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
selectedValue={tempFilter.value??""}
|
||||
onValueChange={(itemValue, itemIndex) => {
|
||||
setTempFilter(prevState => ({ ...prevState, value: itemValue }))
|
||||
<RNPickerSelect
|
||||
style={{
|
||||
inputIOS: styles.picker,
|
||||
inputAndroid: styles.picker,
|
||||
}}
|
||||
>
|
||||
<Picker.Item label="Bitte wählen" value="" />
|
||||
{baseData[tempFilter.type].map((item) => (
|
||||
<Picker.Item key={item.id} label={item.name} value={item.id} />
|
||||
))}
|
||||
</Picker>
|
||||
value={tempFilter.value ?? ""}
|
||||
onValueChange={(itemValue) => {
|
||||
setTempFilter(prevState => ({ ...prevState, value: itemValue }));
|
||||
}}
|
||||
items={baseData[tempFilter.type].map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}))}
|
||||
placeholder={{}}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
)}
|
||||
<View>
|
||||
<ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
|
||||
<Picker
|
||||
style={tempFilter.type === "class" ? styles.picker : styles.pickerDisabled}
|
||||
enabled={tempFilter.type === "class"}
|
||||
selectedValue={tempFilter.group??1}
|
||||
onValueChange={(itemValue, itemIndex) => {
|
||||
setTempFilter(prevState => ({ ...prevState, group: itemValue }))
|
||||
<RNPickerSelect
|
||||
style={{
|
||||
inputIOS: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
|
||||
inputAndroid: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
|
||||
}}
|
||||
>
|
||||
<Picker.Item label="1" value="1" />
|
||||
<Picker.Item label="2" value="2" />
|
||||
</Picker>
|
||||
value={tempFilter.group ?? "1"}
|
||||
onValueChange={(itemValue) => {
|
||||
setTempFilter(prevState => ({ ...prevState, group: itemValue }));
|
||||
}}
|
||||
disabled={tempFilter.type !== "class"}
|
||||
items={[
|
||||
{ label: '1', value: '1' },
|
||||
{ label: '2', value: '2' }
|
||||
]}
|
||||
placeholder={{}}
|
||||
/>
|
||||
|
||||
</View>
|
||||
<View style={styles.modalButtons}>
|
||||
<ThemeButton onPress={() => { setTempFilter(getDefaultFilter(userInformation)); }}><Text>Zurücksetzen</Text></ThemeButton>
|
||||
@@ -135,12 +150,12 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
|
||||
</Modal>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true) }} ><FontAwesome name="filter" size={24} /></ThemeButton>
|
||||
{renderFilterModal()}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true) }} ><FontAwesome name="filter" size={24} /></ThemeButton>
|
||||
{renderFilterModal()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterModal;
|
||||
|
||||
2872
package-lock.json
generated
2872
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -33,6 +33,7 @@
|
||||
"react-native": "0.74.5",
|
||||
"react-native-error-boundary": "^1.2.4",
|
||||
"react-native-gesture-handler": "~2.16.1",
|
||||
"react-native-picker-select": "^9.3.1",
|
||||
"react-native-reanimated": "~3.10.1",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "3.31.1",
|
||||
|
||||
Reference in New Issue
Block a user