status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-26 16:10:58 +00:00
Code Issues Projects Releases Wiki Activity

fix inset padding handling for TextInput in LTR/RTL

Browse Source 
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
This commit is contained in:
Mengjue Wang 2016-08-04 21:29:14 -07:00 committed by Facebook Github Bot 2
parent b05c7f792f
commit 46bac5fbba
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java
View File

@ -41,9 +41,9 @@ public class ReactTextUpdate {
mText = text; mText = text;
mJsEventCounter = jsEventCounter; mJsEventCounter = jsEventCounter;
mContainsImages = containsImages; mContainsImages = containsImages;
mPaddingLeft = padding.get(Spacing.LEFT); mPaddingLeft = padding.get(Spacing.START);
mPaddingTop = padding.get(Spacing.TOP); mPaddingTop = padding.get(Spacing.TOP);
mPaddingRight = padding.get(Spacing.RIGHT); mPaddingRight = padding.get(Spacing.END);
mPaddingBottom = padding.get(Spacing.BOTTOM); mPaddingBottom = padding.get(Spacing.BOTTOM);
mLineHeight = lineHeight; mLineHeight = lineHeight;
mTextAlign = textAlign; mTextAlign = textAlign;

32
ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java
View File

@ -16,6 +16,7 @@ import android.util.TypedValue;
import android.view.ViewGroup; import android.view.ViewGroup;
import android.widget.EditText; import android.widget.EditText;
import com.facebook.csslayout.CSSDirection;
import com.facebook.csslayout.CSSMeasureMode; import com.facebook.csslayout.CSSMeasureMode;
import com.facebook.csslayout.CSSNodeAPI; import com.facebook.csslayout.CSSNodeAPI;
import com.facebook.csslayout.MeasureOutput; import com.facebook.csslayout.MeasureOutput;
@ -57,9 +58,9 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT,
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.TOP, mEditText.getPaddingTop());
setDefaultPadding(Spacing.RIGHT, mEditText.getPaddingRight()); setDefaultPadding(Spacing.END, mEditText.getPaddingEnd());
setDefaultPadding(Spacing.BOTTOM, mEditText.getPaddingBottom()); setDefaultPadding(Spacing.BOTTOM, mEditText.getPaddingBottom());
mComputedPadding = spacingToFloatArray(getPadding()); mComputedPadding = spacingToFloatArray(getPadding());
} }
@ -81,9 +82,9 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
(int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)) : mFontSize); (int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)) : mFontSize);
mComputedPadding = spacingToFloatArray(getPadding()); mComputedPadding = spacingToFloatArray(getPadding());
editText.setPadding( 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.TOP)),
(int) Math.ceil(getPadding().get(Spacing.RIGHT)), (int) Math.ceil(getPadding().get(Spacing.END)),
(int) Math.ceil(getPadding().get(Spacing.BOTTOM))); (int) Math.ceil(getPadding().get(Spacing.BOTTOM)));
if (mNumberOfLines != UNSET) { if (mNumberOfLines != UNSET) {
@ -112,7 +113,11 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) { public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {
super.onCollectExtraUpdates(uiViewOperationQueue); super.onCollectExtraUpdates(uiViewOperationQueue);
if (mComputedPadding != null) { if (mComputedPadding != null) {
uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), mComputedPadding); float[] updatedPadding = mComputedPadding;
if (getLayoutDirection() == CSSDirection.RTL) {
updatedPadding = spacingToFloatArrayForRTL(getPadding());
}
uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), updatedPadding);
mComputedPadding = null; mComputedPadding = null;
} }
@ -138,11 +143,22 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
markUpdated(); markUpdated();
} }
private static float[] spacingToFloatArray(Spacing spacing) { private float[] spacingToFloatArray(Spacing spacing) {
return new float[] { return new float[] {
spacing.get(Spacing.LEFT), spacing.get(Spacing.START),
spacing.get(Spacing.TOP), 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), spacing.get(Spacing.BOTTOM),
}; };
} }