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 { 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>
@@ -51,7 +52,7 @@ export default React.memo((props) => {
<ListSizeWrapper height={height} visible={list.open} >
< WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
{list.open &&
<FlatList style={{width: '100%'}}
<FlatList style={{ width: '100%' }}
initialNumToRender={20}
maxToRenderPerBatch={10}
// 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} />}
</WrapperList >
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
</ListSizeWrapper>
<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;
`

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

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

51
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}>
<ModalHeader>Add a grocery list</ModalHeader>
<WrapperInput>
<Input
type="text"
value={listName}
onChange={(text) => setListName(text.target.value)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="List name" />
{/* {listName ? <IconCheck /> : <IconWrong />} */}
</WrapperInput>
<WrapperInput>
<Input type="text"
value={description}
onChange={(text) => setDescription(text.target.value)}
placeholder="List description" />
</WrapperInput>
<WrapperButtons>
<Button onClick={props.closeModal}>Close</Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add List</Button>
</WrapperButtons>
<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
value={listName}
onChangeText={(text) => setListName(text)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="List name" />
{listName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<Input
value={description}
onChangeText={(text) => setDescription(text)}
placeholder="List description" />
</WrapperInput>
<WrapperButtons>
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator />
<Button onPress={() => handleSubmit()}><ButtonText>Add List</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal >
)
}

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

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

55
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';
@@ -10,40 +10,45 @@ import { listEdited } from '../../../redux/slices/groceryList/listsSlice';
const ModalEditList = (props) => {
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 [description, setDescription] = useState(list.listDescription);
const handleSubmit = () => {
if (props.visible && listName !== '') {
dispatch(listEdited({listName, _id: props.id, listDescription: description }));
props.setVisible(false)
dispatch(listEdited({ listName, _id: props.id, listDescription: description }));
props.closeModal()
}
else {
alert('You need to give a list name');
}
}
return (
<StyledModal show={props.visible} centered={true} onHide={() => props.setVisible(false)}>
<ModalHeader>Edit the list</ModalHeader>
<WrapperInput>
<Input
type="text"
value={listName}
onChange={(text) => setListName(text.target.value)}
placeholder="List name" />
{listName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<Input type="text"
value={description}
onChange={(text) => setDescription(text.target.value)}
placeholder="List description" />
</WrapperInput>
<WrapperButtons>
<Button onClick={() => props.setVisible(false)}>Close</Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Edit List</Button>
</WrapperButtons>
<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
value={listName}
onChangeText={(text) => setListName(text)}
placeholder="List name" />
{listName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
<Input
value={description}
onChangeText={(text) => setDescription(text)}
placeholder="List description" />
</WrapperInput>
<WrapperButtons>
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator />
<Button onPress={() => handleSubmit()}><ButtonText>Edit List</ButtonText></Button>
</WrapperButtons>
</Wrapper>
</StyledModal >
)
}

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