diff --git a/Button.js b/Button.js index 1980ca0..d0761b7 100644 --- 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 ( @@ -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 index 0684570..4a730d4 100644 --- a/__tests__/__snapshots__/Button.test.js.snap +++ b/__tests__/__snapshots__/Button.test.js.snap @@ -1,3 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + exports[`Button Renders 1`] = ` + testID={undefined} + tvParallaxProperties={undefined} +> + } + > Button @@ -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, + }, ] - }> + } +> + } + > Disabled button @@ -98,14 +106,15 @@ exports[`Button Renders loading 1`] = ` "flexDirection": "row", "height": 44, "justifyContent": "center", - "marginBottom": 10 + "marginBottom": 10, }, undefined, Object { - "opacity": 0.5 - } + "opacity": 0.5, + }, ] - }> + } +> + } + /> `; @@ -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} +> `; @@ -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} +> + } + > Press me! @@ -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} +> + } + > Press me! diff --git a/package.json b/package.json index f2b9832..5ee32b1 100644 --- 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" } }