diff --git a/packages/docs/src/components/TextInput/TextInput.stories.js b/packages/docs/src/components/TextInput/TextInput.stories.js index a5dd0ba08..7bfbb7c43 100644 --- a/packages/docs/src/components/TextInput/TextInput.stories.js +++ b/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'; diff --git a/packages/docs/src/components/TextInput/TextInput.stories.mdx b/packages/docs/src/components/TextInput/TextInput.stories.mdx index 73222384c..280013429 100644 --- a/packages/docs/src/components/TextInput/TextInput.stories.mdx +++ b/packages/docs/src/components/TextInput/TextInput.stories.mdx @@ -56,7 +56,7 @@ into the field. -### 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) + + + + + + + ### editable If `false`, text is not editable (i.e., read-only). diff --git a/packages/docs/src/components/TextInput/examples/Disabled.js b/packages/docs/src/components/TextInput/examples/Disabled.js new file mode 100644 index 000000000..52c1e76fe --- /dev/null +++ b/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 ( + + + + + ); +} diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js index d98a9d0f0..a643c6dea 100644 --- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js +++ b/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()); + expect(input.prop('disabled')).toEqual(undefined); + }); + + test('value "true"', () => { + const input = findNativeInput(shallow()); + expect(input.prop('disabled')).toEqual(true); + }); + }); + describe('prop "editable"', () => { test('value "true"', () => { const input = findNativeInput(shallow()); diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index f1e3c729f..6b520fff6 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -100,6 +100,7 @@ class TextInput extends React.Component { autoCorrect = true, autoFocus, defaultValue, + disabled, editable = true, keyboardType = 'default', maxLength, @@ -151,6 +152,7 @@ class TextInput extends React.Component { classList: [classes.textinput], defaultValue, dir: 'auto', + disabled, enterkeyhint: returnKeyType, maxLength, onBlur: normalizeEventHandler(this._handleBlur), diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js index 31d78ea49..6283254bb 100644 --- a/packages/react-native-web/src/exports/TextInput/types.js +++ b/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?: