RNTester: Remove all but one instance of PropTypes (#21321)

Summary: Part of: react-native-community/discussions-and-proposals#29 This PR removes all but one instance of PropTypes in `RNTester`. The last remaining conversion is `CameraRollView`, which I will do in a separate PR. Pull Request resolved: facebook/react-native#21321 Differential Revision: D10041809 Pulled By: TheSavior fbshipit-source-id: c03b1ce5ad640ae59ae6240a3b6c13581345b5a3
microsoft · Sep 26, 2018 · 096310c · 096310c
1 parent 896608c
commit 096310c
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 80 deletions.
diff --git a/js/LinkingExample.js b/js/LinkingExample.js
@@ -9,17 +9,22 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {Linking, StyleSheet, Text, TouchableOpacity, View} = ReactNative;
-var RNTesterBlock = require('./RNTesterBlock');
+const React = require('react');
+const {
+  Linking,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = require('react-native');
 
-class OpenURLButton extends React.Component {
-  static propTypes = {
-    url: PropTypes.string,
-  };
+const RNTesterBlock = require('./RNTesterBlock');
+
+type Props = $ReadOnly<{|
+  url?: ?string,
+|}>;
 
+class OpenURLButton extends React.Component<Props> {
   handleClick = () => {
     Linking.canOpenURL(this.props.url).then(supported => {
       if (supported) {
@@ -59,7 +64,7 @@ class IntentAndroidExample extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: 'white',

diff --git a/js/RNTesterBlock.js b/js/RNTesterBlock.js
@@ -10,51 +10,40 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const {StyleSheet, Text, View} = require('react-native');
 
-class RNTesterBlock extends React.Component<
-  {
-    title?: string,
-    description?: string,
-  },
-  $FlowFixMeState,
-> {
-  static propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-  };
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  title?: ?string,
+  description?: ?string,
+|}>;
+
+type State = {|
+  description: ?string,
+|};
 
-  state = {description: (null: ?string)};
+class RNTesterBlock extends React.Component<Props, State> {
+  state = {description: null};
 
   render() {
-    var description;
-    if (this.props.description) {
-      description = (
-        <Text style={styles.descriptionText}>{this.props.description}</Text>
-      );
-    }
+    const description = this.props.description ? (
+      <Text style={styles.descriptionText}>{this.props.description}</Text>
+    ) : null;
 
     return (
       <View style={styles.container}>
         <View style={styles.titleContainer}>
           <Text style={styles.titleText}>{this.props.title}</Text>
           {description}
         </View>
-        <View style={styles.children}>
-          {
-            // $FlowFixMe found when converting React.createClass to ES6
-            this.props.children
-          }
-        </View>
+        <View style={styles.children}>{this.props.children}</View>
       </View>
     );
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     borderRadius: 3,
     borderWidth: 0.5,

diff --git a/js/RNTesterButton.js b/js/RNTesterButton.js
@@ -10,34 +10,30 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, TouchableHighlight} = ReactNative;
+const React = require('react');
+const {StyleSheet, Text, TouchableHighlight} = require('react-native');
 
-class RNTesterButton extends React.Component<{onPress?: Function}> {
-  static propTypes = {
-    onPress: PropTypes.func,
-  };
+import type {PressEvent} from 'CoreEventTypes';
 
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  onPress?: ?(event: PressEvent) => mixed,
+|}>;
+
+class RNTesterButton extends React.Component<Props> {
   render() {
     return (
       <TouchableHighlight
         onPress={this.props.onPress}
         style={styles.button}
         underlayColor="grey">
-        <Text>
-          {
-            // $FlowFixMe found when converting React.createClass to ES6
-            this.props.children
-          }
-        </Text>
+        <Text>{this.props.children}</Text>
       </TouchableHighlight>
     );
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   button: {
     borderColor: '#696969',
     borderRadius: 8,

diff --git a/js/RNTesterPage.js b/js/RNTesterPage.js
@@ -10,57 +10,47 @@
 
 'use strict';
 
-var PropTypes = require('prop-types');
-var React = require('react');
-var ReactNative = require('react-native');
-var {ScrollView, StyleSheet, View} = ReactNative;
+const React = require('react');
+const {ScrollView, StyleSheet, View} = require('react-native');
 
-var RNTesterTitle = require('./RNTesterTitle');
+const RNTesterTitle = require('./RNTesterTitle');
 
-class RNTesterPage extends React.Component<{
-  noScroll?: boolean,
-  noSpacer?: boolean,
-}> {
-  static propTypes = {
-    noScroll: PropTypes.bool,
-    noSpacer: PropTypes.bool,
-  };
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  title?: ?string,
+  noScroll?: ?boolean,
+  noSpacer?: ?boolean,
+|}>;
 
+class RNTesterPage extends React.Component<Props> {
   render() {
-    var ContentWrapper;
-    var wrapperProps = {};
+    let ContentWrapper;
+    let wrapperProps = {};
     if (this.props.noScroll) {
       ContentWrapper = ((View: any): React.ComponentType<any>);
     } else {
       ContentWrapper = (ScrollView: React.ComponentType<any>);
-      // $FlowFixMe found when converting React.createClass to ES6
       wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
       wrapperProps.keyboardShouldPersistTaps = 'handled';
       wrapperProps.keyboardDismissMode = 'interactive';
     }
-    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.68 was deployed. To see the error delete this
-     * comment and run Flow. */
-    var title = this.props.title ? (
+    const title = this.props.title ? (
       <RNTesterTitle title={this.props.title} />
     ) : null;
-    var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
+    const spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
     return (
       <View style={styles.container}>
         {title}
         <ContentWrapper style={styles.wrapper} {...wrapperProps}>
-          {
-            // $FlowFixMe found when converting React.createClass to ES6
-            this.props.children
-          }
+          {this.props.children}
           {spacer}
         </ContentWrapper>
       </View>
     );
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     backgroundColor: '#e9eaed',
     flex: 1,