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

Add Item modal Finished

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 12:47:33 +01:00
parent b4e68dbac4
commit 7c174097b0
5 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Dropdown.js
View File

@@ -48,7 +48,7 @@ const Dropdown = (props) => {
) )
}) })
return ( return (
<WrapperDropdown> <WrapperDropdown keyboardShouldPersistTaps={'always'}>
{dropdownList} {dropdownList}
</WrapperDropdown> </WrapperDropdown>
) )

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

@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
//styles //styles
import { import {
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, ButtonText, IconWrong, IconCheck, InputSmall, Wrapper
} from '../styles/modal' } from '../styles/modal'
import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem' import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
import { IconTag, IconDollar } from './styles/addProduct' import { IconTag, IconDollar } from './styles/addProduct'
@@ -75,7 +75,6 @@ const ModalAddItem = (props) => {
<WrapperInput> <WrapperInput>
<IconProduct /> <IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) } <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
type="text"
value={productName} value={productName}
onChangeText={(text) => setProductName(text)} onChangeText={(text) => setProductName(text)}
placeholder="Product name" /> placeholder="Product name" />
@@ -87,31 +86,30 @@ const ModalAddItem = (props) => {
<WrapperInput> <WrapperInput>
<IconAmount /> <IconAmount />
<Input style={{ width: '69%' }} <Input style={{ width: '69%' }}
type="number" keyboardType={'number-pad'}
value={amount} value={amount}
onChange={(text) => setAmount(text)} onChange={(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)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }} onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
type="text"
value={qt} value={qt}
onChange={(text) => setQt(text)} onChange={(text) => setQt(text)}
placeholder="Qt." /> placeholder="Qt." />
</WrapperInput> </WrapperInput>
{/*{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}> {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
<QtDropdown text={qt} setElement={setQt} /> <QtDropdown text={qt} setElement={setQt} />
</WrapperDropdown>} </WrapperDropdown>}
<WrapperInput> <WrapperInput>
<IconPerson /> <IconPerson />
<Input type="text" <Input
value={person} value={person}
onChange={(text) => setPerson(text.target.value)} onChange={(text) => setPerson(text)}
placeholder="For" /> placeholder="For" />
</WrapperInput> </WrapperInput>
<WrapperInput> <WrapperInput>
<IconDetails /> <IconDetails />
<Input type="text" <Input
value={details} value={details}
onChange={(text) => setDetails(text.target.value)} onChange={(text) => setDetails(text.target.value)}
placeholder="Additional details" /> placeholder="Additional details" />
@@ -119,9 +117,9 @@ const ModalAddItem = (props) => {
<WrapperInput> <WrapperInput>
<IconTag /> <IconTag />
<Input type="text" <Input type="text"
onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }} onFocus={() => setFocusedTag(true)} onBlur={() => setFocusedTag(false)}
value={tag} value={tag}
onChange={(text) => setTag(text.target.value)} onChange={(text) => setTag(text)}
placeholder="Tag" /> placeholder="Tag" />
</WrapperInput> </WrapperInput>
{focusedTag && <WrapperDropdown> {focusedTag && <WrapperDropdown>
@@ -129,16 +127,17 @@ const ModalAddItem = (props) => {
</WrapperDropdown>} </WrapperDropdown>}
<WrapperInput> <WrapperInput>
<IconDollar /> <IconDollar />
<Input type="text" <Input
keyboardType={'number-pad'}
value={price} value={price}
onChange={(text) => setPrice(text.target.value)} onChange={(text) => setPrice(text)}
placeholder="Price" /> placeholder="Price" />
</WrapperInput> </WrapperInput>
<WrapperButtons> <WrapperButtons>
<Button onClick={props.closeModal}>Close</Button> <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator /> <VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add Item</Button> <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
</WrapperButtons> */} </WrapperButtons>
</Wrapper> </Wrapper>
</StyledModal > </StyledModal >
) )

8
src/components/modals/groceries/styles/addItem.js
View File

@@ -17,7 +17,7 @@ export const StyledImage = styled(Image)`
border-bottom-right-radius: 100px; border-bottom-right-radius: 100px;
` `
export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.buttonGrey} size={32} /> export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.iconGrey} size={32} />
export const IconAmount = () => <MaterialCommunityIcons name="counter" color={theme.colors.buttonGrey} size={32} /> export const IconAmount = () => <MaterialCommunityIcons name="counter" color={theme.colors.iconGrey} size={32} />
export const IconPerson = () => <MaterialCommunityIcons name="account-circle" color={theme.colors.buttonGrey} size={32} /> export const IconPerson = () => <MaterialCommunityIcons name="account-circle" color={theme.colors.iconGrey} size={32} />
export const IconDetails = () => <MaterialCommunityIcons name="comment-plus-outline" color={theme.colors.buttonGrey} size={32} /> export const IconDetails = () => <MaterialCommunityIcons name="comment-plus-outline" color={theme.colors.iconGrey} size={32} />

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

@@ -12,7 +12,7 @@ export const StyledImage = styled(Image)`
right:0; right:0;
border-radius: 15px; border-radius: 15px;
` `
const iconSize = '32px' const iconSize = 32
export const IconProduct = () => <MaterialCommunityIcons name="fast-food" color={theme.colors.iconGrey} size={iconSize} /> export const IconProduct = () => <MaterialCommunityIcons name="fast-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} />

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

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Text, View, TextInput } from 'react-native' import { Text, View, TextInput, TouchableOpacity } from 'react-native'
import styled from 'styled-components' import styled from 'styled-components'
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -63,11 +63,13 @@ export const Input = styled(TextInput)`
margin-left: 5px; margin-left: 5px;
padding-right: 20px; padding-right: 20px;
` `
export const Button = styled(Text)` export const Button = styled(TouchableOpacity)`
margin-bottom: 10px;
`
export const ButtonText = styled(Text)`
color: ${props => props.theme.colors.primary}; color: ${props => props.theme.colors.primary};
font-weight: bold; font-weight: bold;
font-size: ${({ theme }) => theme.fontSizes.fontS}px; font-size: ${({ theme }) => theme.fontSizes.fontS}px;
margin-bottom: 10px;
` `
export const ModalHeader = styled(Text)` export const ModalHeader = styled(Text)`