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
This commit is contained in:
Cheng Lou
2014-04-23 16:42:50 -07:00
committed by Paul O’Shannessy
parent 3d605da15f
commit 7fa656dae9
2 changed files with 12 additions and 4 deletions
+8 -1
View File
@@ -40,6 +40,13 @@ function createTransferStrategy(mergeStrategy) {
};
}
var transferStrategyMerge = createTransferStrategy(function(a, b) {
// `merge` overrides the first object's (`props[key]` above) keys using the
// second object's (`value`) keys. An object's style's existing `propA` would
// get overridden. Flip the order here.
return merge(b, a);
});
/**
* Transfer strategies dictate how props are transferred by `transferPropsTo`.
* NOTE: if you add any more exceptions to this list you should be sure to
@@ -65,7 +72,7 @@ var TransferStrategies = {
/**
* Transfer the `style` prop (which is an object) by merging them.
*/
style: createTransferStrategy(merge)
style: transferStrategyMerge
};
/**
@@ -37,7 +37,7 @@ describe('ReactPropTransferer', function() {
return this.transferPropsTo(
<input
className="textinput"
style={{display: 'block'}}
style={{display: 'block', color: 'green'}}
type="text"
value=""
/>
@@ -55,7 +55,7 @@ describe('ReactPropTransferer', function() {
.toBeComponentOfType(React.DOM.input)
.scalarPropsEqual({
className: 'textinput',
style: {display: 'block'},
style: {display: 'block', color: 'green'},
type: 'text',
value: ''
});
@@ -75,7 +75,7 @@ describe('ReactPropTransferer', function() {
var instance =
<TestComponent
className="hidden_elem"
style={{width: '100%'}}
style={{width: '100%', display: 'none'}}
/>;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -85,6 +85,7 @@ describe('ReactPropTransferer', function() {
.scalarPropsEqual({
className: 'textinput hidden_elem',
style: {
color: 'green',
display: 'block',
width: '100%'
}