Skip to content

Commit 3c71eab

Browse files
rozelerozele
authored
fix(TextInput): Apply color, background, and borderColor props to all resources (microsoft#1508)
The Background, Foreground, and Border color properties only affects the TextBox at rest, not during pointer over, disabled, or focused. This uses the resources dictionary to override all of these scenarios when the user sets a color. I grabbed the UWP defaults to revert when the user sets the props to null. Fixes microsoft#1004 Fixes microsoft#1040 Fixes microsoft#1502
1 parent 4bbd1fd commit 3c71eab

File tree

2 files changed

+166
-30
lines changed

2 files changed

+166
-30
lines changed

‎ReactWindows/ReactNative/Views/TextInput/ReactPasswordBoxManager.cs

Lines changed: 81 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using Newtonsoft.Json.Linq;
1+
using Newtonsoft.Json.Linq;
22
using ReactNative.Reflection;
33
using ReactNative.UIManager;
44
using ReactNative.UIManager.Annotations;
@@ -20,6 +20,26 @@ namespace ReactNative.Views.TextInput
2020
/// </summary>
2121
class ReactPasswordBoxManager : BaseViewManager<PasswordBox, ReactPasswordBoxShadowNode>
2222
{
23+
private const uint DefaultTextControlForeground = 0xFF000000;
24+
private const uint DefaultTextControlForegroundPointerOver = 0xFF000000;
25+
private const uint DefaultTextControlForegroundFocused = 0xFF000000;
26+
private const uint DefaultTextControlForegroundDisabled = 0xFF7A7A7A;
27+
28+
private const uint DefaultTextControlBackground = 0x66FFFFFF;
29+
private const uint DefaultTextControlBackgroundPointerOver = 0xFFFFFFFF;
30+
private const uint DefaultTextControlBackgroundFocused = 0xFFFFFFFF;
31+
private const uint DefaultTextControlBackgroundDisabled = 0x33000000;
32+
33+
private const uint DefaultTextControlPlaceholderForeground = 0x99000000;
34+
private const uint DefaultTextControlPlaceholderForegroundPointerOver = 0x99000000;
35+
private const uint DefaultTextControlPlaceholderForegroundFocused = 0x66000000;
36+
private const uint DefaultTextControlPlaceholderForegroundDisabled = 0xFF7A7A7A;
37+
38+
private const uint DefaultTextControlBorderBrush = 0xFF7A7A7A;
39+
private const uint DefaultTextControlBorderBrushPointerOver = 0xFF171717;
40+
private const uint DefaultTextControlBorderBrushFocused = 0xFF298FCC;
41+
private const uint DefaultTextControlBorderBrushDisabled = 0x33000000;
42+
2343
/// <summary>
2444
/// The name of the view manager.
2545
/// </summary>
@@ -142,9 +162,21 @@ public void SetFontSize(PasswordBox view, double fontSize)
142162
[ReactProp(ViewProps.Color, CustomType = "Color")]
143163
public void SetColor(PasswordBox view, uint? color)
144164
{
145-
view.Foreground = color.HasValue
146-
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
147-
: null;
165+
if (color.HasValue)
166+
{
167+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
168+
view.Resources["TextControlForeground"] = brush;
169+
view.Resources["TextControlForegroundPointerOver"] = brush;
170+
view.Resources["TextControlForegroundFocused"] = brush;
171+
view.Resources["TextControlForegroundDisabled"] = brush;
172+
}
173+
else
174+
{
175+
view.Resources["TextControlForeground"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForeground));
176+
view.Resources["TextControlForegroundPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForegroundPointerOver));
177+
view.Resources["TextControlForegroundFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForegroundFocused));
178+
view.Resources["TextControlForegroundDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForegroundDisabled));
179+
}
148180
}
149181

150182
/// <summary>
@@ -203,10 +235,21 @@ public void SetPlaceholder(PasswordBox view, string placeholder)
203235
[ReactProp("placeholderTextColor", CustomType = "Color")]
204236
public void SetPlaceholderTextColor(PasswordBox view, uint? color)
205237
{
206-
//The 'PlaceholderTextColor' is not implemented in UWP - Use of this property
207-
//will be ignored...
208-
209-
//TODO: #1039 #1040
238+
if (color.HasValue)
239+
{
240+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
241+
view.Resources["TextControlPlaceholderForeground"] = brush;
242+
view.Resources["TextControlPlaceholderForegroundPointerOver"] = brush;
243+
view.Resources["TextControlPlaceholderForegroundFocused"] = brush;
244+
view.Resources["TextControlPlaceholderForegroundDisabled"] = brush;
245+
}
246+
else
247+
{
248+
view.Resources["TextControlPlaceholderForeground"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForeground));
249+
view.Resources["TextControlPlaceholderForegroundPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForegroundPointerOver));
250+
view.Resources["TextControlPlaceholderForegroundFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForegroundFocused));
251+
view.Resources["TextControlPlaceholderForegroundDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForegroundDisabled));
252+
}
210253
}
211254

212255
/// <summary>
@@ -217,9 +260,21 @@ public void SetPlaceholderTextColor(PasswordBox view, uint? color)
217260
[ReactProp("borderColor", CustomType = "Color")]
218261
public void SetBorderColor(PasswordBox view, uint? color)
219262
{
220-
view.BorderBrush = color.HasValue
221-
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
222-
: new SolidColorBrush(ReactTextInputManager.DefaultTextBoxBorder);
263+
if (color.HasValue)
264+
{
265+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
266+
view.Resources["TextControlBorderBrush"] = brush;
267+
view.Resources["TextControlBorderBrushPointerOver"] = brush;
268+
view.Resources["TextControlBorderBrushFocused"] = brush;
269+
view.Resources["TextControlBorderBrushDisabled"] = brush;
270+
}
271+
else
272+
{
273+
view.Resources["TextControlBorderBrush"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrush));
274+
view.Resources["TextControlBorderBrushPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrushPointerOver));
275+
view.Resources["TextControlBorderBrushFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrushFocused));
276+
view.Resources["TextControlBorderBrushDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrushDisabled));
277+
}
223278
}
224279

225280
/// <summary>
@@ -230,9 +285,21 @@ public void SetBorderColor(PasswordBox view, uint? color)
230285
[ReactProp(ViewProps.BackgroundColor, CustomType = "Color")]
231286
public void SetBackgroundColor(PasswordBox view, uint? color)
232287
{
233-
view.Background = color.HasValue
234-
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
235-
: new SolidColorBrush(Colors.White);
288+
if (color.HasValue)
289+
{
290+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
291+
view.Resources["TextControlBackground"] = brush;
292+
view.Resources["TextControlBackgroundPointerOver"] = brush;
293+
view.Resources["TextControlBackgroundFocused"] = brush;
294+
view.Resources["TextControlBackgroundDisabled"] = brush;
295+
}
296+
else
297+
{
298+
view.Resources["TextControlBackground"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackground));
299+
view.Resources["TextControlBackgroundPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackgroundPointerOver));
300+
view.Resources["TextControlBackgroundFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackgroundFocused));
301+
view.Resources["TextControlBackgroundDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackgroundDisabled));
302+
}
236303
}
237304

238305
/// <summary>

‎ReactWindows/ReactNative/Views/TextInput/ReactTextInputManager.cs

Lines changed: 85 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using Newtonsoft.Json.Linq;
1+
using Newtonsoft.Json.Linq;
22
using ReactNative.Reflection;
33
using ReactNative.UIManager;
44
using ReactNative.UIManager.Annotations;
@@ -23,9 +23,31 @@ class ReactTextInputManager : BaseViewManager<ReactTextBox, ReactTextInputShadow
2323
internal const int FocusTextInput = 1;
2424
internal const int BlurTextInput = 2;
2525

26-
private bool _onSelectionChange;
26+
//
27+
// Grabbed these defaults from running a UWP app.
28+
//
29+
30+
private const uint DefaultTextControlForeground = 0xFF000000;
31+
private const uint DefaultTextControlForegroundPointerOver = 0xFF000000;
32+
private const uint DefaultTextControlForegroundFocused = 0xFF000000;
33+
private const uint DefaultTextControlForegroundDisabled = 0xFF7A7A7A;
34+
35+
private const uint DefaultTextControlBackground = 0x66FFFFFF;
36+
private const uint DefaultTextControlBackgroundPointerOver = 0x99FFFFFF;
37+
private const uint DefaultTextControlBackgroundFocused = 0xFFFFFFFF;
38+
private const uint DefaultTextControlBackgroundDisabled = 0x33000000;
39+
40+
private const uint DefaultTextControlPlaceholderForeground = 0x99000000;
41+
private const uint DefaultTextControlPlaceholderForegroundPointerOver = 0x99000000;
42+
private const uint DefaultTextControlPlaceholderForegroundFocused = 0x66000000;
43+
private const uint DefaultTextControlPlaceholderForegroundDisabled = 0xFF7A7A7A;
2744

28-
internal static readonly Color DefaultTextBoxBorder = Color.FromArgb(255, 122, 122, 122);
45+
private const uint DefaultTextControlBorderBrush = 0xFF7A7A7A;
46+
private const uint DefaultTextControlBorderBrushPointerOver = 0xFF171717;
47+
private const uint DefaultTextControlBorderBrushFocused = 0xFF298FCC;
48+
private const uint DefaultTextControlBorderBrushDisabled = 0x33000000;
49+
50+
private bool _onSelectionChange;
2951

3052
/// <summary>
3153
/// The name of the view manager.
@@ -141,9 +163,21 @@ public void SetFontSize(ReactTextBox view, double fontSize)
141163
[ReactProp(ViewProps.Color, CustomType = "Color")]
142164
public void SetColor(ReactTextBox view, uint? color)
143165
{
144-
view.Foreground = color.HasValue
145-
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
146-
: null;
166+
if (color.HasValue)
167+
{
168+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
169+
view.Resources["TextControlForeground"] = brush;
170+
view.Resources["TextControlForegroundPointerOver"] = brush;
171+
view.Resources["TextControlForegroundFocused"] = brush;
172+
view.Resources["TextControlForegroundDisabled"] = brush;
173+
}
174+
else
175+
{
176+
view.Resources["TextControlForeground"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForeground));
177+
view.Resources["TextControlForegroundPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForegroundPointerOver));
178+
view.Resources["TextControlForegroundFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForegroundFocused));
179+
view.Resources["TextControlForegroundDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlForegroundDisabled));
180+
}
147181
}
148182

149183
/// <summary>
@@ -222,10 +256,21 @@ public void SetPlaceholder(ReactTextBox view, string placeholder)
222256
[ReactProp("placeholderTextColor", CustomType = "Color")]
223257
public void SetPlaceholderTextColor(ReactTextBox view, uint? color)
224258
{
225-
//The 'PlaceholderTextColor' is not implemented in UWP - Use of this property
226-
//will be ignored...
227-
228-
//TODO: #1039 #1040
259+
if (color.HasValue)
260+
{
261+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
262+
view.Resources["TextControlPlaceholderForeground"] = brush;
263+
view.Resources["TextControlPlaceholderForegroundPointerOver"] = brush;
264+
view.Resources["TextControlPlaceholderForegroundFocused"] = brush;
265+
view.Resources["TextControlPlaceholderForegroundDisabled"] = brush;
266+
}
267+
else
268+
{
269+
view.Resources["TextControlPlaceholderForeground"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForeground));
270+
view.Resources["TextControlPlaceholderForegroundPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForegroundPointerOver));
271+
view.Resources["TextControlPlaceholderForegroundFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForegroundFocused));
272+
view.Resources["TextControlPlaceholderForegroundDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlPlaceholderForegroundDisabled));
273+
}
229274
}
230275

231276
/// <summary>
@@ -236,9 +281,21 @@ public void SetPlaceholderTextColor(ReactTextBox view, uint? color)
236281
[ReactProp("borderColor", CustomType = "Color")]
237282
public void SetBorderColor(ReactTextBox view, uint? color)
238283
{
239-
view.BorderBrush = color.HasValue
240-
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
241-
: new SolidColorBrush(DefaultTextBoxBorder);
284+
if (color.HasValue)
285+
{
286+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
287+
view.Resources["TextControlBorderBrush"] = brush;
288+
view.Resources["TextControlBorderBrushPointerOver"] = brush;
289+
view.Resources["TextControlBorderBrushFocused"] = brush;
290+
view.Resources["TextControlBorderBrushDisabled"] = brush;
291+
}
292+
else
293+
{
294+
view.Resources["TextControlBorderBrush"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrush));
295+
view.Resources["TextControlBorderBrushPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrushPointerOver));
296+
view.Resources["TextControlBorderBrushFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrushFocused));
297+
view.Resources["TextControlBorderBrushDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBorderBrushDisabled));
298+
}
242299
}
243300

244301
/// <summary>
@@ -249,9 +306,21 @@ public void SetBorderColor(ReactTextBox view, uint? color)
249306
[ReactProp(ViewProps.BackgroundColor, CustomType = "Color")]
250307
public void SetBackgroundColor(ReactTextBox view, uint? color)
251308
{
252-
view.Background = color.HasValue
253-
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
254-
: new SolidColorBrush(Colors.White);
309+
if (color.HasValue)
310+
{
311+
var brush = new SolidColorBrush(ColorHelpers.Parse(color.Value));
312+
view.Resources["TextControlBackground"] = brush;
313+
view.Resources["TextControlBackgroundPointerOver"] = brush;
314+
view.Resources["TextControlBackgroundFocused"] = brush;
315+
view.Resources["TextControlBackgroundDisabled"] = brush;
316+
}
317+
else
318+
{
319+
view.Resources["TextControlBackground"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackground));
320+
view.Resources["TextControlBackgroundPointerOver"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackgroundPointerOver));
321+
view.Resources["TextControlBackgroundFocused"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackgroundFocused));
322+
view.Resources["TextControlBackgroundDisabled"] = new SolidColorBrush(ColorHelpers.Parse(DefaultTextControlBackgroundDisabled));
323+
}
255324
}
256325

257326
/// <summary>

0 commit comments

Comments
 (0)