From bed552560af50b7269d6786d3584c3fd5a2dc8fb Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Thu, 1 Aug 2019 09:08:56 +0000 Subject: [PATCH] feat(Input): Remove shake as prop usage (#1987) The shake prop only functioned as prop in v0.19x. Since v1 the shake functionality is done through refs. This commit updates the docs to show this usage as well as to remove the shake prop entirely. Resolves #1883 --- docs/input.md | 53 +++++++++++++------ src/index.d.ts | 7 +-- src/input/Input.js | 1 - website/versioned_docs/version-1.0.0/input.md | 53 +++++++++++++------ website/versioned_docs/version-1.1.0/input.md | 53 +++++++++++++------ 5 files changed, 112 insertions(+), 55 deletions(-) diff --git a/docs/input.md b/docs/input.md index f0c9cac46d..ff4c165eab 100644 --- a/docs/input.md +++ b/docs/input.md @@ -44,11 +44,6 @@ import { Input } from 'react-native-elements'; } /> - - | | + +## Interaction methods + +| method | description | +| -------------- | ------------------------------------------------- | +| focus | Focuses the Input | +| blur | Removes focus from the Input | +| clear | Clears the text in the Input | +| isFocused | Returns `true` or `false` if the Input is focused | +| setNativeProps | Sets props directly on the react native component | +| shake | Shakes the input for error feedback | + +#### Calling methods on Input + +Store a reference to the Input in your component by using the ref prop +provided by React +([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)): + +```js +const input = React.createRef(); + + +``` + +You can then use the Input methods like this: + +```js +input.current.focus(); +input.current.blur(); +input.current.clear(); +input.current.isFocused(); +input.current.setNativeProps({ value: 'hello' }); +input.current.shake(); +``` diff --git a/src/index.d.ts b/src/index.d.ts index ca26e8037c..f4e9c6bc0a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -840,11 +840,6 @@ export interface InputProps extends TextInputProperties { */ inputStyle?: StyleProp; - /** - * Adds shaking effect to input component (optional) - */ - shake?: any; - /** * Add styling to error message (optional) */ @@ -876,7 +871,7 @@ export interface InputProps extends TextInputProperties { labelProps?: TextProps; } -export class Input extends React.Component { +export class Input extends React.Component { /** * Shakes the Input * diff --git a/src/input/Input.js b/src/input/Input.js index 1c42e3ae11..b4900965ce 100644 --- a/src/input/Input.js +++ b/src/input/Input.js @@ -155,7 +155,6 @@ Input.propTypes = { rightIconContainerStyle: ViewPropTypes.style, inputStyle: TextPropTypes.style, inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - shake: PropTypes.any, errorProps: PropTypes.object, errorStyle: TextPropTypes.style, errorMessage: PropTypes.string, diff --git a/website/versioned_docs/version-1.0.0/input.md b/website/versioned_docs/version-1.0.0/input.md index c5017fbeea..b37a50e457 100644 --- a/website/versioned_docs/version-1.0.0/input.md +++ b/website/versioned_docs/version-1.0.0/input.md @@ -35,11 +35,6 @@ import { Input } from 'react-native-elements'; } /> - - | | + +## Interaction methods + +| method | description | +| -------------- | ------------------------------------------------- | +| focus | Focuses the Input | +| blur | Removes focus from the Input | +| clear | Clears the text in the Input | +| isFocused | Returns `true` or `false` if the Input is focused | +| setNativeProps | Sets props directly on the react native component | +| shake | Shakes the input for error feedback | + +#### Calling methods on Input + +Store a reference to the Input in your component by using the ref prop +provided by React +([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)): + +```js +const input = React.createRef(); + + +``` + +You can then use the Input methods like this: + +```js +input.current.focus(); +input.current.blur(); +input.current.clear(); +input.current.isFocused(); +input.current.setNativeProps({ value: 'hello' }); +input.current.shake(); +``` diff --git a/website/versioned_docs/version-1.1.0/input.md b/website/versioned_docs/version-1.1.0/input.md index 864d9075e7..2a05140306 100644 --- a/website/versioned_docs/version-1.1.0/input.md +++ b/website/versioned_docs/version-1.1.0/input.md @@ -35,11 +35,6 @@ import { Input } from 'react-native-elements'; } /> - - | | + +## Interaction methods + +| method | description | +| -------------- | ------------------------------------------------- | +| focus | Focuses the Input | +| blur | Removes focus from the Input | +| clear | Clears the text in the Input | +| isFocused | Returns `true` or `false` if the Input is focused | +| setNativeProps | Sets props directly on the react native component | +| shake | Shakes the input for error feedback | + +#### Calling methods on Input + +Store a reference to the Input in your component by using the ref prop +provided by React +([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)): + +```js +const input = React.createRef(); + + +``` + +You can then use the Input methods like this: + +```js +input.current.focus(); +input.current.blur(); +input.current.clear(); +input.current.isFocused(); +input.current.setNativeProps({ value: 'hello' }); +input.current.shake(); +```