From 46bac5fbbac420b018efa9beecd405fc1a88de3f Mon Sep 17 00:00:00 2001
From: Mengjue Wang <mengjuew@fb.com>
Date: Thu, 4 Aug 2016 21:29:14 -0700
Subject: [PATCH] fix inset padding handling for TextInput in LTR/RTL

Summary:
Since the core layout in RN is now assigning `left/right` to `start/end`, we need to tweak the text input handling as well:
1. We need to replace all left/right to start/end
2. For text inset padding, we need to manually flipped the padding in RTL situation.

Reviewed By: fkgozali

Differential Revision: D3670277

fbshipit-source-id: 442bead25af8548a85dd1f359aa5a799982d1185
---
 .../react/views/text/ReactTextUpdate.java     |  4 +--
 .../textinput/ReactTextInputShadowNode.java   | 32 ++++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java
index 410f3ef54..285ddb3cc 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java
@@ -41,9 +41,9 @@ public class ReactTextUpdate {
     mText = text;
     mJsEventCounter = jsEventCounter;
     mContainsImages = containsImages;
-    mPaddingLeft = padding.get(Spacing.LEFT);
+    mPaddingLeft = padding.get(Spacing.START);
     mPaddingTop = padding.get(Spacing.TOP);
-    mPaddingRight = padding.get(Spacing.RIGHT);
+    mPaddingRight = padding.get(Spacing.END);
     mPaddingBottom = padding.get(Spacing.BOTTOM);
     mLineHeight = lineHeight;
     mTextAlign = textAlign;
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java
index c33d26ced..246ce8120 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java
@@ -16,6 +16,7 @@ import android.util.TypedValue;
 import android.view.ViewGroup;
 import android.widget.EditText;
 
+import com.facebook.csslayout.CSSDirection;
 import com.facebook.csslayout.CSSMeasureMode;
 import com.facebook.csslayout.CSSNodeAPI;
 import com.facebook.csslayout.MeasureOutput;
@@ -57,9 +58,9 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
             ViewGroup.LayoutParams.WRAP_CONTENT,
             ViewGroup.LayoutParams.WRAP_CONTENT));
 
-    setDefaultPadding(Spacing.LEFT, mEditText.getPaddingLeft());
+    setDefaultPadding(Spacing.START, mEditText.getPaddingStart());
     setDefaultPadding(Spacing.TOP, mEditText.getPaddingTop());
-    setDefaultPadding(Spacing.RIGHT, mEditText.getPaddingRight());
+    setDefaultPadding(Spacing.END, mEditText.getPaddingEnd());
     setDefaultPadding(Spacing.BOTTOM, mEditText.getPaddingBottom());
     mComputedPadding = spacingToFloatArray(getPadding());
   }
@@ -81,9 +82,9 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
             (int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)) : mFontSize);
     mComputedPadding = spacingToFloatArray(getPadding());
     editText.setPadding(
-        (int) Math.ceil(getPadding().get(Spacing.LEFT)),
+        (int) Math.ceil(getPadding().get(Spacing.START)),
         (int) Math.ceil(getPadding().get(Spacing.TOP)),
-        (int) Math.ceil(getPadding().get(Spacing.RIGHT)),
+        (int) Math.ceil(getPadding().get(Spacing.END)),
         (int) Math.ceil(getPadding().get(Spacing.BOTTOM)));
 
     if (mNumberOfLines != UNSET) {
@@ -112,7 +113,11 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
   public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {
     super.onCollectExtraUpdates(uiViewOperationQueue);
     if (mComputedPadding != null) {
-      uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), mComputedPadding);
+      float[] updatedPadding = mComputedPadding;
+      if (getLayoutDirection() == CSSDirection.RTL) {
+        updatedPadding = spacingToFloatArrayForRTL(getPadding());
+      }
+      uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), updatedPadding);
       mComputedPadding = null;
     }
 
@@ -138,11 +143,22 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
     markUpdated();
   }
 
-  private static float[] spacingToFloatArray(Spacing spacing) {
+  private float[] spacingToFloatArray(Spacing spacing) {
     return new float[] {
-        spacing.get(Spacing.LEFT),
+        spacing.get(Spacing.START),
         spacing.get(Spacing.TOP),
-        spacing.get(Spacing.RIGHT),
+        spacing.get(Spacing.END),
+        spacing.get(Spacing.BOTTOM),
+    };
+  }
+
+  // Since TextInput communicate with native component but not CSSLayout,
+  // So flip the padding for RTL is necessary when the padding is updated
+  private float[] spacingToFloatArrayForRTL(Spacing spacing) {
+    return new float[] {
+        spacing.get(Spacing.END),
+        spacing.get(Spacing.TOP),
+        spacing.get(Spacing.START),
         spacing.get(Spacing.BOTTOM),
     };
   }