From c6e12dd4a536138db80927f8f0ac951af60f717c Mon Sep 17 00:00:00 2001 From: Eric Rozell Date: Mon, 8 Feb 2016 22:31:35 -0500 Subject: [PATCH] Fixes #153 - Adds background color to the ReactViewManager. --- Playground/index.ios.js | 23 ++++++++++++++++--- .../UIManager/NativeViewHierarchyManager.cs | 9 ++++---- ReactNative/UIManager/ViewGroupManager.cs | 10 +++++++- ReactNative/UIManager/ViewManager.cs | 4 +++- ReactNative/Views/View/ReactViewManager.cs | 18 ++++++++++++++- 5 files changed, 53 insertions(+), 11 deletions(-) diff --git a/Playground/index.ios.js b/Playground/index.ios.js index 8d15f9ed7b5..e18d7b1bbf8 100644 --- a/Playground/index.ios.js +++ b/Playground/index.ios.js @@ -24,7 +24,7 @@ const styles={ } }; -var {AppRegistry, View, Text, TextInput, Image } = React; +var {AppRegistry, View, Text, TextInput, Image, Switch } = React; var ReactRoot = React.createClass({ @@ -32,8 +32,23 @@ var {AppRegistry, View, Text, TextInput, Image } = React; var text = "You can see me!"; var longText = "This is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new line"; - return {value: text, - longText: longText}; + return { + value: text, + longText: longText, + isToggled: false, + w: 100, + h: 150 + }; + }, + + onToggle: function(value) { + this.setState({isToggled: value}); + if (value) { + this.setState({w: 150, h: 100}); + } + else { + this.setState({w: 100, h: 150}); + } }, render: function() { @@ -54,6 +69,8 @@ var {AppRegistry, View, Text, TextInput, Image } = React; + + ); } diff --git a/ReactNative/UIManager/NativeViewHierarchyManager.cs b/ReactNative/UIManager/NativeViewHierarchyManager.cs index 57243cc172d..e8920b977a1 100644 --- a/ReactNative/UIManager/NativeViewHierarchyManager.cs +++ b/ReactNative/UIManager/NativeViewHierarchyManager.cs @@ -514,13 +514,12 @@ private void DropView(FrameworkElement view) var viewManager = default(ViewManager); if (_tagsToViewManagers.TryGetValue(tag, out viewManager)) { - var viewGroup = view as Panel; var viewGroupManager = viewManager as ViewGroupManager; - if (viewGroup != null && viewGroupManager != null) + if (viewGroupManager != null) { - for (var i = viewGroupManager.GetChildCount(viewGroup) - 1; i >= 0; --i) + for (var i = viewGroupManager.GetChildCount(view) - 1; i >= 0; --i) { - var child = viewGroupManager.GetChildAt(viewGroup, i); + var child = viewGroupManager.GetChildAt(view, i); var managedChild = default(FrameworkElement); if (_tagsToViews.TryGetValue(child.GetTag(), out managedChild)) { @@ -529,7 +528,7 @@ private void DropView(FrameworkElement view) } } - viewGroupManager.RemoveAllChildren(viewGroup); + viewGroupManager.RemoveAllChildren(view); } _tagsToViews.Remove(tag); diff --git a/ReactNative/UIManager/ViewGroupManager.cs b/ReactNative/UIManager/ViewGroupManager.cs index 97b8d97c155..fccbc1df2bc 100644 --- a/ReactNative/UIManager/ViewGroupManager.cs +++ b/ReactNative/UIManager/ViewGroupManager.cs @@ -1,6 +1,5 @@ using System; using Windows.UI.Xaml; -using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { @@ -9,6 +8,15 @@ namespace ReactNative.UIManager /// public abstract class ViewGroupManager : ViewManager { + /// + /// The instance that represents the type of shadow + /// node that this manager will return from + /// . + /// + /// This method will be used in the bridge initialization phase to + /// collect properties exposed using the + /// annotation from the subclass. + /// public sealed override Type ShadowNodeType { get diff --git a/ReactNative/UIManager/ViewManager.cs b/ReactNative/UIManager/ViewManager.cs index 58f7cf46d79..c5f911b1108 100644 --- a/ReactNative/UIManager/ViewManager.cs +++ b/ReactNative/UIManager/ViewManager.cs @@ -151,7 +151,9 @@ public virtual void OnDropViewInstance(ThemedReactContext reactContext, Framewor /// /// Identifer for the command. /// Optional arguments for the command. - public virtual void ReceiveCommand(TFrameworkElement root, int commandId, JArray args) { } + public virtual void ReceiveCommand(FrameworkElement view, int commandId, JArray args) + { + } /// /// Creates a new view instance of type . diff --git a/ReactNative/Views/View/ReactViewManager.cs b/ReactNative/Views/View/ReactViewManager.cs index 4e7c949448e..d1a9553123d 100644 --- a/ReactNative/Views/View/ReactViewManager.cs +++ b/ReactNative/Views/View/ReactViewManager.cs @@ -5,6 +5,7 @@ using Windows.UI.Xaml; using Windows.UI.Xaml.Automation.Peers; using Windows.UI.Xaml.Automation.Provider; +using Windows.UI.Xaml.Media; namespace ReactNative.Views.View { @@ -101,7 +102,7 @@ public override void ReceiveCommand(FrameworkElement view, int commandId, JArray } /// - /// The border radius of the . + /// Sets the border radius of the . /// /// The view panel. /// The border radius value. @@ -111,6 +112,21 @@ public void SetBorderRadius(BorderedContentControl view, double radius) view.SetBorderRadius(radius); } + /// + /// Sets the background color of the . + /// + /// The view panel. + /// The masked color value. + [ReactProperty(ViewProperties.BackgroundColor)] + public void SetBackgroundColor(BorderedContentControl view, uint? color) + { + if (color.HasValue) + { + var panel = GetPanel(view); + panel.Background = new SolidColorBrush(ColorHelpers.Parse(color.Value)); + } + } + /// /// Sets the elevation transformation effect of the . ///