kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-01-12 22:50:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove createReactClass from the RNTester/js/PanResponderExample.js (#21606)

Browse Source 
Summary:
Related to #21581 .
Removed createReactClass from the RNTester/js/PanResponderExample.js

 - [x] npm run prettier
 - [x] npm run flow-check-ios
 - [x] npm run flow-check-android

[GENERAL] [ENHANCEMENT] [RNTester/js/PanResponderExample.js] - remove createReactClass dependency
Pull Request resolved: https://github.com/facebook/react-native/pull/21606

Reviewed By: hramos

Differential Revision: D10342587

Pulled By: RSNara

fbshipit-source-id: dac465d65dee7714f55739b77e6ca1b07294ee3c
This commit is contained in:
nd-02110114
2018-10-12 13:26:13 -07:00
committed by Facebook Github Bot
parent c96c93ef4a
commit 76bc15d5e4
1 changed files with 87 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
RNTester/js/PanResponderExample.js
View File

@@ -10,37 +10,78 @@
'use strict';
var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
var {PanResponder, StyleSheet, View} = ReactNative;
const React = require('react');
const ReactNative = require('react-native');
const {PanResponder, StyleSheet, View} = ReactNative;
var CIRCLE_SIZE = 80;
import type {PanResponderInstance, GestureState} from 'PanResponder';
import type {PressEvent} from 'CoreEventTypes';
var PanResponderExample = createReactClass({
displayName: 'PanResponderExample',
type CircleStyles = {
backgroundColor?: string,
left?: number,
top?: number,
};
statics: {
title: 'PanResponder Sample',
description:
'Shows the use of PanResponder to provide basic gesture handling.',
},
const CIRCLE_SIZE = 80;
_panResponder: {},
_previousLeft: 0,
_previousTop: 0,
_circleStyles: {},
circle: (null: ?{setNativeProps(props: Object): void}),
type Props = $ReadOnly<{||}>;
UNSAFE_componentWillMount: function() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
onPanResponderGrant: this._handlePanResponderGrant,
onPanResponderMove: this._handlePanResponderMove,
onPanResponderRelease: this._handlePanResponderEnd,
onPanResponderTerminate: this._handlePanResponderEnd,
});
class PanResponderExample extends React.Component<Props> {
static title = 'PanResponder Sample';
static description =
'Shows the Use of PanResponder to provide basic gesture handling';
_handleStartShouldSetPanResponder = (
event: PressEvent,
gestureState: GestureState,
): boolean => {
// Should we become active when the user presses down on the circle?
return true;
};
_handleMoveShouldSetPanResponder = (
event: PressEvent,
gestureState: GestureState,
): boolean => {
// Should we become active when the user moves a touch over the circle?
return true;
};
_handlePanResponderGrant = (
event: PressEvent,
gestureState: GestureState,
) => {
this._highlight();
};
_handlePanResponderMove = (event: PressEvent, gestureState: GestureState) => {
this._circleStyles.style.left = this._previousLeft + gestureState.dx;
this._circleStyles.style.top = this._previousTop + gestureState.dy;
this._updateNativeStyles();
};
_handlePanResponderEnd = (event: PressEvent, gestureState: GestureState) => {
this._unHighlight();
this._previousLeft += gestureState.dx;
this._previousTop += gestureState.dy;
};
_panResponder: PanResponderInstance = PanResponder.create({
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
onPanResponderGrant: this._handlePanResponderGrant,
onPanResponderMove: this._handlePanResponderMove,
onPanResponderRelease: this._handlePanResponderEnd,
onPanResponderTerminate: this._handlePanResponderEnd,
});
_previousLeft: number = 0;
_previousTop: number = 0;
_circleStyles: {|style: CircleStyles|} = {style: {}};
circle: ?React.ElementRef<typeof View> = null;
UNSAFE_componentWillMount() {
this._previousLeft = 20;
this._previousTop = 84;
this._circleStyles = {
@@ -50,13 +91,27 @@ var PanResponderExample = createReactClass({
backgroundColor: 'green',
},
};
},
}
componentDidMount: function() {
componentDidMount() {
this._updateNativeStyles();
},
}
render: function() {
_highlight() {
this._circleStyles.style.backgroundColor = 'blue';
this._updateNativeStyles();
}
_unHighlight() {
this._circleStyles.style.backgroundColor = 'green';
this._updateNativeStyles();
}
_updateNativeStyles() {
this.circle && this.circle.setNativeProps(this._circleStyles);
}
render() {
return (
<View style={styles.container}>
<View
@@ -68,52 +123,8 @@ var PanResponderExample = createReactClass({
/>
</View>
);
},
_highlight: function() {
this._circleStyles.style.backgroundColor = 'blue';
this._updateNativeStyles();
},
_unHighlight: function() {
this._circleStyles.style.backgroundColor = 'green';
this._updateNativeStyles();
},
_updateNativeStyles: function() {
this.circle && this.circle.setNativeProps(this._circleStyles);
},
_handleStartShouldSetPanResponder: function(
e: Object,
gestureState: Object,
): boolean {
// Should we become active when the user presses down on the circle?
return true;
},
_handleMoveShouldSetPanResponder: function(
e: Object,
gestureState: Object,
): boolean {
// Should we become active when the user moves a touch over the circle?
return true;
},
_handlePanResponderGrant: function(e: Object, gestureState: Object) {
this._highlight();
},
_handlePanResponderMove: function(e: Object, gestureState: Object) {
this._circleStyles.style.left = this._previousLeft + gestureState.dx;
this._circleStyles.style.top = this._previousTop + gestureState.dy;
this._updateNativeStyles();
},
_handlePanResponderEnd: function(e: Object, gestureState: Object) {
this._unHighlight();
this._previousLeft += gestureState.dx;
this._previousTop += gestureState.dy;
},
});
}
}
var styles = StyleSheet.create({
circle: {