diff --git a/package-lock.json b/package-lock.json index 72f8457..362c06a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@expo/vector-icons": "^15.0.3", + "@react-native-picker/picker": "^2.11.4", "@react-navigation/native": "^7.1.18", "@react-navigation/native-stack": "^7.5.1", "expo": "^54.0.20", @@ -55,7 +56,6 @@ "version": "7.28.4", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -3055,6 +3055,19 @@ "node": ">=14" } }, + "node_modules/@react-native-picker/picker": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.4.tgz", + "integrity": "sha512-Kf8h1AMnBo54b1fdiVylP2P/iFcZqzpMYcglC28EEFB1DEnOjsNr6Ucqc+3R9e91vHxEDnhZFbYDmAe79P2gjA==", + "license": "MIT", + "workspaces": [ + "example" + ], + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/@react-native/assets-registry": { "version": "0.81.5", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz", @@ -4051,7 +4064,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -4748,7 +4760,6 @@ "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.20.tgz", "integrity": "sha512-mWHky+H63W60P5Oo+VbtqzF2sLvdaoSSwG57H9rlq1DrgIla++QJZuwJkXXo55lYPymVmkVhwG6FjWYKKylwpw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "54.0.13", @@ -4800,7 +4811,6 @@ "version": "14.0.9", "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz", "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==", - "peer": true, "dependencies": { "fontfaceobserver": "^2.1.0" }, @@ -7676,7 +7686,6 @@ "version": "19.1.0", "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -7694,6 +7703,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz", "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==", + "peer": true, "engines": { "node": ">=10" }, @@ -7711,7 +7721,6 @@ "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz", "integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==", "license": "MIT", - "peer": true, "dependencies": { "@jest/create-cache-key-function": "^29.7.0", "@react-native/assets-registry": "0.81.5", @@ -7887,7 +7896,6 @@ "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -9336,7 +9344,6 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 47f7106..edb9d14 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@expo/vector-icons": "^15.0.3", + "@react-native-picker/picker": "^2.11.4", "@react-navigation/native": "^7.1.18", "@react-navigation/native-stack": "^7.5.1", "expo": "^54.0.20", diff --git a/src/components/UI/Form.js b/src/components/UI/Form.js index 811b1b7..f6c44cc 100644 --- a/src/components/UI/Form.js +++ b/src/components/UI/Form.js @@ -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 ( + + {label} + + + { + options.map((option, index) => ) + } + + + ) +}; + // 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; \ No newline at end of file diff --git a/src/components/entity/modules/moduleForm.js b/src/components/entity/modules/moduleForm.js index e409d1e..821844e 100644 --- a/src/components/entity/modules/moduleForm.js +++ b/src/components/entity/modules/moduleForm.js @@ -20,6 +20,14 @@ const ModuleForm = ({onSubmit, onCancel}) => { defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000); defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg'; + const levels = [ + {value: 3, label: '3 (Foundation)'}, + {value: 4, label: '4 (First Year)'}, + {value: 5, label: '5 (Second Year)'}, + {value: 6, label: '6 (Third Year)'}, + {value: 7, label: '7 (Masters)'}, + ]; + // State ---------------------- @@ -60,8 +68,10 @@ const ModuleForm = ({onSubmit, onCancel}) => { onChange={(value) => handleChange('ModuleName', value)} /> - handleChange('ModuleLevel', value)} />