remove createReactClass from the RNTester/js/PanResponderExample.js (#…

…21606) 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: #21606 Reviewed By: hramos Differential Revision: D10342587 Pulled By: RSNara fbshipit-source-id: dac465d65dee7714f55739b77e6ca1b07294ee3c
facebook · Oct 12, 2018 · 76bc15d · 76bc15d
1 parent c96c93e
commit 76bc15d
Showing 1 changed file with 88 additions and 77 deletions.
diff --git a/RNTester/js/PanResponderExample.js b/RNTester/js/PanResponderExample.js
@@ -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;
+
+type Props = $ReadOnly<{||}>;
+
+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();
+  };
 
-  _panResponder: {},
-  _previousLeft: 0,
-  _previousTop: 0,
-  _circleStyles: {},
-  circle: (null: ?{setNativeProps(props: Object): void}),
-
-  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,
-    });
+  _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();
-  },
+  }
+
+  _highlight() {
+    this._circleStyles.style.backgroundColor = 'blue';
+    this._updateNativeStyles();
+  }
 
-  render: function() {
+  _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: {