Merge pull request #36 from RoboJackets/ItemList

Added an ItemList component to be used throughout the app

Author: jvogt23

.gitignore

@@ -3,6 +3,9 @@
 # dependencies
 node_modules/
 
+#VsCode
+.vscode/settings.json
+
 # Expo
 .expo/
 dist/

Components/ItemList.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FlatList, Pressable, StyleSheet, View } from 'react-native';
+
+type ItemListProps<T> = {
+  items: T[];
+  onItemSelected: (item: T) => void;
+  title: React.ReactNode;
+  itemKey: (item: T, index: number) => string;
+  callout?: React.ReactNode;
+  empty?: React.ReactNode;
+  itemContent: (item: T) => React.ReactNode;
+  separator?: React.ReactNode;
+};
+
+export function ItemList<T>(props: ItemListProps<T>) {
+  return (
+    <View style={styles.container}>
+      {props.title}
+      {props.callout}
+
+      {props.items.length === 0 ? (
+        (props.empty ?? null)
+      ) : (
+        <FlatList
+          data={props.items}
+          keyExtractor={props.itemKey}
+          ItemSeparatorComponent={() => (
+            <View>{props.separator ?? <View style={styles.separator} />}</View>
+          )}
+          renderItem={({ item }) => (
+            <View>
+              <Pressable onPress={() => props.onItemSelected(item)} style={styles.listItem}>
+                {props.itemContent(item)}
+              </Pressable>
+            </View>
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  listItem: {
+    borderColor: '#ddd',
+    padding: 16,
+  },
+
+  separator: {
+    // Default styles, which can be overridden by props
+    backgroundColor: '#ccc', // Default color (light gray)
+    height: 2, // Determines the thickness of the line
+    marginVertical: 5, // Adds some space above and below the line
+    width: '100%', // Makes the line span the full width
+  },
+});

Merchandise/MerchandiseScreen.tsx

@@ -6,6 +6,38 @@ function MerchandiseScreen() {
     // eslint-disable-next-line react-native/no-inline-styles
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Merchandise Screen</Text>
+      {/* {
+        //Example of how to use the ItemList component. Replace with actual merchandise data and navigation logic as needed.
+        <ItemList
+          items={[
+            { name: 'T-shirt' },
+            { name: 'Hoodie' },
+            { name: 'Mug' },
+            { name: 'Sticker' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+            { name: 'Cap' },
+          ]} // Replace with actual merchandise data
+          onItemSelected={(item) => console.log(item)}
+          title={
+            //Replace with actual color from current theme
+            <Text style={{ color: Colors.surfaceDark }}>Pick a merchandise item to distribute</Text>
+          }
+          itemKey={(item, index) => index.toString()}
+          empty={<Text>No items available</Text>}
+          //Replace with actual color from current theme
+          itemContent={(item) => <Text style={{ color: Colors.surfaceDark }}>{item.name}</Text>}
+        />
+      } */}
     </View>
   );
 }