From 85a808e834432e438d6f27136fcd8d39ff93e8be Mon Sep 17 00:00:00 2001 From: "wolfmoyaers@gmail.com" Date: Mon, 1 Nov 2021 22:38:46 +0100 Subject: [PATCH] animations --- src/components/GroceryList/TabMenu.js | 26 +++++++++++---- .../GroceryList/groceries/GroceryButtons.js | 20 +++++++++-- .../GroceryList/groceries/GroceryList.js | 2 +- src/components/GroceryList/groceries/List.js | 33 +++++++++++++------ .../GroceryList/groceries/ListedItem.js | 3 +- .../GroceryList/groceries/styles/list.js | 2 +- .../groceries/styles/listedItem.js | 16 ++------- src/components/GroceryList/styles/tabMenu.js | 31 ++++++++++++----- .../modals/groceries/ModalAddItem.js | 4 +-- .../modals/groceries/ModalEditItem.js | 2 +- .../modals/groceries/styles/edit.js | 6 ++-- src/components/modals/styles/modal.js | 1 - 12 files changed, 95 insertions(+), 51 deletions(-) diff --git a/src/components/GroceryList/TabMenu.js b/src/components/GroceryList/TabMenu.js index c4ed45e..981ed03 100644 --- a/src/components/GroceryList/TabMenu.js +++ b/src/components/GroceryList/TabMenu.js @@ -1,25 +1,37 @@ import React from 'react' +import { LayoutAnimation, Platform, UIManager } from 'react-native' //styles -import {Wrapper,WrapperSelected, WrapperGroceries,IconGroceries, WrapperProducts, IconProducts} from './styles/tabMenu' +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' + return pos === 'Groceries' ? '-75px' + : '75px' } 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) } return ( - - handleTabPress("Groceries")}> + + handleTabPress("Groceries")}> - handleTabPress("Products")}> - + handleTabPress("Products")}> + ) diff --git a/src/components/GroceryList/groceries/GroceryButtons.js b/src/components/GroceryList/groceries/GroceryButtons.js index a81c379..8cd8c33 100644 --- a/src/components/GroceryList/groceries/GroceryButtons.js +++ b/src/components/GroceryList/groceries/GroceryButtons.js @@ -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 ( <> - setVisible(!visible)}> + diff --git a/src/components/GroceryList/groceries/GroceryList.js b/src/components/GroceryList/groceries/GroceryList.js index 9752379..bd4cf22 100644 --- a/src/components/GroceryList/groceries/GroceryList.js +++ b/src/components/GroceryList/groceries/GroceryList.js @@ -24,7 +24,7 @@ const GroceryList = (props) => { total: € {totalPrice} } + ListHeaderComponent={} ListFooterComponent={} initialNumToRender={15} maxToRenderPerBatch={10} diff --git a/src/components/GroceryList/groceries/List.js b/src/components/GroceryList/groceries/List.js index da9b4bb..ccd9131 100644 --- a/src/components/GroceryList/groceries/List.js +++ b/src/components/GroceryList/groceries/List.js @@ -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) => { - < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}> + < WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}> {list.open && Add a grocery} - data={items.filter(item => item.listId === props.listId)} + ListFooterComponent={filteredItems.length === 0 && Add a grocery} + data={filteredItems} renderItem={({ item }) => ( )} diff --git a/src/components/GroceryList/groceries/ListedItem.js b/src/components/GroceryList/groceries/ListedItem.js index f496540..1f9581e 100644 --- a/src/components/GroceryList/groceries/ListedItem.js +++ b/src/components/GroceryList/groceries/ListedItem.js @@ -17,10 +17,9 @@ const ListedItem = React.memo((props) => { { props.setVisible(true); return dispatch(modalToggle(item._id)) }}> {item.productName} - {item.details} + {item.details != "" && {item.details}} {item.amount.am}{item.amount.qt && " " + item.amount.qt} {item.person != "" && {item.person}} - {/* {product.image != "" && } */} dispatch(checkToggle(item._id))} > diff --git a/src/components/GroceryList/groceries/styles/list.js b/src/components/GroceryList/groceries/styles/list.js index c508ffe..860eb55 100644 --- a/src/components/GroceryList/groceries/styles/list.js +++ b/src/components/GroceryList/groceries/styles/list.js @@ -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)` diff --git a/src/components/GroceryList/groceries/styles/listedItem.js b/src/components/GroceryList/groceries/styles/listedItem.js index 2242c8f..6784da6 100644 --- a/src/components/GroceryList/groceries/styles/listedItem.js +++ b/src/components/GroceryList/groceries/styles/listedItem.js @@ -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; @@ -87,15 +88,4 @@ export const TextPerson = styled(Text)` padding:2px 8px 0px 6px; 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; ` \ No newline at end of file diff --git a/src/components/GroceryList/styles/tabMenu.js b/src/components/GroceryList/styles/tabMenu.js index 28bc816..df01676 100644 --- a/src/components/GroceryList/styles/tabMenu.js +++ b/src/components/GroceryList/styles/tabMenu.js @@ -18,7 +18,7 @@ export const Wrapper = styled(View)` flex-direction: row; justify-content: space-evenly; align-items: center; - background-color: ${({ theme }) => theme.colors.dp00 +'88'}; + background-color: ${({ theme }) => theme.colors.dp00 + '88'}; width: 250px; height: 60px; @@ -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' @@ -43,7 +44,7 @@ export const WrapperSelected = styled(View)` right: 125px; background-color: #59D8E6; ` - : css` + : css` right: 0px; background-color: ${({ theme }) => theme.colors.primary}; `} @@ -54,9 +55,17 @@ export const WrapperGroceries = styled(WrapperIcon)` height: 65px; ` -const Groceries = () => -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 = () => - -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;` + }; ` diff --git a/src/components/modals/groceries/ModalAddItem.js b/src/components/modals/groceries/ModalAddItem.js index eb4cc1e..6d613c5 100644 --- a/src/components/modals/groceries/ModalAddItem.js +++ b/src/components/modals/groceries/ModalAddItem.js @@ -111,7 +111,7 @@ const ModalAddItem = (props) => { setDetails(text.target.value)} + onChangeText={(text) => setDetails(text)} placeholder="Additional details" /> @@ -130,7 +130,7 @@ const ModalAddItem = (props) => { setPrice(text)} + onChangeText={(text) => setPrice(text)} placeholder="Price" /> diff --git a/src/components/modals/groceries/ModalEditItem.js b/src/components/modals/groceries/ModalEditItem.js index bb1c432..7924c13 100644 --- a/src/components/modals/groceries/ModalEditItem.js +++ b/src/components/modals/groceries/ModalEditItem.js @@ -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) diff --git a/src/components/modals/groceries/styles/edit.js b/src/components/modals/groceries/styles/edit.js index 1b2539a..46f5df5 100644 --- a/src/components/modals/groceries/styles/edit.js +++ b/src/components/modals/groceries/styles/edit.js @@ -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; diff --git a/src/components/modals/styles/modal.js b/src/components/modals/styles/modal.js index 83d61a2..a2c27c0 100644 --- a/src/components/modals/styles/modal.js +++ b/src/components/modals/styles/modal.js @@ -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)`