prototype(View): add isTabStop prop to focus

Allow, e.g., View buttons to be focusable. This is the first step, the next step is to add a JS native event listener that tracks the currently focused element to re-route keyboard input.

Towards microsoft#886

Libraries/Components/View/ViewPropTypes.windows.js

@@ -497,4 +497,26 @@ module.exports = {
         'scale',
         'all',
     ])),
+
+    /**
+     * Controls whether the view is a tab stop. Useful for buttons and other
+     * controls that can be focused.
+     * 
+     * @platform windows
+     */
+    isTabStop: PropTypes.bool,
+
+    /**
+     * Called when the view receives focus.
+     * 
+     * @platform windows
+     */
+    onFocus: PropTypes.func,
+
+    /**
+     * Called when the view focus is lost.
+     * 
+     * @platform windows
+     */
+    onBlur: PropTypes.func,
 };

ReactWindows/ReactNative.Shared/ReactNative.Shared.projitems

@@ -151,7 +151,6 @@
     <Compile Include="$(MSBuildThisFileDirectory)UIManager\Annotations\ReactPropBaseAttribute.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UIManager\Annotations\ReactPropGroupAttribute.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UIManager\AppRegistry.cs" />
-    <Compile Include="$(MSBuildThisFileDirectory)UIManager\BorderedCanvas.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UIManager\BorderExtensions.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UIManager\ColorHelpers.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UIManager\IUIBlock.cs" />
@@ -238,6 +237,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Views\TextInput\ReactTextInputSubmitEditingEvent.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Views\Text\TextDecorationLine.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Views\ViewManagersPropertyCache.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Views\View\ReactViewControl.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Views\View\ReactViewManager.cs" />
   </ItemGroup>
 </Project>

ReactWindows/ReactNative.Shared/UIManager/ViewProps.cs

@@ -1,4 +1,4 @@
-using Newtonsoft.Json.Linq;
+using Newtonsoft.Json.Linq;
 using System.Collections.Generic;
 
 namespace ReactNative.UIManager
@@ -59,7 +59,8 @@ public static class ViewProps
         public const string AspectRatio = "aspectRatio";
 
         // Props that sometimes may prevent us from collapsing views
-        public static string PointerEvents = "pointerEvents";
+        public const string PointerEvents = "pointerEvents";
+        public const string IsTabStop = "isTabStop";
 
         // Properties that affect more than just layout
         public const string Disabled = "disabled";
@@ -205,6 +206,11 @@ public static bool IsLayoutOnly(ReactStylesDiffMap props, string prop)
                 var value = props.GetProperty(prop).Value<string>();
                 return value == "auto" || value == "box-none";
             }
+            else if (IsTabStop == prop)
+            {
+                var value = props.GetProperty(prop).Value<bool>();
+                return !value;
+            }
 
             return false;
         }

ReactWindows/ReactNative.Shared/UIManager/BorderedCanvas.cs → ReactWindows/ReactNative.Shared/Views/View/ReactViewControl.cs

@@ -1,23 +1,36 @@
-using System;
+using System;
 
 #if WINDOWS_UWP
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Data;
 #else
 using System.Windows;
 using System.Windows.Controls;
 #endif
 
-namespace ReactNative.UIManager
+namespace ReactNative.Views.View
 {
     /// <summary>
-    /// Represents a Canvas with an optional Border inside.
+    /// Native control for React view.
     /// </summary>
-    public class BorderedCanvas : Canvas
+    public class ReactViewControl : UserControl
     {
+        private readonly Canvas _canvas;
+
         private Border _border = null;
 
+        /// <summary>
+        /// Instantiates the <see cref="ReactViewControl"/>. 
+        /// </summary>
+        public ReactViewControl()
+        {
+            Content = _canvas = new Canvas
+            {
+                HorizontalAlignment = HorizontalAlignment.Stretch,
+                VerticalAlignment = VerticalAlignment.Stretch,
+            };
+        }
+
         /// <summary>
         /// The Border associated with this Canvas or null if it doesn't have a border.
         /// The Border is always the first element in the Children collection.
@@ -40,5 +53,16 @@ public Border Border
                 Children.Insert(0, _border);
             }
         }
+
+        /// <summary>
+        /// The view children.
+        /// </summary>
+        public UIElementCollection Children
+        {
+            get
+            {
+                return _canvas.Children;
+            }
+        }
     }
 }