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

11
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 { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice' import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
import { FlatList, View } from 'react-native'; import { FlatList, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
export default React.memo((props) => { export default React.memo((props) => {
const items = useSelector(selectAllSortedItems) const items = useSelector(selectAllSortedItems)
@@ -42,8 +43,8 @@ export default React.memo((props) => {
</WrapperLeft> </WrapperLeft>
<WrapperRight> <WrapperRight>
{list.open && <> {list.open && <>
<ButtonEditList onClick={() => setModalListVisible(true)} /> <ButtonEditList pressFunc={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} /> <ButtonRemoveList pressFunc={removeList} />
</>} </>}
<IconArrowDown visible={list.open.toString()} /> <IconArrowDown visible={list.open.toString()} />
</WrapperRight> </WrapperRight>
@@ -51,7 +52,7 @@ export default React.memo((props) => {
<ListSizeWrapper height={height} visible={list.open} > <ListSizeWrapper height={height} visible={list.open} >
< WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}> < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
{list.open && {list.open &&
<FlatList style={{width: '100%'}} <FlatList style={{ width: '100%' }}
initialNumToRender={20} initialNumToRender={20}
maxToRenderPerBatch={10} maxToRenderPerBatch={10}
// ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>} // ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
@@ -66,8 +67,8 @@ export default React.memo((props) => {
} }
{items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />} {items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
</WrapperList > </WrapperList >
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} /> <ModalEditList id={props.listId} visible={modalListVisible} closeModal={() => setModalListVisible(false)} />
</ListSizeWrapper> </ListSizeWrapper>
</Wrapper> </Wrapper>
) )
}) })

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

@@ -60,15 +60,17 @@ export const ListSubtitle = styled(Text)`
font-size: 17px; 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)` export const ButtonRemoveList = styled(Close)`
margin: 4px 10px 4px 0px; 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)` export const ButtonEditList = styled(Edit)`
background-color: green;
width: 50px;
margin: 4px 10px 4px 0px; margin: 4px 10px 4px 0px;
` `

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

@@ -21,7 +21,7 @@ const ProductsList = (props) => {
<WrapperList> <WrapperList>
<FlatList <FlatList
ListHeaderComponent={ <HeaderPadding/> } ListHeaderComponent={<HeaderPadding />}
ListFooterComponent={<View style={{ height: 100 }} />} ListFooterComponent={<View style={{ height: 100 }} />}
initialNumToRender={10} initialNumToRender={10}
maxToRenderPerBatch={10} maxToRenderPerBatch={10}
@@ -33,7 +33,7 @@ const ProductsList = (props) => {
return index.toString(); 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> </WrapperList>
) )
} }

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown'
//styles //styles
import { import {
StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText
} from '../styles/modal' } from '../styles/modal'
import { import {
IconProduct, IconTag, IconDollar, IconLink IconProduct, IconTag, IconDollar, IconLink
@@ -30,10 +30,10 @@ const ModalEditProduct = (props) => {
if (!usedTag) { if (!usedTag) {
usedTag = tags[0] usedTag = tags[0]
} }
const handleSubmit = () => { const handleSubmit = () => {
if (props.visible && productName) { if (props.visible && productName) {
dispatch(productRemoved(product._id)) dispatch(productRemoved(product._id))
dispatch(productAdded({ productName, tag: tags.find(t=>t.tagName===tag) ? tag : "uncategorized", price, image})) dispatch(productAdded({ productName, tag: tags.find(t => t.tagName === tag) ? tag : "uncategorized", price, image }))
props.setVisible(false); props.setVisible(false);
} }
@@ -46,52 +46,57 @@ const ModalEditProduct = (props) => {
props.setVisible(false) props.setVisible(false)
} }
return ( return (
<StyledModal show={props.visible} centered={true} onHide={closeModal} > <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
<WrapperProduct color={usedTag.color}> onBackdropPress={closeModal}
{image && <StyledImage source={image} alt="No image found" />} onBackButtonPress={closeModal}
<WrapperProductInfo> useNativeDriverForBackdrop
<TextPrice>€ {price}</TextPrice> style={{ margin: 0 }} >
<TextTag color={usedTag.color}>{usedTag.tagName}</TextTag> <Wrapper>
</WrapperProductInfo> <WrapperProduct color={usedTag.color}>
</WrapperProduct> {image != "" && <StyledImage source={{uri: image}} alt="No image found" />}
<WrapperInput> <WrapperProductInfo>
<IconProduct /> <TextPrice>€ {price}</TextPrice>
<Input type="text" <TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>
value={productName} </WrapperProductInfo>
onChange={(text) => setProductName(text.target.value)} </WrapperProduct>
// onKeyDown={(event) => handleKeyDown(event)} <WrapperInput>
placeholder="Product name" /> <IconProduct />
{productName ? <IconCheck /> : <IconWrong />} <Input type="text"
</WrapperInput> value={productName}
<WrapperInput> onChangeText={(text) => setProductName(text)}
<IconTag /> // onKeyDown={(event) => handleKeyDown(event)}
<Input onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }} placeholder="Product name" />
type="text" {productName ? <IconCheck /> : <IconWrong />}
value={tag} </WrapperInput>
onChange={(text) => setTag(text.target.value)} <WrapperInput>
placeholder="Tag" /> <IconTag />
{tag ? <IconCheck /> : <IconWrong />} <Input onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false)}
</WrapperInput> value={tag}
{focused && <WrapperDropdown> onChangeText={(text) => setTag(text)}
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} /> placeholder="Tag" />
</WrapperDropdown>} {tag ? <IconCheck /> : <IconWrong />}
<WrapperInput> </WrapperInput>
<IconDollar /> {focused && <WrapperDropdown>
<Input type="number" <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
value={price} </WrapperDropdown>}
onChange={(text) => setPrice(text.target.value)} <WrapperInput>
placeholder="Price" /> <IconDollar />
</WrapperInput> <Input type={"number-pad"}
<WrapperInput> value={price}
<IconLink /> onChangeText={(text) => setPrice(text)}
<Input type="text" placeholder="Price" />
value={image} </WrapperInput>
onChange={(text) => setImage(text.target.value)} <WrapperInput>
placeholder="Image link" /> <IconLink />
</WrapperInput> <Input
<WrapperButtons> value={image}
<Button onClick={handleSubmit}>Save</Button> onChangeText={(text) => setImage(text)}
</WrapperButtons> placeholder="Image link" />
</WrapperInput>
<WrapperButtons>
<Button onPress={handleSubmit}><ButtonText>Save</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal> </StyledModal>
) )
} }

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

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