[add] TextInput disabled prop

Add support for disabling TextInput elements

Fix #1036

Author: necolas

packages/docs/src/components/TextInput/TextInput.stories.js

@@ -11,6 +11,7 @@ ofProps.propTypes = {
   blurOnSubmit: PropTypes.bool,
   clearTextOnFocus: PropTypes.bool,
   defaultValue: PropTypes.string,
+  disabled: PropTypes.bool,
   editable: PropTypes.bool,
   keyboardType: PropTypes.string,
   maxLength: PropTypes.number,
@@ -52,6 +53,7 @@ export { default as autoCapitalize } from './examples/AutoCapitalize';
 export { default as blurOnSubmit } from './examples/BlurOnSubmit';
 export { default as clearButtonMode } from './examples/ClearButtonMode';
 export { default as clearTextOnFocus } from './examples/ClearTextOnFocus';
+export { default as disabled } from './examples/Disabled';
 export { default as editable } from './examples/Editable';
 export { default as keyboardType } from './examples/KeyboardType';
 export { default as maxLength } from './examples/MaxLength';

packages/docs/src/components/TextInput/TextInput.stories.mdx

@@ -56,7 +56,7 @@ into the field.
   </Story>
 </Preview>
 
-### clearTextOnFocus: ?boolean = false
+### clearTextOnFocus
 
 If `true`, clears the text field automatically when focused.
 
@@ -72,6 +72,16 @@ Provides an initial value that will change when the user starts typing. Useful
 for simple use-cases where you don't want to deal with listening to events and
 updating the value prop to keep the controlled state in sync.
 
+### disabled
+
+If `true`, the input is disabled. (Web-only)
+
+<Preview withSource='none'>
+  <Story name="disabled">
+    <Stories.disabled />
+  </Story>
+</Preview>
+
 ### editable
 
 If `false`, text is not editable (i.e., read-only).

packages/docs/src/components/TextInput/examples/Disabled.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { styles } from '../helpers';
+import { TextInput, View } from 'react-native';
+
+export default function Disabled() {
+  return (
+    <View>
+      <TextInput defaultValue="disabled text input" disabled={true} style={styles.textinput} />
+      <TextInput
+        defaultValue="disabled multiline text input"
+        disabled={true}
+        multiline={true}
+        style={styles.multiline}
+      />
+    </View>
+  );
+}

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -70,6 +70,18 @@ describe('components/TextInput', () => {
     expect(input.prop('defaultValue')).toEqual(defaultValue);
   });
 
+  describe('prop "disabled"', () => {
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('disabled')).toEqual(undefined);
+    });
+
+    test('value "true"', () => {
+      const input = findNativeInput(shallow(<TextInput disabled={true} />));
+      expect(input.prop('disabled')).toEqual(true);
+    });
+  });
+
   describe('prop "editable"', () => {
     test('value "true"', () => {
       const input = findNativeInput(shallow(<TextInput />));

packages/react-native-web/src/exports/TextInput/index.js

@@ -100,6 +100,7 @@ class TextInput extends React.Component<TextInputProps> {
       autoCorrect = true,
       autoFocus,
       defaultValue,
+      disabled,
       editable = true,
       keyboardType = 'default',
       maxLength,
@@ -151,6 +152,7 @@ class TextInput extends React.Component<TextInputProps> {
       classList: [classes.textinput],
       defaultValue,
       dir: 'auto',
+      disabled,
       enterkeyhint: returnKeyType,
       maxLength,
       onBlur: normalizeEventHandler(this._handleBlur),

packages/react-native-web/src/exports/TextInput/types.js

@@ -27,6 +27,7 @@ export type TextInputProps = {
   blurOnSubmit?: boolean,
   clearTextOnFocus?: boolean,
   defaultValue?: string,
+  disabled?: boolean,
   editable?: boolean,
   inputAccessoryViewID?: string,
   keyboardType?: