bobbert/Project-MAD-crudler
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/Project-MAD-crudler.git synced 2026-10-07 20:40:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added Icons and buttons to module view

Browse Source
This commit is contained in:
bobbert committed 2025-12-03 21:26:20 +00:00
1 parent 31c2208c2e
commit 8164fab184
6 files changed
+109 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Template.js
+1 -1
View File
@@ -8,7 +8,7 @@ const Component = () => {
// View -----------------------
return (
;
<Text></Text>
);
};
package-lock.json
Generated
+30 -28
View File
@@ -8,6 +8,7 @@
"name": "crudler",
"version": "1.0.0",
"dependencies": {
"@expo/vector-icons": "^15.0.3",
"@react-navigation/native": "^7.1.18",
"@react-navigation/native-stack": "^7.5.1",
"expo": "^54.0.20",
@@ -15,6 +16,9 @@
"react": "19.1.0",
"react-native": "^0.81.5",
"react-native-fullwidth-image": "^0.1.3"
},
"devDependencies": {
"baseline-browser-mapping": "^2.9.0"
}
},
"node_modules/@0no-co/graphql.web": {
@@ -2539,6 +2543,16 @@
"integrity": "sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==",
"license": "MIT"
},
"node_modules/@expo/vector-icons": {
"version": "15.0.3",
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
"integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
"peerDependencies": {
"expo-font": ">=14.0.4",
"react": "*",
"react-native": "*"
}
},
"node_modules/@expo/ws-tunnel": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@expo/ws-tunnel/-/ws-tunnel-1.0.6.tgz",
@@ -3936,9 +3950,9 @@
]
},
"node_modules/baseline-browser-mapping": {
"version": "2.8.10",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
"integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.0.tgz",
"integrity": "sha512-Mh++g+2LPfzZToywfE1BUzvZbfOY52Nil0rn9H1CPC5DJ7fX+Vir7nToBeoiSbB1zTNeGYbELEvJESujgGrzXw==",
"bin": {
"baseline-browser-mapping": "dist/cli.js"
}
@@ -4779,6 +4793,19 @@
}
}
},
"node_modules/expo-font": {
"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==",
"dependencies": {
"fontfaceobserver": "^2.1.0"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo-modules-autolinking": {
"version": "3.0.19",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.19.tgz",
@@ -5060,17 +5087,6 @@
}
}
},
"node_modules/expo/node_modules/@expo/vector-icons": {
"version": "15.0.3",
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
"integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
"license": "MIT",
"peerDependencies": {
"expo-font": ">=14.0.4",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5222,20 +5238,6 @@
"react-native": "*"
}
},
"node_modules/expo/node_modules/expo-font": {
"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==",
"license": "MIT",
"dependencies": {
"fontfaceobserver": "^2.1.0"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo/node_modules/expo-keep-awake": {
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-15.0.7.tgz",
package.json
+5 -1
View File
@@ -9,6 +9,7 @@
"web": "expo start --web"
},
"dependencies": {
"@expo/vector-icons": "^15.0.3",
"@react-navigation/native": "^7.1.18",
"@react-navigation/native-stack": "^7.5.1",
"expo": "^54.0.20",
@@ -17,5 +18,8 @@
"react-native": "^0.81.5",
"react-native-fullwidth-image": "^0.1.3"
},
"private": true
"private": true,
"devDependencies": {
"baseline-browser-mapping": "^2.9.0"
}
}
src/components/UI/Button.js
+45 -4
View File
@@ -1,6 +1,6 @@
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
import {Pressable, StyleSheet, Text, View} from "react-native";
const Component = () => {
export const Button = ({label, icon, onClick, styleLabel, styleButton}) => {
// Initialisation -------------
// State ----------------------
@@ -8,10 +8,51 @@ const Component = () => {
// View -----------------------
return (
<Pressable onPress={onClick} style={[styles.button, styleButton]}>
{
icon ? icon : null
}
<Text style={[styles.label, styleLabel]}>
{label}
</Text>
</Pressable>
);
};
const styles = StyleSheet.create({});
export const ButtonTray = ({children}) => {
export default Component;
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (
<View style={styles.buttonTray}>{children}</View>
);
};
const styles = StyleSheet.create({
button: {
minHeight: 50,
borderWidth: 1,
borderRadius: 7,
borderColor: 'grey',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
padding: 3,
flex: 1,
flexDirection: 'row',
gap: 5,
},
label: {
fontSize: 16,
},
buttonTray: {
flexDirection: 'row',
gap: 15,
}
});
src/components/UI/Icons.js
+15
View File
@@ -0,0 +1,15 @@
import {MaterialIcons} from '@expo/vector-icons'
const Icons = {};
const Edit = () => <MaterialIcons name='edit' size={16}/>;
const Delete = () => <MaterialIcons name='delete' size={16}/>;
const Add = () => <MaterialIcons name='add' size={16}/>;
//compose
Icons.Edit = Edit;
Icons.Delete = Delete;
Icons.Add = Add;
export default Icons;
src/components/entity/modules/ModuleView.js
+13 -1
View File
@@ -1,5 +1,7 @@
import {StyleSheet, Text, View} from "react-native";
import FullWidthImage from "react-native-fullwidth-image";
import {Button, ButtonTray} from "../../UI/Button";
import Icons from "../../UI/Icons.js"
const ModuleView = ({module}) => {
// Initialisation -------------
@@ -16,8 +18,18 @@ const ModuleView = ({module}) => {
<Text style={styles.Text}>
{module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
</Text>
</View>
<ButtonTray>
<Button icon={<Icons.Edit/>} label={"Modify"}/>
<Button
icon={<Icons.Delete/>}
label={"Delete"}
styleButton={{backgroundColor: 'mistyrose'}}
styleLabel={{color: 'red'}}
/>
</ButtonTray>
</View>);
};