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
react-native-elements · Aug 1, 2019 · bed5525 · bed5525
1 parent 19ceb8d
commit bed5525
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 55 deletions.
diff --git a/docs/input.md b/docs/input.md
@@ -44,11 +44,6 @@ import { Input } from 'react-native-elements';
   }
 />
 
-<Input
-  placeholder='INPUT WITH SHAKING EFFECT'
-  shake={true}
-/>
-
 <Input
   placeholder='INPUT WITH ERROR MESSAGE'
   errorStyle={{ color: 'red' }}
@@ -78,7 +73,6 @@ import { Input } from 'react-native-elements';
 - [`leftIconContainerStyle`](#lefticoncontainerstyle)
 - [`rightIcon`](#righticon)
 - [`rightIconContainerStyle`](#righticoncontainerstyle)
-- [`shake`](#shake)
 
 ---
 
@@ -229,18 +223,45 @@ styling for right Icon Component container
 
 ---
 
-### `shake`
-
-add shaking effect to input component (optional)
-
-| Type | Default |
-| :--: | :-----: |
-| any  |  none   |
-
----
-
 #### Styles explanation
 
 | Input with a label and an error message                                | Styles explanation                                                  |
 | ---------------------------------------------------------------------- | ------------------------------------------------------------------- |
 | <img src="/react-native-elements/img/input_without_explanation.png" /> | <img src="/react-native-elements/img/input_with_explanation.png" /> |
+
+## 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();
+
+<Input
+  ref={input}
+  ...
+/>
+```
+
+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
@@ -840,11 +840,6 @@ export interface InputProps extends TextInputProperties {
    */
   inputStyle?: StyleProp<TextStyle>;
 
-  /**
-   * 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<InputProps, any> {
+export class Input extends React.Component<InputProps> {
   /**
    * Shakes the Input
    *

diff --git 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
@@ -35,11 +35,6 @@ import { Input } from 'react-native-elements';
   }
 />
 
-<Input
-  placeholder='INPUT WITH SHAKING EFFECT'
-  shake={true}
-/>
-
 <Input
   placeholder='INPUT WITH ERROR MESSAGE'
   errorStyle={{ color: 'red' }}
@@ -69,7 +64,6 @@ import { Input } from 'react-native-elements';
 - [`leftIconContainerStyle`](#lefticoncontainerstyle)
 - [`rightIcon`](#righticon)
 - [`rightIconContainerStyle`](#righticoncontainerstyle)
-- [`shake`](#shake)
 
 ---
 
@@ -220,18 +214,45 @@ styling for right Icon Component container
 
 ---
 
-### `shake`
-
-add shaking effect to input component (optional)
-
-| Type | Default |
-| :--: | :-----: |
-| any  |  none   |
-
----
-
 #### Styles explanation
 
 | Input with a label and an error message                                | Styles explanation                                                  |
 | ---------------------------------------------------------------------- | ------------------------------------------------------------------- |
 | <img src="/react-native-elements/img/input_without_explanation.png" /> | <img src="/react-native-elements/img/input_with_explanation.png" /> |
+
+## 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();
+
+<Input
+  ref={input}
+  ...
+/>
+```
+
+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
@@ -35,11 +35,6 @@ import { Input } from 'react-native-elements';
   }
 />
 
-<Input
-  placeholder='INPUT WITH SHAKING EFFECT'
-  shake={true}
-/>
-
 <Input
   placeholder='INPUT WITH ERROR MESSAGE'
   errorStyle={{ color: 'red' }}
@@ -69,7 +64,6 @@ import { Input } from 'react-native-elements';
 - [`leftIconContainerStyle`](#lefticoncontainerstyle)
 - [`rightIcon`](#righticon)
 - [`rightIconContainerStyle`](#righticoncontainerstyle)
-- [`shake`](#shake)
 
 ---
 
@@ -220,18 +214,45 @@ styling for right Icon Component container
 
 ---
 
-### `shake`
-
-add shaking effect to input component (optional)
-
-| Type | Default |
-| :--: | :-----: |
-| any  |  none   |
-
----
-
 #### Styles explanation
 
 | Input with a label and an error message                                | Styles explanation                                                  |
 | ---------------------------------------------------------------------- | ------------------------------------------------------------------- |
 | <img src="/react-native-elements/img/input_without_explanation.png" /> | <img src="/react-native-elements/img/input_with_explanation.png" /> |
+
+## 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();
+
+<Input
+  ref={input}
+  ...
+/>
+```
+
+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();
+```