mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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:
committed by
Paul O’Shannessy
parent
3d605da15f
commit
7fa656dae9
@@ -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%'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user