feat(android,react,vue): support RTL layout (#893)

* feat(android): support RTL layout * feat(js): inject Localization to core js * feat(react): text input default align to right on RTL layout * feat(react): horiztonal scrollview on RTL layout * fix(android): set default ltr for boxshadow view * feat(react,vue): add Localization demo Co-authored-by: maxli <maxli@tencent.com> Co-authored-by: yitengzhu <yitengzhu@tencent.com>
Tencent · Jul 30, 2021 · e15753d · e15753d
1 parent da964b9
commit e15753d
Show file tree

Hide file tree

Showing 31 changed files with 335 additions and 23 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -52,6 +52,7 @@ module.exports = {
     WebSocket: 'readonly',
   },
   rules: {
+    semi: ['error', 'always'],
     // Allow more than one component per file
     'vue/one-component-per-file': 'off',
 

diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/bridge/HippyBridgeManagerImpl.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/bridge/HippyBridgeManagerImpl.java
@@ -41,6 +41,7 @@
 import com.tencent.mtt.hippy.serialization.nio.writer.SafeHeapWriter;
 import com.tencent.mtt.hippy.utils.ArgumentUtils;
 import com.tencent.mtt.hippy.utils.DimensionsUtil;
+import com.tencent.mtt.hippy.utils.I18nUtil;
 import com.tencent.mtt.hippy.utils.UIThreadUtils;
 
 import java.io.UnsupportedEncodingException;
@@ -599,6 +600,13 @@ String getGlobalConfigs() {
     platformParams.pushString("VersionName", (versionName == null) ? "" : versionName);
     platformParams.pushInt("APILevel", Build.VERSION.SDK_INT);
     platformParams.pushBoolean("NightMode", getNightMode());
+
+    HippyMap Localization = new HippyMap();
+    Localization.pushString("language", I18nUtil.getLanguage());
+    Localization.pushString("country", I18nUtil.getCountry());
+    Localization.pushInt("direction", I18nUtil.getLayoutDirection());
+    platformParams.pushMap("Localization", Localization);
+
     globalParams.pushMap("Platform", platformParams);
 
     HippyMap tkd = new HippyMap();

diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/NodeProps.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/NodeProps.java
@@ -34,6 +34,7 @@ public class NodeProps {
   public static final String FLEX_GROW = "flexGrow";
   public static final String FLEX_SHRINK = "flexShrink";
   public static final String FLEX_BASIS = "flexBasis";
+  public static final String DIRECTION = "direction";
   public static final String FLEX_DIRECTION = "flexDirection";
   public static final String FLEX_WRAP = "flexWrap";
   public static final String HEIGHT = "height";

diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/StyleNode.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/StyleNode.java
@@ -15,6 +15,7 @@
  */
 package com.tencent.mtt.hippy.dom.node;
 
+import android.text.TextUtils;
 import com.tencent.mtt.hippy.annotation.HippyControllerProps;
 import com.tencent.mtt.hippy.dom.flex.*;
 import com.tencent.mtt.hippy.utils.PixelUtil;
@@ -77,6 +78,34 @@ public void setFlexBasis(float flexBasis) {
     super.setFlexBasis(flexBasis);
   }
 
+  @HippyControllerProps(name = NodeProps.SHADOW_RADIUS, defaultType = HippyControllerProps.NUMBER, defaultNumber = 0)
+  public void setShadowRadius(float shadowRadius) {
+    if (shadowRadius > 0) {
+      setDirection(FlexDirection.LTR);
+    }
+  }
+
+  @HippyControllerProps(name = NodeProps.DIRECTION)
+  public void setDirection(String direction) {
+    if (TextUtils.isEmpty(direction)) {
+      return;
+    }
+
+    FlexDirection flexDirection;
+    switch (direction) {
+      case "rtl":
+        flexDirection = FlexDirection.RTL;
+        break;
+      case "inherit":
+        flexDirection = FlexDirection.INHERIT;
+        break;
+      default:
+        flexDirection = FlexDirection.LTR;
+    }
+
+    setDirection(flexDirection);
+  }
+
   @HippyControllerProps(name = NodeProps.FLEX_DIRECTION)
   public void setFlexDirection(String flexDirection) {
     setFlexDirection(flexDirection == null ? FlexCSSDirection.COLUMN

diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/TextNode.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/TextNode.java
@@ -32,6 +32,7 @@
 import com.tencent.mtt.hippy.annotation.HippyControllerProps;
 import com.tencent.mtt.hippy.common.HippyMap;
 import com.tencent.mtt.hippy.dom.flex.*;
+import com.tencent.mtt.hippy.utils.I18nUtil;
 import com.tencent.mtt.hippy.utils.LogUtils;
 import com.tencent.mtt.hippy.utils.PixelUtil;
 import com.tencent.mtt.hippy.views.text.HippyTextView;
@@ -99,6 +100,10 @@ public TextNode(boolean mIsVirtual) {
     if (!mIsVirtual) {
       setMeasureFunction(TEXT_MEASURE_FUNCTION);
     }
+
+    if (I18nUtil.isRTL()) {
+      mTextAlign = Layout.Alignment.ALIGN_OPPOSITE;
+    }
   }
 
   public void setTextView(HippyTextView view) {
@@ -260,16 +265,14 @@ public void lineHeight(int lineHeight) {
   @SuppressWarnings("unused")
   @HippyControllerProps(name = NodeProps.TEXT_ALIGN, defaultType = HippyControllerProps.STRING, defaultString = "left")
   public void setTextAlign(String textAlign) {
-    if (textAlign == null || "auto".equals(textAlign)) {
-      mTextAlign = Layout.Alignment.ALIGN_NORMAL;
+    if (textAlign == null || "auto".equals(textAlign) || "justify".equals(textAlign)) {
+      mTextAlign = I18nUtil.isRTL() ? Layout.Alignment.ALIGN_OPPOSITE : Layout.Alignment.ALIGN_NORMAL;
     } else if ("left".equals(textAlign)) {
       mTextAlign = Layout.Alignment.ALIGN_NORMAL;
     } else if ("right".equals(textAlign)) {
       mTextAlign = Layout.Alignment.ALIGN_OPPOSITE;
     } else if ("center".equals(textAlign)) {
       mTextAlign = Layout.Alignment.ALIGN_CENTER;
-    } else if ("justify".equals(textAlign)) {
-      mTextAlign = Layout.Alignment.ALIGN_NORMAL;
     } else {
       throw new RuntimeException("Invalid textAlign: " + textAlign);
     }

diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/utils/I18nUtil.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/utils/I18nUtil.java
@@ -0,0 +1,36 @@
+package com.tencent.mtt.hippy.utils;
+
+import android.os.Build;
+import android.os.LocaleList;
+import android.text.TextUtils;
+import android.view.View;
+import java.util.Locale;
+
+public class I18nUtil {
+  private static Locale getLocale() {
+    Locale locale;
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+      locale = LocaleList.getDefault().get(0);
+    } else {
+      locale = Locale.getDefault();
+    }
+
+    return locale;
+  }
+
+  public static boolean isRTL() {
+    return getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
+  }
+
+  public static int getLayoutDirection() {
+    return TextUtils.getLayoutDirectionFromLocale(getLocale());
+  }
+
+  public static String getLanguage() {
+    return getLocale().getLanguage();
+  }
+
+  public static String getCountry() {
+    return getLocale().getCountry();
+  }
+}
diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/views/scroll/HippyHorizontalScrollView.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/views/scroll/HippyHorizontalScrollView.java
@@ -19,10 +19,12 @@
 import android.content.Context;
 import android.os.Build;
 import android.view.MotionEvent;
+import android.view.View;
 import android.widget.HorizontalScrollView;
 import com.tencent.mtt.hippy.common.HippyMap;
 import com.tencent.mtt.hippy.uimanager.HippyViewBase;
 import com.tencent.mtt.hippy.uimanager.NativeGestureDispatcher;
+import com.tencent.mtt.hippy.utils.I18nUtil;
 import com.tencent.mtt.hippy.utils.LogUtils;
 import com.tencent.mtt.hippy.utils.PixelUtil;
 import com.tencent.mtt.supportui.views.ScrollChecker;
@@ -68,6 +70,18 @@ public HippyHorizontalScrollView(Context context) {
     super(context);
     mHippyOnScrollHelper = new HippyOnScrollHelper();
     setHorizontalScrollBarEnabled(false);
+
+    if (I18nUtil.isRTL()) {
+      setRotationY(180f);
+    }
+  }
+
+  @Override
+  public void onViewAdded(View child) {
+    if (I18nUtil.isRTL()) {
+      child.setRotationY(180f);
+    }
+    super.onViewAdded(child);
   }
 
   public void setScrollEnabled(boolean enabled) {

diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/views/viewpager/HippyViewPager.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/views/viewpager/HippyViewPager.java
@@ -19,6 +19,7 @@
 import com.tencent.mtt.hippy.modules.Promise;
 import com.tencent.mtt.hippy.uimanager.HippyViewBase;
 import com.tencent.mtt.hippy.uimanager.NativeGestureDispatcher;
+import com.tencent.mtt.hippy.utils.I18nUtil;
 import com.tencent.mtt.hippy.utils.LogUtils;
 import com.tencent.mtt.supportui.views.viewpager.ViewPager;
 
@@ -60,6 +61,18 @@ private void init(Context context) {
     setAdapter(createAdapter(context));
     setLeftDragOutSizeEnabled(false);
     setRightDragOutSizeEnabled(false);
+
+    if (I18nUtil.isRTL()) {
+      setRotationY(180f);
+    }
+  }
+
+  @Override
+  public void onViewAdded(View child) {
+    if (I18nUtil.isRTL()) {
+      child.setRotationY(180f);
+    }
+    super.onViewAdded(child);
   }
 
   public HippyViewPager(Context context, boolean isVertical) {

diff --git a/android/sdk/src/main/java/com/tencent/mtt/supportui/views/asyncimage/BackgroundDrawable.java b/android/sdk/src/main/java/com/tencent/mtt/supportui/views/asyncimage/BackgroundDrawable.java
@@ -58,7 +58,7 @@ public class BackgroundDrawable extends BaseDrawable
 	private Path	mPathForBorderRadius;
 	private boolean	mNeedUpdateBorderPath	= false;
 
-	private final Paint mShadowPaint;
+	private Paint mShadowPaint;
 	private Paint gradientPaint;
 	private String gradientAngleDesc;
 	private int gradientAngle = Integer.MAX_VALUE;
@@ -79,7 +79,6 @@ public class BackgroundDrawable extends BaseDrawable
 	public BackgroundDrawable()
 	{
 		mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
-		mShadowPaint = new Paint();
 	}
 
   @Override
@@ -404,6 +403,10 @@ private void drawBGShadow (Canvas canvas)
 		  }
 	  }
 
+	  if (mShadowPaint == null) {
+			mShadowPaint = new Paint();
+		}
+
 	  mShadowPaint.setColor(Color.TRANSPARENT);
 	  mShadowPaint.setAntiAlias(true);
 	  mShadowPaint.setAlpha(opacity);

diff --git a/android/sdk/src/main/java/com/tencent/smtt/flexbox/FlexNode.java b/android/sdk/src/main/java/com/tencent/smtt/flexbox/FlexNode.java
@@ -26,6 +26,7 @@
 import com.tencent.mtt.hippy.dom.flex.FlexPositionType;
 import com.tencent.mtt.hippy.dom.flex.FlexWrap;
 import com.tencent.mtt.hippy.dom.flex.FloatUtil;
+import com.tencent.mtt.hippy.utils.I18nUtil;
 import com.tencent.smtt.flexbox.FlexNodeStyle.Edge;
 
 import java.util.ArrayList;
@@ -772,7 +773,8 @@ public void reset() {
       return;
     }
     nativeFlexNodereset(mNativeFlexNode);
-    this.setDirection(FlexDirection.LTR);
+    FlexDirection flexDirection = I18nUtil.isRTL() ? FlexDirection.RTL : FlexDirection.LTR;
+    this.setDirection(flexDirection);
     this.setFlexDirection(FlexCSSDirection.COLUMN);
     this.setJustifyContent(FlexJustify.FLEX_START);
     this.setAlignContent(FlexAlign.FLEX_START);

diff --git a/core/js/global/Platform.js b/core/js/global/Platform.js
@@ -45,13 +45,16 @@
 Hippy.device.platform = {};
 
 if (typeof __HIPPYNATIVEGLOBAL__ !== 'undefined') {
+  const Localization = { country: '', language: '', direction: 0 };
   if (__HIPPYNATIVEGLOBAL__.OS === 'ios') {
     Hippy.device.platform.OS = __HIPPYNATIVEGLOBAL__.OS;
     Hippy.device.platform.Device = __HIPPYNATIVEGLOBAL__.Device;
     Hippy.device.platform.OSVersion = __HIPPYNATIVEGLOBAL__.OSVersion;
     Hippy.device.platform.SDKVersion = __HIPPYNATIVEGLOBAL__.SDKVersion;
+    Hippy.device.platform.Localization = __HIPPYNATIVEGLOBAL__.Localization || Localization;
   } else {
     Hippy.device.platform.OS = __HIPPYNATIVEGLOBAL__.Platform.OS;
     Hippy.device.platform.APILevel = __HIPPYNATIVEGLOBAL__.Platform.APILevel;
+    Hippy.device.platform.Localization = __HIPPYNATIVEGLOBAL__.Platform.Localization || Localization;
   }
 }
diff --git a/core/src/napi/jsc/native_source_code_ios.cc b/core/src/napi/jsc/native_source_code_ios.cc