Skip to content

Commit 76bc15d

Browse files
nissy-devfacebook-github-bot
nissy-dev
authored and
facebook-github-bot
committed
remove createReactClass from the RNTester/js/PanResponderExample.js (facebook#21606)
Summary: Related to facebook#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: facebook#21606 Reviewed By: hramos Differential Revision: D10342587 Pulled By: RSNara fbshipit-source-id: dac465d65dee7714f55739b77e6ca1b07294ee3c
1 parent c96c93e commit 76bc15d

File tree

1 file changed

+88
-77
lines changed

1 file changed

+88
-77
lines changed

‎RNTester/js/PanResponderExample.js‎

Lines changed: 88 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -10,37 +10,78 @@
1010

1111
'use strict';
1212

13-
var React = require('react');
14-
var createReactClass = require('create-react-class');
15-
var ReactNative = require('react-native');
16-
var {PanResponder, StyleSheet, View} = ReactNative;
13+
const React = require('react');
14+
const ReactNative = require('react-native');
15+
const {PanResponder, StyleSheet, View} = ReactNative;
1716

18-
var CIRCLE_SIZE = 80;
17+
import type {PanResponderInstance, GestureState} from 'PanResponder';
18+
import type {PressEvent} from 'CoreEventTypes';
1919

20-
var PanResponderExample = createReactClass({
21-
displayName: 'PanResponderExample',
20+
type CircleStyles = {
21+
backgroundColor?: string,
22+
left?: number,
23+
top?: number,
24+
};
2225

23-
statics: {
24-
title: 'PanResponder Sample',
25-
description:
26-
'Shows the use of PanResponder to provide basic gesture handling.',
27-
},
26+
const CIRCLE_SIZE = 80;
27+
28+
type Props = $ReadOnly<{||}>;
29+
30+
class PanResponderExample extends React.Component<Props> {
31+
static title = 'PanResponder Sample';
32+
static description =
33+
'Shows the Use of PanResponder to provide basic gesture handling';
34+
35+
_handleStartShouldSetPanResponder = (
36+
event: PressEvent,
37+
gestureState: GestureState,
38+
): boolean => {
39+
// Should we become active when the user presses down on the circle?
40+
return true;
41+
};
42+
43+
_handleMoveShouldSetPanResponder = (
44+
event: PressEvent,
45+
gestureState: GestureState,
46+
): boolean => {
47+
// Should we become active when the user moves a touch over the circle?
48+
return true;
49+
};
50+
51+
_handlePanResponderGrant = (
52+
event: PressEvent,
53+
gestureState: GestureState,
54+
) => {
55+
this._highlight();
56+
};
57+
58+
_handlePanResponderMove = (event: PressEvent, gestureState: GestureState) => {
59+
this._circleStyles.style.left = this._previousLeft + gestureState.dx;
60+
this._circleStyles.style.top = this._previousTop + gestureState.dy;
61+
this._updateNativeStyles();
62+
};
2863

29-
_panResponder: {},
30-
_previousLeft: 0,
31-
_previousTop: 0,
32-
_circleStyles: {},
33-
circle: (null: ?{setNativeProps(props: Object): void}),
34-
35-
UNSAFE_componentWillMount: function() {
36-
this._panResponder = PanResponder.create({
37-
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
38-
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
39-
onPanResponderGrant: this._handlePanResponderGrant,
40-
onPanResponderMove: this._handlePanResponderMove,
41-
onPanResponderRelease: this._handlePanResponderEnd,
42-
onPanResponderTerminate: this._handlePanResponderEnd,
43-
});
64+
_handlePanResponderEnd = (event: PressEvent, gestureState: GestureState) => {
65+
this._unHighlight();
66+
this._previousLeft += gestureState.dx;
67+
this._previousTop += gestureState.dy;
68+
};
69+
70+
_panResponder: PanResponderInstance = PanResponder.create({
71+
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
72+
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
73+
onPanResponderGrant: this._handlePanResponderGrant,
74+
onPanResponderMove: this._handlePanResponderMove,
75+
onPanResponderRelease: this._handlePanResponderEnd,
76+
onPanResponderTerminate: this._handlePanResponderEnd,
77+
});
78+
79+
_previousLeft: number = 0;
80+
_previousTop: number = 0;
81+
_circleStyles: {|style: CircleStyles|} = {style: {}};
82+
circle: ?React.ElementRef<typeof View> = null;
83+
84+
UNSAFE_componentWillMount() {
4485
this._previousLeft = 20;
4586
this._previousTop = 84;
4687
this._circleStyles = {
@@ -50,13 +91,27 @@ var PanResponderExample = createReactClass({
5091
backgroundColor: 'green',
5192
},
5293
};
53-
},
94+
}
5495

55-
componentDidMount: function() {
96+
componentDidMount() {
5697
this._updateNativeStyles();
57-
},
98+
}
99+
100+
_highlight() {
101+
this._circleStyles.style.backgroundColor = 'blue';
102+
this._updateNativeStyles();
103+
}
58104

59-
render: function() {
105+
_unHighlight() {
106+
this._circleStyles.style.backgroundColor = 'green';
107+
this._updateNativeStyles();
108+
}
109+
110+
_updateNativeStyles() {
111+
this.circle && this.circle.setNativeProps(this._circleStyles);
112+
}
113+
114+
render() {
60115
return (
61116
<View style={styles.container}>
62117
<View
@@ -68,52 +123,8 @@ var PanResponderExample = createReactClass({
68123
/>
69124
</View>
70125
);
71-
},
72-
73-
_highlight: function() {
74-
this._circleStyles.style.backgroundColor = 'blue';
75-
this._updateNativeStyles();
76-
},
77-
78-
_unHighlight: function() {
79-
this._circleStyles.style.backgroundColor = 'green';
80-
this._updateNativeStyles();
81-
},
82-
83-
_updateNativeStyles: function() {
84-
this.circle && this.circle.setNativeProps(this._circleStyles);
85-
},
86-
87-
_handleStartShouldSetPanResponder: function(
88-
e: Object,
89-
gestureState: Object,
90-
): boolean {
91-
// Should we become active when the user presses down on the circle?
92-
return true;
93-
},
94-
95-
_handleMoveShouldSetPanResponder: function(
96-
e: Object,
97-
gestureState: Object,
98-
): boolean {
99-
// Should we become active when the user moves a touch over the circle?
100-
return true;
101-
},
102-
103-
_handlePanResponderGrant: function(e: Object, gestureState: Object) {
104-
this._highlight();
105-
},
106-
_handlePanResponderMove: function(e: Object, gestureState: Object) {
107-
this._circleStyles.style.left = this._previousLeft + gestureState.dx;
108-
this._circleStyles.style.top = this._previousTop + gestureState.dy;
109-
this._updateNativeStyles();
110-
},
111-
_handlePanResponderEnd: function(e: Object, gestureState: Object) {
112-
this._unHighlight();
113-
this._previousLeft += gestureState.dx;
114-
this._previousTop += gestureState.dy;
115-
},
116-
});
126+
}
127+
}
117128

118129
var styles = StyleSheet.create({
119130
circle: {

0 commit comments

Comments
 (0)