Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
view-container / dist / hoc / withTheme.js
Size: Mime:
"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