feat(ReactPickerView): Add ReactPickerView

ReactPicker provides access to native selector UI components for React
Native JavaScript applications.
- PR comments implemented

Fixes #231

Libraries/Components/Picker/Picker.js

@@ -13,8 +13,8 @@
 'use strict';
 
 var ColorPropType = require('ColorPropType');
-//var PickerIOS = require('PickerIOS');
-//var PickerAndroid = require('PickerAndroid');
+var PickerIOS = require('PickerIOS');
+var PickerAndroid = require('PickerAndroid');
 var PickerWindows = require('PickerWindows');
 var Platform = require('Platform');
 var React = require('React');

ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj

@@ -146,7 +146,6 @@
     <Compile Include="UnitTestApp.xaml.cs">
       <DependentUpon>UnitTestApp.xaml</DependentUpon>
     </Compile>
-    <Compile Include="Views\Picker\ReactPickerTests.cs" />
     <Compile Include="Views\TextInput\ReactTextBoxPropertiesTests.cs" />
   </ItemGroup>
   <ItemGroup>

ReactWindows/ReactNative/Views/Picker/ReactPickerManager.cs

@@ -2,7 +2,6 @@
 using ReactNative.UIManager;
 using ReactNative.UIManager.Events;
 using System;
-using Windows.UI;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Media;
@@ -14,12 +13,6 @@ namespace ReactNative.Views.Picker
     /// </summary>
     public class ReactPickerManager : BaseViewManager<ComboBox, ReactPickerShadowNode>
     {
-        private const string PROP_COLOR     = "color";
-        private const string PROP_ENABLED   = "enabled";
-        private const string PROP_ITEMS     = "items";
-        private const string PROP_LABEL     = "label";
-        private const string PROP_SELECTED  = "selected";     
-
         private int _selected;
 
         /// <summary>
@@ -41,7 +34,7 @@ public override string Name
         /// Set to <code>true</code> if the picker should be enabled,
         /// otherwise, set to <code>false</code>.
         /// </param>
-        [ReactProperty(PROP_ENABLED)]
+        [ReactProperty("enabled")]
         public void SetEnabled(ComboBox view, bool enabled)
         {
             view.IsEnabled = enabled;
@@ -52,16 +45,16 @@ public void SetEnabled(ComboBox view, bool enabled)
         /// </summary>
         /// <param name="view">a combobox instance.</param>
         /// <param name="selected">The selected item.</param>
-        [ReactProperty(PROP_SELECTED)]
+        [ReactProperty("selected")]
         public void SetSelected(ComboBox view, int selected)
         {
             // Temporarily disable selection changed event handler.
             view.SelectionChanged -= OnSelectionChanged;
 
-            _selected = selected >= -1 ? selected : -1;
-            view.SelectedIndex = view.Items.Count > _selected ? _selected : view.Items.Count - 1;
+            _selected = selected;
+            view.SelectedIndex = view.Items.Count > _selected ? _selected : -1;
 
-            if (view.SelectedIndex != -1 )
+            if (view.SelectedIndex != -1)
             {
                 view.Foreground = ((ComboBoxItem)(view.Items[view.SelectedIndex])).Foreground;
             }
@@ -74,30 +67,29 @@ public void SetSelected(ComboBox view, int selected)
         /// </summary>
         /// <param name="view">a combobox instance.</param>
         /// <param name="items">The picker items.</param>
-        [ReactProperty(PROP_ITEMS)]
+        [ReactProperty("items")]
         public void SetItems(ComboBox view, JArray items)
         {
+            // Temporarily disable selection changed event handler.
             view.SelectionChanged -= OnSelectionChanged;
 
-            for (int index = 0; index < items.Count; index++)
+            for (var index = 0; index < items.Count; index++)
             {
-                JToken token;
-                if ( (items[index] as JObject).TryGetValue(PROP_LABEL, out token) )
+                JToken label;
+                if ((items[index] as JObject).TryGetValue("label", out label))
                 {
                     var item = new ComboBoxItem();
                     JToken color;
-                    item.Content = token.Value<string>();
-                    if (((JObject)(items[index])).TryGetValue(PROP_COLOR, out color) )
+                    item.Content = label.Value<string>();
+                    if ((color = items[index].Value<JToken>("color")) != null)
                     {
-                        var rgb = color.Value<long>();
-                        item.Foreground = new SolidColorBrush(Color.FromArgb((byte)((rgb >> 24) & 0xff), 
-                                                                             (byte)((rgb >> 16) & 0xff), 
-                                                                             (byte)((rgb >> 8) & 0xff), 
-                                                                             (byte)(rgb & 0xff)));
+                        var rgb = color.Value<uint>();
+                        item.Foreground = new SolidColorBrush(ColorHelpers.Parse(rgb));
                     } 
                     view.Items.Add(item);
                 }            
-            }    
+            } 
+
             view.SelectedIndex = view.Items.Count > _selected ? _selected : -1;
 
             view.SelectionChanged += OnSelectionChanged;

ReactWindows/js/Components/Picker/PickerAndroid.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule PickerAndroid
+ */
+'use strict';
+
+var React = require('React');
+
+var PickerAndroid = React.createClass({
+  render: function() {
+  },
+});
+
+module.exports = PickerAndroid;

ReactWindows/js/Components/Picker/PickerIOS.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule PickerIOS
+ */
+'use strict';
+
+var React = require('React');
+
+var PickerIOS = React.createClass({
+  render: function() {
+  },
+});
+
+module.exports = PickerIOS;

Libraries/Components/Picker/PickerWindows.js → ReactWindows/js/Components/Picker/PickerWindows.js

@@ -41,6 +41,8 @@ var PickerWindows = React.createClass({
   propTypes: {
     ...View.propTypes,
     style: pickerStyleType,
+    items: React.PropTypes.any,
+    selected: React.PropTypes.number,
     selectedValue: React.PropTypes.any,
     enabled: ReactPropTypes.bool,
     onValueChange: ReactPropTypes.func,
@@ -74,7 +76,7 @@ var PickerWindows = React.createClass({
     });
     return {selectedIndex, items};
   },
-
+  
   render: function() {
     var Picker = ComboBoxPicker;
 
@@ -125,6 +127,11 @@ var styles = StyleSheet.create({
   },
 });
 
-var ComboBoxPicker = requireNativeComponent('RCTPicker', PickerWindows);
+var cfg = {
+  nativeOnly: {
+  }
+};
+
+var ComboBoxPicker = requireNativeComponent('RCTPicker', PickerWindows, PickerWindows, cfg);
 
 module.exports = PickerWindows;