From ad4778de3df3e37d569d5a1bb320f82c73e03cc6 Mon Sep 17 00:00:00 2001 From: "wolfmoyaers@gmail.com" Date: Tue, 2 Nov 2021 13:45:29 +0100 Subject: [PATCH] Groceries done --- App.js | 32 ++++++++++++------ .../fonts/comfortaa_regular.ttf | Bin .../fonts/sansation_light.ttf | Bin .../fonts/sansation_regular.ttf | Bin .../GroceryList/groceries/GroceryList.js | 2 +- src/components/GroceryList/groceries/List.js | 32 ++++++++++++------ .../GroceryList/groceries/styles/list.js | 2 ++ .../groceries/styles/listedItem.js | 1 + .../GroceryList/products/ProductButtons.js | 21 ++++++++++-- src/components/modals/styles/modal.js | 24 ++++++++----- src/styles/theme.js | 2 +- 11 files changed, 81 insertions(+), 35 deletions(-) rename src/fonts/Comfortaa-Regular.ttf => assets/fonts/comfortaa_regular.ttf (100%) rename src/fonts/Sansation_Light.ttf => assets/fonts/sansation_light.ttf (100%) rename src/fonts/Sansation_Regular.ttf => assets/fonts/sansation_regular.ttf (100%) diff --git a/App.js b/App.js index fd20ee0..fcdc96f 100644 --- a/App.js +++ b/App.js @@ -1,5 +1,6 @@ import React from 'react'; // import 'bootstrap/dist/css/bootstrap.min.css'; +import { useFonts } from 'expo-font'; import App from './src/App'; @@ -21,17 +22,26 @@ fetchAll() export default function Index() { - return ( - - - - {/* */} - - - - - - ); + let [fontsLoaded] = useFonts({ + 'sansation_light': require('./assets/fonts/sansation_light.ttf'), + 'sansation_regular': require('./assets/fonts/sansation_regular.ttf'), + }); + if (!fontsLoaded) { + return ; + } + else { + return ( + + + + {/* */} + + + + + + ); + } } const styles = StyleSheet.create({ diff --git a/src/fonts/Comfortaa-Regular.ttf b/assets/fonts/comfortaa_regular.ttf similarity index 100% rename from src/fonts/Comfortaa-Regular.ttf rename to assets/fonts/comfortaa_regular.ttf diff --git a/src/fonts/Sansation_Light.ttf b/assets/fonts/sansation_light.ttf similarity index 100% rename from src/fonts/Sansation_Light.ttf rename to assets/fonts/sansation_light.ttf diff --git a/src/fonts/Sansation_Regular.ttf b/assets/fonts/sansation_regular.ttf similarity index 100% rename from src/fonts/Sansation_Regular.ttf rename to assets/fonts/sansation_regular.ttf diff --git a/src/components/GroceryList/groceries/GroceryList.js b/src/components/GroceryList/groceries/GroceryList.js index bd4cf22..cd01333 100644 --- a/src/components/GroceryList/groceries/GroceryList.js +++ b/src/components/GroceryList/groceries/GroceryList.js @@ -25,7 +25,7 @@ const GroceryList = (props) => { total: € {totalPrice} } - ListFooterComponent={} + ListFooterComponent={} initialNumToRender={15} maxToRenderPerBatch={10} data={lists} diff --git a/src/components/GroceryList/groceries/List.js b/src/components/GroceryList/groceries/List.js index ccd9131..e6454c9 100644 --- a/src/components/GroceryList/groceries/List.js +++ b/src/components/GroceryList/groceries/List.js @@ -24,21 +24,33 @@ export default React.memo((props) => { const [height, setHeight] = useState(0); - useEffect(() => { - if (list.open === true) { - setHeight(1) - } - }, [items.length, list.open]); - const dispatch = useDispatch() const filteredItems = items.filter(item => item.listId === props.listId) + // if list gets opened + useEffect(() => { + if (list.open === true) { + setHeight(0.5) + } + if (list.open === true && filteredItems.length === 0) { + setHeight(0.5) + } + }, [list.open]); + // if item is added or removed + useEffect(() => { + if (list.open === true) { + setHeight(height + 1) + } + }, [items.length]); + + const [modalItemVisible, setModalItemVisible] = useState(false); const [modalListVisible, setModalListVisible] = useState(false); const HandleAnimation = (event) => { - LayoutAnimation.configureNext(LayoutAnimation.create(300, 'easeInEaseOut', 'opacity')) + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')) setHeight(event.nativeEvent.layout.height) + // console.log("height changed: ", event.nativeEvent.layout.height) } const removeList = () => { @@ -76,9 +88,9 @@ export default React.memo((props) => { < WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}> {list.open && Add a grocery} + initialNumToRender={5} + maxToRenderPerBatch={5} + ListFooterComponent={filteredItems.length === 0 && Add a grocery} data={filteredItems} renderItem={({ item }) => ( diff --git a/src/components/GroceryList/groceries/styles/list.js b/src/components/GroceryList/groceries/styles/list.js index 860eb55..f83e597 100644 --- a/src/components/GroceryList/groceries/styles/list.js +++ b/src/components/GroceryList/groceries/styles/list.js @@ -52,7 +52,9 @@ export const WrapperRight = styled(View)` ` export const ListTitle = styled(Text)` /* overflow-wrap: break-word; */ + color: ${({ theme }) => theme.colors.textW3}; font-size: 20px; + font-weight: bold; ` export const ListSubtitle = styled(Text)` /* overflow-wrap: break-word; */ diff --git a/src/components/GroceryList/groceries/styles/listedItem.js b/src/components/GroceryList/groceries/styles/listedItem.js index 6784da6..7ea14b4 100644 --- a/src/components/GroceryList/groceries/styles/listedItem.js +++ b/src/components/GroceryList/groceries/styles/listedItem.js @@ -35,6 +35,7 @@ export const WrapperButton = styled(TouchableOpacity)` width: 40px; ` export const TextProductName = styled(Text)` + /* font-family: sansation_regular; */ /* word-wrap: break-word; */ /* word-break: break-all; */ margin: 2px 0px 0px 8px; diff --git a/src/components/GroceryList/products/ProductButtons.js b/src/components/GroceryList/products/ProductButtons.js index fc1bd31..fbd7469 100644 --- a/src/components/GroceryList/products/ProductButtons.js +++ b/src/components/GroceryList/products/ProductButtons.js @@ -6,8 +6,14 @@ import { WrapperButtons, WrapperAddProduct, WrapperUpload, UploadInput, WrapperD //redux import { useDispatch, useSelector } from 'react-redux' import { productsRemoved, productsUploaded } from '../../../redux/slices/groceryList/productsSlice' -import { Alert } from 'react-native' +import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native' +if ( + Platform.OS === "android" && + UIManager.setLayoutAnimationEnabledExperimental +) { + UIManager.setLayoutAnimationEnabledExperimental(true); +} const UploadProductsButton = (props) => { const dispatch = useDispatch() @@ -82,12 +88,21 @@ const RemoveProductsButton = (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)}> + @@ -99,7 +114,7 @@ export const AddProductButton = (props) => { const closeModal = () => setVisible(false) return ( <> - setVisible(true)}> + setVisible(!visible)}> diff --git a/src/components/modals/styles/modal.js b/src/components/modals/styles/modal.js index a2c27c0..f0e5914 100644 --- a/src/components/modals/styles/modal.js +++ b/src/components/modals/styles/modal.js @@ -43,7 +43,7 @@ export const VerticalSeperator = styled(View)` export const InputSmall = styled(TextInput)` border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-width: 1px; - font-size: ${({ theme }) => theme.fontSizes.fontS}px; + font-size: ${({ theme }) => theme.fontSizes.fontM}px; width: 50%; @@ -53,7 +53,7 @@ export const InputSmall = styled(TextInput)` export const Input = styled(TextInput)` border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-width: 1px; - font-size: ${({ theme }) => theme.fontSizes.fontS}px; + font-size: ${({ theme }) => theme.fontSizes.fontM}px; color: ${props => props.theme.colors.textW2}; @@ -83,17 +83,23 @@ export const ModalDescription = styled(Text)` padding: 2px; ` -const Wrong = () => -export const IconWrong = styled(Wrong)` - margin-left: -10px; +export const IconWrong = styled(MaterialCommunityIcons).attrs({ + name:"asterisk" +})` + color: ${props => props.theme.colors.error + 'aa'}; + font-size: 12px; + + margin-left: -12px; margin-top: -10px; ` -const Check = () => - -export const IconCheck = styled(Check)` - margin-left: -15px; +export const IconCheck = styled(MaterialCommunityIcons).attrs({ + name:"check" +})` + color: ${props => props.theme.colors.primary}; + font-size: 24px; + margin-left: -24px; margin-top: -3px; ` diff --git a/src/styles/theme.js b/src/styles/theme.js index 9fad3cd..aaca6c0 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -92,7 +92,7 @@ const theme = { }, fontSizes: { fontS: 16, - fontM: 24, + fontM: 20, fontL: 32, fontXL: 64, },