Wolf/ohome-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dimentions

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-10-31 16:58:49 +01:00
parent 453e80f82d
commit a8a150a191
8 changed files with 38 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/GroceryList/groceries/styles/listedItem.js
View File

@@ -90,7 +90,6 @@ export const TextPerson = styled(Text)`
`
export const StyledImage = styled(Image)`
position: absolute;
resize-mode: contain;
opacity: 0.05;
height: 100%;
width: 200px;

15
src/components/GroceryList/products/ListedProduct.js
View File

@@ -1,11 +1,12 @@
import React from 'react'
//components
//styling
import { Wrapper, WrapperProduct, WrapperButton, CheckButton, WrapperText, TextProductName, TextTag, TextPrice, StyledImage, IconCheck} from './styles/listedProduct'
import { Wrapper, WrapperProduct, WrapperButton, WrapperText, TextProductName, TextTag, TextPrice, StyledImage, IconCheck } from './styles/listedProduct'
//redux
import { useSelector, useDispatch, shallowEqual} from 'react-redux';
import { selectProductById, checkToggle, modalToggle} from '../../../redux/slices/groceryList/productsSlice'
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { selectProductById, checkToggle, modalToggle } from '../../../redux/slices/groceryList/productsSlice'
import { findTag } from '../../../redux/slices/groceryList/tagsSlice'
import { CheckButton } from '../../../styles/componentBlueprints';
const ListedProduct = React.memo((props) => {
const dispatch = useDispatch()
@@ -13,15 +14,15 @@ const ListedProduct = React.memo((props) => {
const tag = useSelector(state => findTag(state, product.tag))
return (
<Wrapper>
<WrapperProduct color={tag.color} checked={product.checked} onPress={()=>{props.setVisible(true); return dispatch(modalToggle(product._id))}}>
<WrapperProduct color={tag.color} checked={product.checked} onPress={() => { props.setVisible(true); return dispatch(modalToggle(product._id)) }}>
<WrapperText>
<TextProductName >{product.productName}</TextProductName>
<TextTag color={tag.color}>{tag.tagName}</TextTag>
{/* {product.price !== 0&& <TextPrice>€ {product.price}</TextPrice>} */}
{product.price !== 0 && <TextPrice>€ {product.price}</TextPrice>}
</WrapperText>
{/* {product.image && <StyledImage source={product.image}/>} */}
{product.image != "" && <StyledImage source={{ uri: product.image }} />}
</WrapperProduct>
<WrapperButton onPress={()=>dispatch(checkToggle(product._id))} >
<WrapperButton onPress={() => dispatch(checkToggle(product._id))} >
<CheckButton checked={product.checked}>
{/* <IconCheck checked={product.checked} /> */}
</CheckButton>

8
src/components/GroceryList/products/ProductButtons.js
View File

@@ -40,7 +40,7 @@ const DownloadProductsButton = (props) => {
}
}
return (
<WrapperDownload toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
<WrapperDownload toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <DownloadIcon /> */}
</WrapperDownload>
)
@@ -55,7 +55,7 @@ const RemoveProductsButton = (props) => {
}
}
return (
<WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <RemoveIcon /> */}
</WrapperRemove>
)
@@ -67,7 +67,7 @@ export const ContainerButtons = (props) => {
<UploadProductsButton visible={visible} />
<DownloadProductsButton visible={visible} />
<RemoveProductsButton visible={visible} />
<WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
{/* <MenuIcon /> */}
</WrapperButtons >
</>
@@ -79,7 +79,7 @@ export const AddProductButton = (props) => {
const closeModal = () => setVisible(false)
return (
<>
<WrapperAddProduct toggle={visible} onClick={() => setVisible(true)}>
<WrapperAddProduct toggle={visible} onPress={() => setVisible(true)}>
{/* <PlusIcon /> */}
</WrapperAddProduct>
<ModalAddProduct visible={visible} closeModal={closeModal} />

19
src/components/GroceryList/products/ProductsList.js
View File

@@ -8,35 +8,28 @@ import { selectAllSortedProducts } from '../../../redux/slices/groceryList/produ
//styles
import { WrapperList } from './styles/list'
import ModalEditProduct from '../../modals/groceries/ModalEditProduct';
import { View } from 'react-native';
import { ScrollView, View } from 'react-native';
import HeaderPadding from '../../Header';
const ProductsList = (props) => {
const products = useSelector(selectAllSortedProducts)
const [count, setCount] = useState(11)
const [hasMore, setHasMore] = useState(true);
const [visible, setVisible] = useState(false);
const productList = products.slice(0, count).map((product, index) => {
const productList = products.map((product, index) => {
return (
<ListedProduct key={index} _id={product._id} setVisible={setVisible} />
)
})
// const [current, setCurrent] = useState())
const getMoreData = () => {
if (productList.length === products.length) {
setHasMore(false);
return;
}
setCount((prevState) => prevState + 10)
}
return (
<WrapperList>
<ScrollView>
<HeaderPadding />
{productList}
<View style={{ height: 150 }} />
{products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
</ScrollView>
</WrapperList>
)
}

25
src/components/GroceryList/products/styles/buttons.js
View File

@@ -9,45 +9,27 @@ import { TextInput } from 'react-native'
export const WrapperButtons = styled(Button)`
position:absolute;
background-color: ${({ theme }) => theme.colors.primary};
bottom:50px;
left:20px;
@media ${({ theme }) => theme.mediaQueries.below768}{
bottom:70px;
left:10px;
}
`
export const WrapperAddProduct = styled(Button)`
position:absolute;
background-color: ${({ theme }) => theme.colors.primary};
bottom:50px;
right:20px;
@media ${({ theme }) => theme.mediaQueries.below768}{
bottom:70px;
right:10px;
}
`
export const WrapperRemove = styled(Button)`
position:absolute;
background-color: ${({ theme }) => theme.colors.error};
left:20px;
@media ${({ theme }) => theme.mediaQueries.below768}{
left:10px;
bottom: ${(props) => props.visible ? '140px' : '70px'};
}
bottom: ${(props) => props.visible ? '140px' : '50px'};
`
export const WrapperUpload = styled(Button)`
position:absolute;
background-color: #ddb5e4;
left:20px;
@media ${({ theme }) => theme.mediaQueries.below768}{
left:10px;
bottom: ${(props) => props.visible ? '280px' : '70px'};
}
bottom: ${(props) => props.visible ? '320px' : '50px'};
`
export const UploadInput = styled(TextInput)`
@@ -58,16 +40,11 @@ export const UploadInput = styled(TextInput)`
height:80px;
`
export const WrapperDownload = styled(Button)`
export const WrapperDownload = styled(Button)`
position:absolute;
background-color: #fff7ad;
left:20px;
@media ${({ theme }) => theme.mediaQueries.below768}{
left:10px;
bottom: ${(props) => props.visible ? '210px' : '70px'};
}
bottom: ${(props) => props.visible ? '230px' : '50px'};
`

3
src/components/GroceryList/products/styles/list.js
View File

@@ -3,7 +3,4 @@ import styled from 'styled-components'
export const WrapperList = styled(View)`
width:100%;
display: flex;
flex-direction: column;
align-items: center;
`

23
src/components/GroceryList/products/styles/listedProduct.js
View File

@@ -9,16 +9,16 @@ import LightenDarken from '../../../../functions'
export const Wrapper = styled(View)`
display: flex;
flex-direction: row;
width: 768px;
width: 100%;
align-items: flex-start;
@media ${({ theme }) => theme.mediaQueries.below768}{
width: 100vw;
}
justify-content: flex-start;
`
export const WrapperProduct = styled(TouchableOpacity)`
box-shadow: ${({theme})=> theme.colors.shadow};
display: flex;
flex: 1;
width: 100%;
min-height: 70px;
position: relative;
flex-direction: row;
justify-content: center;
@@ -32,20 +32,8 @@ export const WrapperButton = styled(TouchableOpacity)`
height: 60px;
width: 40px;
`
export const CheckButton = styled(View)`
display:flex;
justify-content: center;
align-items: center;
height: 30px;
min-width: 30px;
border: 1px solid ${props => props.checked ? props.theme.colors.selected : props.theme.colors.dp04};
border-radius: 15px;
margin: 0px 5px ;
background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
`
export const WrapperText = styled(Text)`
export const WrapperText = styled(View)`
flex:1;
max-width:600px;
@media ${({ theme }) => theme.mediaQueries.below768}{
@@ -80,7 +68,6 @@ export const StyledImage = styled(Image)`
position: absolute;
top:0;
right:0;
resize-mode: contain;
width: 100px;
height: 100%;
max-height:120px;

2
src/pages/groceryList/storageManagement/Products.js
View File

@@ -16,7 +16,7 @@ import { useSelector } from 'react-redux'
const Products = () => {
const statusProducts = useSelector(state => state.products.status)
return (
<View>
<View style={{height: '100%'}}>
{statusProducts === 'loading' ? <LoadAnimation />
: <ProductsList />}
<AddProductButton />