mirror of
https://github.com/mudabbir-ahmad/Project-MAD-crudler.git
synced 2026-10-08 04:40:20 +00:00
Updates to forms and added picker for module form.
This commit is contained in:
1 parent
a08c48b8b1
commit
d22b5decda
4 files changed
+69
-10
No files matched your search
@@ -1,7 +1,10 @@
|
||||
import {StyleSheet, Text, TextInput, View} from "react-native";
|
||||
import {Picker} from "@react-native-picker/picker";
|
||||
|
||||
import {Button, ButtonTray} from "./Button";
|
||||
import Icons from "./Icons";
|
||||
|
||||
|
||||
const Form = ({children, onSubmit, onCancel, submitLabel, submitIcon}) => {
|
||||
|
||||
// Initialisation -------------
|
||||
@@ -41,8 +44,40 @@ const InputText = ({label, value, onChange}) => {
|
||||
)
|
||||
};
|
||||
|
||||
const InputSelect = ({label, prompt, options, value, onChange}) => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.itemLabel}>{label}</Text>
|
||||
<Picker
|
||||
mode="dropdown"
|
||||
selectedValue={value}
|
||||
onValueChange={onChange}
|
||||
style={styles.itemPickerStyle}
|
||||
>
|
||||
<Picker.Item
|
||||
value={null}
|
||||
label={prompt}
|
||||
style={styles.itemPickerPromptStyle}
|
||||
/>
|
||||
{
|
||||
options.map((option, index) => <Picker.Item
|
||||
key={index}
|
||||
value={option.value}
|
||||
label={option.label}
|
||||
/>)
|
||||
}
|
||||
</Picker>
|
||||
</View>
|
||||
)
|
||||
};
|
||||
|
||||
// Compose components
|
||||
Form.InputText = InputText;
|
||||
Form.InputSelect = InputSelect;
|
||||
|
||||
// Styles
|
||||
|
||||
@@ -67,7 +102,13 @@ const styles = StyleSheet.create({
|
||||
formContainer: {
|
||||
gap: 10
|
||||
},
|
||||
|
||||
itemPickerStyle: {
|
||||
height: 50,
|
||||
backgroundColor: 'whitesmoke',
|
||||
},
|
||||
itemPickerPromptStyle: {
|
||||
color: 'gray',
|
||||
},
|
||||
});
|
||||
|
||||
export default Form;
|
||||
Reference in new issue
Block a user