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

styling groceries a little better

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-10-28 18:19:54 +02:00
parent 55c6704d1b
commit fb346632c5
28 changed files with 155 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/GroceryList/groceries/List.js
View File

@@ -1,10 +1,10 @@
import React, { useEffect, useRef, useState } from 'react'
import React, { useState , useEffect} from 'react'
//components
import ListedItem from './ListedItem'
import ModalEditItem from '../../modals/groceries/ModalEditItem';
import ModalEditList from '../../modals/groceries/ModalEditList';
// Styling
import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, ButtonRemoveList, ButtonEditList, IconArrowDown, ListSizeWrapper } from './styles/list'
import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, ButtonRemoveList, ButtonEditList, IconArrowDown, ListSizeWrapper, WrapperRight, WrapperLeft } from './styles/list'
//redux
import { useSelector, useDispatch } from 'react-redux';
import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
@@ -15,12 +15,11 @@ export default React.memo((props) => {
const items = useSelector(selectAllSortedItems)
const list = useSelector(state => state.lists.entities.find((list) => list._id === props.listId))
const [height, setHeight] = useState(0);
const ref = useRef(null);
const [height, setHeight] = useState(100);
useEffect(() => {
setHeight(ref.current.clientHeight);
}, [list.open, items]);
setHeight(1);
}, [list.open, items]);
const dispatch = useDispatch()
@@ -41,21 +40,21 @@ export default React.memo((props) => {
}
return (
<Wrapper >
<WrapperListTitle onClick={() => { dispatch(toggleOpen(props.listId)) }}>
<View id="left">
<WrapperListTitle onPress={() => { dispatch(toggleOpen(props.listId)) }}>
<WrapperLeft>
<ListTitle>{list.listName}</ListTitle>
<ListSubtitle>{list.listDescription && list.listDescription}</ListSubtitle>
</View>
<View id="right">
</WrapperLeft>
<WrapperRight>
{list.open && <>
<ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} />
{/* <ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} /> */}
</>}
<IconArrowDown visible={list.open.toString()} />
</View>
{/* <IconArrowDown visible={list.open.toString()} /> */}
</WrapperRight>
</WrapperListTitle>
<ListSizeWrapper height={height} visible={list.open} >
< WrapperList listLength={items.length} ref={ref}>
< WrapperList listLength={items.length} onLayout={(event) => {setHeight(event.nativeEvent.layout.height)}}>
{list.open && itemList}
{
itemList.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>