From dd8caf4cf21941aff5afc7e919ced58ec564f3a3 Mon Sep 17 00:00:00 2001
From: Jimmy Mayoukou <bhullnatik@gmail.com>
Date: Thu, 5 May 2016 10:21:35 -0700
Subject: [PATCH] Implement returnKeyType/returnKeyLabel on Android

Summary:
This PR implements [`returnKeyType`](http://facebook.github.io/react-native/docs/textinput.html#returnkeytype) on Android.

It is implemented with [`EditText.setImeOptions()`](http://developer.android.com/reference/android/widget/TextView.html#setImeOptions(int)) that allows us to specify options on an input, in this case change the return button icon. To be noted that it is also possible to specify a string instead of an icon with [`EditText.setImeActionLabel()`](http://developer.android.com/reference/android/widget/TextView.html#setImeActionLabel(java.lang.CharSequence, int)) while being 2 different things I added both of these behaviors in this PR since it was mostly at the same place/component.

**Problems encountered :**

- All the `ReactEditText`s were set to `IME_ACTION_DONE` by default ([reference](https://github.com/Bhullnatik/react-native/blob/a2157dbbe06e10e628900e9d4443948893623126/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L78)). I'm not sure
Closes https://github.com/facebook/react-native/pull/6905

Differential Revision: D3264755

Pulled By: dmmiller

fb-gh-sync-id: 4a090e31b620a245847c06ba1895cfea02e88d0f
fbshipit-source-id: 4a090e31b620a245847c06ba1895cfea02e88d0f
---
 .../UIExplorer/TextInputExample.android.js    | 39 ++++++++++++++
 Libraries/Components/TextInput/TextInput.js   | 51 ++++++++++++++++---
 .../textinput/ReactTextInputManager.java      | 43 +++++++++++++++-
 3 files changed, 124 insertions(+), 9 deletions(-)

diff --git a/Examples/UIExplorer/TextInputExample.android.js b/Examples/UIExplorer/TextInputExample.android.js
index 5809d7121..2238111cd 100644
--- a/Examples/UIExplorer/TextInputExample.android.js
+++ b/Examples/UIExplorer/TextInputExample.android.js
@@ -531,4 +531,43 @@ exports.examples = [
       return <TokenizedTextExample />;
     }
   },
+  {
+    title: 'Return key',
+    render: function() {
+      var returnKeyTypes = [
+        'none',
+        'go',
+        'search',
+        'send',
+        'done',
+        'previous',
+        'next',
+      ];
+      var returnKeyLabels = [
+        'Compile',
+        'React Native',
+      ];
+      var examples = returnKeyTypes.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            returnKeyType={type}
+            placeholder={'returnKeyType: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      var types = returnKeyLabels.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            returnKeyLabel={type}
+            placeholder={'returnKeyLabel: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}{types}</View>;
+    }
+  },
 ];
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index 1400f31f1..bbb665f60 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -120,6 +120,7 @@ var TextInput = React.createClass({
      * Determines which keyboard to open, e.g.`numeric`.
      *
      * The following values work across platforms:
+     *
      * - default
      * - numeric
      * - email-address
@@ -150,22 +151,54 @@ var TextInput = React.createClass({
       'dark',
     ]),
     /**
-     * Determines how the return key should look.
-     * @platform ios
+     * Determines how the return key should look. On Android you can also use
+     * `returnKeyLabel`.
+     *
+     * The following values work across platforms:
+     *
+     * - done
+     * - go
+     * - next
+     * - search
+     * - send
+     *
+     * The following values work on Android only:
+     *
+     * - none
+     * - previous
+     *
+     * The following values work on iOS only:
+     *
+     * - default
+     * - emergency-call
+     * - google
+     * - join
+     * - route
+     * - yahoo
      */
     returnKeyType: PropTypes.oneOf([
-      'default',
+      // Cross-platform
+      'done',
       'go',
-      'google',
-      'join',
       'next',
-      'route',
       'search',
       'send',
-      'yahoo',
-      'done',
+      // Android-only
+      'none',
+      'previous',
+      // iOS-only
+      'default',
       'emergency-call',
+      'google',
+      'join',
+      'route',
+      'yahoo',
     ]),
+    /**
+     * Sets the return key to the label. Use it instead of `returnKeyType`.
+     * @platform android
+     */
+     returnKeyLabel: PropTypes.string,
     /**
      * Limits the maximum number of characters that can be entered. Use this
      * instead of implementing the logic in JS to avoid flicker.
@@ -531,6 +564,8 @@ var TextInput = React.createClass({
         children={children}
         editable={this.props.editable}
         selectTextOnFocus={this.props.selectTextOnFocus}
+        returnKeyType={this.props.returnKeyType}
+        returnKeyLabel={this.props.returnKeyLabel}
       />;
 
     return (
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
index b6f589ad0..5564580ed 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
@@ -44,8 +44,8 @@ import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.text.DefaultStyleValuesUtil;
-import com.facebook.react.views.text.TextInlineImageSpan;
 import com.facebook.react.views.text.ReactTextUpdate;
+import com.facebook.react.views.text.TextInlineImageSpan;
 
 /**
  * Manages instances of TextInput.
@@ -431,6 +431,40 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
     checkPasswordType(view);
   }
 
+  @ReactProp(name = "returnKeyType")
+  public void setReturnKeyType(ReactEditText view, String returnKeyType) {
+    switch (returnKeyType) {
+      case "done":
+        view.setImeOptions(EditorInfo.IME_ACTION_DONE);
+        break;
+      case "go":
+        view.setImeOptions(EditorInfo.IME_ACTION_GO);
+        break;
+      case "next":
+        view.setImeOptions(EditorInfo.IME_ACTION_NEXT);
+        break;
+      case "none":
+        view.setImeOptions(EditorInfo.IME_ACTION_NONE);
+        break;
+      case "previous":
+        view.setImeOptions(EditorInfo.IME_ACTION_PREVIOUS);
+        break;
+      case "search":
+        view.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
+        break;
+      case "send":
+        view.setImeOptions(EditorInfo.IME_ACTION_SEND);
+        break;
+    }
+  }
+
+  private static final int IME_ACTION_ID = 0x670;
+
+  @ReactProp(name = "returnKeyLabel")
+  public void setReturnKeyLabel(ReactEditText view, String returnKeyLabel) {
+    view.setImeActionLabel(returnKeyLabel, IME_ACTION_ID);
+  }
+
   @Override
   protected void onAfterUpdateTransaction(ReactEditText view) {
     super.onAfterUpdateTransaction(view);
@@ -587,6 +621,13 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
                       SystemClock.nanoTime(),
                       editText.getText().toString()));
             }
+            if (actionId == EditorInfo.IME_ACTION_NEXT ||
+              actionId == EditorInfo.IME_ACTION_PREVIOUS) {
+              if (editText.getBlurOnSubmit()) {
+                editText.clearFocus();
+              }
+              return true;
+            }
             return !editText.getBlurOnSubmit();
           }
         });