Repository URL to install this package:
Version:
1.2.13 ▾
|
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// @flow
const react_1 = __importDefault(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
const ThemeProvider_1 = require("../models/ThemeProvider");
const isStyledComponent_1 = __importDefault(require("../utils/isStyledComponent"));
const determineTheme_1 = __importDefault(require("../utils/determineTheme"));
const wrapWithTheme = (Component) => {
const componentName = Component.displayName || Component.name || 'Component';
const isStatelessFunctionalComponent = typeof Component === 'function' &&
// $FlowFixMe TODO: flow for prototype
!(Component.prototype && 'isReactComponent' in Component.prototype);
// NOTE: We can't pass a ref to a stateless functional component
const shouldSetInnerRef = isStyledComponent_1.default(Component) || isStatelessFunctionalComponent;
class WithTheme extends react_1.default.Component {
constructor() {
super(...arguments);
this.state = {};
this.unsubscribeId = -1;
}
componentWillMount() {
const { defaultProps } = this.constructor;
const styledContext = this.context[ThemeProvider_1.CHANNEL_NEXT];
const themeProp = determineTheme_1.default(this.props, undefined, defaultProps);
if (styledContext === undefined &&
themeProp === undefined &&
process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps');
}
else if (styledContext === undefined && themeProp !== undefined) {
this.setState({ theme: themeProp });
}
else {
const { subscribe } = styledContext;
this.unsubscribeId = subscribe(nextTheme => {
const theme = determineTheme_1.default(this.props, nextTheme, defaultProps);
this.setState({ theme });
});
}
}
componentWillReceiveProps(nextProps) {
const { defaultProps } = this.constructor;
this.setState(oldState => {
const theme = determineTheme_1.default(nextProps, oldState.theme, defaultProps);
return { theme };
});
}
componentWillUnmount() {
if (this.unsubscribeId !== -1) {
this.context[ThemeProvider_1.CHANNEL_NEXT].unsubscribe(this.unsubscribeId);
}
}
render() {
const props = Object.assign({ theme: this.state.theme }, this.props);
if (!shouldSetInnerRef) {
props.ref = props.innerRef;
delete props.innerRef;
}
return react_1.default.createElement(Component, Object.assign({}, props));
}
}
WithTheme.displayName = `WithTheme(${componentName})`;
// NOTE: This is so that isStyledComponent passes for the innerRef unwrapping
WithTheme.styledComponentId = 'withTheme';
WithTheme.contextTypes = {
[ThemeProvider_1.CHANNEL]: prop_types_1.default.func,
[ThemeProvider_1.CHANNEL_NEXT]: ThemeProvider_1.CONTEXT_CHANNEL_SHAPE,
};
return hoist_non_react_statics_1.default(WithTheme, Component);
};
exports.default = wrapWithTheme;
//# sourceMappingURL=withTheme.js.map