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

show action button in places list and map views

Browse source
This commit is contained in:
Bart Akeley 2018-07-28 11:46:04 -05:00
parent f71cdacc5d
commit f04baf1fb0
3 changed files with 64 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
js/components/ActionsButton.js
View file

@ -5,10 +5,11 @@ import { compose, pure, withHandlers } from 'recompose';
import { withRouterContext, withViewMode, withPushRoute } from '../enhancers/routeEnhancers';
import queryString from 'query-string';
import { routeWithTitle } from '../helpers/RouteHelpers';
import { prop, head, length, map } from 'ramda';
import { pipe } from 'rxjs';
type Props = {
actions: Array<'add-food' | 'filter-modal' | 'view-mode'>,
icon: string,
viewMode: string,
actionPressed: Function,
toggleFilterModal: ?Function,
@ -28,14 +29,17 @@ const actionDefs = {
};
const ActionsButton = (props: Props) => {
const actions = (props.actions || []).map(action => actionDefs[action](props));
const actions = map(action => actionDefs[action](props), props.actions || []);
const transition = length(actions) > 1 ? 'speedDial' : null;
const icon = length(actions) > 1 ? 'add' : prop('icon', head(actions));
return (
<ActionButton
actions={actions}
icon={props.icon || 'add'}
transition="speedDial"
icon={icon}
transition={transition}
onPress={props.actionPressed}
onLongPress={props.actionPressed}
/>
);
};
@ -76,6 +80,11 @@ export default compose(
case 'list-view':
props.setViewMode('list');
break;
case 'main-button':
if (length(props.actions) === 1) {
props.setViewMode(props.viewMode === 'map' ? 'list' : 'map');
}
break;
default:
break;
}

26
js/pages/PlacesList.js
View file

@ -1,6 +1,6 @@
// @flow
import React from 'react';
import { ScrollView, RefreshControl } from 'react-native';
import { View, ScrollView, RefreshControl } from 'react-native';
import PlaceTile from '../components/PlaceTile';
import { compose, pure, withState, withHandlers } from 'recompose';
import { withFoodItemsGroupedByPlace } from '../enhancers/foodItemEnhancers';
@ -8,6 +8,7 @@ import { withPlaces } from '../enhancers/placeEnhancers';
import { Map, List } from 'immutable';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import typeof PlaceRecord from '../records/PlaceRecord';
import ActionsButton from '../components/ActionsButton';
type Props = {
foodItemsByPlace: Map<string, Map<string, FoodItemRecord>>,
@ -15,20 +16,25 @@ type Props = {
onRefresh: () => Promise<any>,
onPulldown: () => {},
isRefreshing: boolean,
viewMode: string,
};
const PlacesList = ({ foodItemsByPlace = Map(), places, isRefreshing, onPulldown }: Props) => {
const refreshing = isRefreshing || !places;
return (
<ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
{places &&
places
.map((place: PlaceRecord, placeId: string) => {
const foodItems = foodItemsByPlace.get(placeId, new List());
return <PlaceTile key={placeId} place={place} foodItems={foodItems} />;
})
.toList()}
</ScrollView>
<View>
<ScrollView
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
{places &&
places
.map((place: PlaceRecord, placeId: string) => {
const foodItems = foodItemsByPlace.get(placeId, new List());
return <PlaceTile key={placeId} place={place} foodItems={foodItems} />;
})
.toList()}
</ScrollView>
<ActionsButton actions={['view-mode']} />
</View>
);
};

65
js/pages/PlacesMap.js
View file

@ -1,5 +1,6 @@
// @flow
import React from 'react';
import { View } from 'react-native';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import { compose, renderComponent } from 'recompose';
import { Map } from 'immutable';
@ -10,6 +11,7 @@ import PlaceTile from '../components/PlaceTile';
import { withFoodItemsGroupedByPlace } from '../enhancers/foodItemEnhancers';
import { withRegionState } from '../enhancers/mapViewEnhancers';
import typeof PlaceRecord from '../records/PlaceRecord';
import ActionsButton from '../components/ActionsButton';
type Region = {
latitude: number,
@ -36,39 +38,42 @@ const PlacesMap = ({
pushRoute,
}: Props) => {
return (
<MapView
initialRegion={region}
region={region}
style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
onRegionChange={onRegionChange}>
{places
.map((place: PlaceRecord, placeId: string) => {
const foodItems = foodItemsByPlace.get(placeId, new Map());
const firstFoodItem = foodItems.first();
<View style={{ flex: 1 }}>
<MapView
initialRegion={region}
region={region}
style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
onRegionChange={onRegionChange}>
{places
.map((place: PlaceRecord, placeId: string) => {
const foodItems = foodItemsByPlace.get(placeId, new Map());
const firstFoodItem = foodItems.first();
if (!firstFoodItem) {
return;
}
if (!firstFoodItem) {
return;
}
return (
<MapView.Marker
key={placeId}
title={place.name}
coordinate={{
latitude: firstFoodItem.latitude,
longitude: firstFoodItem.longitude,
}}>
<MapView.Callout
onPress={() => {
pushRoute(routeWithTitle(`/place/${placeId || ''}`, place.name));
return (
<MapView.Marker
key={placeId}
title={place.name}
coordinate={{
latitude: firstFoodItem.latitude,
longitude: firstFoodItem.longitude,
}}>
<PlaceTile place={place} foodItems={foodItems} />
</MapView.Callout>
</MapView.Marker>
);
})
.toList()}
</MapView>
<MapView.Callout
onPress={() => {
pushRoute(routeWithTitle(`/place/${placeId || ''}`, place.name));
}}>
<PlaceTile place={place} foodItems={foodItems} />
</MapView.Callout>
</MapView.Marker>
);
})
.toList()}
</MapView>
<ActionsButton actions={['view-mode']} />
</View>
);
};