Skip to content

Commit

Permalink
Fixes microsoft#153 - Adds background color to the ReactViewManager.
Browse files Browse the repository at this point in the history
  • Loading branch information
rozele authored and GantMan committed Sep 29, 2016
1 parent 1aa1950 commit c6e12dd
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 11 deletions.
23 changes: 20 additions & 3 deletions Playground/index.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,31 @@ const styles={
}
};

var {AppRegistry, View, Text, TextInput, Image } = React;
var {AppRegistry, View, Text, TextInput, Image, Switch } = React;

var ReactRoot = React.createClass({

getInitialState: function(){
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() {
Expand All @@ -54,6 +69,8 @@ var {AppRegistry, View, Text, TextInput, Image } = React;
<View style={styles.views}>
<Image source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}} style={styles.images}/>
</View>
<View style={{width: this.state.w, height: this.state.h, backgroundColor: 'red'}} />
<Switch onValueChange={this.onToggle} value={this.state.isToggled} />
</View>
);
}
Expand Down
9 changes: 4 additions & 5 deletions ReactNative/UIManager/NativeViewHierarchyManager.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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))
{
Expand All @@ -529,7 +528,7 @@ private void DropView(FrameworkElement view)
}
}

viewGroupManager.RemoveAllChildren(viewGroup);
viewGroupManager.RemoveAllChildren(view);
}

_tagsToViews.Remove(tag);
Expand Down
10 changes: 9 additions & 1 deletion ReactNative/UIManager/ViewGroupManager.cs
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace ReactNative.UIManager
{
Expand All @@ -9,6 +8,15 @@ namespace ReactNative.UIManager
/// </summary>
public abstract class ViewGroupManager : ViewManager
{
/// <summary>
/// The <see cref="Type"/> instance that represents the type of shadow
/// node that this manager will return from
/// <see cref="CreateShadowNodeInstance"/>.
///
/// This method will be used in the bridge initialization phase to
/// collect properties exposed using the <see cref="ReactPropertyAttribute"/>
/// annotation from the <see cref="ReactShadowNode"/> subclass.
/// </summary>
public sealed override Type ShadowNodeType
{
get
Expand Down
4 changes: 3 additions & 1 deletion ReactNative/UIManager/ViewManager.cs
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,9 @@ public virtual void OnDropViewInstance(ThemedReactContext reactContext, Framewor
/// </param>
/// <param name="commandId">Identifer for the command.</param>
/// <param name="args">Optional arguments for the command.</param>
public virtual void ReceiveCommand(TFrameworkElement root, int commandId, JArray args) { }
public virtual void ReceiveCommand(FrameworkElement view, int commandId, JArray args)
{
}

/// <summary>
/// Creates a new view instance of type <typeparamref name="TFrameworkElement"/>.
Expand Down
18 changes: 17 additions & 1 deletion ReactNative/Views/View/ReactViewManager.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down Expand Up @@ -101,7 +102,7 @@ public override void ReceiveCommand(FrameworkElement view, int commandId, JArray
}

/// <summary>
/// The border radius of the <see cref="ReactRootView"/>.
/// Sets the border radius of the <see cref="ReactPanel"/>.
/// </summary>
/// <param name="view">The view panel.</param>
/// <param name="radius">The border radius value.</param>
Expand All @@ -111,6 +112,21 @@ public void SetBorderRadius(BorderedContentControl view, double radius)
view.SetBorderRadius(radius);
}

/// <summary>
/// Sets the background color of the <see cref="ReactPanel"/>.
/// </summary>
/// <param name="view">The view panel.</param>
/// <param name="color">The masked color value.</param>
[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));
}
}

/// <summary>
/// Sets the elevation transformation effect of the <see cref="ReactPanel"/>.
/// </summary>
Expand Down

0 comments on commit c6e12dd

Please sign in to comment.