From 35dcd570f564724bed17d6bc515a9ed807c78226 Mon Sep 17 00:00:00 2001 From: Eero Bragge Date: Fri, 18 Mar 2016 12:18:46 +0200 Subject: [PATCH] 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 | 4 +- .../ReactNative.Tests.csproj | 1 - .../Views/Picker/ReactPickerTests.cs | 20 ---------- .../Views/Picker/ReactPickerManager.cs | 40 ++++++++----------- .../js/Components/Picker/PickerAndroid.js | 20 ++++++++++ .../js/Components/Picker/PickerIOS.js | 20 ++++++++++ .../js}/Components/Picker/PickerWindows.js | 11 ++++- 7 files changed, 67 insertions(+), 49 deletions(-) delete mode 100644 ReactWindows/ReactNative.Tests/Views/Picker/ReactPickerTests.cs create mode 100644 ReactWindows/js/Components/Picker/PickerAndroid.js create mode 100644 ReactWindows/js/Components/Picker/PickerIOS.js rename {Libraries => ReactWindows/js}/Components/Picker/PickerWindows.js (96%) diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index 07d8b210a3b..34cff28de1e 100644 --- a/Libraries/Components/Picker/Picker.js +++ b/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'); diff --git a/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj b/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj index c891e49a421..ee11e4a622f 100644 --- a/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj +++ b/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj @@ -146,7 +146,6 @@ UnitTestApp.xaml - diff --git a/ReactWindows/ReactNative.Tests/Views/Picker/ReactPickerTests.cs b/ReactWindows/ReactNative.Tests/Views/Picker/ReactPickerTests.cs deleted file mode 100644 index 2a24858f581..00000000000 --- a/ReactWindows/ReactNative.Tests/Views/Picker/ReactPickerTests.cs +++ /dev/null @@ -1,20 +0,0 @@ -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() - { - - } - } -} diff --git a/ReactWindows/ReactNative/Views/Picker/ReactPickerManager.cs b/ReactWindows/ReactNative/Views/Picker/ReactPickerManager.cs index 305c4131df0..8e0b1467597 100644 --- a/ReactWindows/ReactNative/Views/Picker/ReactPickerManager.cs +++ b/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 /// public class ReactPickerManager : BaseViewManager { - 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; /// @@ -41,7 +34,7 @@ public override string Name /// Set to true if the picker should be enabled, /// otherwise, set to false. /// - [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) /// /// a combobox instance. /// The selected item. - [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) /// /// a combobox instance. /// The picker items. - [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(); - if (((JObject)(items[index])).TryGetValue(PROP_COLOR, out color) ) + item.Content = label.Value(); + if ((color = items[index].Value("color")) != null) { - var rgb = color.Value(); - 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(); + item.Foreground = new SolidColorBrush(ColorHelpers.Parse(rgb)); } view.Items.Add(item); } - } + } + view.SelectedIndex = view.Items.Count > _selected ? _selected : -1; view.SelectionChanged += OnSelectionChanged; diff --git a/ReactWindows/js/Components/Picker/PickerAndroid.js b/ReactWindows/js/Components/Picker/PickerAndroid.js new file mode 100644 index 00000000000..f34abe43d81 --- /dev/null +++ b/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; diff --git a/ReactWindows/js/Components/Picker/PickerIOS.js b/ReactWindows/js/Components/Picker/PickerIOS.js new file mode 100644 index 00000000000..d9ffc53bacf --- /dev/null +++ b/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; diff --git a/Libraries/Components/Picker/PickerWindows.js b/ReactWindows/js/Components/Picker/PickerWindows.js similarity index 96% rename from Libraries/Components/Picker/PickerWindows.js rename to ReactWindows/js/Components/Picker/PickerWindows.js index ae755992701..ad7b13f745c 100644 --- a/Libraries/Components/Picker/PickerWindows.js +++ b/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;