Skip to content

Commit

Permalink
Reverting React 16.3.0 specific changes until enzyme is updated
Browse files Browse the repository at this point in the history
  • Loading branch information
jtanner committed Apr 11, 2018
1 parent 26ceccd commit 3c0f337
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 26 deletions.
44 changes: 28 additions & 16 deletions src/components/Theme.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';

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

/**
Expand All @@ -10,35 +9,48 @@ const { themeShape } = require('../constants/App');
*/
export class ThemeProvider extends React.Component {
static propTypes = { theme: themeShape }
static childContextTypes = { mxTheme: themeShape }

getChildContext () {
return { mxTheme: this.props.theme };
}

render () {
return (
<ThemeContext.Provider value={this.props.theme}>
{this.props.children}
</ThemeContext.Provider>
);
return this.props.children;
}
}

/**
* `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
*
* `theme` can still be provided as a prop to the themed component to override the theme.
* ThemeContext is for use inside components that need access
* to the theme.
*/
class ThemeContext extends React.Component {
static contextTypes = {
mxTheme: themeShape
}

render () {
return this.props.children(this.context.mxTheme);
}
}

/**
* `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
*
* `theme` can still be provided as a prop to the themed component to override the theme.
*/
export function withTheme (Component) {
// "ref" is provided by React.forwardRef
function ThemedComponent (props, ref) {
function ThemedComponent (props) {
return (
<ThemeContext.Consumer>
<ThemeContext>
{theme => (
<Component {...props} ref={ref} theme={props.theme || theme} />
<Component {...props} theme={props.theme || theme} />
)}
</ThemeContext.Consumer>
</ThemeContext>
);
}
ThemedComponent.propTypes = { theme: themeShape };
ThemedComponent.displayName = `withTheme(${Component.displayName || Component.name})`;

// pass "ref" to ThemedComponent
return React.forwardRef(ThemedComponent);
return ThemedComponent;
}
16 changes: 6 additions & 10 deletions src/components/__tests__/Theme-test.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import React from 'react';
import { mount } from 'enzyme';

import { ThemeContext, ThemeProvider } from '../Theme';
import { ThemeProvider, withTheme } from '../Theme';

const ThemedComponent = () => (
<ThemeContext>
{theme => (
<div style={{ color: theme ? theme.Colors.PRIMARY : DEFAULT_COLOR }}>
Hello Theme!
</div>
)}
</ThemeContext>
);
const ThemedComponent = withTheme(({ theme }) => (
<div style={{ color: theme ? theme.Colors.PRIMARY : DEFAULT_COLOR }}>
Hello Theme!
</div>
));

const DEFAULT_COLOR = '#F00';
const THEME = {
Expand Down

0 comments on commit 3c0f337

Please sign in to comment.