switch to prop-types to support RN >= 0.44 (#66)

* switch to prop-types to support RN >= 0.44 * remove Unnecessary semicolon * fix failing tests and devDependencies
APSL · Jul 26, 2017 · 80ef3e7 · 80ef3e7
1 parent aea8c48
commit 80ef3e7
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 76 deletions.
diff --git a/Button.js b/Button.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -10,10 +10,11 @@ import {
   TouchableNativeFeedback,
   Platform
 } from 'react-native';
+import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
-const Button = React.createClass({
-  propTypes: {
+class Button extends Component {
+  static propTypes = {
     textStyle: Text.propTypes.style,
     disabledStyle: Text.propTypes.style,
     children: PropTypes.oneOfType([
@@ -35,13 +36,11 @@ const Button = React.createClass({
     onPressIn: PropTypes.func,
     onPressOut: PropTypes.func,
     background: (TouchableNativeFeedback.propTypes) ? TouchableNativeFeedback.propTypes.background : PropTypes.any,
-  },
+  }
 
-  statics: {
-    isAndroid: (Platform.OS === 'android'),
-  },
+  static isAndroid = (Platform.OS === 'android')
 
-  _renderChildren: function() {
+  _renderChildren() {
     let childElements = [];
     React.Children.forEach(this.props.children, (item) => {
       if (typeof item === 'string' || typeof item === 'number') {
@@ -59,16 +58,16 @@ const Button = React.createClass({
       }
     });
     return (childElements);
-  },
+  }
 
-  shouldComponentUpdate: function (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     if (!isEqual(nextProps, this.props)) {
       return true;
     }
     return false;
-  },
+  }
 
-  _renderInnerText: function () {
+  _renderInnerText() {
     if (this.props.isLoading) {
       return (
         <ActivityIndicator
@@ -80,9 +79,9 @@ const Button = React.createClass({
       );
     }
     return this._renderChildren();
-  },
+  }
 
-  render: function () {
+  render() {
     if (this.props.isDisabled === true || this.props.isLoading === true) {
       return (
         <View style={[styles.button, this.props.style, (this.props.disabledStyle || styles.opacity)]}>
@@ -122,7 +121,7 @@ const Button = React.createClass({
       );
     }
   }
-});
+}
 
 const styles = StyleSheet.create({
   button: {

diff --git a/__tests__/__snapshots__/Button.test.js.snap b/__tests__/__snapshots__/Button.test.js.snap
@@ -1,17 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`Button Renders 1`] = `
 <View
   accessibilityComponentType={undefined}
   accessibilityLabel={undefined}
   accessibilityTraits={undefined}
   accessible={true}
   hitSlop={undefined}
+  isTVSelectable={true}
   onLayout={undefined}
-  onResponderGrant={[Function bound touchableHandleResponderGrant]}
-  onResponderMove={[Function bound touchableHandleResponderMove]}
-  onResponderRelease={[Function bound touchableHandleResponderRelease]}
-  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
-  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
-  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -22,10 +25,12 @@ exports[`Button Renders 1`] = `
       "height": 44,
       "justifyContent": "center",
       "marginBottom": 10,
-      "opacity": 1
+      "opacity": 1,
     }
   }
-  testID={undefined}>
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
   <Text
     accessible={true}
     allowFontScaling={true}
@@ -36,11 +41,12 @@ exports[`Button Renders 1`] = `
           "backgroundColor": "transparent",
           "flex": 1,
           "fontSize": 18,
-          "textAlign": "center"
+          "textAlign": "center",
         },
-        undefined
+        undefined,
       ]
-    }>
+    }
+  >
     Button
   </Text>
 </View>
@@ -58,14 +64,15 @@ exports[`Button Renders disabled 1`] = `
         "flexDirection": "row",
         "height": 44,
         "justifyContent": "center",
-        "marginBottom": 10
+        "marginBottom": 10,
       },
       undefined,
       Object {
-        "opacity": 0.5
-      }
+        "opacity": 0.5,
+      },
     ]
-  }>
+  }
+>
   <Text
     accessible={true}
     allowFontScaling={true}
@@ -76,11 +83,12 @@ exports[`Button Renders disabled 1`] = `
           "backgroundColor": "transparent",
           "flex": 1,
           "fontSize": 18,
-          "textAlign": "center"
+          "textAlign": "center",
         },
-        undefined
+        undefined,
       ]
-    }>
+    }
+  >
     Disabled button
   </Text>
 </View>
@@ -98,24 +106,26 @@ exports[`Button Renders loading 1`] = `
         "flexDirection": "row",
         "height": 44,
         "justifyContent": "center",
-        "marginBottom": 10
+        "marginBottom": 10,
       },
       undefined,
       Object {
-        "opacity": 0.5
-      }
+        "opacity": 0.5,
+      },
     ]
-  }>
+  }
+>
   <ActivityIndicator
     animating={true}
     color="black"
     hidesWhenStopped={true}
     size="small"
     style={
       Object {
-        "alignSelf": "center"
+        "alignSelf": "center",
       }
-    } />
+    }
+  />
 </View>
 `;
 
@@ -126,13 +136,14 @@ exports[`Button Renders with a inner View 1`] = `
   accessibilityTraits={undefined}
   accessible={true}
   hitSlop={undefined}
+  isTVSelectable={true}
   onLayout={undefined}
-  onResponderGrant={[Function bound touchableHandleResponderGrant]}
-  onResponderMove={[Function bound touchableHandleResponderMove]}
-  onResponderRelease={[Function bound touchableHandleResponderRelease]}
-  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
-  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
-  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -143,10 +154,12 @@ exports[`Button Renders with a inner View 1`] = `
       "height": 44,
       "justifyContent": "center",
       "marginBottom": 10,
-      "opacity": 1
+      "opacity": 1,
     }
   }
-  testID={undefined}>
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
   <View />
 </View>
 `;
@@ -158,13 +171,14 @@ exports[`Button Should contain children 1`] = `
   accessibilityTraits={undefined}
   accessible={true}
   hitSlop={undefined}
+  isTVSelectable={true}
   onLayout={undefined}
-  onResponderGrant={[Function bound touchableHandleResponderGrant]}
-  onResponderMove={[Function bound touchableHandleResponderMove]}
-  onResponderRelease={[Function bound touchableHandleResponderRelease]}
-  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
-  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
-  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -175,10 +189,12 @@ exports[`Button Should contain children 1`] = `
       "height": 44,
       "justifyContent": "center",
       "marginBottom": 10,
-      "opacity": 1
+      "opacity": 1,
     }
   }
-  testID={undefined}>
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
   <Text
     accessible={true}
     allowFontScaling={true}
@@ -189,11 +205,12 @@ exports[`Button Should contain children 1`] = `
           "backgroundColor": "transparent",
           "flex": 1,
           "fontSize": 18,
-          "textAlign": "center"
+          "textAlign": "center",
         },
-        undefined
+        undefined,
       ]
-    }>
+    }
+  >
     Press me!
   </Text>
 </View>
@@ -206,13 +223,14 @@ exports[`Button Should react to the onPress event 1`] = `
   accessibilityTraits={undefined}
   accessible={true}
   hitSlop={undefined}
+  isTVSelectable={true}
   onLayout={undefined}
-  onResponderGrant={[Function bound touchableHandleResponderGrant]}
-  onResponderMove={[Function bound touchableHandleResponderMove]}
-  onResponderRelease={[Function bound touchableHandleResponderRelease]}
-  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
-  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
-  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -223,10 +241,12 @@ exports[`Button Should react to the onPress event 1`] = `
       "height": 44,
       "justifyContent": "center",
       "marginBottom": 10,
-      "opacity": 1
+      "opacity": 1,
     }
   }
-  testID={undefined}>
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
   <Text
     accessible={true}
     allowFontScaling={true}
@@ -237,11 +257,12 @@ exports[`Button Should react to the onPress event 1`] = `
           "backgroundColor": "transparent",
           "flex": 1,
           "fontSize": 18,
-          "textAlign": "center"
+          "textAlign": "center",
         },
-        undefined
+        undefined,
       ]
-    }>
+    }
+  >
     Press me!
   </Text>
 </View>

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
       "Example",
       "node_modules/react-native/node_modules/"
     ],
-    "preprocessorIgnorePatterns": [
+    "transformIgnorePatterns": [
       "node_modules/(?!react-native|tcomb-form-native|react-native-localization|@exponent/react-native-action-sheet|rnrf-relay-renderer|redux-action-api-utils|frisbee)"
     ]
   },
@@ -36,7 +36,8 @@
   },
   "homepage": "https://github.com/APSL/react-native-button#readme",
   "dependencies": {
-    "lodash.isequal": "^4.1.4"
+    "lodash.isequal": "^4.1.4",
+    "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "babel-eslint": "^6.0.5",
@@ -47,11 +48,11 @@
     "eslint": "^2.13.1",
     "eslint-plugin-react": "^5.2.2",
     "eslint-plugin-react-native": "^1.1.0-beta",
-    "jest": "^15.1.1",
-    "jest-react-native": "^15.0.0",
-    "react": "^15.3.2",
-    "react-native": "^0.34.0",
-    "react-test-renderer": "^15.3.2",
+    "jest": "^20.0.0",
+    "jest-react-native": "^18.0.0",
+    "react": "^15.4.0",
+    "react-native": "^0.42.0",
+    "react-test-renderer": "^15.4.0",
     "whatwg-fetch": "^1.0.0"
   }
 }