120 lines
3.6 KiB
JavaScript
120 lines
3.6 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
|
|
|
|
//components
|
|
import ListedStorageItem from './ListedStorageItem';
|
|
//themes
|
|
import { COLORS } from '../../themes/Colors';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
//redux
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
export default StorageList = (props) => {
|
|
const products = useSelector(state => state.products)
|
|
const findProductTag = (item) => {
|
|
let product = products.find((product) => product.id === item.id)
|
|
let tag
|
|
product ? tag = product.tag : 0
|
|
return tag
|
|
}
|
|
const storageFiltered = useSelector(state => state.storage.filter((item) =>findProductTag(item) === props.tag))
|
|
const tag = useSelector(state => state.tags.find((tag) => tag.tagName === props.tag))
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
if (storageFiltered.length !== 0) {
|
|
return(
|
|
<View style={styles.container}>
|
|
<TouchableOpacity style={[styles.categoryButton]}
|
|
onPress={() => setVisible(!visible)}>
|
|
{visible ?
|
|
<MaterialCommunityIcons name="menu-down" color={COLORS.textW3} size={28} />
|
|
: <MaterialCommunityIcons name="menu-right" color={COLORS.textW3} size={28} />
|
|
}
|
|
<Text style={[styles.textItem, { color: tag.color + 'aa' }]}>{props.tag}</Text>
|
|
</TouchableOpacity>
|
|
<View style={[styles.list]}>
|
|
{visible ? storageFiltered.map((storageItem, index) => {
|
|
const product = products.find((product) => product.id === storageItem.id)
|
|
return <ListedStorageItem key={index} product = {product} storageItem = {storageItem} tag = {tag}/>
|
|
}) : <View />}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
else {
|
|
return <View />
|
|
}
|
|
}
|
|
const height = 30;
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: 5,
|
|
},
|
|
list: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
categoryButton: {
|
|
flex: 1,
|
|
paddingLeft: 0,
|
|
paddingRight: 8,
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'space-between',
|
|
},
|
|
listedItem: {
|
|
borderTopLeftRadius: 15,
|
|
borderBottomLeftRadius: 15,
|
|
width: '90%',
|
|
paddingLeft: 8,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginTop: 2,
|
|
marginBottom: 2,
|
|
},
|
|
textItem: {
|
|
flex: 1,
|
|
left: 8,
|
|
fontFamily: 'Roboto',
|
|
fontSize: height * 0.65,
|
|
color: COLORS.textW0 + 'bb',
|
|
},
|
|
textAmount: {
|
|
width: '10%',
|
|
backgroundColor: '#ffffff' + '10',
|
|
paddingLeft: 3,
|
|
borderRadius: 6,
|
|
|
|
marginRight: 3,
|
|
fontFamily: 'Roboto',
|
|
fontSize: height * 0.6,
|
|
color: COLORS.textW1,
|
|
},
|
|
amountButtons: {
|
|
flexDirection: 'row',
|
|
marginTop: 3,
|
|
marginBottom: 3,
|
|
borderTopLeftRadius: 10,
|
|
borderBottomLeftRadius: 10,
|
|
height: 25,
|
|
width: 70,
|
|
alignItems: 'center',
|
|
alignSelf: 'flex-start',
|
|
justifyContent: 'space-evenly',
|
|
|
|
backgroundColor: '#ffffff' + '10',
|
|
},
|
|
amountIncrement: {
|
|
},
|
|
amountDecrement: {
|
|
},
|
|
deleteItem: {
|
|
height: 27,
|
|
width: 27,
|
|
backgroundColor: '#ffffff' + '10',
|
|
borderRadius: 12.5,
|
|
marginLeft: 5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}
|
|
}) |