Move files to lib folder

This commit is contained in:
Maarten 2024-08-08 14:22:02 +02:00
parent d8d8ac35f8
commit cec664c8d0
26 changed files with 58 additions and 59 deletions

View file

@ -1,148 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
TextInput,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import Modal from "react-native-modal";
import { Colors } from '@/constants/Colors';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText';
import { useColorScheme } from '@/hooks/useColorScheme';
interface Field {
name: string;
title?: string;
placeholder: string;
defaultValue?: string;
}
interface EditModalProps {
title?: string;
visible: boolean;
onClose?: () => void;
onSave: (inputValues: Record<string, string>) => void;
fields: Field[];
}
const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave, fields }) => {
const colorScheme = useColorScheme() ?? 'light';
const [ inputValues, setInputValues ] = useState<Record<string, string>>( {} );
useEffect( () => {
const initialValues: Record<string, string> = {};
fields.forEach( field => {
if (field.defaultValue) {
initialValues[ field.name ] = field.defaultValue;
}
} );
setInputValues( initialValues );
}, [ fields ] );
const handleInputChange = (name: string, value: string) => {
setInputValues( { ...inputValues, [ name ]: value } );
};
const handleSave = () => {
onSave( inputValues );
if (onClose) onClose();
};
return (
<Modal isVisible={visible}>
<ThemedView style={{ ...styles.view, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedText style={styles.text}>{title ? title : 'Pas je gegevens aan:'}</ThemedText>
{fields.map( (field, index) => (
<ThemedView key={index} style={styles.inputContainer}>
{field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
<TextInput
style={styles.input}
placeholder={field.placeholder}
onChangeText={(text) => handleInputChange( field.name, text )}
value={inputValues[ field.name ] || ''}
/>
</ThemedView>
) )}
<ThemedView style={styles.buttonContainer}>
<TouchableOpacity onPress={onClose || ( () => {
} )}>
<ThemedText style={[ styles.textStyle, styles.buttonClose ]}>Annuleren</ThemedText>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonSave} onPress={handleSave}>
<ThemedText style={styles.textStyle}>Opslaan</ThemedText>
</TouchableOpacity>
</ThemedView>
</ThemedView>
</Modal>
);
};
const styles = StyleSheet.create( {
view: {
margin: 25,
borderRadius: 10,
paddingTop: 30,
paddingBottom: 30,
paddingLeft: 35,
paddingRight: 35,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
text: {
marginBottom: 15,
textAlign: 'center',
},
inputContainer: {
width: '100%',
marginBottom: 15,
},
inputTitle: {
fontSize: 16,
marginBottom: 5,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: '100%',
paddingHorizontal: 10,
borderRadius: 5,
},
buttonContainer: {
marginTop: 20,
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
},
buttonClose: {
color: Colors.red,
paddingTop: 8,
},
buttonSave: {
backgroundColor: Colors.tint,
borderRadius: 5,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 40,
paddingRight: 40,
},
textStyle: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
} );
export default CustomModal;