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 (
<WrapperDropdown>
<WrapperDropdown keyboardShouldPersistTaps={'always'}>
{dropdownList}
</WrapperDropdown>
)

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

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

@@ -12,7 +12,7 @@ export const StyledImage = styled(Image)`
right:0;
border-radius: 15px;
`
const iconSize = '32px'
const iconSize = 32
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} />

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

@@ -1,5 +1,5 @@
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 Modal from 'react-native-modal';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -63,11 +63,13 @@ export const Input = styled(TextInput)`
margin-left: 5px;
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};
font-weight: bold;
font-size: ${({ theme }) => theme.fontSizes.fontS}px;
margin-bottom: 10px;
`
export const ModalHeader = styled(Text)`