first commit

2021-03-12 11:38:47 +01:00
commit b16d70314b
86 changed files with 23019 additions and 0 deletions
--- a/src/screens/storageManagement/GroceryList.js
+++ b/src/screens/storageManagement/GroceryList.js
@@ -0,0 +1,148 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { StyleSheet, View, ScrollView, Text, Animated, TouchableOpacity, Image } from 'react-native';
+
+import { useHeaderHeight } from '@react-navigation/stack';
+//dependencies\
+//components
+import { AddItemButton, PushItemsToStorageButton, RemoveItemsButton, AddNewRecipeButton } from '../../components/groceryComponents/GroceryListButtons';
+import { ListedItem } from '../../components/groceryComponents/ListedItem';
+
+//redux
+
+import { useSelector } from 'react-redux';
+
+//themes
+import { COLORS } from '../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const AnimButtons = () => {
+  const [toggle, setToggle] = useState(0); // toggle for sub-buttons
+  const yValue = useRef(new Animated.Value(0)).current; // animation start value
+
+  //animation:
+  useEffect(() => {
+    toggle ? Animated.spring(yValue,
+      {
+        toValue: 1,
+        friction: 5,
+        useNativeDriver: true,
+      }
+    ).start() :
+      Animated.timing(yValue,
+        {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }
+      ).start()
+
+  }, [toggle])
+  //components
+  return (
+    <View style={styles.buttonsView} >
+
+      <Animated.View style={{
+        position: 'absolute',
+        transform: [{
+          translateY: yValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, -65]
+          })
+        }],
+      }}>
+        {/* top button */}
+
+        <RemoveItemsButton />
+
+      </Animated.View>
+
+      <Animated.View style={{
+        position: 'absolute',
+        transform: [{
+          translateY: yValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, -130]
+          })
+        }],
+      }}>
+        {/* middle button */}
+
+        <PushItemsToStorageButton />
+
+      </Animated.View>
+
+      <Animated.View style={{
+        position: 'absolute',
+        transform: [{
+          translateX: yValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 70]
+          })
+        }],
+      }}>
+        {/* bottom button */}
+
+        <AddNewRecipeButton />
+
+      </Animated.View>
+
+      {/* Button to toggle sub-buttons */}
+      <TouchableOpacity style={{ width: 60, height: 60, borderRadius: 60 / 2, backgroundColor: COLORS.primary, alignItems: 'center', justifyContent: 'center' }}
+        onPress={() => toggle ? setToggle(0) : setToggle(1)}>
+        <MaterialCommunityIcons name="view-headline" color={COLORS.dp00} size={40} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+
+
+function GroceryList() {
+  const items = useSelector(state => state.items);
+
+  const itemList = items.map((item, index) => {
+    return <ListedItem key={index} id={item.productId} />
+  });
+  return (
+    <View style={[styles.container]}>
+      {/* Scroll */}
+      <ScrollView>
+        <View style={{ height: useHeaderHeight() }} />
+        <View style=
+          {{
+            top: 5,
+          }}>
+          {itemList}
+        </View>
+        <View style={{ height: 500 }}></View>
+      </ScrollView>
+
+
+      {/* buttons */}
+      <View style={styles.itemLocation} >
+        <AddItemButton />
+
+      </View>
+      <AnimButtons />
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  buttonsView: {
+    flexDirection: 'row',
+    position: 'absolute',
+    alignItems: 'flex-start',
+    left: 8,
+    bottom: 10,
+    //backgroundColor: 'red',
+  },
+  itemLocation: {
+    position: 'absolute',
+    right: 8,
+    bottom: 10,
+  }
+});
+export default GroceryList;