status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 01:40:08 +00:00
Code Issues Projects Releases Wiki Activity

Reverted commit D3205106

Browse Source 
Summary:
THis addresses the issue as reported at
https://github.com/facebook/react-native/issues/6732

Use a higher order component `NavigationPointerEventsContainer` to manager the
prop `pointerEvents` for `NavigationCard`.

The idea is that the scene's content should not be interactive while the scene is
transitioning.

Reviewed By: ericvicenti

Differential Revision: D3205106

fb-gh-sync-id: db7172941155f34447495199d2c029f5c7e75f30
fbshipit-source-id: db7172941155f34447495199d2c029f5c7e75f30
This commit is contained in:
Jason Prado 2016-05-02 14:21:30 -07:00 committed by Facebook Github Bot 1
parent 5966ccbcad
commit 79c5322233
2 changed files with 42 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
Libraries/CustomComponents/NavigationExperimental/NavigationCard.js
View File

@ -38,7 +38,6 @@ const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleIn
const NavigationContainer = require('NavigationContainer');
const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
const NavigationPointerEventsContainer = require('NavigationPointerEventsContainer');
const NavigationPropTypes = require('NavigationPropTypes');
const React = require('React');
const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
@ -52,30 +51,26 @@ import type {
} from 'NavigationTypeDefinition';
type Props = NavigationSceneRendererProps & {
onComponentRef: (ref: any) => void,
panHandlers: ?NavigationPanPanHandlers,
pointerEvents: string,
renderScene: NavigationSceneRenderer,
style: any,
panHandlers: ?NavigationPanPanHandlers,
renderScene: NavigationSceneRenderer,
};
const {PropTypes} = React;
const propTypes = {
...NavigationPropTypes.SceneRenderer,
style: PropTypes.any,
panHandlers: NavigationPropTypes.panHandlers,
renderScene: PropTypes.func.isRequired,
};
/**
* Component that renders the scene as card for the <NavigationCardStack />.
*/
class NavigationCard extends React.Component<any, Props, any> {
props: Props;
static propTypes = {
...NavigationPropTypes.SceneRenderer,
onComponentRef: PropTypes.func.isRequired,
panHandlers: NavigationPropTypes.panHandlers,
pointerEvents: PropTypes.string.isRequired,
renderScene: PropTypes.func.isRequired,
style: PropTypes.any,
};
shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
this,
@ -87,25 +82,41 @@ class NavigationCard extends React.Component<any, Props, any> {
render(): ReactElement {
const {
panHandlers,
pointerEvents,
renderScene,
style,
...props, /* NavigationSceneRendererProps */
} = this.props;
const viewStyle = style === undefined ?
NavigationCardStackStyleInterpolator.forHorizontal(props) :
style;
let viewStyle = null;
if (style === undefined) {
// fall back to default style.
viewStyle = NavigationCardStackStyleInterpolator.forHorizontal(props);
} else {
viewStyle = style;
}
const viewPanHandlers = panHandlers === undefined ?
NavigationCardStackPanResponder.forHorizontal(props) :
panHandlers;
const {
navigationState,
scene,
} = props;
const interactive = navigationState.index === scene.index && !scene.isStale;
const pointerEvents = interactive ? 'auto' : 'none';
let viewPanHandlers = null;
if (interactive) {
if (panHandlers === undefined) {
// fall back to default pan handlers.
viewPanHandlers = NavigationCardStackPanResponder.forHorizontal(props);
} else {
viewPanHandlers = panHandlers;
}
}
return (
<Animated.View
{...viewPanHandlers}
pointerEvents={pointerEvents}
ref={this.props.onComponentRef}
style={[styles.main, viewStyle]}>
{renderScene(props)}
</Animated.View>
@ -113,6 +124,8 @@ class NavigationCard extends React.Component<any, Props, any> {
}
}
NavigationCard.propTypes = propTypes;
const styles = StyleSheet.create({
main: {
backgroundColor: '#E9E9EF',
@ -128,13 +141,13 @@ const styles = StyleSheet.create({
},
});
NavigationCard = NavigationPointerEventsContainer.create(NavigationCard);
NavigationCard = NavigationContainer.create(NavigationCard);
const NavigationCardContainer = NavigationContainer.create(NavigationCard);
// Export these buil-in interaction modules.
NavigationCard.CardStackPanResponder = NavigationCardStackPanResponder;
NavigationCard.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
NavigationCard.PagerPanResponder = NavigationPagerPanResponder;
NavigationCard.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
NavigationCardContainer.CardStackPanResponder = NavigationCardStackPanResponder;
NavigationCardContainer.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
NavigationCardContainer.PagerPanResponder = NavigationPagerPanResponder;
NavigationCardContainer.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
module.exports = NavigationCard;
module.exports = NavigationCardContainer;

156
Libraries/CustomComponents/NavigationExperimental/NavigationPointerEventsContainer.js
View File

@ -1,156 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* Facebook, Inc. ("Facebook") owns all right, title and interest, including
* all intellectual property and other proprietary rights, in and to the React
* Native CustomComponents software (the "Software"). Subject to your
* compliance with these terms, you are hereby granted a non-exclusive,
* worldwide, royalty-free copyright license to (1) use and copy the Software;
* and (2) reproduce and distribute the Software as part of your own software
* ("Your Software"). Facebook reserves all rights not expressly granted to
* you in this license agreement.
*
* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
* OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
* IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
* EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* @providesModule NavigationPointerEventsContainer
* @flow
*/
'use strict';
const React = require('React');
const NavigationAnimatedValueSubscription = require('NavigationAnimatedValueSubscription');
const invariant = require('fbjs/lib/invariant');
import type {
NavigationSceneRendererProps,
} from 'NavigationTypeDefinition';
type Props = NavigationSceneRendererProps;
const MIN_POSITION_OFFSET = 0.01;
/**
* Create a higher-order component that automatically computes the
* `pointerEvents` property for a component whenever navigation position
* changes.
*/
function create(
Component: ReactClass<any>,
): ReactClass {
class Container extends React.Component<any, Props, any> {
_component: any;
_onComponentRef: (view: any) => void;
_onPositionChange: (data: {value: number}) => void;
_pointerEvents: string;
_positionListener: ?NavigationAnimatedValueSubscription;
props: Props;
constructor(props: Props, context: any) {
super(props, context);
this._pointerEvents = this._computePointerEvents();
}
componentWillMount(): void {
this._onPositionChange = this._onPositionChange.bind(this);
this._onComponentRef = this._onComponentRef.bind(this);
}
componentDidMount(): void {
this._bindPosition(this.props);
}
componentWillUnmount(): void {
this._positionListener && this._positionListener.remove();
}
componentWillReceiveProps(nextProps: Props): void {
this._bindPosition(nextProps);
}
render(): ReactElement {
this._pointerEvents = this._computePointerEvents();
return (
<Component
{...this.props}
pointerEvents={this._pointerEvents}
onComponentRef={this._onComponentRef}
/>
);
}
_onComponentRef(component: any): void {
this._component = component;
if (component) {
invariant(
typeof component.setNativeProps === 'function',
'component must implement method `setNativeProps`',
);
}
}
_bindPosition(props: NavigationSceneRendererProps): void {
this._positionListener && this._positionListener.remove();
this._positionListener = new NavigationAnimatedValueSubscription(
props.position,
this._onPositionChange,
);
}
_onPositionChange(): void {
if (this._component) {
const pointerEvents = this._computePointerEvents();
if (this._pointerEvents !== pointerEvents) {
this._pointerEvents = pointerEvents;
this._component.setNativeProps({pointerEvents});
}
}
}
_computePointerEvents(): string {
const {
navigationState,
position,
scene,
} = this.props;
if (scene.isStale || navigationState.index !== scene.index) {
// The scene isn't focused.
return 'none';
}
const offset = position.__getAnimatedValue() - navigationState.index;
if (Math.abs(offset) > MIN_POSITION_OFFSET) {
// The positon is still away from scene's index.
// Scene's children should not receive touches until the position
// is close enough to scene's index.
return 'box-only';
}
return 'auto';
}
}
return Container;
}
module.exports = {
create,
};