From eacc10022f82c04e68e6ff0ff4e4e55a95dd8726 Mon Sep 17 00:00:00 2001
From: nd-02110114 <nd.12021218@gmail.com>
Date: Fri, 12 Oct 2018 13:26:13 -0700
Subject: [PATCH] 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: https://github.com/facebook/react-native/pull/21606

Reviewed By: hramos

Differential Revision: D10342587

Pulled By: RSNara

fbshipit-source-id: dac465d65dee7714f55739b77e6ca1b07294ee3c
---
 RNTester/js/PanResponderExample.js | 165 +++++++++++++++--------------
 1 file changed, 88 insertions(+), 77 deletions(-)

diff --git a/RNTester/js/PanResponderExample.js b/RNTester/js/PanResponderExample.js
index b1a6a2dad99af3..82e0ecf0134ee5 100644
--- 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: {