react-theme-provider/dist/react-theme-provider.js

The part of 'React Theming' project

"use strict";

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

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var defaultTheme = {
    palette: {
        "primary1Color": "#00bcd4", "primary2Color": "#d9a3ea", "primary3Color": "#bdbdbd", "accent1Color": "#ff4081", "accent2Color": "#f5f5f5", "accent3Color": "#9e9e9e", "textColor": "rgba(0, 0, 0, 0.87)", "secondaryTextColor": "rgba(0, 0, 0, 0.54)", "alternateTextColor": "#ffffff", "canvasColor": "#ffffff", "borderColor": "#e0e0e0", "disabledColor": "rgba(0, 0, 0, 0.3)", "pickerHeaderColor": "#00bcd4", "clockCircleColor": "rgba(0, 0, 0, 0.07)", "shadowColor": "rgba(0, 0, 0, 1)"
    }
};

var propTypes = {
    setCSS: _react2.default.PropTypes.func,
    CSSLink: _react2.default.PropTypes.func,
    themes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.object),
    themeInd: _react2.default.PropTypes.number,
    override: _react2.default.PropTypes.bool,
    className: _react2.default.PropTypes.string
};

var defaultProps = {
    themeInd: 0,
    themes: [defaultTheme]
};

var contextTypes = {
    muiTheme: _react2.default.PropTypes.object
};

var childContextTypes = {
    muiTheme: _react2.default.PropTypes.object
};

var ThemeProvider = function (_React$Component) {
    (0, _inherits3.default)(ThemeProvider, _React$Component);

    function ThemeProvider(props) {
        var _ref;

        (0, _classCallCheck3.default)(this, ThemeProvider);

        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            args[_key - 1] = arguments[_key];
        }

        //        this.state = {
        //            themeInd: props.themeInd || 0,
        //        };
        //        this.state.currentTheme = props.themes[props.themeInd];

        var _this = (0, _possibleConstructorReturn3.default)(this, (_ref = ThemeProvider.__proto__ || (0, _getPrototypeOf2.default)(ThemeProvider)).call.apply(_ref, [this, props].concat(args)));

        _this.setCSS = props.setCSS || setCSS;
        _this.CSSLink = props.CSSLink || CSSLink;
        _this.className = props.className || 'react-theme-provider';
        return _this;
    }

    (0, _createClass3.default)(ThemeProvider, [{
        key: "getChildContext",
        value: function getChildContext() {
            if (this.context.muiTheme && !this.props.override) {
                return;
            }
            return { muiTheme: this.props.themes[this.props.themeInd] };
        }
    }, {
        key: "render",
        value: function render() {

            var currentTheme = this.context.muiTheme ? this.context.muiTheme : this.props.themes[this.props.themeInd];
            var palette = currentTheme.palette;

            //        const palette = this.context.muiTheme ? this.context.muiTheme.palette : this.state.currentTheme.palette;

            var CSSstyles = this.setCSS(palette, this.className);

            return _react2.default.createElement(
                "div",
                { className: this.className },
                this.CSSLink(CSSstyles),
                _react2.default.createElement(
                    "div",
                    null,
                    this.props.children
                )
            );
        }
    }]);
    return ThemeProvider;
}(_react2.default.Component);

exports.default = ThemeProvider;


ThemeProvider.propTypes = propTypes;
ThemeProvider.defaultProps = defaultProps;
ThemeProvider.contextTypes = contextTypes;
ThemeProvider.childContextTypes = childContextTypes;

function setCSS(palette, className) {
    var style = "\n." + className + " div {\n    color: " + palette.textColor + ";\n    background-color: " + palette.canvasColor + ";\n    border-width: 1px;\n    border-color: " + palette.borderColor + ";\n    font-family: Roboto, sans-serif;\n    font-size: 12px;\n}\n\n." + className + " a {\n    color: " + palette.primary1Color + ";\n}\n\n." + className + " span {\n    color: " + palette.accent1Color + ";\n}\n\n." + className + " ::selection {\n    background: " + palette.primary2Color + ";\n}\n";
    return style;
}

function CSSLink(CSSdata) {
    return _react2.default.createElement("link", {
        rel: "stylesheet",
        type: "text/css",
        href: "data:text/css," + CSSdata
    });
}