react-themable-hoc/dist/themed.js

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

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

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

    var _propTypes2 = _interopRequireDefault(_propTypes);

    var _react2 = _interopRequireDefault(_react);

    var _ThemeEvents2 = _interopRequireDefault(_ThemeEvents);

    var _ThemeManager2 = _interopRequireDefault(_ThemeManager);

    var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

    var _shallowequal2 = _interopRequireDefault(_shallowequal);

    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 _defineProperty(obj, key, value) {
        if (key in obj) {
            Object.defineProperty(obj, key, {
                value: value,
                enumerable: true,
                configurable: true,
                writable: true
            });
        } else {
            obj[key] = value;
        }

        return obj;
    }

    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 _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
            pure = _ref.pure,
            shouldUpdateStyles = _ref.shouldUpdateStyles,
            _ref$classesPropName = _ref.classesPropName,
            classesPropName = _ref$classesPropName === undefined ? 'classNames' : _ref$classesPropName;

        return function (WrappedComponent) {
            var dependsOnProps = createStyles.length > 1;
            var BaseClass = getBaseClass(pure);

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

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

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

                    _this.unsubscribeFromTheme = _ThemeEvents2.default.subscribe(_events.ON_THEME_CHANGE, _this.onThemeChange.bind(_this));

                    _this.state = {
                        stylesToPass: _this.getThemedStyles(_ThemeManager2.default.getCurrentTheme())
                    };
                    return _this;
                }

                _createClass(ThemableHOC, [{
                    key: 'componentWillReceiveProps',
                    value: function componentWillReceiveProps(nextProps) {
                        if (dependsOnProps) {
                            // Use shouldUpdateStyles if available.
                            // If pure, perform shallow equal comparison on the props
                            var willUpdateStyles = shouldUpdateStyles ? shouldUpdateStyles(this.props, nextProps) : pure ? (0, _shallowequal2.default)(nextProps, this.props) : true;
                            if (willUpdateStyles) {
                                this.setState({ stylesToPass: this.getThemedStyles(_ThemeManager2.default.getCurrentTheme(), nextProps) });
                            }
                        }
                    }
                }, {
                    key: 'componentWillUnmount',
                    value: function componentWillUnmount() {
                        if (this.unsubscribeFromTheme) {
                            this.unsubscribeFromTheme();
                        }
                    }
                }, {
                    key: 'render',
                    value: function render() {
                        var stylesToPass = this.state.stylesToPass;

                        var extraProps = _defineProperty({
                            ref: this.props.innerRef
                        }, classesPropName, 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) {
                        var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props;

                        // 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, props) : createStyles;

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

                return ThemableHOC;
            }(BaseClass);

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

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