Skip to content

Commit 3c0f337

Browse files
committed
Reverting React 16.3.0 specific changes until enzyme is updated
enzymejs/enzyme#1553
1 parent 26ceccd commit 3c0f337

File tree

2 files changed

+34
-26
lines changed

2 files changed

+34
-26
lines changed

src/components/Theme.js

+28-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22

3-
const ThemeContext = React.createContext('mxTheme');
43
const { themeShape } = require('../constants/App');
54

65
/**
@@ -10,35 +9,48 @@ const { themeShape } = require('../constants/App');
109
*/
1110
export class ThemeProvider extends React.Component {
1211
static propTypes = { theme: themeShape }
12+
static childContextTypes = { mxTheme: themeShape }
13+
14+
getChildContext () {
15+
return { mxTheme: this.props.theme };
16+
}
1317

1418
render () {
15-
return (
16-
<ThemeContext.Provider value={this.props.theme}>
17-
{this.props.children}
18-
</ThemeContext.Provider>
19-
);
19+
return this.props.children;
2020
}
2121
}
2222

2323
/**
24-
* `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
25-
*
26-
* `theme` can still be provided as a prop to the themed component to override the theme.
24+
* ThemeContext is for use inside components that need access
25+
* to the theme.
2726
*/
27+
class ThemeContext extends React.Component {
28+
static contextTypes = {
29+
mxTheme: themeShape
30+
}
31+
32+
render () {
33+
return this.props.children(this.context.mxTheme);
34+
}
35+
}
36+
37+
/**
38+
* `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
39+
*
40+
* `theme` can still be provided as a prop to the themed component to override the theme.
41+
*/
2842
export function withTheme (Component) {
29-
// "ref" is provided by React.forwardRef
30-
function ThemedComponent (props, ref) {
43+
function ThemedComponent (props) {
3144
return (
32-
<ThemeContext.Consumer>
45+
<ThemeContext>
3346
{theme => (
34-
<Component {...props} ref={ref} theme={props.theme || theme} />
47+
<Component {...props} theme={props.theme || theme} />
3548
)}
36-
</ThemeContext.Consumer>
49+
</ThemeContext>
3750
);
3851
}
3952
ThemedComponent.propTypes = { theme: themeShape };
4053
ThemedComponent.displayName = `withTheme(${Component.displayName || Component.name})`;
4154

42-
// pass "ref" to ThemedComponent
43-
return React.forwardRef(ThemedComponent);
55+
return ThemedComponent;
4456
}

src/components/__tests__/Theme-test.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
33

4-
import { ThemeContext, ThemeProvider } from '../Theme';
4+
import { ThemeProvider, withTheme } from '../Theme';
55

6-
const ThemedComponent = () => (
7-
<ThemeContext>
8-
{theme => (
9-
<div style={{ color: theme ? theme.Colors.PRIMARY : DEFAULT_COLOR }}>
10-
Hello Theme!
11-
</div>
12-
)}
13-
</ThemeContext>
14-
);
6+
const ThemedComponent = withTheme(({ theme }) => (
7+
<div style={{ color: theme ? theme.Colors.PRIMARY : DEFAULT_COLOR }}>
8+
Hello Theme!
9+
</div>
10+
));
1511

1612
const DEFAULT_COLOR = '#F00';
1713
const THEME = {

0 commit comments

Comments
 (0)