提交 6c0b213b 编写于 作者: M Mateusz Burzyński

Fixed nested themes not being republished on outer theme changes

上级 2dc4d4cb
......@@ -6,7 +6,7 @@ All notable changes to this project will be documented in this file. If a contri
## Unreleased
-
- Fixed nested themes not being republished on outer theme changes, thanks to [@Andarist](https://github.com/Andarist) (see [#1382](https://github.com/styled-components/styled-components/pull/1382))
## [v2.3.3] - 2017-12-20
......
......@@ -59,8 +59,13 @@ class ThemeProvider extends Component {
if (outerContext !== undefined) {
this.unsubscribeToOuterId = outerContext.subscribe(theme => {
this.outerTheme = theme
if (this.broadcast !== undefined) {
this.publish(this.props.theme)
}
})
}
this.broadcast = createBroadcast(this.getTheme())
}
......@@ -86,7 +91,7 @@ class ThemeProvider extends Component {
componentWillReceiveProps(nextProps: ThemeProviderProps) {
if (this.props.theme !== nextProps.theme) {
this.broadcast.publish(this.getTheme(nextProps.theme))
this.publish(nextProps.theme)
}
}
......@@ -119,6 +124,10 @@ class ThemeProvider extends Component {
return { ...this.outerTheme, ...(theme: Object) }
}
publish(theme: Theme | ((outerTheme: Theme) => void)) {
this.broadcast.publish(this.getTheme(theme))
}
render() {
if (!this.props.children) {
return null
......
// @flow
/* eslint-disable react/no-multi-comp */
import React from 'react'
import { shallow, render } from 'enzyme'
import { shallow, render, mount } from 'enzyme'
import ThemeProvider, { CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from '../ThemeProvider'
describe('ThemeProvider', () => {
......@@ -114,4 +114,40 @@ describe('ThemeProvider', () => {
</div>
)
})
it('ThemeProvider propagates theme updates through nested ThemeProviders', () => {
const theme = { themed: true }
const augment = outerTheme =>
Object.assign({}, outerTheme, { augmented: true })
const update = { updated: true }
let actual
const expected = { themed: true, augmented: true, updated: true }
// Setup Child
class Child extends React.Component {
componentWillMount() {
this.context[CHANNEL_NEXT].subscribe(receivedTheme => {
actual = receivedTheme
})
}
render() {
return null
}
}
Child.contextTypes = {
[CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
}
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={augment}>
<Child />
</ThemeProvider>
</ThemeProvider>,
)
wrapper.setProps({ theme: Object.assign({}, theme, update) })
expect(actual).toEqual(expected)
})
})
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册