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

all modals

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 13:54:31 +01:00
parent 7c174097b0
commit dcde2c35fb
10 changed files with 262 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { useSelector, useDispatch } from 'react-redux';
import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
import { FlatList, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
export default React.memo((props) => {
const items = useSelector(selectAllSortedItems)
@@ -42,8 +43,8 @@ export default React.memo((props) => {
</WrapperLeft>
<WrapperRight>
{list.open && <>
<ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} />
<ButtonEditList pressFunc={() => setModalListVisible(true)} />
<ButtonRemoveList pressFunc={removeList} />
</>}
<IconArrowDown visible={list.open.toString()} />
</WrapperRight>
@@ -66,7 +67,7 @@ export default React.memo((props) => {
}
{items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
</WrapperList >
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
<ModalEditList id={props.listId} visible={modalListVisible} closeModal={() => setModalListVisible(false)} />
</ListSizeWrapper>
</Wrapper>
)

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

@@ -60,15 +60,17 @@ export const ListSubtitle = styled(Text)`
font-size: 17px;
`
const Close = () => <MaterialCommunityIcons name="close" color={theme.colors.textW5} size={28} />
const Close = (props) => <TouchableOpacity onPress={props.pressFunc}><MaterialCommunityIcons name="close" color={theme.colors.textW5} size={28} /></TouchableOpacity>
export const ButtonRemoveList = styled(Close)`
margin: 4px 10px 4px 0px;
`
const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={28} />
const Edit = (props) => <TouchableOpacity onPress={props.pressFunc}><MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={28} /></TouchableOpacity>
export const ButtonEditList = styled(Edit)`
background-color: green;
width: 50px;
margin: 4px 10px 4px 0px;
`

2
src/components/GroceryList/products/ProductsList.js
View File

@@ -33,7 +33,7 @@ const ProductsList = (props) => {
return index.toString();
}}
/>
{products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
{products.find(product => product.modalVisible) != undefined && <ModalEditProduct visible={visible} setVisible={setVisible} />}
</WrapperList>
)
}

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

@@ -88,13 +88,13 @@ const ModalAddItem = (props) => {
<Input style={{ width: '69%' }}
keyboardType={'number-pad'}
value={amount}
onChange={(text) => setAmount(text)}
onChangeText={(text) => setAmount(text)}
placeholder="Amount" />
{amount ? <IconCheck /> : <IconWrong />}
<InputSmall style={{ marginLeft: "1%", width: '10%' }}
onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
value={qt}
onChange={(text) => setQt(text)}
onChangeText={(text) => setQt(text)}
placeholder="Qt." />
</WrapperInput>
{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
@@ -104,22 +104,22 @@ const ModalAddItem = (props) => {
<IconPerson />
<Input
value={person}
onChange={(text) => setPerson(text)}
onChangeText={(text) => setPerson(text)}
placeholder="For" />
</WrapperInput>
<WrapperInput>
<IconDetails />
<Input
value={details}
onChange={(text) => setDetails(text.target.value)}
onChangeText={(text) => setDetails(text.target.value)}
placeholder="Additional details" />
</WrapperInput>
<WrapperInput>
<IconTag />
<Input type="text"
onFocus={() => setFocusedTag(true)} onBlur={() => setFocusedTag(false)}
onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
value={tag}
onChange={(text) => setTag(text)}
onChangeText={(text) => setTag(text)}
placeholder="Tag" />
</WrapperInput>
{focusedTag && <WrapperDropdown>

23
src/components/modals/groceries/ModalAddList.js
View File

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
//styles
import {
StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck
StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, ButtonText, Wrapper
} from '../styles/modal'
//redux
import { useDispatch } from 'react-redux';
@@ -26,28 +26,33 @@ const ModalAddList = (props) => {
}
}
return (
<StyledModal show={props.visible} centered={true} onHide={props.closeModal}>
<StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
onBackdropPress={props.closeModal}
onBackButtonPress={props.closeModal}
useNativeDriverForBackdrop
style={{ margin: 0 }} >
<Wrapper>
<ModalHeader>Add a grocery list</ModalHeader>
<WrapperInput>
<Input
type="text"
value={listName}
onChange={(text) => setListName(text.target.value)}
onChangeText={(text) => setListName(text)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="List name" />
{/* {listName ? <IconCheck /> : <IconWrong />} */}
{listName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<Input type="text"
<Input
value={description}
onChange={(text) => setDescription(text.target.value)}
onChangeText={(text) => setDescription(text)}
placeholder="List description" />
</WrapperInput>
<WrapperButtons>
<Button onClick={props.closeModal}>Close</Button>
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add List</Button>
<Button onPress={() => handleSubmit()}><ButtonText>Add List</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal >
)
}

34
src/components/modals/groceries/ModalAddProduct.js
View File

@@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown'
//styles
import {
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck, Wrapper, ButtonText
} from '../styles/modal'
import {
StyledImage, IconProduct, IconTag, IconDollar, IconLink
@@ -42,23 +42,27 @@ export const ModalAddProduct = (props) => {
}
}
return (
<StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
<StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
onBackdropPress={props.closeModal}
onBackButtonPress={props.closeModal}
useNativeDriverForBackdrop
style={{ margin: 0 }} >
<Wrapper>
<ModalHeader>Add product</ModalHeader>
<WrapperInput>
<IconProduct />
<InputSmall type="text"
<InputSmall
value={productName}
onChange={(text) => setProductName(text.target.value)}
onChangeText={(text) => setProductName(text)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="Product name" />
{productName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<IconTag />
<InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
type="text"
<InputSmall onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false) }
value={tag}
onChange={(text) => setTag(text.target.value)}
onChangeText={(text) => setTag(text)}
placeholder="Tag" />
{tag ? <IconCheck /> : <IconWrong />}
</WrapperInput>
@@ -67,24 +71,26 @@ export const ModalAddProduct = (props) => {
</WrapperDropdown>}
<WrapperInput>
<IconDollar />
<InputSmall type="number"
<InputSmall
keyboardType={"number-pad"}
value={price}
onChange={(text) => setPrice(text.target.value)}
onChangeText={(text) => setPrice(text)}
placeholder="Price" />
</WrapperInput>
<WrapperInput>
<IconLink />
<InputSmall type="text"
<InputSmall
value={image}
onChange={(text) => setImage(text.target.value)}
onChangeText={(text) => setImage(text)}
placeholder="Image link" />
</WrapperInput>
{image && <StyledImage source={image} alt={'No link...'} />}
{image != "" && <StyledImage source={{uri: image}} alt={'No link...'} />}
<WrapperButtons>
<Button onClick={props.closeModal}>Close</Button>
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add </Button>
<Button onPress={() => handleSubmit()}><ButtonText>Add </ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal>
)
}

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

@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
//styles
import {
StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, InputSmall
StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper, ButtonText
} from '../styles/modal'
import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
import { WrapperProduct, WrapperProductInfo, TextPrice, TextTag, StyledImage } from './styles/edit'
@@ -61,9 +61,14 @@ const ModalEditItem = (props) => {
props.setVisible(false)
}
return (
<StyledModal show={props.visible} centered={true} onHide={closeModal} >
<StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
onBackdropPress={closeModal}
onBackButtonPress={closeModal}
useNativeDriverForBackdrop
style={{ margin: 0 }} >
<Wrapper>
<WrapperProduct color={tagState.color}>
{product && product.image && <StyledImage source={product.image} />}
{product != undefined && product.image != "" && <StyledImage source={{uri: product.image}} />}
<WrapperProductInfo>
<TextPrice>€ {price}</TextPrice>
<TextTag color={tagState.color}>{tagState.tagName}</TextTag>
@@ -71,10 +76,9 @@ const ModalEditItem = (props) => {
</WrapperProduct>
<WrapperInput>
<IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
type="text"
<Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)}
value={productName}
onChange={(text) => setProductName(text.target.value)}
onChangeText={(text) => setProductName(text)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="Product name" />
{productName ? <IconCheck /> : <IconWrong />}
@@ -85,16 +89,15 @@ const ModalEditItem = (props) => {
<WrapperInput>
<IconAmount />
<Input style={{ width: '67%' }}
type="number"
keyboardType={"number-pad"}
value={amount}
onChange={(text) => setAmount(text.target.value)}
onChangeText={(text) => setAmount(text)}
placeholder="Amount" />
{amount ? <IconCheck /> : <IconWrong />}
<InputSmall style={{ marginLeft: "1%", width: '10%' }}
onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
type="text"
onFocus={() => setFocusedQt(true)} onEndEditing={() => { setFocusedQt(false) }}
value={qt}
onChange={(text) => setQt(text.target.value)}
onChangeText={(text) => setQt(text)}
placeholder="Qt." />
</WrapperInput>
{focusedQt && <WrapperDropdown style={{ marginLeft: "60%" }}>
@@ -102,24 +105,24 @@ const ModalEditItem = (props) => {
</WrapperDropdown>}
<WrapperInput>
<IconPerson />
<Input type="text"
<Input
value={person}
onChange={(text) => setPerson(text.target.value)}
onChangeText={(text) => setPerson(text)}
placeholder="For" />
</WrapperInput>
<WrapperInput>
<IconDetails />
<Input type="text"
<Input
value={details}
onChange={(text) => setDetails(text.target.value)}
onChangeText={(text) => setDetails(text)}
placeholder="Additional details" />
</WrapperInput>
<WrapperInput>
<IconTag />
<Input type="text"
onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
<Input
onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
value={tag}
onChange={(text) => setTag(text.target.value)}
onChangeText={(text) => setTag(text)}
placeholder="Tag" />
</WrapperInput>
{focusedTag && <WrapperDropdown>
@@ -127,14 +130,16 @@ const ModalEditItem = (props) => {
</WrapperDropdown>}
<WrapperInput>
<IconDollar />
<Input type="text"
<Input
keyboardType={"number-pad"}
value={price}
onChange={(text) => setPrice(text.target.value)}
onChangeText={(text) => setPrice(text)}
placeholder="Price" />
</WrapperInput>
<WrapperButtons>
<Button onClick={() => handleSubmit()}>Save</Button>
<Button onPress={() => handleSubmit()}><ButtonText>Save</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal>
)
}

23
src/components/modals/groceries/ModalEditList.js
View File

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
//styles
import {
StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck
StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText
} from '../styles/modal'
//redux
import { useDispatch, useSelector } from 'react-redux';
@@ -16,34 +16,39 @@ const ModalEditList = (props) => {
const handleSubmit = () => {
if (props.visible && listName !== '') {
dispatch(listEdited({ listName, _id: props.id, listDescription: description }));
props.setVisible(false)
props.closeModal()
}
else {
alert('You need to give a list name');
}
}
return (
<StyledModal show={props.visible} centered={true} onHide={() => props.setVisible(false)}>
<StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
onBackdropPress={props.closeModal}
onBackButtonPress={props.closeModal}
useNativeDriverForBackdrop
style={{ margin: 0 }} >
<Wrapper>
<ModalHeader>Edit the list</ModalHeader>
<WrapperInput>
<Input
type="text"
value={listName}
onChange={(text) => setListName(text.target.value)}
onChangeText={(text) => setListName(text)}
placeholder="List name" />
{listName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<Input type="text"
<Input
value={description}
onChange={(text) => setDescription(text.target.value)}
onChangeText={(text) => setDescription(text)}
placeholder="List description" />
</WrapperInput>
<WrapperButtons>
<Button onClick={() => props.setVisible(false)}>Close</Button>
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Edit List</Button>
<Button onPress={() => handleSubmit()}><ButtonText>Edit List</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal >
)
}

29
src/components/modals/groceries/ModalEditProduct.js
View File

@@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown'
//styles
import {
StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck
StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText
} from '../styles/modal'
import {
IconProduct, IconTag, IconDollar, IconLink
@@ -46,9 +46,14 @@ const ModalEditProduct = (props) => {
props.setVisible(false)
}
return (
<StyledModal show={props.visible} centered={true} onHide={closeModal} >
<StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
onBackdropPress={closeModal}
onBackButtonPress={closeModal}
useNativeDriverForBackdrop
style={{ margin: 0 }} >
<Wrapper>
<WrapperProduct color={usedTag.color}>
{image && <StyledImage source={image} alt="No image found" />}
{image != "" && <StyledImage source={{uri: image}} alt="No image found" />}
<WrapperProductInfo>
<TextPrice>€ {price}</TextPrice>
<TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>
@@ -58,17 +63,16 @@ const ModalEditProduct = (props) => {
<IconProduct />
<Input type="text"
value={productName}
onChange={(text) => setProductName(text.target.value)}
onChangeText={(text) => setProductName(text)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="Product name" />
{productName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<IconTag />
<Input onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
type="text"
<Input onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false)}
value={tag}
onChange={(text) => setTag(text.target.value)}
onChangeText={(text) => setTag(text)}
placeholder="Tag" />
{tag ? <IconCheck /> : <IconWrong />}
</WrapperInput>
@@ -77,21 +81,22 @@ const ModalEditProduct = (props) => {
</WrapperDropdown>}
<WrapperInput>
<IconDollar />
<Input type="number"
<Input type={"number-pad"}
value={price}
onChange={(text) => setPrice(text.target.value)}
onChangeText={(text) => setPrice(text)}
placeholder="Price" />
</WrapperInput>
<WrapperInput>
<IconLink />
<Input type="text"
<Input
value={image}
onChange={(text) => setImage(text.target.value)}
onChangeText={(text) => setImage(text)}
placeholder="Image link" />
</WrapperInput>
<WrapperButtons>
<Button onClick={handleSubmit}>Save</Button>
<Button onPress={handleSubmit}><ButtonText>Save</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal>
)
}

2
src/components/modals/groceries/styles/addProduct.js
View File

@@ -13,7 +13,7 @@ export const StyledImage = styled(Image)`
border-radius: 15px;
`
const iconSize = 32
export const IconProduct = () => <MaterialCommunityIcons name="fast-food" color={theme.colors.iconGrey} size={iconSize} />
export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.iconGrey} size={iconSize} />
export const IconTag = () => <MaterialCommunityIcons name="tag-outline" color={theme.colors.iconGrey} size={iconSize} />