react-themable-hoc/dist/stories/components/StyledWithProps.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', '../../themed'], factory);
    } else if (typeof exports !== "undefined") {
        factory(exports, require('prop-types'), require('react'), require('../../themed'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod.exports, global.propTypes, global.react, global.themed);
        global.StyledWithProps = mod.exports;
    }
})(this, function (exports, _propTypes, _react, _themed) {
    'use strict';

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

    var PropTypes = _interopRequireWildcard(_propTypes);

    var _react2 = _interopRequireDefault(_react);

    var _themed2 = _interopRequireDefault(_themed);

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

    function _interopRequireWildcard(obj) {
        if (obj && obj.__esModule) {
            return obj;
        } else {
            var newObj = {};

            if (obj != null) {
                for (var key in obj) {
                    if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
                }
            }

            newObj.default = obj;
            return newObj;
        }
    }

    var StyledWithProps = function StyledWithProps(_ref) {
        var classNames = _ref.classNames;
        return _react2.default.createElement(
            'div',
            { className: classNames.styles },
            'This stylesheet used for this component uses the \'color\' prop '
        );
    };

    StyledWithProps.propTypes = {
        color: PropTypes.string.isRequired
    };
    StyledWithProps.displayName = 'StyledWithProps';

    exports.default = (0, _themed2.default)(function (theme, props) {
        return {
            styles: {
                textAlign: 'center',
                backgroundColor: props.color
            }
        };
    })(StyledWithProps);
});