Move files to lib folder
This commit is contained in:
parent
d8d8ac35f8
commit
cec664c8d0
26 changed files with 58 additions and 59 deletions
|
@ -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;
|
Loading…
Add table
Add a link
Reference in a new issue