Don't let new keys on `style` from `transferPropsTo` override old ones
Previous behavior: `transferPropsTo(<div style={{color: 'red'}} />)` would get `color` overriden if we transfer in a `style={{color: 'blue'}}`. This is inconsistent with how other props are transfered. This simply reverses the order of arguments. closes #1435
Cheng Lou committed
Apr 23, 2014 at 16:42 UTC
7fa656dae9938a10a8ea9cb83d3d18aa2fbcedd3
2 files changed
+12
-4
src/core/ReactPropTransferer.js
+8
-1
@@ -40,6 +40,13 @@ function createTransferStrategy(mergeStrategy) {
40
};
41
}
42
43
+var transferStrategyMerge = createTransferStrategy(function(a, b) {
44
+ // `merge` overrides the first object's (`props[key]` above) keys using the
45
+ // second object's (`value`) keys. An object's style's existing `propA` would
46
+ // get overridden. Flip the order here.
47
+ return merge(b, a);
48
+});
49
+
50
/**
51
* Transfer strategies dictate how props are transferred by `transferPropsTo`.
52
* NOTE: if you add any more exceptions to this list you should be sure to
@@ -65,7 +72,7 @@ var TransferStrategies = {
72
/**
73
* Transfer the `style` prop (which is an object) by merging them.
74
*/
68
- style: createTransferStrategy(merge)
75
+ style: transferStrategyMerge
76
};
77
78
/**
src/core/__tests__/ReactPropTransferer-test.js
+4
-3
@@ -37,7 +37,7 @@ describe('ReactPropTransferer', function() {
37
return this.transferPropsTo(
38
<input
39
className="textinput"
40
- style={{display: 'block'}}
40
+ style={{display: 'block', color: 'green'}}
41
type="text"
42
value=""
43
/>
@@ -55,7 +55,7 @@ describe('ReactPropTransferer', function() {
55
.toBeComponentOfType(React.DOM.input)
56
.scalarPropsEqual({
57
className: 'textinput',
58
- style: {display: 'block'},
58
+ style: {display: 'block', color: 'green'},
59
type: 'text',
60
value: ''
61
});
@@ -75,7 +75,7 @@ describe('ReactPropTransferer', function() {
75
var instance =
76
<TestComponent
77
className="hidden_elem"
78
- style={{width: '100%'}}
78
+ style={{width: '100%', display: 'none'}}
79
/>;
80
instance = ReactTestUtils.renderIntoDocument(instance);
81
@@ -85,6 +85,7 @@ describe('ReactPropTransferer', function() {
85
.scalarPropsEqual({
86
className: 'textinput hidden_elem',
87
style: {
88
+ color: 'green',
89
display: 'block',
90
width: '100%'
91
}