Skip to content

Commit

Permalink
feat: Edit navigation with close icon
Browse files Browse the repository at this point in the history
  • Loading branch information
gmaclennan committed Apr 12, 2019
1 parent db47fe9 commit 3545744
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/frontend/components/IconButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const styles = StyleSheet.create({

type Props = {
onPress: (SyntheticEvent<>) => void,
style: any,
style?: any,
children: React.Node
};

Expand Down
11 changes: 11 additions & 0 deletions src/frontend/components/icons/CloseIcon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// @flow
import React from "react";
import Icon from "react-native-vector-icons/MaterialIcons";

type Props = {
size?: number
};

const CloseIcon = ({ size = 30 }: Props) => <Icon name="close" size={size} />;

export default CloseIcon;
32 changes: 31 additions & 1 deletion src/frontend/navigation/AppContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,34 @@ import CategoriesScreen from "./CategoriesScreen";
import GpsModalScreen from "./GpsModalScreen";
import IconButton from "../components/IconButton";
import BackIcon from "../components/icons/BackIcon";
import CloseIcon from "../components/icons/CloseIcon";

const HeaderLeft = ({ onPress }) => (
<IconButton onPress={onPress}>
<BackIcon />
</IconButton>
);

const EditHeaderLeft = ({ navigation }) => {
console.log("nav state", navigation.state);
if (
isTopOfStack(navigation) ||
navigation.state.routeName === "ObservationEdit"
) {
return (
<IconButton onPress={() => navigation.navigate("Main")}>
<CloseIcon />
</IconButton>
);
} else {
return (
<IconButton onPress={() => navigation.pop()}>
<BackIcon />
</IconButton>
);
}
};

const defaultNavigationOptions = {
headerStyle: {
height: 60
Expand All @@ -39,7 +60,10 @@ const EditStack = createStackNavigator(
{
initialRouteName: "ObservationEdit",
transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
defaultNavigationOptions
defaultNavigationOptions: ({ navigation }) => ({
...defaultNavigationOptions,
headerLeft: <EditHeaderLeft navigation={navigation} />
})
}
);

Expand Down Expand Up @@ -110,3 +134,9 @@ function matchRoute(props, prevProps) {
);
};
}

// returns true of the component is top of the stack
function isTopOfStack(navigation) {
const parent = navigation.dangerouslyGetParent();
return parent && parent.state && parent.state.index === 0;
}
1 change: 1 addition & 0 deletions src/frontend/navigation/CategoriesScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React from "react";
import CategoriesView from "../components/CategoriesView";
import PresetsContext from "../context/PresetsContext";
import { withDraft } from "../context/DraftObservationContext";

import type { DraftObservationContext } from "../context/DraftObservationContext";
import type { Preset } from "../context/PresetsContext";
import type { NavigationScreenConfigProps } from "react-navigation";
Expand Down

0 comments on commit 3545744

Please sign in to comment.