fix(ViewProps): Update layout-only view props (microsoft#1153)

rozele · web-flow · commit 67cf0d5db79a · 2017-06-23T14:34:53.000Z
* With these view props missing from the layout-only list, extra views are being created that are truly layout-only.
* Views with `pointerEvents` prop values of `box-none` and `auto` can be collapsed.
diff --git a/ReactWindows/ReactNative.Shared/UIManager/NativeViewHierarchyOptimizer.cs b/ReactWindows/ReactNative.Shared/UIManager/NativeViewHierarchyOptimizer.cs
@@ -1,8 +1,7 @@
-﻿#define ENABLED
-
-using System;
-using System.Collections.Generic;
+﻿using System.Collections.Generic;
+#if !DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
 using System.Linq;
+#endif
 
 namespace ReactNative.UIManager
 {
@@ -80,7 +79,7 @@ public void HandleCreateView(
             ThemedReactContext themedContext, 
             ReactStylesDiffMap initialProperties)
         {
-#if !ENABLED
+#if DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
             _uiViewOperationQueue.EnqueueCreateView(
                     themedContext,
                     node.ReactTag,
@@ -115,7 +114,7 @@ public void HandleCreateView(
         /// <param name="props">The properties.</param>
         public void HandleUpdateView(ReactShadowNode node, string className, ReactStylesDiffMap props)
         {
-#if !ENABLED
+#if DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
             _uiViewOperationQueue.EnqueueUpdateProperties(node.ReactTag, className, props);
 #else
             var needsToLeaveLayoutOnly = node.IsLayoutOnly && !IsLayoutOnlyAndCollapsible(props);
@@ -151,10 +150,10 @@ public void HandleUpdateView(ReactShadowNode node, string className, ReactStyles
         /// </remarks>
         public void HandleManageChildren(ReactShadowNode nodeToManage, int[] indexesToRemove, int[] tagsToRemove, ViewAtIndex[] viewsToAdd, int[] tagsToDelete)
         {
-#if !ENABLED
+#if DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
             _uiViewOperationQueue.EnqueueManageChildren(
                 nodeToManage.ReactTag,
-                indicesToRemove,
+                indexesToRemove,
                 viewsToAdd,
                 tagsToDelete);
 #else
@@ -188,7 +187,7 @@ public void HandleManageChildren(ReactShadowNode nodeToManage, int[] indexesToRe
         /// <param name="childrenTags">The children tags.</param>
         public void HandleSetChildren(ReactShadowNode nodeToManage, int[] childrenTags)
         {
-#if !ENABLED
+#if DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
             _uiViewOperationQueue.EnqueueSetChildren(
                 nodeToManage.ReactTag,
                 childrenTags);
@@ -210,7 +209,7 @@ public void HandleSetChildren(ReactShadowNode nodeToManage, int[] childrenTags)
         /// <param name="node">The node.</param>
         public void HandleUpdateLayout(ReactShadowNode node)
         {
-#if !ENABLED
+#if DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
             _uiViewOperationQueue.EnqueueUpdateLayout(
                 node.Parent.ReactTag,
                 node.ReactTag,
@@ -246,7 +245,7 @@ public void HandleRemoveNode(ReactShadowNode node)
             node.RemoveAllNativeChildren();
         }
 
-#if ENABLED
+#if !DISABLE_NATIVE_VIEW_HIERARCHY_OPTIMIZER
         private void AddNodeToNode(ReactShadowNode parent, ReactShadowNode child, int index)
         {
             var indexInNativeChildren = parent.GetNativeOffsetForChild(parent.GetChildAt(index));
@@ -518,7 +517,7 @@ private bool IsLayoutOnlyAndCollapsible(ReactStylesDiffMap props)
 
             foreach (var key in props.Keys)
             {
-                if (!ViewProps.IsLayoutOnly(key))
+                if (!ViewProps.IsLayoutOnly(props, key))
                 {
                     return false;
                 }
diff --git a/ReactWindows/ReactNative.Shared/UIManager/ViewProps.cs b/ReactWindows/ReactNative.Shared/UIManager/ViewProps.cs
@@ -1,4 +1,5 @@
-﻿using System.Collections.Generic;
+﻿using Newtonsoft.Json.Linq;
+using System.Collections.Generic;
 
 namespace ReactNative.UIManager
 {
@@ -57,6 +58,9 @@ public static class ViewProps
 
         public const string AspectRatio = "aspectRatio";
 
+        // Props that sometimes may prevent us from collapsing views
+        public static string PointerEvents = "pointerEvents";
+
         // Properties that affect more than just layout
         public const string Disabled = "disabled";
         public const string BackgroundColor = "backgroundColor";
@@ -138,10 +142,15 @@ public static class ViewProps
                 AlignSelf,
                 Collapsible,
                 Flex,
+                FlexBasis,
                 FlexDirection,
+                FlexGrow,
+                FlexShrink,
                 FlexWrap,
                 JustifyContent,
                 Overflow,
+                AlignContent,
+                Display,
 
                 /* position */
                 Position,
@@ -180,13 +189,24 @@ public static class ViewProps
         /// <summary>
         /// Checks if the property key is layout-only.
         /// </summary>
-        /// <param name="key">The key.</param>
+        /// <param name="props">The prop collection.</param>
+        /// <param name="prop">The prop name.</param>
         /// <returns>
         /// <b>true</b> if the property is layout-only, <b>false</b> otherwise.
         /// </returns>
-        public static bool IsLayoutOnly(string key)
+        public static bool IsLayoutOnly(ReactStylesDiffMap props, string prop)
         {
-            return s_layoutOnlyProperties.Contains(key);
+            if (s_layoutOnlyProperties.Contains(prop))
+            {
+                return true;
+            }
+            else if (PointerEvents == prop)
+            {
+                var value = props.GetProperty(prop).Value<string>();
+                return value == "auto" || value == "box-none";
+            }
+
+            return false;
         }
     }
-}
+}
