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

animations

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 22:38:46 +01:00
parent 42be0512bf
commit 85a808e834
12 changed files with 95 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/GroceryList/TabMenu.js
View File

@@ -1,7 +1,15 @@
import React from 'react'
import { LayoutAnimation, Platform, UIManager } from 'react-native'
//styles
import { Wrapper, WrapperSelected, WrapperGroceries, IconGroceries, WrapperProducts, IconProducts } from './styles/tabMenu'
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const calcPos = (pos) => {
return pos === 'Groceries' ? '-75px'
: '75px'
@@ -9,6 +17,10 @@ const calcPos = (pos) => {
let previousPos = '-150px'
const TabMenu = (props) => {
const handleTabPress = (tab) => {
LayoutAnimation.configureNext({
duration: 400,
update: { type: 'spring', springDamping: 0.8 },
})
previousPos = calcPos(props.currentTab)
props.setCurrentTab(tab)
}

20
src/components/GroceryList/groceries/GroceryButtons.js
View File

@@ -8,7 +8,14 @@ import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperS
import { useSelector, useDispatch } from 'react-redux'
import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
import { Alert } from 'react-native'
import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native'
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const SelectAllItemsButton = (props) => {
const dispatch = useDispatch()
@@ -52,11 +59,20 @@ const RemoveItemsButton = (props) => {
export const ContainerButtons = (props) => {
const [visible, setVisible] = useState(false);
const toggleAnimation = () => {
LayoutAnimation.configureNext({
duration: 500,
create: { type: 'linear', property: 'opacity' },
update: { type: 'spring', springDamping: 0.8 },
delete: { type: 'linear', property: 'opacity' }
})
setVisible(!visible)
}
return (
<>
<SelectAllItemsButton visible={visible} />
<RemoveItemsButton visible={visible} />
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
<WrapperButtons toggle={visible} onPress={toggleAnimation}>
<MenuIcon />
</WrapperButtons >
</>

2
src/components/GroceryList/groceries/GroceryList.js
View File

@@ -24,7 +24,7 @@ const GroceryList = (props) => {
<WrapperGroceryList>
<TextTotalAmount>total: € {totalPrice}</TextTotalAmount>
<FlatList
ListHeaderComponent={<HeaderPadding />}
ListHeaderComponent={<View style={{height: 140}} />}
ListFooterComponent={<View style={{ height: 100 }} />}
initialNumToRender={15}
maxToRenderPerBatch={10}

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

@@ -9,25 +9,38 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
import { useSelector, useDispatch } from 'react-redux';
import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
import { Alert, FlatList, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Alert, Platform, UIManager, FlatList, LayoutAnimation } from 'react-native';
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
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(100);
const [height, setHeight] = useState(0);
useEffect(() => {
setHeight(1);
}, [list.open, items]);
if (list.open === true) {
setHeight(1)
}
}, [items.length, list.open]);
const dispatch = useDispatch()
const filteredItems = items.filter(item => item.listId === props.listId)
const [modalItemVisible, setModalItemVisible] = useState(false);
const [modalListVisible, setModalListVisible] = useState(false);
const HandleAnimation = (event) => {
LayoutAnimation.configureNext(LayoutAnimation.create(300, 'easeInEaseOut', 'opacity'))
setHeight(event.nativeEvent.layout.height)
}
const removeList = () => {
Alert.alert(
"Warning",
@@ -60,13 +73,13 @@ export default React.memo((props) => {
</WrapperRight>
</WrapperListTitle>
<ListSizeWrapper height={height} visible={list.open} >
< WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
< WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}>
{list.open &&
<FlatList style={{ width: '100%' }}
initialNumToRender={20}
initialNumToRender={10}
maxToRenderPerBatch={10}
// ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
data={items.filter(item => item.listId === props.listId)}
ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
data={filteredItems}
renderItem={({ item }) => (
<ListedItem item={item} setVisible={setModalItemVisible} />
)}

3
src/components/GroceryList/groceries/ListedItem.js
View File

@@ -17,10 +17,9 @@ const ListedItem = React.memo((props) => {
<DarkLayer>
<WrapperItem person={item.person} color={tag.color} checked={item.checked} onPress={() => { props.setVisible(true); return dispatch(modalToggle(item._id)) }}>
<TextProductName >{item.productName}</TextProductName>
<TextDetails>{item.details}</TextDetails>
{item.details != "" && <TextDetails>{item.details}</TextDetails>}
<TextAmount>{item.amount.am}{item.amount.qt && " " + item.amount.qt}</TextAmount>
{item.person != "" && <TextPerson>{item.person}</TextPerson>}
{/* {product.image != "" && <Image source={product.image} />} */}
</WrapperItem>
</DarkLayer>
<WrapperButton onPress={() => dispatch(checkToggle(item._id))} >

2
src/components/GroceryList/groceries/styles/list.js
View File

@@ -18,7 +18,7 @@ export const Wrapper = styled(View)`
width: 100%;
`
export const ListSizeWrapper = styled(View)`
height: ${(props) => props.visible ? props.height + 'px' : css`0px`};
height: ${(props) => props.height }px;
overflow: hidden;
`
export const WrapperList = styled(View)`

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

@@ -20,12 +20,12 @@ export const DarkLayer = styled(View)`
export const WrapperItem = styled(TouchableOpacity)`
box-shadow: ${({ theme }) => theme.colors.shadow};
display: flex;
min-height: ${props => props.person ? css`60px` : css`30px`};
min-height: ${props => props.person != "" ? css`70px` : css`40px`};
position: relative;
width: 100%;
flex-direction: column;
justify-content: center;
justify-content: flex-start;
border-radius: 15px;
background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
@@ -62,6 +62,7 @@ export const TextAmount = styled(Text)`
overflow:hidden;
/* white-space:nowrap; */
right: 0px;
top: 0px;
margin: 3px 3px 3px 3px;
font-size: 16px;
@@ -88,14 +89,3 @@ export const TextPerson = styled(Text)`
background-color:${({ theme }) => theme.colors.dp00 + '88'};
color: ${({ theme }) => theme.colors.textW1};
`
export const StyledImage = styled(Image)`
position: absolute;
opacity: 0.05;
height: 100%;
width: 200px;
border-top-left-radius: 30px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 30px;
right:0px;
`

27
src/components/GroceryList/styles/tabMenu.js
View File

@@ -36,6 +36,7 @@ export const WrapperSelected = styled(View)`
opacity: 0.7;
width: 125px;
height: 50px;
bottom: 10px;
border-radius:25px;
${(props) =>
props.currenttab === 'Groceries'
@@ -54,9 +55,17 @@ export const WrapperGroceries = styled(WrapperIcon)`
height: 65px;
`
const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={30} />
export const IconGroceries = styled(Groceries)`
export const IconGroceries = styled(MaterialCommunityIcons).attrs({
name: "shopping"
})`
color: ${props => props.theme.colors.textW5};
font-size: 35px;
${props => props.currenttab === 'Groceries' &&
css`
color: ${props => props.theme.colors.textW0};
font-size: 40px;`
};
`
//products
export const WrapperProducts = styled(WrapperIcon)`
@@ -65,8 +74,14 @@ export const WrapperProducts = styled(WrapperIcon)`
`
const Products = () => <MaterialCommunityIcons name="food-apple" color={theme.colors.textW0} size={30} />
export const IconProducts = styled(Products)`
margin-top:-5px;
export const IconProducts = styled(MaterialCommunityIcons).attrs({
name: "fruit-grapes-outline"
})`
color: ${props => props.theme.colors.textW5};
font-size: 35px;
${props => props.currenttab === 'Products' &&
css`
color: ${props => props.theme.colors.textW0};
font-size: 40px;`
};
`

4
src/components/modals/groceries/ModalAddItem.js
View File

@@ -111,7 +111,7 @@ const ModalAddItem = (props) => {
<IconDetails />
<Input
value={details}
onChangeText={(text) => setDetails(text.target.value)}
onChangeText={(text) => setDetails(text)}
placeholder="Additional details" />
</WrapperInput>
<WrapperInput>
@@ -130,7 +130,7 @@ const ModalAddItem = (props) => {
<Input
keyboardType={'number-pad'}
value={price}
onChange={(text) => setPrice(text)}
onChangeText={(text) => setPrice(text)}
placeholder="Price" />
</WrapperInput>
<WrapperButtons>

2
src/components/modals/groceries/ModalEditItem.js
View File

@@ -25,7 +25,7 @@ const ModalEditItem = (props) => {
const [person, setPerson] = useState(item.person);
const [details, setDetails] = useState(item.details);
const [tag, setTag] = useState(item.tag);
const [price, setPrice] = useState(item.price);
const [price, setPrice] = useState(item.price && item.price.toString() );
const [focusedProduct, setFocusedProduct] = React.useState(false)
const [focusedQt, setFocusedQt] = React.useState(false)

6
src/components/modals/groceries/styles/edit.js
View File

@@ -5,8 +5,8 @@ import LightenDarkenColor from '../../../../functions'
export const WrapperProduct = styled(View)`
display: flex;
align-items: center;
align-items: flex-start;
flex-direction: row;
background-color: ${(props) => props.color + '22'};
width: 100%;
@@ -15,7 +15,7 @@ export const WrapperProduct = styled(View)`
margin-bottom: 5px;
`
export const WrapperProductInfo = styled(View)`
flex:1;
width: 100%;
`
export const TextPrice = styled(Text)`
background-color: #0004;

1
src/components/modals/styles/modal.js
View File

@@ -11,7 +11,6 @@ export const StyledModal = styled(Modal)`
`
export const Wrapper = styled(View)`
border-radius: 10px;
padding: 5px;
background-color: ${props => props.theme.colors.dp01};
`
export const WrapperInput = styled(View)`