react-themable-hoc/dist/ThemableHOC.js

React higher-order-components that allow for css-in-js-style themes.

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define(['exports', 'prop-types', 'react', './ThemeManager', 'hoist-non-react-statics'], factory);
    } else if (typeof exports !== "undefined") {
        factory(exports, require('prop-types'), require('react'), require('./ThemeManager'), require('hoist-non-react-statics'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod.exports, global.propTypes, global.react, global.ThemeManager, global.hoistNonReactStatics);
        global.ThemableHOC = mod.exports;
    }
})(this, function (exports, _propTypes, _react, _ThemeManager, _hoistNonReactStatics) {
    'use strict';

    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    exports.default = themed;

    var _propTypes2 = _interopRequireDefault(_propTypes);

    var _react2 = _interopRequireDefault(_react);

    var _ThemeManager2 = _interopRequireDefault(_ThemeManager);

    var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

    function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }

    var _extends = Object.assign || function (target) {
        for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];

            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key];
                }
            }
        }

        return target;
    };

    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }

    var _createClass = function () {
        function defineProperties(target, props) {
            for (var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if ("value" in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor);
            }
        }

        return function (Constructor, protoProps, staticProps) {
            if (protoProps) defineProperties(Constructor.prototype, protoProps);
            if (staticProps) defineProperties(Constructor, staticProps);
            return Constructor;
        };
    }();

    function _possibleConstructorReturn(self, call) {
        if (!self) {
            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
        }

        return call && (typeof call === "object" || typeof call === "function") ? call : self;
    }

    function _inherits(subClass, superClass) {
        if (typeof superClass !== "function" && superClass !== null) {
            throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
        }

        subClass.prototype = Object.create(superClass && superClass.prototype, {
            constructor: {
                value: subClass,
                enumerable: false,
                writable: true,
                configurable: true
            }
        });
        if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
    }

    function getBaseClass(isPure) {
        return isPure ? _react2.default.PureComponent : _react2.default.Component;
    }

    /**
     * Themable HOC to provide themed stylesheets for a component
     * @param {*} createStyles Function that takes the current theme and the props passed
     * to this component, and returns an object with properties for each set of styles.
     * @param {*} options Options for creating the HOC
     */
    function themed(createStyles) {
        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

        return function (WrappedComponent) {
            var BaseClass = getBaseClass(options.pure);

            var ThemableHOC = function (_BaseClass) {
                _inherits(ThemableHOC, _BaseClass);

                function ThemableHOC(props, context) {
                    _classCallCheck(this, ThemableHOC);

                    var _this = _possibleConstructorReturn(this, (ThemableHOC.__proto__ || Object.getPrototypeOf(ThemableHOC)).call(this, props, context));

                    if (context.subscribeToTheme) {
                        context.subscribeToTheme(_this.onThemeChange.bind(_this));
                    } else {
                        console.warn('Could not find function "subscribeToTheme" in the context');
                    }

                    _this.state = {
                        stylesToPass: _this.getThemedStyles(context.theme)
                    };
                    return _this;
                }

                _createClass(ThemableHOC, [{
                    key: 'render',
                    value: function render() {
                        var stylesToPass = this.state.stylesToPass;

                        var extraProps = {
                            ref: this.props.innerRef,
                            classNames: stylesToPass
                        };

                        return _react2.default.createElement(WrappedComponent, _extends({}, this.props, extraProps));
                    }
                }, {
                    key: 'onThemeChange',
                    value: function onThemeChange(theme) {
                        this.setState({ stylesToPass: this.getThemedStyles(theme) });
                    }
                }, {
                    key: 'getThemedStyles',
                    value: function getThemedStyles(theme) {
                        // Allow users to pass a POJO instead of a function if
                        // the styles aren't reliant upon the theme or props
                        var styles = typeof createStyles === 'function' ? createStyles(theme, this.props) : createStyles || {};

                        return _ThemeManager2.default.css(styles);
                    }
                }]);

                return ThemableHOC;
            }(BaseClass);

            ThemableHOC.contextTypes = {
                theme: _propTypes2.default.object,
                subscribeToTheme: _propTypes2.default.func
            };

            var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Unknown';
            ThemableHOC.displayName = 'Themed(' + componentName + ')';

            return (0, _hoistNonReactStatics2.default)(ThemableHOC, WrappedComponent);
        };
    }
});