The library for web and native user interfaces.
Unbreaking falsy check on style values
Style values can be the number zero which is an actual value. So we check for null instead. The empty string case falls through.
CommitSyncScript committed
Jun 13, 2013 at 17:36 UTC
770ec5946aa58aa780346011d2124d90bc14bd79
3 files changed
+16
-6
src/core/ReactNativeComponent.js
+2
-1
@@ -247,7 +247,8 @@ ReactNativeComponent.Mixin = {
247
if (lastProp) {
248
// Unset styles on `lastProp` but not on `nextProp`.
249
for (styleName in lastProp) {
250
- if (lastProp.hasOwnProperty(styleName) && !nextProp[styleName]) {
250
+ if (lastProp.hasOwnProperty(styleName) &&
251
+ !nextProp.hasOwnProperty(styleName)) {
252
styleUpdates = styleUpdates || {};
253
styleUpdates[styleName] = '';
254
}
src/core/__tests__/ReactNativeComponent-test.js
+10
-1
@@ -70,7 +70,7 @@ describe('ReactNativeComponent', function() {
70
});
71
72
it("should update styles when mutating style object", function() {
73
- var styles = { display: 'none', fontFamily: 'Arial' };
73
+ var styles = { display: 'none', fontFamily: 'Arial', opacity: 0 };
74
var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);
75
76
var stubStyle = stub.getDOMNode().style;
@@ -82,12 +82,21 @@ describe('ReactNativeComponent', function() {
82
stub.receiveProps({ style: styles }, transaction);
83
expect(stubStyle.display).toEqual('block');
84
expect(stubStyle.fontFamily).toEqual('Arial');
85
+ expect(stubStyle.opacity).toEqual('0');
86
87
styles.fontFamily = 'Helvetica';
88
89
stub.receiveProps({ style: styles }, transaction);
90
expect(stubStyle.display).toEqual('block');
91
expect(stubStyle.fontFamily).toEqual('Helvetica');
92
+ expect(stubStyle.opacity).toEqual('0');
93
+
94
+ styles.opacity = 0.5;
95
+
96
+ stub.receiveProps({ style: styles }, transaction);
97
+ expect(stubStyle.display).toEqual('block');
98
+ expect(stubStyle.fontFamily).toEqual('Helvetica');
99
+ expect(stubStyle.opacity).toEqual('0.5');
100
});
101
102
it("should update styles if initially null", function() {
src/dom/CSSPropertyOperations.js
+4
-4
@@ -74,8 +74,10 @@ var CSSPropertyOperations = {
74
if (!styles.hasOwnProperty(styleName)) {
75
continue;
76
}
77
- var styleValue = styles[styleName];
78
- if (!styleValue) {
77
+ var styleValue = dangerousStyleValue(styleName, styles[styleName]);
78
+ if (styleValue) {
79
+ style[styleName] = styleValue;
80
+ } else {
81
var expansion = CSSProperty.shorthandPropertyExpansions[styleName];
82
if (expansion) {
83
// Shorthand property that IE8 won't like unsetting, so unset each
@@ -86,8 +88,6 @@ var CSSPropertyOperations = {
88
} else {
89
style[styleName] = '';
90
}
89
- } else {
90
- style[styleName] = dangerousStyleValue(styleName, styleValue);
91
}
92
}
93
}