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...
1 parent efcdef7 commit c32ab7e60820eeca4f13722e652251b3e67d795e @gitim gitim committed with Facebook Github Bot Oct 15, 2016
@@ -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 = {
@@ -70,6 +71,10 @@ class Button extends React.Component {
*/
color: ColorPropType,
/**
+ * If true, disable all interactions for this component.
+ */
+ disabled: React.PropTypes.bool,
+ /**
* Handler to be called when the user taps the button
*/
onPress: React.PropTypes.func.isRequired,
@@ -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;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c32ab7e

Please sign in to comment.