styled-responsive/dist/index.js

Responsive helpers for :nail_care: styled-components. Mobile-first and react-native ready.

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define(['exports', 'styled-components', './defaultBreakpoints', './mapTranslator'], factory);
    } else if (typeof exports !== "undefined") {
        factory(exports, require('styled-components'), require('./defaultBreakpoints'), require('./mapTranslator'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod.exports, global.styledComponents, global.defaultBreakpoints, global.mapTranslator);
        global.index = mod.exports;
    }
})(this, function (exports, _styledComponents, _defaultBreakpoints, _mapTranslator) {
    'use strict';

    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    exports.media = exports.mediaFromProps = undefined;

    var _templateObject = _taggedTemplateLiteral(['', ''], ['', '']),
        _templateObject2 = _taggedTemplateLiteral(['@media ', ' {\n        ', '\n    }'], ['@media ', ' {\n        ', '\n    }']);

    function _taggedTemplateLiteral(strings, raw) {
        return Object.freeze(Object.defineProperties(strings, {
            raw: {
                value: Object.freeze(raw)
            }
        }));
    }

    var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
        return typeof obj;
    } : function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };

    function _objectWithoutProperties(obj, keys) {
        var target = {};

        for (var i in obj) {
            if (keys.indexOf(i) >= 0) continue;
            if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
            target[i] = obj[i];
        }

        return target;
    }

    /**
    * @param   {object}    breakpoints - Object of custom breakpoints
    * @param   {object}    translatorFunc - Object of custom translator function
    * @param   {object}    component props - Props
    * @returns {*} - Returns a css() stylesheet
    */
    var mediaFromProps = function mediaFromProps() {
        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
            _ref$breakpoints = _ref.breakpoints,
            breakpoints = _ref$breakpoints === undefined ? _defaultBreakpoints.defaultBreakpoints : _ref$breakpoints,
            _ref$translatorFunc = _ref.translatorFunc,
            translatorFunc = _ref$translatorFunc === undefined ? _mapTranslator.mapTranslator : _ref$translatorFunc;

        var _ref2 = arguments.length <= 1 ? undefined : arguments[1],
            children = _ref2.children,
            theme = _ref2.theme,
            style = _ref2.style,
            otherProps = _objectWithoutProperties(_ref2, ['children', 'theme', 'style']);

        var mediaObject = {};
        var translatedMediaObject = {};
        var cssProperties = void 0;
        var result = '';

        Object.keys(breakpoints).forEach(function (breakpointName) {
            if (!(breakpointName in mediaObject)) {
                mediaObject[breakpointName] = {};
            }
            Object.keys(otherProps).filter(function (prop) {
                return prop.slice(0, breakpointName.length) === breakpointName;
            }).forEach(function (inputProperty) {
                var propValue = otherProps[inputProperty];
                if ((typeof propValue === 'undefined' ? 'undefined' : _typeof(propValue)) === 'object') {
                    mediaObject[breakpointName] = propValue;
                } else {
                    mediaObject[breakpointName][inputProperty.slice(breakpointName.length, inputProperty.length)] = propValue;
                }
            });

            if (typeof translatorFunc === 'function') {
                translatedMediaObject = Object.assign({}, translatorFunc(Object.assign({}, mediaObject[breakpointName])));
            } else {
                translatedMediaObject = Object.assign({}, mediaObject[breakpointName]);
            }

            cssProperties = (0, _styledComponents.css)(_templateObject, translatedMediaObject);
            result += '@media ' + breakpoints[breakpointName] + ' { ' + cssProperties + ' }';
        });
        return (0, _styledComponents.css)(_templateObject, result);
    };
    exports.mediaFromProps = mediaFromProps;


    /**
    * @param   {string}    name - Breakpoints name tag
    * @param   {object}    breakpoints - Object of custom breakpoints
    * @returns {*} - Returns a css() stylesheet
    */
    var media = function media(name) {
        var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultBreakpoints.defaultBreakpoints;

        var query = breakpoints[name];
        return function () {
            return (0, _styledComponents.css)(_templateObject2, query, _styledComponents.css.apply(undefined, arguments));
        };
    };
    exports.media = media;
});