From c251cad44359dbf6660c9efb03adaefb368138e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Felipe=20Souza?= Date: Thu, 21 Jun 2018 12:47:40 -0300 Subject: [PATCH 1/6] Add accessibilityTraits prop In order to make our button more accessible on iOS according to the Doc: https://facebook.github.io/react-native/docs/accessibility.html#accessibilitytraits-ios --- Button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Button.js b/Button.js index 3cdb551..e4f80d2 100644 --- a/Button.js +++ b/Button.js @@ -24,6 +24,7 @@ class Button extends Component { ]), testID: PropTypes.string, accessibilityLabel: PropTypes.string, + accessibilityTraits: PropTypes.string, activeOpacity: PropTypes.number, allowFontScaling: PropTypes.bool, isLoading: PropTypes.bool, @@ -94,6 +95,7 @@ class Button extends Component { let touchableProps = { testID: this.props.testID, accessibilityLabel: this.props.accessibilityLabel, + accessibilityTraits: this.props.accessibilityTraits, onPress: this.props.onPress, onPressIn: this.props.onPressIn, onPressOut: this.props.onPressOut, From 73d362ffa8841428af3b13169873f6ab46d2bdb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Felipe=20Souza?= Date: Thu, 21 Jun 2018 12:49:26 -0300 Subject: [PATCH 2/6] Add accessibilityComponentType prop In order to make our button more accessible for Android according to the doc: https://facebook.github.io/react-native/docs/accessibility.html#accessibilitycomponenttype-android --- Button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Button.js b/Button.js index e4f80d2..017ef48 100644 --- a/Button.js +++ b/Button.js @@ -25,6 +25,7 @@ class Button extends Component { testID: PropTypes.string, accessibilityLabel: PropTypes.string, accessibilityTraits: PropTypes.string, + accessibilityComponentType: PropTypes.string, activeOpacity: PropTypes.number, allowFontScaling: PropTypes.bool, isLoading: PropTypes.bool, @@ -96,6 +97,7 @@ class Button extends Component { testID: this.props.testID, accessibilityLabel: this.props.accessibilityLabel, accessibilityTraits: this.props.accessibilityTraits, + accessibilityComponentType: this.props.accessibilityComponentType, onPress: this.props.onPress, onPressIn: this.props.onPressIn, onPressOut: this.props.onPressOut, From af2753f9633b19147d59474fbface7d5f03ab7a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Felipe=20Souza?= Date: Thu, 21 Jun 2018 14:58:39 -0300 Subject: [PATCH 3/6] Upgrade snapshot tests for Button component --- __tests__/__snapshots__/Button.test.js.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/__tests__/__snapshots__/Button.test.js.snap b/__tests__/__snapshots__/Button.test.js.snap index 4a730d4..dcad0da 100644 --- a/__tests__/__snapshots__/Button.test.js.snap +++ b/__tests__/__snapshots__/Button.test.js.snap @@ -6,8 +6,10 @@ exports[`Button Renders 1`] = ` accessibilityLabel={undefined} accessibilityTraits={undefined} accessible={true} + collapsable={undefined} hitSlop={undefined} isTVSelectable={true} + nativeID={undefined} onLayout={undefined} onResponderGrant={[Function]} onResponderMove={[Function]} @@ -135,8 +137,10 @@ exports[`Button Renders with a inner View 1`] = ` accessibilityLabel={undefined} accessibilityTraits={undefined} accessible={true} + collapsable={undefined} hitSlop={undefined} isTVSelectable={true} + nativeID={undefined} onLayout={undefined} onResponderGrant={[Function]} onResponderMove={[Function]} @@ -170,8 +174,10 @@ exports[`Button Should contain children 1`] = ` accessibilityLabel={undefined} accessibilityTraits={undefined} accessible={true} + collapsable={undefined} hitSlop={undefined} isTVSelectable={true} + nativeID={undefined} onLayout={undefined} onResponderGrant={[Function]} onResponderMove={[Function]} @@ -222,8 +228,10 @@ exports[`Button Should react to the onPress event 1`] = ` accessibilityLabel={undefined} accessibilityTraits={undefined} accessible={true} + collapsable={undefined} hitSlop={undefined} isTVSelectable={true} + nativeID={undefined} onLayout={undefined} onResponderGrant={[Function]} onResponderMove={[Function]} From c3465e15d139da7a9521ab57718ec6b6e0d9acea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Felipe=20Souza?= Date: Thu, 21 Jun 2018 14:58:55 -0300 Subject: [PATCH 4/6] Upgrade NPM packages In order to make the CI green again. We had to upgrade the packages: - jest - react - react-test-renderer --- package.json | 4 ++-- yarn.lock | 38 +++++++++++++++++++++++++------------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index a94948d..c4e78b2 100644 --- a/package.json +++ b/package.json @@ -50,9 +50,9 @@ "eslint-plugin-react-native": "^1.1.0-beta", "jest": "^20.0.0", "jest-react-native": "^18.0.0", - "react": "^15.4.0", + "react": "16.4.1", "react-native": "^0.50.0", - "react-test-renderer": "^15.4.0", + "react-test-renderer": "16.4.1", "whatwg-fetch": "^1.0.0" } } diff --git a/yarn.lock b/yarn.lock index 31425c2..f051e7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1414,7 +1414,7 @@ crc@3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba" -create-react-class@^15.5.2, create-react-class@^15.6.0: +create-react-class@^15.5.2: version "15.6.3" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036" dependencies: @@ -3949,6 +3949,13 @@ prop-types@^15.5.10, prop-types@^15.5.8: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.6.0: + version "15.6.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" + dependencies: + loose-envify "^1.3.1" + object-assign "^4.1.1" + prr@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" @@ -4016,6 +4023,10 @@ react-devtools-core@^2.5.0: shell-quote "^1.6.1" ws "^2.0.3" +react-is@^16.4.1: + version "16.4.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e" + react-native@^0.50.0: version "0.50.4" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.50.4.tgz#194f5da4939087b3acee712a503475f4942dca7e" @@ -4080,12 +4091,14 @@ react-proxy@^1.1.7: lodash "^4.6.1" react-deep-force-update "^1.0.0" -react-test-renderer@^15.4.0: - version "15.6.2" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.2.tgz#d0333434fc2c438092696ca770da5ed48037efa8" +react-test-renderer@16.4.1: + version "16.4.1" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70" dependencies: - fbjs "^0.8.9" - object-assign "^4.1.0" + fbjs "^0.8.16" + object-assign "^4.1.1" + prop-types "^15.6.0" + react-is "^16.4.1" react-timer-mixin@^0.13.2: version "0.13.3" @@ -4098,15 +4111,14 @@ react-transform-hmr@^1.0.4: global "^4.3.0" react-proxy "^1.1.7" -react@^15.4.0: - version "15.6.2" - resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72" +react@16.4.1: + version "16.4.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32" dependencies: - create-react-class "^15.6.0" - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "^15.5.10" + object-assign "^4.1.1" + prop-types "^15.6.0" read-pkg-up@^1.0.1: version "1.0.1" From 13720b2e17294010c68174671cf8de9236a933b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Felipe=20Souza?= Date: Thu, 21 Jun 2018 15:11:59 -0300 Subject: [PATCH 5/6] Create references for the components which have the button style Libraries that modifies native props using the reference (e.g. [styled-components](https://github.com/styled-components/styled-components)) need to know what component represent the button. Those kind of modifications are made using the method `setNativeProps`, therefore, this commit implements the references to wrappers which represent the button styles and implement the setNativeProps method at the Button component. --- Button.js | 82 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 52 insertions(+), 30 deletions(-) diff --git a/Button.js b/Button.js index 017ef48..d155c30 100644 --- a/Button.js +++ b/Button.js @@ -1,6 +1,6 @@ -'use strict'; +"use strict"; -import React, { Component } from 'react'; +import React, { Component } from "react"; import { View, TouchableOpacity, @@ -9,9 +9,9 @@ import { ActivityIndicator, TouchableNativeFeedback, Platform -} from 'react-native'; -import PropTypes from 'prop-types'; -import isEqual from 'lodash.isequal'; +} from "react-native"; +import PropTypes from "prop-types"; +import isEqual from "lodash.isequal"; class Button extends Component { static propTypes = { @@ -38,20 +38,23 @@ class Button extends Component { onLongPress: PropTypes.func, onPressIn: PropTypes.func, onPressOut: PropTypes.func, - background: (TouchableNativeFeedback.propTypes) ? TouchableNativeFeedback.propTypes.background : PropTypes.any, - } + background: TouchableNativeFeedback.propTypes + ? TouchableNativeFeedback.propTypes.background + : PropTypes.any + }; - static isAndroid = (Platform.OS === 'android') + static isAndroid = Platform.OS === "android"; _renderChildren() { let childElements = []; - React.Children.forEach(this.props.children, (item) => { - if (typeof item === 'string' || typeof item === 'number') { + React.Children.forEach(this.props.children, item => { + if (typeof item === "string" || typeof item === "number") { const element = ( + key={item} + > {item} ); @@ -60,7 +63,7 @@ class Button extends Component { childElements.push(item); } }); - return (childElements); + return childElements; } shouldComponentUpdate(nextProps, nextState) { @@ -70,14 +73,18 @@ class Button extends Component { return false; } + setNativeProps = nativeProps => { + this._root.setNativeProps({ style: { ...nativeProps } }); + }; + _renderInnerText() { if (this.props.isLoading) { return ( ); } @@ -87,7 +94,14 @@ class Button extends Component { render() { if (this.props.isDisabled === true || this.props.isLoading === true) { return ( - + (this._root = component)} + style={[ + styles.button, + this.props.style, + this.props.disabledStyle || styles.opacity + ]} + > {this._renderInnerText()} ); @@ -105,23 +119,31 @@ class Button extends Component { activeOpacity: this.props.activeOpacity, delayLongPress: this.props.delayLongPress, delayPressIn: this.props.delayPressIn, - delayPressOut: this.props.delayPressOut, + delayPressOut: this.props.delayPressOut }; if (Button.isAndroid) { touchableProps = Object.assign(touchableProps, { - background: this.props.background || TouchableNativeFeedback.SelectableBackground() + background: + this.props.background || + TouchableNativeFeedback.SelectableBackground() }); return ( - + (this._root = component)} + style={[styles.button, this.props.style]} + > {this._renderInnerText()} - ) + ); } else { return ( - + (this._root = component)} + style={[styles.button, this.props.style]} + > {this._renderInnerText()} ); @@ -132,26 +154,26 @@ class Button extends Component { const styles = StyleSheet.create({ button: { height: 44, - flexDirection: 'row', - alignItems: 'center', + flexDirection: "row", + alignItems: "center", borderWidth: 1, borderRadius: 8, marginBottom: 10, - alignSelf: 'stretch', - justifyContent: 'center', + alignSelf: "stretch", + justifyContent: "center" }, textButton: { flex: 1, fontSize: 18, - textAlign: 'center', - backgroundColor: 'transparent', + textAlign: "center", + backgroundColor: "transparent" }, spinner: { - alignSelf: 'center', + alignSelf: "center" }, opacity: { - opacity: 0.5, - }, + opacity: 0.5 + } }); module.exports = Button; From a8a2358701533665abbd51878438fd636c543c21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Felipe=20Souza?= Date: Wed, 4 Jul 2018 18:22:42 -0300 Subject: [PATCH 6/6] Adjust proptypes --- Button.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Button.js b/Button.js index d155c30..76d2458 100644 --- a/Button.js +++ b/Button.js @@ -24,7 +24,10 @@ class Button extends Component { ]), testID: PropTypes.string, accessibilityLabel: PropTypes.string, - accessibilityTraits: PropTypes.string, + accessibilityTraits: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array + ]), accessibilityComponentType: PropTypes.string, activeOpacity: PropTypes.number, allowFontScaling: PropTypes.bool,