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

modal Add item works

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 12:30:56 +01:00
parent e3c0555452
commit b4e68dbac4
31 changed files with 167 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
//styles
import {
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper
} from '../styles/modal'
import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
import { IconTag, IconDollar } from './styles/addProduct'
@@ -64,55 +64,60 @@ const ModalAddItem = (props) => {
setPrice(product.price)
}
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>
{/* {product && product.image && <Image source={product.image} />} */}
{/* {product && product.image && <Image source={product.image} />} */}
<WrapperInput>
<IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
<Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
type="text"
value={productName}
onChange={(text) => setProductName(text.target.value)}
onChangeText={(text) => setProductName(text)}
placeholder="Product name" />
{/* {productName ? <IconCheck /> : <IconWrong />} */}
{productName != "" ? <IconCheck /> : <IconWrong />}
</WrapperInput>
{focusedProduct && <WrapperDropdown>
<Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconAmount /> */}
<IconAmount />
<Input style={{ width: '69%' }}
type="number"
value={amount}
onChange={(text) => setAmount(text.target.value)}
onChange={(text) => setAmount(text)}
placeholder="Amount" />
{/* {amount ? <IconCheck /> : <IconWrong />} */}
{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)}
onChange={(text) => setQt(text)}
placeholder="Qt." />
</WrapperInput>
{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
{/*{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
<QtDropdown text={qt} setElement={setQt} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconPerson /> */}
<IconPerson />
<Input type="text"
value={person}
onChange={(text) => setPerson(text.target.value)}
placeholder="For" />
</WrapperInput>
<WrapperInput>
{/* <IconDetails /> */}
<IconDetails />
<Input type="text"
value={details}
onChange={(text) => setDetails(text.target.value)}
placeholder="Additional details" />
</WrapperInput>
<WrapperInput>
{/* <IconTag /> */}
<IconTag />
<Input type="text"
onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
value={tag}
@@ -123,7 +128,7 @@ const ModalAddItem = (props) => {
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconDollar /> */}
<IconDollar />
<Input type="text"
value={price}
onChange={(text) => setPrice(text.target.value)}
@@ -133,7 +138,8 @@ const ModalAddItem = (props) => {
<Button onClick={props.closeModal}>Close</Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add Item</Button>
</WrapperButtons>
</WrapperButtons> */}
</Wrapper>
</StyledModal >
)
}