status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix up PanResponder example 

Summary: Simplify and fix up a broken example

Reviewed By: hedgerwang

Differential Revision: D3137234

fb-gh-sync-id: 653086796d40a81f472274877fb890eee4b9b57b
fbshipit-source-id: 653086796d40a81f472274877fb890eee4b9b57b
This commit is contained in:
Eric Vicenti 2016-04-05 10:50:42 -07:00 committed by Facebook Github Bot 7
parent 3874c01292
commit 05a852a664
1 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
Examples/UIExplorer/PanResponderExample.js
View File

@ -1,4 +1,11 @@
/**
* 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.
*
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
@ -24,8 +31,6 @@ var {
} = React;
var CIRCLE_SIZE = 80;
var CIRCLE_COLOR = 'blue';
var CIRCLE_HIGHLIGHT_COLOR = 'green';
var PanResponderExample = React.createClass({
@ -54,13 +59,14 @@ var PanResponderExample = React.createClass({
this._circleStyles = {
style: {
left: this._previousLeft,
top: this._previousTop
top: this._previousTop,
backgroundColor: 'green',
}
};
},
componentDidMount: function() {
this._updatePosition();
this._updateNativeStyles();
},
render: function() {
@ -79,24 +85,16 @@ var PanResponderExample = React.createClass({
},
_highlight: function() {
const circle = this.circle;
circle && circle.setNativeProps({
style: {
backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
}
});
this._circleStyles.style.backgroundColor = 'blue';
this._updateNativeStyles();
},
_unHighlight: function() {
const circle = this.circle;
circle && circle.setNativeProps({
style: {
backgroundColor: processColor(CIRCLE_COLOR)
}
});
this._circleStyles.style.backgroundColor = 'green';
this._updateNativeStyles();
},
_updatePosition: function() {
_updateNativeStyles: function() {
this.circle && this.circle.setNativeProps(this._circleStyles);
},
@ -116,7 +114,7 @@ var PanResponderExample = React.createClass({
_handlePanResponderMove: function(e: Object, gestureState: Object) {
this._circleStyles.style.left = this._previousLeft + gestureState.dx;
this._circleStyles.style.top = this._previousTop + gestureState.dy;
this._updatePosition();
this._updateNativeStyles();
},
_handlePanResponderEnd: function(e: Object, gestureState: Object) {
this._unHighlight();
@ -130,7 +128,6 @@ var styles = StyleSheet.create({
width: CIRCLE_SIZE,
height: CIRCLE_SIZE,
borderRadius: CIRCLE_SIZE / 2,
backgroundColor: CIRCLE_COLOR,
position: 'absolute',
left: 0,
top: 0,