bartronx7/aretherecookies-mobile
1
0
Fork 0
mirror of https://gitlab.com/wheres-the-tp/ui-mobile.git synced 2026-01-25 07:44:54 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

update quantity modal

Browse source
This commit is contained in:
Bart Akeley 2017-04-14 21:47:54 -05:00
parent 3dd53587ea
commit d25f7c0283
5 changed files with 77 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
js/components/IconButton.js
View file

@ -1,17 +1,16 @@
// @flow
import React from 'react';
import { Text, View } from 'react-native';
import { Text, View, TouchableOpacity } from 'react-native';
import { pure } from 'recompose';
import { Link } from 'react-router-native';
import { Icon } from 'react-native-material-ui';
export default pure(({ glyph, text, route }: { glyph: string, text: string, route: string }) => (
<View style={{ flex: 3 }}>
<Link to={route}>
<View style={{ alignItems: 'center' }}>
<Icon name={glyph} size={50} color="grey" />
<Text>{text}</Text>
</View>
</Link>
</View>
type Props = { glyph: string, text: string, route: string, onPress: Function, underlayColor?: string };
export default pure(({ glyph, text, ...others }: Props) => (
<TouchableOpacity {...others}>
<View style={{ alignItems: 'center' }}>
<Icon name={glyph} size={50} color="grey" />
<Text>{text}</Text>
</View>
</TouchableOpacity>
));

21
js/components/Modal.js Normal file
View file

@ -0,0 +1,21 @@
// flow
import React from 'react';
import { View } from 'react-native';
import Modal from 'react-native-modal';
import { pure } from 'recompose';
export default pure(({ children, isVisible }) => (
<Modal isVisible={isVisible}>
<View
style={{
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
}}
>
{children}
</View>
</Modal>
));

39
js/pages/FoodItemDetail.js
View file

@ -1,6 +1,6 @@
// @flow
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Picker, Text, View } from 'react-native';
import theme from '../ui-theme';
import { NameAndPlace } from '../components/ItemTile';
// import { type FoodItem } from '../records/FoodItemRecord';
@ -9,6 +9,7 @@ import ImageThumb from '../components/ImageThumb';
import ImageBackdrop from '../components/ImageBackdrop';
import IconButton from '../components/IconButton';
import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers';
import Modal from '../components/Modal';
const QuantityText = pure(({ quantity }: { quantity: Quantity }) => (
<View style={{ flex: 1, alignItems: 'center', paddingTop: 20 }}>
@ -27,6 +28,24 @@ export class FoodItemDetail extends Component {
},
};
state: {
quantityModalOpen: boolean,
};
state = { quantityModalOpen: false };
addToFaves = () => {};
updateAmount = () => this.toggleQuantityModal();
addPhoto = () => {};
toggleQuantityModal = () => {
this.setState(({ quantityModalOpen }) => {
return { quantityModalOpen: !quantityModalOpen };
});
};
// todo: need to get the item from the stream by this id
render() {
return (
@ -44,11 +63,23 @@ export class FoodItemDetail extends Component {
<NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
<QuantityText quantity="many" />
<View style={{ flexDirection: 'row', paddingBottom: 20 }}>
<IconButton glyph="stars" text="Add to Faves" route="/list/food" />
<IconButton glyph="mode-edit" text="Update Amount" route="/list/food" />
<IconButton glyph="insert-photo" text="Add Photo" route="/list/food" />
<IconButton style={{ flex: 3 }} glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
<IconButton
style={{ flex: 3 }}
glyph="mode-edit"
text="Update Amount"
onPress={this.updateAmount}
/>
<IconButton style={{ flex: 3 }} glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
</View>
</View>
<Modal isVisible={this.state.quantityModalOpen}>
<Picker selectedValue="many" onValueChange={this.toggleQuantityModal} style={{ width: 250 }}>
<Picker.Item label="None Left" value="none" />
<Picker.Item label="Few Left" value="few" />
<Picker.Item label="Many Left" value="many" />
</Picker>
</Modal>
</View>
);
}

1
package.json
View file

@ -14,6 +14,7 @@
"react-native": "^0.40.0",
"react-native-drawer": "^2.3.0",
"react-native-material-ui": "^1.7.0",
"react-native-modal": "^2.2.0",
"react-native-scrollable-tab-view": "^0.7.4",
"react-native-vector-icons": "^4.0.0",
"react-router-native": "^4.0.0",

10
yarn.lock
View file

@ -3589,6 +3589,10 @@ react-deep-force-update@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
react-native-animatable@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.1.1.tgz#00ddc72985f62f62a11a505abb1a06e77a92cd8a"
react-native-drawer@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-native-drawer/-/react-native-drawer-2.3.0.tgz#a0369ec80ff0b61c9f152dbdea91fe76c843113a"
@ -3608,6 +3612,12 @@ react-native-material-ui@^1.7.0:
react-native-material-design-styles "^0.2.6"
react-native-vector-icons "3.0.0"
react-native-modal@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-2.2.0.tgz#ee50d06624490ee0e5951d5e3a1d7f0050b43984"
dependencies:
react-native-animatable "^1.1.1"
react-native-scrollable-tab-view@^0.7.4:
version "0.7.4"
resolved "https://registry.yarnpkg.com/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-0.7.4.tgz#623a047cbfab35a27b8689095af524e9aac74b62"