feat(ReactPickerView): Add ReactPickerView

ReactPicker provides access to native selector UI Components for React
Native JavaScript applications. Selector is implemented as ComboBox.

Fixes #231

Libraries/Components/Picker/Picker.js

@@ -13,8 +13,9 @@
 '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');
 var StyleSheet = require('StyleSheet');
@@ -112,6 +113,8 @@ var Picker = React.createClass({
         return <PickerIOS {...this.props}>{this.props.children}</PickerIOS>;
       } else if (Platform.OS === 'android') {
         return <PickerAndroid {...this.props}>{this.props.children}</PickerAndroid>;
+      } else if (Platform.OS === 'windows') {
+        return <PickerWindows {...this.props}>{this.props.children}</PickerWindows>;
       } else {
         return <UnimplementedView />;
       }

Libraries/Components/Picker/PickerWindows.js

@@ -0,0 +1,130 @@
+/**
+ * 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 PickerWindows
+ * @flow
+ */
+
+'use strict';
+
+var ColorPropType = require('ColorPropType');
+var React = require('React');
+var ReactChildren = require('ReactChildren');
+var ReactPropTypes = require('ReactPropTypes');
+var StyleSheet = require('StyleSheet');
+var StyleSheetPropType = require('StyleSheetPropType');
+var View = require('View');
+var ViewStylePropTypes = require('ViewStylePropTypes');
+
+var processColor = require('processColor');
+var requireNativeComponent = require('requireNativeComponent');
+
+var REF_PICKER = 'picker';
+
+var pickerStyleType = StyleSheetPropType({
+  ...ViewStylePropTypes,
+  color: ColorPropType,
+});
+
+type Event = Object;
+
+/**
+ * Not exposed as a public API - use <Picker> instead.
+ */
+var PickerWindows = React.createClass({
+
+  propTypes: {
+    ...View.propTypes,
+    style: pickerStyleType,
+    selectedValue: React.PropTypes.any,
+    enabled: ReactPropTypes.bool,
+    onValueChange: ReactPropTypes.func,
+    prompt: ReactPropTypes.string,
+    testID: ReactPropTypes.string,
+  },
+
+  getInitialState: function() {
+    return this._stateFromProps(this.props);
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.setState(this._stateFromProps(nextProps));
+  },
+
+  // Translate prop and children into stuff that the native picker understands.
+  _stateFromProps: function(props) {
+    var selectedIndex = 0;
+    let items = ReactChildren.map(props.children, (child, index) => {
+      if (child.props.value === props.selectedValue) {
+        selectedIndex = index;
+      }
+      let childProps = {
+        value: child.props.value,
+        label: child.props.label,
+      };
+      if (child.props.color) {
+        childProps.color = processColor(child.props.color);
+      }
+      return childProps;
+    });
+    return {selectedIndex, items};
+  },
+
+  render: function() {
+    var Picker = ComboBoxPicker;
+
+    var nativeProps = {
+      enabled: this.props.enabled,
+      items: this.state.items,
+      onSelect: this._onChange,
+      prompt: this.props.prompt,
+      selected: this.state.selectedIndex,
+      testID: this.props.testID,
+      style: [styles.pickerWindows, this.props.style],
+    };
+
+    return <Picker ref={REF_PICKER} {...nativeProps} />;
+  },
+
+  _onChange: function(event: Object) {
+    if (this.props.onValueChange) {
+      var position = event.nativeEvent.position;
+      if (position >= 0) {
+        var value = this.props.children[position].props.value;
+        this.props.onValueChange(value, position);
+      } else {
+        this.props.onValueChange(null, position);
+      }
+    }
+
+    // The picker is a controlled component. This means we expect the
+    // on*Change handlers to be in charge of updating our
+    // `selectedValue` prop. That way they can also
+    // disallow/undo/mutate the selection of certain values. In other
+    // words, the embedder of this component should be the source of
+    // truth, not the native component.
+    if (this.refs[REF_PICKER] && this.state.selectedIndex !== event.nativeEvent.position) {
+      this.refs[REF_PICKER].setNativeProps({selected: this.state.selectedIndex});
+    }
+  },
+});
+
+var styles = StyleSheet.create({
+  pickerWindows: {
+    // The picker will conform to whatever width is given, but we do
+    // have to set the component's height explicitly on the
+    // surrounding view to ensure it gets rendered.
+    // TODO would be better to export a native constant for this,
+    // like in iOS the RCTDatePickerManager.m
+    height: 40,
+  },
+});
+
+var ComboBoxPicker = requireNativeComponent('RCTPicker', PickerWindows);
+
+module.exports = PickerWindows;

ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj

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

ReactWindows/ReactNative.Tests/Views/Picker/ReactPickerTests.cs

@@ -0,0 +1,20 @@
+using Microsoft.VisualStudio.TestPlatform.UnitTestFramework;
+using Microsoft.VisualStudio.TestPlatform.UnitTestFramework.AppContainer;
+using ReactNative.Views.Picker;
+using ReactNative.UIManager;
+using Windows.UI.Text;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace ReactNative.Tests.Views.Picker
+{
+    [TestClass]
+    public class ReactPickerTests
+    {
+        [UITestMethod]
+        public void ReactPickerTests_Test()
+        {
+
+        }
+    }
+}

ReactWindows/ReactNative/ReactNative.csproj

@@ -284,6 +284,8 @@
     <Compile Include="Views\Image\ReactImageLoadEvent.cs" />
     <Compile Include="Views\Image\ReactImageManager.cs" />
     <Compile Include="Views\Image\ReactVirtualImageManager.cs" />
+    <Compile Include="Views\Picker\ReactPickerManager.cs" />
+    <Compile Include="Views\Picker\ReactPickerShadowNode.cs" />
     <Compile Include="Views\Scroll\IScrollCommandHandler.cs" />
     <Compile Include="Views\Scroll\ReactScrollViewCommandHelper.cs" />
     <Compile Include="Views\Scroll\ScrollEventType.cs" />

ReactWindows/ReactNative/Shell/MainReactPackage.cs

@@ -9,6 +9,7 @@
 using ReactNative.Modules.WebSocket;
 using ReactNative.UIManager;
 using ReactNative.Views.Image;
+using ReactNative.Views.Picker;
 using ReactNative.Views.Scroll;
 using ReactNative.Views.Switch;
 using ReactNative.Views.Text;
@@ -73,6 +74,7 @@ public IReadOnlyList<IViewManager> CreateViewManagers(
                 new ReactImageManager(),
                 new ReactVirtualImageManager(),
                 //new ReactProgressBarViewManager(),
+                new ReactPickerManager(),
                 new ReactRawTextManager(),
                 //new RecyclerViewBackedScrollViewManager(),
                 new ReactScrollViewManager(),