show icons in food item name modal

This commit is contained in:
Bart Akeley 2017-05-21 20:36:30 -05:00
parent 0133db1b64
commit aa8ce0b601
3 changed files with 16 additions and 16 deletions

View file

@ -37,12 +37,6 @@ export const NameAndPlace = ({ name, place, style }: { name: string, place: stri
</View>
);
export const AvailableCount = ({ count }: { count: number }) => (
<View style={{ height: 70, width: 70, paddingTop: 15 }}>
<Text style={{ ...theme.itemTile.availableCountStyle }}>{count}</Text>
</View>
);
export const PlaceTile = pure(({ place }: { place: Place, onPress: Function }) => (
<Link to={routeWithTitle(`/place/${place.id}`, place.name)} underlayColor={theme.itemTile.pressHighlightColor}>
<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
@ -59,8 +53,7 @@ export const FoodItemTile = pure(({ foodItem, place }: { foodItem: FoodItem, pla
>
<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
<Thumbnail thumb={foodItem.thumbImage} />
<NameAndPlace name={foodItem.name} place={place.name} style={{ flex: 1 }} />
<AvailableCount count={foodItem.availableCount} />
<NameAndPlace name={foodItem.name} place={place.name} />
</View>
</Link>
));

View file

@ -6,12 +6,12 @@ import { Divider, Icon } from 'react-native-material-ui';
import FoodItemList from '../components/FoodItemList';
import FoodItemRecord from '../records/FoodItemRecord';
import { withPlaceForFoodItem } from '../enhancers/placeEnhancers';
import { NameAndPlace } from '../components/ItemTile';
import { FoodItemTile } from '../components/ItemTile';
import { type Place } from '../records/PlaceRecord';
const FoodItemWithPlace = withPlaceForFoodItem(
({ foodItem, place }: { foodItem: typeof FoodItemRecord, place: Place }) => {
return <NameAndPlace name={foodItem.name} place={place.name} />;
return <FoodItemTile foodItem={foodItem} place={place} />;
}
);

View file

@ -15,6 +15,15 @@ const fieldNameStyle = {
fontSize: 18,
};
const Field = ({ onPress, text = '' }: { onPress: Function, text: string }) => (
<TouchableOpacity style={fieldStyle} onPress={onPress}>
<Text style={fieldNameStyle}>
{text}
</Text>
<Divider />
</TouchableOpacity>
);
class CreateFoodItem extends Component {
static displayName = 'CreateFoodItem';
@ -52,12 +61,10 @@ class CreateFoodItem extends Component {
const { foodItem, modalsVisible } = this.state;
return (
<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
<TouchableOpacity style={fieldStyle} onPress={this.toggleModal('name')}>
<Text style={fieldNameStyle}>
{foodItem.name || 'Name'}
</Text>
<Divider />
</TouchableOpacity>
<Field text={foodItem.name || 'Name'} onPress={this.toggleModal('name')} />
<Field text={'Location'} />
<Field text={'Category'} />
<Field text={'Amount Left'} />
<NameModal isVisible={modalsVisible.name} onClose={this.toggleModal('name')} />
</View>
);