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

Groceries done

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-02 13:45:29 +01:00
parent 85a808e834
commit ad4778de3d
11 changed files with 81 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
App.js
View File

@@ -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 (
<View style={styles.container}>
<Provider store={store}>
<ThemeProvider theme={Theme}>
{/* <GlobalStyle /> */}
<App />
<StatusBar style="auto" />
</ThemeProvider>
</Provider>
</View>
);
let [fontsLoaded] = useFonts({
'sansation_light': require('./assets/fonts/sansation_light.ttf'),
'sansation_regular': require('./assets/fonts/sansation_regular.ttf'),
});
if (!fontsLoaded) {
return <View/>;
}
else {
return (
<View style={styles.container}>
<Provider store={store}>
<ThemeProvider theme={Theme}>
{/* <GlobalStyle /> */}
<App />
<StatusBar style="auto" />
</ThemeProvider>
</Provider>
</View>
);
}
}
const styles = StyleSheet.create({

0
src/fonts/Comfortaa-Regular.ttf → assets/fonts/comfortaa_regular.ttf
View File

0
src/fonts/Sansation_Light.ttf → assets/fonts/sansation_light.ttf
View File

0
src/fonts/Sansation_Regular.ttf → assets/fonts/sansation_regular.ttf
View File

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

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

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

@@ -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 &&
<FlatList style={{ width: '100%' }}
initialNumToRender={10}
maxToRenderPerBatch={10}
ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
initialNumToRender={5}
maxToRenderPerBatch={5}
ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22, width: '100%', height: 30, alignSelf: 'center' }} >Add a grocery</ListSubtitle>}
data={filteredItems}
renderItem={({ item }) => (
<ListedItem item={item} setVisible={setModalItemVisible} />

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

@@ -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; */

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

@@ -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;

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

@@ -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 (
<>
{/* <UploadProductsButton visible={visible} />
<DownloadProductsButton visible={visible} /> */}
<RemoveProductsButton visible={visible} />
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
<WrapperButtons toggle={visible} onPress={toggleAnimation}>
<MenuIcon />
</WrapperButtons >
</>
@@ -99,7 +114,7 @@ export const AddProductButton = (props) => {
const closeModal = () => setVisible(false)
return (
<>
<WrapperAddProduct toggle={visible} onPress={() => setVisible(true)}>
<WrapperAddProduct toggle={visible} onPress={()=>setVisible(!visible)}>
<PlusIcon />
</WrapperAddProduct>
<ModalAddProduct visible={visible} closeModal={closeModal} />

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

@@ -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 = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />
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 = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSizes.fontM}/>
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;
`

2
src/styles/theme.js
View File

@@ -92,7 +92,7 @@ const theme = {
},
fontSizes: {
fontS: 16,
fontM: 24,
fontM: 20,
fontL: 32,
fontXL: 64,
},