Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add accessibility traits #76

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add accessibility traits #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c251cad
Add accessibilityTraits prop
luisfmsouza Jun 21, 2018
73d362f
Add accessibilityComponentType prop
luisfmsouza Jun 21, 2018
af2753f
Upgrade snapshot tests for Button component
luisfmsouza Jun 21, 2018
c3465e1
Upgrade NPM packages
luisfmsouza Jun 21, 2018
1e357a1
Merge pull request #1 from luisfmsouza/add-accessibility-traits
luisfmsouza Jun 21, 2018
13720b2
Create references for the components which have the button style
luisfmsouza Jun 21, 2018
a8a2358
Adjust proptypes
luisfmsouza Jul 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 59 additions & 30 deletions Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';
"use strict";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change all the files with singlequote as specified on eslint rules?


import React, { Component } from 'react';
import React, { Component } from "react";
import {
View,
TouchableOpacity,
Expand All @@ -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 = {
Expand All @@ -24,6 +24,11 @@ class Button extends Component {
]),
testID: PropTypes.string,
accessibilityLabel: PropTypes.string,
accessibilityTraits: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array
]),
accessibilityComponentType: PropTypes.string,
activeOpacity: PropTypes.number,
allowFontScaling: PropTypes.bool,
isLoading: PropTypes.bool,
Expand All @@ -36,20 +41,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 = (
<Text
style={[styles.textButton, this.props.textStyle]}
allowFontScaling={this.props.allowFontScaling}
key={item}>
key={item}
>
{item}
</Text>
);
Expand All @@ -58,7 +66,7 @@ class Button extends Component {
childElements.push(item);
}
});
return (childElements);
return childElements;
}

shouldComponentUpdate(nextProps, nextState) {
Expand All @@ -68,14 +76,18 @@ class Button extends Component {
return false;
}

setNativeProps = nativeProps => {
this._root.setNativeProps({ style: { ...nativeProps } });
};

_renderInnerText() {
if (this.props.isLoading) {
return (
<ActivityIndicator
animating={true}
size='small'
size="small"
style={styles.spinner}
color={this.props.activityIndicatorColor || 'black'}
color={this.props.activityIndicatorColor || "black"}
/>
);
}
Expand All @@ -85,7 +97,14 @@ class Button extends Component {
render() {
if (this.props.isDisabled === true || this.props.isLoading === true) {
return (
<View style={[styles.button, this.props.style, (this.props.disabledStyle || styles.opacity)]}>
<View
ref={component => (this._root = component)}
style={[
styles.button,
this.props.style,
this.props.disabledStyle || styles.opacity
]}
>
{this._renderInnerText()}
</View>
);
Expand All @@ -94,30 +113,40 @@ class Button extends Component {
let touchableProps = {
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,
onLongPress: this.props.onLongPress,
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 (
<TouchableNativeFeedback {...touchableProps}>
<View style={[styles.button, this.props.style]}>
<View
ref={component => (this._root = component)}
style={[styles.button, this.props.style]}
>
{this._renderInnerText()}
</View>
</TouchableNativeFeedback>
)
);
} else {
return (
<TouchableOpacity {...touchableProps}
style={[styles.button, this.props.style]}>
<TouchableOpacity
{...touchableProps}
ref={component => (this._root = component)}
style={[styles.button, this.props.style]}
>
{this._renderInnerText()}
</TouchableOpacity>
);
Expand All @@ -128,26 +157,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;
8 changes: 8 additions & 0 deletions __tests__/__snapshots__/Button.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
38 changes: 25 additions & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1414,7 +1414,7 @@ [email protected]:
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:
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down