fix(ui): add input api methods

Author: artyorsh

src/framework/ui/input/input.component.tsx

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import {
-  Image,
   ImageProps,
   StyleProp,
   StyleSheet,
@@ -31,7 +30,6 @@ import {
 } from '../support/services';
 import {
   FlexStyleProps,
-  InputEndEditEvent,
   InputFocusEvent,
 } from '../support/typings';
 
@@ -59,6 +57,15 @@ export type InputProps = StyledComponentProps & TextInputProps & ComponentProps;
  *
  * @extends React.Component
  *
+ * @method {() => void} focus - Requests focus for the given input or view. The exact behavior triggered
+ * will depend on the platform and type of view.
+ *
+ * @method {() => void} blur - Removes focus from an input or view. This is the opposite of `focus()`.
+ *
+ * @method {() => boolean} isFocused - Returns if the input is currently focused.
+ *
+ * @method {() => void} clear - Removes all text from the input.
+ *
  * @property {boolean} disabled - Determines whether component is disabled.
  * Default is `false`.
  *
@@ -140,7 +147,23 @@ export class InputComponent extends React.Component<InputProps> {
 
   static styledComponentName: string = 'Input';
 
-  static Icon: React.ComponentClass<ImageProps> = Image;
+  private textInputRef: React.RefObject<TextInput> = React.createRef();
+
+  public focus = () => {
+    this.textInputRef.current.focus();
+  };
+
+  public blur = () => {
+    this.textInputRef.current.blur();
+  };
+
+  public isFocused = (): boolean => {
+    return this.textInputRef.current.isFocused();
+  };
+
+  public clear = () => {
+    this.textInputRef.current.clear();
+  };
 
   private onFocus = (event: InputFocusEvent) => {
     this.props.dispatch([Interaction.FOCUSED]);
@@ -150,11 +173,11 @@ export class InputComponent extends React.Component<InputProps> {
     }
   };
 
-  private onEndEditing = (event: InputEndEditEvent) => {
+  private onBlur = (event: InputFocusEvent) => {
     this.props.dispatch([]);
 
-    if (this.props.onEndEditing) {
-      this.props.onEndEditing(event);
+    if (this.props.onBlur) {
+      this.props.onBlur(event);
     }
   };
 
@@ -322,12 +345,13 @@ export class InputComponent extends React.Component<InputProps> {
         {labelElement}
         <View style={componentStyle.inputContainer}>
           <TextInput
+            ref={this.textInputRef}
             {...restProps}
             style={componentStyle.text}
             placeholderTextColor={componentStyle.placeholder.color}
             editable={!disabled}
             onFocus={this.onFocus}
-            onEndEditing={this.onEndEditing}
+            onBlur={this.onBlur}
           />
           {iconElement}
         </View>

src/framework/ui/input/input.spec.tsx

@@ -42,6 +42,55 @@ const renderComponent = (props?: InputProps): RenderAPI => {
   );
 };
 
+describe('@input: native methods', () => {
+
+  const RefMock = React.forwardRef((props: InputProps, ref: React.Ref<TextInput>) => {
+    return (
+      <ApplicationProvider
+        mapping={mapping}
+        theme={theme}>
+        <Input ref={ref} {...props}/>
+      </ApplicationProvider>
+    );
+  });
+
+  it('* focus', () => {
+    const componentRef: React.RefObject<TextInput> = React.createRef();
+    render(
+      <RefMock ref={componentRef}/>,
+    );
+
+    expect(componentRef.current.focus).toBeTruthy();
+  });
+
+  it('* blur', () => {
+    const componentRef: React.RefObject<TextInput> = React.createRef();
+    render(
+      <RefMock ref={componentRef}/>,
+    );
+
+    expect(componentRef.current.blur).toBeTruthy();
+  });
+
+  it('* isFocused', () => {
+    const componentRef: React.RefObject<TextInput> = React.createRef();
+    render(
+      <RefMock ref={componentRef}/>,
+    );
+
+    expect(componentRef.current.isFocused).toBeTruthy();
+  });
+
+  it('* clear', () => {
+    const componentRef: React.RefObject<TextInput> = React.createRef();
+    render(
+      <RefMock ref={componentRef}/>,
+    );
+
+    expect(componentRef.current.clear).toBeTruthy();
+  });
+});
+
 describe('@input: matches snapshot', () => {
 
   describe('* interaction', () => {