RN: Fix Element Inspector w/ Start + End Styles

Summary: Fixes how the element inspector displays start and end styles (e.g. `marginStart` or `paddingEnd`). @public Reviewed By: TheSavior Differential Revision: D8607581 fbshipit-source-id: e949927fd86e9b21a8ecf26fbf3e4863ad1486bd
macdoum1 · Jun 28, 2018 · 1032a8c · 1032a8c
1 parent e411d20
commit 1032a8c
Showing 1 changed file with 88 additions and 33 deletions.
diff --git a/Libraries/Inspector/resolveBoxStyle.js b/Libraries/Inspector/resolveBoxStyle.js
@@ -10,48 +10,103 @@
 
 'use strict';
 
+const I18nManager = require('I18nManager');
+
 /**
- * Resolve a style property into it's component parts, e.g.
+ * Resolve a style property into its component parts.
+ *
+ * For example:
  *
- * resolveProperties('margin', {margin: 5, marginBottom: 10})
- * ->
- * {top: 5, left: 5, right: 5, bottom: 10}
+ *   > resolveProperties('margin', {margin: 5, marginBottom: 10})
+ *   {top: 5, left: 5, right: 5, bottom: 10}
  *
- * If none are set, returns false.
+ * If no parts exist, this returns null.
  */
-function resolveBoxStyle(prefix: string, style: Object): ?Object {
-  const res = {};
-  const subs = ['top', 'left', 'bottom', 'right'];
-  let set = false;
-  subs.forEach(sub => {
-    res[sub] = style[prefix] || 0;
-  });
-  if (style[prefix]) {
-    set = true;
-  }
-  if (style[prefix + 'Vertical']) {
-    res.top = res.bottom = style[prefix + 'Vertical'];
-    set = true;
+function resolveBoxStyle(
+  prefix: string,
+  style: Object,
+): ?$ReadOnly<{|
+  bottom: number,
+  left: number,
+  right: number,
+  top: number,
+|}> {
+  let hasParts = false;
+  const result = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  };
+
+  // TODO: Fix issues with multiple properties affecting the same side.
+
+  const styleForAll = style[prefix];
+  if (styleForAll != null) {
+    for (const key of Object.keys(result)) {
+      result[key] = styleForAll;
+    }
+    hasParts = true;
   }
-  if (style[prefix + 'Horizontal']) {
-    res.left = res.right = style[prefix + 'Horizontal'];
-    set = true;
+
+  const styleForHorizontal = style[prefix + 'Horizontal'];
+  if (styleForHorizontal != null) {
+    result.left = styleForHorizontal;
+    result.right = styleForHorizontal;
+    hasParts = true;
+  } else {
+    const styleForLeft = style[prefix + 'Left'];
+    if (styleForLeft != null) {
+      result.left = styleForLeft;
+      hasParts = true;
+    }
+
+    const styleForRight = style[prefix + 'Right'];
+    if (styleForRight != null) {
+      result.right = styleForRight;
+      hasParts = true;
+    }
+
+    const styleForEnd = style[prefix + 'End'];
+    if (styleForEnd != null) {
+      if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) {
+        result.left = styleForEnd;
+      } else {
+        result.right = styleForEnd;
+      }
+      hasParts = true;
+    }
+    const styleForStart = style[prefix + 'Start'];
+    if (styleForStart != null) {
+      if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) {
+        result.right = styleForStart;
+      } else {
+        result.left = styleForStart;
+      }
+      hasParts = true;
+    }
   }
-  subs.forEach(sub => {
-    const val = style[prefix + capFirst(sub)];
-    if (val) {
-      res[sub] = val;
-      set = true;
+
+  const styleForVertical = style[prefix + 'Vertical'];
+  if (styleForVertical != null) {
+    result.bottom = styleForVertical;
+    result.top = styleForVertical;
+    hasParts = true;
+  } else {
+    const styleForBottom = style[prefix + 'Bottom'];
+    if (styleForBottom != null) {
+      result.bottom = styleForBottom;
+      hasParts = true;
+    }
+
+    const styleForTop = style[prefix + 'Top'];
+    if (styleForTop != null) {
+      result.top = styleForTop;
+      hasParts = true;
     }
-  });
-  if (!set) {
-    return;
   }
-  return res;
-}
 
-function capFirst(text) {
-  return text[0].toUpperCase() + text.slice(1);
+  return hasParts ? result : null;
 }
 
 module.exports = resolveBoxStyle;