Permalink
Browse files

Add disabled prop

Summary:
Implemented feature requested in #10354, updated docs.
The colours were picked from native interface for iOS and from material-ui for android.
Closes #10398

Differential Revision: D4026189

Pulled By: ericvicenti

fbshipit-source-id: f3316e76f5a4126c07ffcdfb134cd902f40624d5
  • Loading branch information...
gitim authored and Facebook Github Bot committed Oct 15, 2016
1 parent efcdef7 commit c32ab7e60820eeca4f13722e652251b3e67d795e
@@ -93,4 +93,18 @@ exports.examples = [
);
},
},
{
title: 'Disabled Button',
description: 'All interactions for the component are disabled.',
render: function() {
return (
<Button
disabled
onPress={onButtonPress}
title="I Am Disabled"
accessibilityLabel="See an informative alert"
/>
);
},
},
];
@@ -54,6 +54,7 @@ class Button extends React.Component {
onPress: () => any,
color?: ?string,
accessibilityLabel?: ?string,
disabled?: ?boolean,
};
static propTypes = {
@@ -69,6 +70,10 @@ class Button extends React.Component {
* Color of the text (iOS), or background color of the button (Android)
*/
color: ColorPropType,
/**
* If true, disable all interactions for this component.
*/
disabled: React.PropTypes.bool,
/**
* Handler to be called when the user taps the button
*/
@@ -81,6 +86,7 @@ class Button extends React.Component {
color,
onPress,
title,
disabled,
} = this.props;
const buttonStyles = [styles.button];
const textStyles = [styles.text];
@@ -90,6 +96,10 @@ class Button extends React.Component {
} else if (color) {
buttonStyles.push({backgroundColor: color});
}
if (disabled) {
buttonStyles.push(styles.buttonDisabled);
textStyles.push(styles.textDisabled);
}
invariant(
typeof title === 'string',
'The title prop of a Button must be a string',
@@ -100,6 +110,7 @@ class Button extends React.Component {
accessibilityComponentType="button"
accessibilityLabel={accessibilityLabel}
accessibilityTraits={['button']}
disabled={disabled}
onPress={onPress}>
<View style={buttonStyles}>
<Text style={textStyles}>{formattedTitle}</Text>
@@ -139,6 +150,21 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
}),
buttonDisabled: Platform.select({
ios: {},
android: {
elevation: 0,
backgroundColor: '#dfdfdf',
}
}),
textDisabled: Platform.select({
ios: {
color: '#cdcdcd',
},
android: {
color: '#a1a1a1',
}
}),
});
module.exports = Button;
Binary file not shown.

0 comments on commit c32ab7e

Please sign in to comment.