Permalink
Browse files

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
  • Loading branch information...
1 parent b05c7f7 commit 46bac5fbbac420b018efa9beecd405fc1a88de3f @MengjueW MengjueW committed with Facebook Github Bot 2 Aug 5, 2016
@@ -41,9 +41,9 @@ public 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;
@@ -16,6 +16,7 @@
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 void setThemedContext(ThemedReactContext themedContext) {
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 void measure(
(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 void setMostRecentEventCount(int mostRecentEventCount) {
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 void setPadding(int spacingType, float padding) {
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),
};
}

0 comments on commit 46bac5f

Please sign in to comment.