diff --git a/Examples/UIExplorer/PanResponderExample.js b/Examples/UIExplorer/PanResponderExample.js index 47833af3f5a8fe..88ff10fe2d0e9e 100644 --- a/Examples/UIExplorer/PanResponderExample.js +++ b/Examples/UIExplorer/PanResponderExample.js @@ -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,