Skip to content
Permalink
Browse files

Remove prop `onNavigate`.

Summary:
Remove prop `onNavigate` from these views.
- NavigationAnimatedView
- NavigationCardStack
- NavigationCard

Also, the `sceneProps` onject that is passed to the `renderScene` function
no longer contains `onNavigate`.

The contract that `onNavigate` expects has been vague. Different data flow
system may expect complete different params for such function

For instance,

  * onNavigate({type: 'back'});
  * onNavigate({type: 'BACK'});
  * onNavigate('back'});

We have no intention to unify such generic API since it's more likely to be
constrained by the data flow frameworks such as redux or flux.

Also, passing the prop `onNavigate` all the way down to the component that
invokes the navigation action can be really tedious. We'd expect developer
to either pass such callback (onNavigate) via context or just set up some
kind of static actions that any component can call directly.

`onNavigate` was previously added as a part of (redux-like) reducers-friendly
feature but that's no longer the case.

This new prop `onNavigateBack` is used to explicitly handle the case when the back button or back gesture
is performed.

Reviewed By: ericvicenti

Differential Revision: D3410873

fbshipit-source-id: a703cf0debd474cff33d6610e858b9c4bb3ecbf5
  • Loading branch information
Hedger Wang Facebook Github Bot 9
Hedger Wang authored and Facebook Github Bot 9 committed Jun 10, 2016
1 parent 7e445e6 commit fb0007d85323909ab652bf97166744fa7e17daab
@@ -24,8 +24,6 @@ const NavigationExampleRow = require('./NavigationExampleRow');
const React = require('react');
const ReactNative = require('react-native');

const emptyFunction = require('fbjs/lib/emptyFunction');

/**
* Basic example that shows how to use <NavigationCardStack /> to build
* an app with controlled navigation system.
@@ -137,11 +135,8 @@ class YourNavigator extends React.Component {

// Now use the `NavigationCardStack` to render the scenes.
render(): ReactElement {
// TODO(hedger): prop `onNavigate` will be deprecated soon. For now,
// use `emptyFunction` as a placeholder.
return (
<NavigationCardStack
onNavigate={emptyFunction}
onNavigateBack={this._onPopRoute}
navigationState={this.props.navigationState}
renderScene={this._renderScene}
@@ -249,6 +249,7 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
// This sets up the methods (e.g. Pop, Push) for navigation.
constructor(props: any, context: any) {
super(props, context);
this._back = this._back.bind(this);
this._renderHeader = this._renderHeader.bind(this);
this._renderScene = this._renderScene.bind(this);
}
@@ -264,7 +265,7 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
<View style={styles.navigator}>
<NavigationCardStack
key={'stack_' + tabKey}
onNavigate={this.props.navigate}
onNavigateBack={this._back}
navigationState={scenes}
renderOverlay={this._renderHeader}
renderScene={this._renderScene}
@@ -298,6 +299,10 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
/>
);
}

_back() {
this.props.navigate({type: 'pop'});
}
});

// Next step.
@@ -310,6 +315,7 @@ const YourHeader = createAppNavigationContainer(class extends Component {

constructor(props: Object, context: any) {
super(props, context);
this._back = this._back.bind(this);
this._renderTitleComponent = this._renderTitleComponent.bind(this);
}

@@ -318,11 +324,15 @@ const YourHeader = createAppNavigationContainer(class extends Component {
<NavigationHeader
{...this.props}
renderTitleComponent={this._renderTitleComponent}
onNavigate={this.props.navigate}
onNavigateBack={this._back}
/>
);
}

_back(): void {
this.props.navigate({type: 'pop'});
}

_renderTitleComponent(): ReactElement {
return (
<NavigationHeader.Title>
@@ -63,11 +63,12 @@ type State = UIExplorerNavigationState & {
const APP_STATE_KEY = 'UIExplorerAppState.v1';

class UIExplorerApp extends React.Component {
_handleBack: Function;
_handleAction: Function;
_renderCard: Function;
_renderOverlay: Function;
_renderScene: Function;
_renderCard: Function;
_renderTitleComponent: Function;
_handleAction: Function;
state: State;

constructor(props: Props) {
@@ -76,6 +77,7 @@ class UIExplorerApp extends React.Component {

componentWillMount() {
this._handleAction = this._handleAction.bind(this);
this._handleBack = this._handleAction.bind(this, {type: 'back'});
this._renderOverlay = this._renderOverlay.bind(this);
this._renderScene = this._renderScene.bind(this);
this._renderTitleComponent = this._renderTitleComponent.bind(this);
@@ -137,7 +139,7 @@ class UIExplorerApp extends React.Component {
style={styles.container}
renderOverlay={this._renderOverlay}
renderScene={this._renderScene}
onNavigate={this._handleAction}

/>
);
}
@@ -146,6 +148,7 @@ class UIExplorerApp extends React.Component {
return (
<NavigationHeader
{...props}
onNavigateBack={this._handleBack}
renderTitleComponent={this._renderTitleComponent}
/>
);
@@ -57,6 +57,7 @@ type SceneViewProps = {

type Props = NavigationSceneRendererProps & {
onComponentRef: (ref: any) => void,
onNavigateBack: ?Function,
panHandlers: ?NavigationPanPanHandlers,
pointerEvents: string,
renderScene: NavigationSceneRenderer,
@@ -93,6 +94,7 @@ class NavigationCard extends React.Component<any, Props, any> {
static propTypes = {
...NavigationPropTypes.SceneRendererProps,
onComponentRef: PropTypes.func.isRequired,
onNavigateBack: PropTypes.func,
panHandlers: NavigationPropTypes.panHandlers,
pointerEvents: PropTypes.string.isRequired,
renderScene: PropTypes.func.isRequired,
@@ -121,7 +123,10 @@ class NavigationCard extends React.Component<any, Props, any> {
style;

const viewPanHandlers = panHandlers === undefined ?
NavigationCardStackPanResponder.forHorizontal(props) :
NavigationCardStackPanResponder.forHorizontal({
...props,
onNavigateBack: this.props.onNavigateBack,
}) :
panHandlers;

return (
@@ -47,7 +47,6 @@ const {PropTypes} = React;
const {Directions} = NavigationCardStackPanResponder;

import type {
NavigationActionCaller,
NavigationState,
NavigationSceneRenderer,
NavigationSceneRendererProps,
@@ -60,9 +59,10 @@ import type {
type Props = {
direction: NavigationGestureDirection,
navigationState: NavigationState,
onNavigate: NavigationActionCaller,
onNavigateBack: ?Function,
renderOverlay: ?NavigationSceneRenderer,
renderScene: NavigationSceneRenderer,
style: any,
};

type DefaultProps = {
@@ -90,7 +90,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
static propTypes = {
direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
navigationState: NavigationPropTypes.navigationState.isRequired,
onNavigate: NavigationPropTypes.SceneRendererProps.onNavigate,
onNavigateBack: PropTypes.func,
renderOverlay: PropTypes.func,
renderScene: PropTypes.func.isRequired,
};
@@ -122,8 +122,6 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
navigationState={this.props.navigationState}
renderOverlay={this.props.renderOverlay}
renderScene={this._renderScene}
onNavigate={this.props.onNavigate}
// $FlowFixMe - style should be declared
style={[styles.animatedView, this.props.style]}
/>
);
@@ -136,9 +134,13 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
NavigationCardStackStyleInterpolator.forVertical(props) :
NavigationCardStackStyleInterpolator.forHorizontal(props);

const panHandlersProps = {
...props,
onNavigateBack: this.props.onNavigateBack,
};
const panHandlers = isVertical ?
NavigationCardStackPanResponder.forVertical(props) :
NavigationCardStackPanResponder.forHorizontal(props);
NavigationCardStackPanResponder.forVertical(panHandlersProps) :
NavigationCardStackPanResponder.forHorizontal(panHandlersProps);

return (
<NavigationCard
@@ -28,7 +28,7 @@ import type {
const ANIMATION_DURATION = 250;

/**
* The threshold to invoke the `onNavigate` action.
* The threshold to invoke the `onNavigateBack` action.
* For instance, `1 / 3` means that moving greater than 1 / 3 of the width of
* the view will navigate.
*/
@@ -62,14 +62,8 @@ const Directions = {

export type NavigationGestureDirection = 'horizontal' | 'vertical';

/**
* Primitive gesture actions.
*/
const Actions = {
// The gesture to navigate backward.
// This is done by swiping from the left to the right or from the top to the
// bottom.
BACK: {type: 'back'},
type Props = NavigationSceneRendererProps & {
onNavigateBack: ?Function,
};

/**
@@ -90,12 +84,12 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {

_isResponding: boolean;
_isVertical: boolean;
_props: NavigationSceneRendererProps;
_props: Props;
_startValue: number;

constructor(
direction: NavigationGestureDirection,
props: NavigationSceneRendererProps,
props: Props,
) {
super();
this._isResponding = false;
@@ -181,8 +175,16 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {

props.position.stopAnimation((value: number) => {
this._reset();
if (distance > DISTANCE_THRESHOLD || value <= index - POSITION_THRESHOLD) {
props.onNavigate(Actions.BACK);

if (!props.onNavigateBack) {
return;
}

if (
distance > DISTANCE_THRESHOLD ||
value <= index - POSITION_THRESHOLD
) {
props.onNavigateBack();
}
});
}
@@ -206,20 +208,20 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {

function createPanHandlers(
direction: NavigationGestureDirection,
props: NavigationSceneRendererProps,
props: Props,
): NavigationPanPanHandlers {
const responder = new NavigationCardStackPanResponder(direction, props);
return responder.panHandlers;
}

function forHorizontal(
props: NavigationSceneRendererProps,
props: Props,
): NavigationPanPanHandlers {
return createPanHandlers(Directions.HORIZONTAL, props);
}

function forVertical(
props: NavigationSceneRendererProps,
props: Props,
): NavigationPanPanHandlers {
return createPanHandlers(Directions.VERTICAL, props);
}
@@ -232,7 +234,6 @@ module.exports = {
RESPOND_THRESHOLD,

// enums
Actions,
Directions,

// methods.
@@ -48,23 +48,27 @@ const {
} = ReactNative;

import type {
NavigationActionCaller,
NavigationSceneRenderer,
NavigationSceneRendererProps,
NavigationStyleInterpolator,
} from 'NavigationTypeDefinition';

type SubViewProps = NavigationSceneRendererProps & {
onNavigateBack: ?Function,
};

type SubViewRenderer = (subViewProps: SubViewProps) => ?ReactElement<any>;

type DefaultProps = {
renderLeftComponent: NavigationSceneRenderer,
renderRightComponent: NavigationSceneRenderer,
renderTitleComponent: NavigationSceneRenderer,
renderLeftComponent: SubViewRenderer,
renderRightComponent: SubViewRenderer,
renderTitleComponent: SubViewRenderer,
};

type Props = NavigationSceneRendererProps & {
renderLeftComponent: NavigationSceneRenderer,
renderRightComponent: NavigationSceneRenderer,
renderTitleComponent: NavigationSceneRenderer,
onNavigate: NavigationActionCaller,
onNavigateBack: ?Function,
renderLeftComponent: SubViewRenderer,
renderRightComponent: SubViewRenderer,
renderTitleComponent: SubViewRenderer,
style?: any,
viewProps?: any,
};
@@ -80,30 +84,31 @@ class NavigationHeader extends React.Component<DefaultProps, Props, any> {

static defaultProps = {

renderTitleComponent: (props: NavigationSceneRendererProps) => {
renderTitleComponent: (props: SubViewProps) => {
const {navigationState} = props;
const title = String(navigationState.title || '');
return <NavigationHeaderTitle>{title}</NavigationHeaderTitle>;
},

renderLeftComponent: (props: NavigationSceneRendererProps) => {
if (props.scene.index === 0) {
renderLeftComponent: (props: SubViewProps) => {
if (props.scene.index === 0 || !props.onNavigateBack) {
return null;
}
return (
<NavigationHeaderBackButton
onNavigate={props.onNavigate}
onPress={props.onNavigateBack}
/>
);
},

renderRightComponent: (props: NavigationSceneRendererProps) => {
renderRightComponent: (props: SubViewProps) => {
return null;
},
};

static propTypes = {
...NavigationPropTypes.SceneRendererProps,
onNavigateBack: PropTypes.func,
renderLeftComponent: PropTypes.func,
renderRightComponent: PropTypes.func,
renderTitleComponent: PropTypes.func,
@@ -167,7 +172,7 @@ class NavigationHeader extends React.Component<DefaultProps, Props, any> {
_renderSubView(
props: NavigationSceneRendererProps,
name: SubViewName,
renderer: NavigationSceneRenderer,
renderer: SubViewRenderer,
styleInterpolator: NavigationStyleInterpolator,
): ?ReactElement<any> {
const {
@@ -189,7 +194,8 @@ class NavigationHeader extends React.Component<DefaultProps, Props, any> {
return null;
}

const subView = renderer(props);
const subViewProps = {...props, onNavigateBack: this.props.onNavigateBack};
const subView = renderer(subViewProps);
if (subView === null) {
return null;
}

0 comments on commit fb0007d

Please sign in to comment.
You can’t perform that action at this time.