Refactor text input keyboards

Reviewed By: foghina

Differential Revision: D2807491

fb-gh-sync-id: e7e5fb8c235f3637f619b2f44053749c51f379f0

Libraries/Components/TextInput/TextInput.js

@@ -489,11 +489,12 @@ var TextInput = React.createClass({
       };
     }
 
-    var autoCapitalize = UIManager.UIText.AutocapitalizationType[this.props.autoCapitalize];
-    var textAlign =
-      UIManager.AndroidTextInput.Constants.TextAlign[this.props.textAlign];
+    var autoCapitalize =
+      UIManager.AndroidTextInput.Constants.AutoCapitalizationType[this.props.autoCapitalize];
+    var textAlign = UIManager.AndroidTextInput.Constants.TextAlign[this.props.textAlign];
     var textAlignVertical =
       UIManager.AndroidTextInput.Constants.TextAlignVertical[this.props.textAlignVertical];
+
     var children = this.props.children;
     var childCount = 0;
     ReactChildren.forEach(children, () => ++childCount);

ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java

@@ -92,20 +92,6 @@ import com.facebook.react.uimanager.events.TouchEventType;
                 "ScaleAspectFill",
                 ImageView.ScaleType.CENTER_CROP.ordinal())));
 
-    constants.put(
-        "UIText",
-        MapBuilder.of(
-            "AutocapitalizationType",
-            MapBuilder.of(
-                "none",
-                InputType.TYPE_CLASS_TEXT,
-                "characters",
-                InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS,
-                "words",
-                InputType.TYPE_TEXT_FLAG_CAP_WORDS,
-                "sentences",
-                InputType.TYPE_TEXT_FLAG_CAP_SENTENCES)));
-
     constants.put(
         "Dimensions",
         MapBuilder.of(

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

@@ -16,6 +16,7 @@ import java.util.Map;
 import android.graphics.PorterDuff;
 import android.os.SystemClock;
 import android.text.Editable;
+import android.text.InputFilter;
 import android.text.InputType;
 import android.text.Spannable;
 import android.text.TextWatcher;
@@ -25,10 +26,8 @@ import android.view.KeyEvent;
 import android.view.View;
 import android.view.inputmethod.EditorInfo;
 import android.widget.TextView;
-import android.text.InputFilter;
 
 import com.facebook.infer.annotation.Assertions;
-import com.facebook.react.bridge.JSApplicationCausedNativeException;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.common.MapBuilder;
@@ -55,6 +54,10 @@ public class ReactTextInputManager extends
   private static final int FOCUS_TEXT_INPUT = 1;
   private static final int BLUR_TEXT_INPUT = 2;
 
+  private static final int INPUT_TYPE_KEYBOARD_NUMBERED =
+      InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL |
+          InputType.TYPE_NUMBER_FLAG_SIGNED;
+
   private static final String KEYBOARD_TYPE_EMAIL_ADDRESS = "email-address";
   private static final String KEYBOARD_TYPE_NUMERIC = "numeric";
   private static final InputFilter[] EMPTY_FILTERS = new InputFilter[0];
@@ -253,43 +256,35 @@ public class ReactTextInputManager extends
   public void setPassword(ReactEditText view, boolean password) {
     updateStagedInputTypeFlag(
         view,
-        password ? 0 : InputType.TYPE_TEXT_VARIATION_PASSWORD,
+        password ? 0 :
+            InputType.TYPE_NUMBER_VARIATION_PASSWORD | InputType.TYPE_TEXT_VARIATION_PASSWORD,
         password ? InputType.TYPE_TEXT_VARIATION_PASSWORD : 0);
+    checkPasswordType(view);
   }
 
-  @ReactProp(name = "autoCapitalize", defaultInt = InputType.TYPE_CLASS_TEXT)
+  @ReactProp(name = "autoCapitalize")
   public void setAutoCapitalize(ReactEditText view, int autoCapitalize) {
-    int flagsToSet = 0;
-    switch (autoCapitalize) {
-      case InputType.TYPE_TEXT_FLAG_CAP_SENTENCES:
-      case InputType.TYPE_TEXT_FLAG_CAP_WORDS:
-      case InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS:
-      case InputType.TYPE_CLASS_TEXT:
-        flagsToSet = autoCapitalize;
-        break;
-      default:
-        throw new
-            JSApplicationCausedNativeException("Invalid autoCapitalize value: " + autoCapitalize);
-    }
     updateStagedInputTypeFlag(
         view,
         InputType.TYPE_TEXT_FLAG_CAP_SENTENCES | InputType.TYPE_TEXT_FLAG_CAP_WORDS |
             InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS,
-        flagsToSet);
+        autoCapitalize);
   }
 
   @ReactProp(name = "keyboardType")
   public void setKeyboardType(ReactEditText view, @Nullable String keyboardType) {
-    int flagsToSet = 0;
+    int flagsToSet = InputType.TYPE_CLASS_TEXT;
     if (KEYBOARD_TYPE_NUMERIC.equalsIgnoreCase(keyboardType)) {
-      flagsToSet = InputType.TYPE_CLASS_NUMBER;
+      flagsToSet = INPUT_TYPE_KEYBOARD_NUMBERED;
     } else if (KEYBOARD_TYPE_EMAIL_ADDRESS.equalsIgnoreCase(keyboardType)) {
-      flagsToSet = InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS;
+      flagsToSet = InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS | InputType.TYPE_CLASS_TEXT;
     }
     updateStagedInputTypeFlag(
         view,
-        InputType.TYPE_CLASS_NUMBER | InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS,
+        INPUT_TYPE_KEYBOARD_NUMBERED | InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS |
+            InputType.TYPE_CLASS_TEXT,
         flagsToSet);
+    checkPasswordType(view);
   }
 
   @Override
@@ -298,6 +293,18 @@ public class ReactTextInputManager extends
     view.commitStagedInputType();
   }
 
+  // Sets the correct password type, since numeric and text passwords have different types
+  private static void checkPasswordType(ReactEditText view) {
+    if ((view.getStagedInputType() & INPUT_TYPE_KEYBOARD_NUMBERED) != 0 &&
+        (view.getStagedInputType() & InputType.TYPE_TEXT_VARIATION_PASSWORD) != 0) {
+      // Text input type is numbered password, remove text password variation, add numeric one
+      updateStagedInputTypeFlag(
+          view,
+          InputType.TYPE_TEXT_VARIATION_PASSWORD,
+          InputType.TYPE_NUMBER_VARIATION_PASSWORD);
+    }
+  }
+
   private static void updateStagedInputTypeFlag(
       ReactEditText view,
       int flagsToUnset,
@@ -473,6 +480,16 @@ public class ReactTextInputManager extends
         MapBuilder.of(
             "top", Gravity.TOP,
             "center", Gravity.CENTER_VERTICAL,
-            "bottom", Gravity.BOTTOM));
+            "bottom", Gravity.BOTTOM),
+        "AutoCapitalizationType",
+        MapBuilder.of(
+            "none",
+            0,
+            "characters",
+            InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS,
+            "words",
+            InputType.TYPE_TEXT_FLAG_CAP_WORDS,
+            "sentences",
+            InputType.TYPE_TEXT_FLAG_CAP_SENTENCES));
   }
 }