148 lines
3.5 KiB
JavaScript
148 lines
3.5 KiB
JavaScript
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; |