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

added scroll view

Browse Source
This commit is contained in:
Heinrich Thaler
2024-09-19 16:32:23 +02:00
parent cf151f428a
commit 2513177a00
1 changed files with 70 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
common/FilterModal.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Modal, View, StyleSheet, Text } from 'react-native';
import { Modal, View, StyleSheet, Text, ScrollView, Dimensions } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import { FontAwesome } from '@expo/vector-icons';
import { useColors } from '../common/colors';
@@ -20,6 +20,8 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
const [tempFilter, setTempFilter] = useState(filter);
const [showFilterModal, setShowFilterModal] = useState(false);
const screenHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
@@ -32,6 +34,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
backgroundColor: colors.backSecondary,
borderRadius: 20,
width: '80%',
maxHeight: screenHeight * 0.8,
padding: 20,
borderWidth: 5,
borderColor: colors.backSecondary,
@@ -60,6 +63,9 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
justifyContent: 'space-between',
marginTop: 20,
},
scrollView: {
flex: 1,
},
});
const renderFilterModal = () => (
@@ -70,78 +76,80 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
>
<View style={styles.modalContainer}>
<View style={styles.modalView}>
<ThemeText style={styles.modalSubtitle}>Kriterium</ThemeText>
<RNPickerSelect
style={{
inputIOS: styles.picker,
inputAndroid: styles.picker,
}}
value={tempFilter.type ?? ""}
onValueChange={(itemValue) => {
setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }));
}}
items={Object.keys(baseData).map(item => ({
label: categories[item],
value: item,
}))}
placeholder={{}}
/>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<ThemeText style={styles.modalSubtitle}>Kriterium</ThemeText>
<RNPickerSelect
style={{
inputIOS: styles.picker,
inputAndroid: styles.picker,
}}
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>
<RNPickerSelect
style={{
inputIOS: styles.picker,
inputAndroid: styles.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>
)}
{tempFilter.type && (
<View>
<ThemeText style={styles.modalSubtitle}>Suchbegriff</ThemeText>
<ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
<RNPickerSelect
style={{
inputIOS: styles.picker,
inputAndroid: styles.picker,
inputIOS: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
inputAndroid: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
}}
value={tempFilter.value ?? ""}
value={tempFilter.group ?? "1"}
onValueChange={(itemValue) => {
setTempFilter(prevState => ({ ...prevState, value: itemValue }));
setTempFilter(prevState => ({ ...prevState, group: itemValue }));
}}
items={baseData[tempFilter.type].map(item => ({
label: item.name,
value: item.id,
}))}
disabled={tempFilter.type !== "class"}
items={[
{ label: '1', value: '1' },
{ label: '2', value: '2' }
]}
placeholder={{}}
/>
</View>
)}
<View>
<ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
<RNPickerSelect
style={{
inputIOS: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
inputAndroid: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
}}
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>
<ThemeButton
onPress={() => {
setFilter(tempFilter);
setShowFilterModal(false);
}}
disabled={!Boolean(tempFilter.value) || (tempFilter.type === 'class' && !Boolean(tempFilter.value))}
>
<Text>Anwenden</Text>
</ThemeButton>
</View>
<View style={styles.modalButtons}>
<ThemeButton onPress={() => setTempFilter(getDefaultFilter(userInformation))}>
<Text>Zurücksetzen</Text>
</ThemeButton>
<ThemeButton
onPress={() => {
setFilter(tempFilter);
setShowFilterModal(false);
}}
disabled={!Boolean(tempFilter.value) || (tempFilter.type === 'class' && !Boolean(tempFilter.value))}
>
<Text>Anwenden</Text>
</ThemeButton>
</View>
</ScrollView>
</View>
</View>
</Modal>