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

ImagePicker showing thumbs for existing images

Browse source 
still wip for pulling the images from camera
This commit is contained in:
Bart Akeley 2017-06-24 22:04:25 -05:00
parent 0c0e6a619b
commit 6d6900c568
2 changed files with 79 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
js/components/ImagePicker.js Normal file
View file

@ -0,0 +1,26 @@
//@flow
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import { Icon } from 'react-native-material-ui';
import uiTheme from '../ui-theme.js';
const { palette: { accentColor } } = uiTheme;
export const ImageThumb = ({ uri, onPress }: { uri?: string, onPress: () => void }) =>
<TouchableOpacity onPress={onPress}>
<Image source={{ uri }} style={{ height: 35, width: 35, margin: 5 }} />
</TouchableOpacity>;
export const ImagePicker = ({ children, onCreateNew }: { children?: any, onCreateNew: Function }) =>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<TouchableOpacity onPress={onCreateNew}>
<View style={{ flexDirection: 'row' }}>
<Icon name="insert-photo" size={35} color={accentColor} style={{ margin: 5 }} />
{(!children || !children.length) &&
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 16 }}>Add Images</Text>
</View>}
</View>
</TouchableOpacity>
{children}
</View>;

84
js/pages/CreateFoodItem.js
View file

@ -10,6 +10,15 @@ import QuantityPicker from '../components/QuantityPicker';
import { compose, branch, withState, withHandlers, renderComponent, mapProps } from 'recompose';
import RNGooglePlaces from 'react-native-google-places';
import CategoryPicker from '../components/CategoryPicker';
import { ImageThumb, ImagePicker } from '../components/ImagePicker';
type GooglePlaceObject = {
placeID: string,
latitude: number,
longitude: number,
name: string,
address: string,
};
const fieldStyle = {
paddingTop: 10,
@ -29,7 +38,7 @@ const Field = ({ onPress, text = '' }: { onPress?: Function, text: string }) =>
<Divider />
</TouchableOpacity>;
const openPlaceModal = (onChoosePlace: (place: Object) => void) => () => {
const openPlaceModal = (onChoosePlace: (place: GooglePlaceObject) => void) => () => {
RNGooglePlaces.openAutocompleteModal({ type: 'establishment' }).then(onChoosePlace).catch(error => {
throw error;
});
@ -37,55 +46,48 @@ const openPlaceModal = (onChoosePlace: (place: Object) => void) => () => {
type Props = {
foodItem: typeof FoodItemRecord,
modalsVisible: {
name: boolean,
place: boolean,
},
setPropOfFoodItem: Function,
toggleModal: Function,
toggleNameModal: Function,
setFoodItem: Function,
setModalsVisible: Function,
place: typeof PlaceRecord,
setPlace: Function,
setPlace: (place: typeof PlaceRecord) => void,
removeImageAtIndex: (i: number) => () => void,
updatePlace: (place: GooglePlaceObject) => void,
};
const CreateFoodItem = ({ foodItem, toggleModal, setPropOfFoodItem, place, setPlace }: Props) => {
const updatePlace = ({ placeID: id, latitude, longitude, name, address }) => {
const newPlace = new PlaceRecord({
id,
name,
address,
latitude,
longitude,
});
setPlace(newPlace);
setPropOfFoodItem('placeId')(newPlace.id);
};
const CreateFoodItem = (props: Props) => {
const { foodItem, toggleNameModal, setPropOfFoodItem, place, updatePlace, removeImageAtIndex } = props;
return (
<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
<Field text={foodItem.name || 'Name'} onPress={toggleModal('name')} />
<Field text={foodItem.name || 'Name'} onPress={toggleNameModal} />
<Field text={place.name || 'Place'} onPress={openPlaceModal(updatePlace)} />
<CategoryPicker
selected={foodItem.category}
onValueChange={setPropOfFoodItem('category')}
style={{ height: 50, width: 200 }}
style={{ height: 50 }}
/>
<Divider />
<QuantityPicker
quantity={foodItem.quantity}
onValueChange={setPropOfFoodItem('quantity')}
style={{ height: 50, width: 200 }}
style={{ height: 50 }}
/>
<Divider />
<ImagePicker onCreateNew={() => {}}>
{foodItem.images.map((image, index) =>
<ImageThumb key={index} uri={image} onPress={removeImageAtIndex(index)} />
)}
</ImagePicker>
</View>
);
};
const enhanceNameModal = compose(
renderComponent,
mapProps(({ toggleModal, setPropOfFoodItem }: Props) => {
mapProps(({ toggleNameModal, setPropOfFoodItem }: Props) => {
return {
onClose: toggleModal('name'),
onClose: toggleNameModal,
onUpdate: setPropOfFoodItem('name'),
};
})
@ -94,17 +96,37 @@ const enhanceNameModal = compose(
export default compose(
withState('foodItem', 'setFoodItem', new FoodItemRecord()),
withState('place', 'setPlace', new PlaceRecord()),
withState('modalsVisible', 'setModalsVisible', { name: false, place: false }),
withState('nameModalOpen', 'setNameModalOpen', false),
withHandlers({
setPropOfFoodItem: ({ foodItem, setFoodItem }: Props) => (prop: string) => (value: any) => {
setFoodItem(foodItem.set(prop, value));
},
toggleModal: ({ modalsVisible, setModalsVisible }: Props) => (modalName: string) => () => {
setModalsVisible({
...modalsVisible,
[modalName]: !modalsVisible[modalName],
});
removeImageAtIndex: ({ foodItem, setFoodItem }: Props) => (index: number) => () => {
setFoodItem(
foodItem.update('images', (images: Array<string>) => {
images.splice(index, 1);
return images;
})
);
},
updatePlace: ({ setPlace, foodItem, setFoodItem }: Props) => ({
placeID: id,
latitude,
longitude,
name,
address,
}) => {
const newPlace = new PlaceRecord({
id,
name,
address,
latitude,
longitude,
});
setPlace(newPlace);
setFoodItem(foodItem.set('placeId', newPlace.id));
},
toggleNameModal: ({ nameModalOpen, setNameModalOpen }) => () => setNameModalOpen(!nameModalOpen),
}),
branch(({ modalsVisible }) => !!modalsVisible.name, enhanceNameModal(NameModal))
branch(({ nameModalOpen }) => !!nameModalOpen, enhanceNameModal(NameModal))
)(CreateFoodItem);