feat(ui): input - icon press handler

akveo · Jul 2, 2019 · 9e192ea · 9e192ea
1 parent 8520056
commit 9e192ea
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 10 deletions.
diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx
@@ -6,12 +6,15 @@
 
 import React from 'react';
 import {
+  GestureResponderEvent,
   ImageProps,
   StyleProp,
   StyleSheet,
   TextInput,
   TextInputProps,
   TextStyle,
+  TouchableWithoutFeedback,
+  TouchableWithoutFeedbackProps,
   View,
 } from 'react-native';
 import {
@@ -48,6 +51,7 @@ interface ComponentProps {
   textStyle?: StyleProp<TextStyle>;
   labelStyle?: StyleProp<TextStyle>;
   captionTextStyle?: StyleProp<TextStyle>;
+  onIconPress?: (event: GestureResponderEvent) => void;
 }
 
 export type InputProps = StyledComponentProps & TextInputProps & ComponentProps;
@@ -181,6 +185,12 @@ export class InputComponent extends React.Component<InputProps> {
     }
   };
 
+  private onIconPress = (event: GestureResponderEvent) => {
+    if (this.props.onIconPress) {
+      this.props.onIconPress(event);
+    }
+  };
+
   private getComponentStyle = (source: StyleType): StyleType => {
     const {
       style,
@@ -280,6 +290,16 @@ export class InputComponent extends React.Component<InputProps> {
     };
   };
 
+  private renderIconTouchableElement = (style: StyleType): React.ReactElement<TouchableWithoutFeedbackProps> => {
+    const iconElement: IconElement = this.renderIconElement(style);
+
+    return (
+      <TouchableWithoutFeedback onPress={this.onIconPress}>
+        {iconElement}
+      </TouchableWithoutFeedback>
+    );
+  };
+
   private renderIconElement = (style: StyleType): IconElement => {
     const iconElement: IconElement = this.props.icon(style);
 
@@ -322,7 +342,7 @@ export class InputComponent extends React.Component<InputProps> {
     const { icon, label, captionIcon, caption } = this.props;
 
     return [
-      icon && this.renderIconElement(style.icon),
+      icon && this.renderIconTouchableElement(style.icon),
       isValidString(label) && this.renderLabelElement(style.label),
       isValidString(caption) && this.renderCaptionElement(style.captionLabel),
       captionIcon && this.renderCaptionIconElement(style.captionIcon),

diff --git a/src/framework/ui/input/input.spec.tsx b/src/framework/ui/input/input.spec.tsx
@@ -4,12 +4,13 @@ import {
   ImageProps,
   ImageSourcePropType,
   TextInput,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import {
-  render,
   fireEvent,
-  shallow,
+  render,
   RenderAPI,
+  shallow,
 } from 'react-native-testing-library';
 import { ReactTestInstance } from 'react-test-renderer';
 import {
@@ -42,6 +43,8 @@ const renderComponent = (props?: InputProps): RenderAPI => {
   );
 };
 
+const iconSource: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
+
 describe('@input: native methods', () => {
 
   const RefMock = React.forwardRef((props: InputProps, ref: React.Ref<TextInput>) => {
@@ -107,8 +110,6 @@ describe('@input: matches snapshot', () => {
 
   describe('* appearance', () => {
 
-    const iconSource: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
-
     it('* icon', () => {
       const icon = (style: StyleType): React.ReactElement<ImageProps> => {
         return (
@@ -232,14 +233,33 @@ describe('@input: component checks', () => {
     expect(onFocus).toBeCalled();
   });
 
-  it('* emits onEndEditing', () => {
-    const onEndEditing = jest.fn();
+  it('* emits onBlur', () => {
+    const onBlur = jest.fn();
+
+    const component: RenderAPI = renderComponent({ onBlur });
+
+    fireEvent(component.getByType(TextInput), 'blur');
+
+    expect(onBlur).toBeCalled();
+  });
+
+  it('* emits onIconPress', () => {
+    const icon = (style: StyleType): React.ReactElement<ImageProps> => {
+      return (
+        <Image
+          style={style}
+          source={iconSource}
+        />
+      );
+    };
+
+    const onIconPress = jest.fn();
 
-    const component: RenderAPI = renderComponent({ onEndEditing });
+    const component: RenderAPI = renderComponent({ icon, onIconPress });
 
-    fireEvent(component.getByType(TextInput), 'endEditing');
+    fireEvent.press(component.getByType(TouchableWithoutFeedback));
 
-    expect(onEndEditing).toBeCalled();
+    expect(onIconPress).toBeCalled();
   });
 
   it('* changes text', () => {