styled-responsive/dist/mapTranslator.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'], factory);
    } else if (typeof exports !== "undefined") {
        factory(exports);
    } else {
        var mod = {
            exports: {}
        };
        factory(mod.exports);
        global.mapTranslator = mod.exports;
    }
})(this, function (exports) {
    'use strict';

    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    function mapTranslator(cssObj) {
        var result = {};
        var dictionary = {
            m: function m(v) {
                return { 'margin': v };
            },
            mv: function mv(v) {
                return { 'marginTop': v, 'marginBottom': v };
            },
            mh: function mh(v) {
                return { 'marginLeft': v, 'marginRight': v };
            },
            mt: function mt(v) {
                return { 'marginTop': v };
            },
            ml: function ml(v) {
                return { 'marginLeft': v };
            },
            mb: function mb(v) {
                return { 'marginBottom': v };
            },
            mr: function mr(v) {
                return { 'marginRight': v };
            },
            p: function p(v) {
                return { 'padding': v };
            },
            pv: function pv(v) {
                return { 'paddingTop': v, 'paddingBottom': v };
            },
            ph: function ph(v) {
                return { 'paddingLeft': v, 'paddingRight': v };
            },
            pt: function pt(v) {
                return { 'paddingTop': v };
            },
            pl: function pl(v) {
                return { 'paddingLeft': v };
            },
            pb: function pb(v) {
                return { 'paddingBottom': v };
            },
            pr: function pr(v) {
                return { 'paddingRight': v };
            },
            b: function b(v) {
                return { 'border': v };
            },
            bv: function bv(v) {
                return { 'borderTop': v, 'borderBottom': v };
            },
            bh: function bh(v) {
                return { 'borderLeft': v, 'borderRight': v };
            },
            bt: function bt(v) {
                return { 'borderTop': v };
            },
            bl: function bl(v) {
                return { 'borderLeft': v };
            },
            bb: function bb(v) {
                return { 'borderBottom': v };
            },
            br: function br(v) {
                return { 'borderRight': v };
            },
            justifyStart: function justifyStart(v) {
                return { 'justifyContent': v && 'flex-start' };
            },
            justifyCenter: function justifyCenter(v) {
                return { 'justifyContent': v && 'center' };
            },
            justifyEnd: function justifyEnd(v) {
                return { 'justifyContent': v && 'flex-end' };
            },
            justifySpaceAround: function justifySpaceAround(v) {
                return { 'justifyContent': v && 'space-around' };
            },
            justifySpaceBetween: function justifySpaceBetween(v) {
                return { 'justifyContent': v && 'space-between' };
            },
            wrapStart: function wrapStart(v) {
                return { 'justifyItems': v && 'flex-start' };
            },
            wrapCenter: function wrapCenter(v) {
                return { 'justifyItems': v && 'center' };
            },
            wrapEnd: function wrapEnd(v) {
                return { 'justifyItems': v && 'flex-end' };
            },
            wrapSpaceAround: function wrapSpaceAround(v) {
                return { 'justifyItems': v && 'space-around' };
            },
            wrapSpaceBetween: function wrapSpaceBetween(v) {
                return { 'justifyItems': v && 'space-between' };
            },
            alignStart: function alignStart(v) {
                return { 'alignItems': v && 'flex-start' };
            },
            alignCenter: function alignCenter(v) {
                return { 'alignItems': v && 'center' };
            },
            alignEnd: function alignEnd(v) {
                return { 'alignItems': v && 'flex-end' };
            },
            alignStretch: function alignStretch(v) {
                return { 'alignItems': v && 'stretch' };
            },
            alignMeStart: function alignMeStart(v) {
                return { 'alignSelf': v && 'flex-start' };
            },
            alignMeCenter: function alignMeCenter(v) {
                return { 'alignSelf': v && 'center' };
            },
            alignMeEnd: function alignMeEnd(v) {
                return { 'alignSelf': v && 'flex-end' };
            },
            alignMeStretch: function alignMeStretch(v) {
                return { 'alignSelf': v && 'stretch' };
            },
            bg: function bg(v) {
                return { 'background': v };
            },
            bgColor: function bgColor(v) {
                return { 'backgroundColor': v };
            },
            w: function w(v) {
                return { 'width': v };
            },
            h: function h(v) {
                return { 'height': v };
            },
            minH: function minH(v) {
                return { 'min-height': v };
            },
            minW: function minW(v) {
                return { 'min-width': v };
            },
            maxW: function maxW(v) {
                return { 'max-width': v };
            },
            maxH: function maxH(v) {
                return { 'max-height': v };
            },
            hide: function hide(v) {
                return { 'display': v && 'none' };
            },
            show: function show(v) {
                return { 'display': v && 'flex' };
            },
            absolute: function absolute(v) {
                return { 'position': v && 'absolute' };
            },
            relative: function relative(v) {
                return { 'position': v && 'relative' };
            },
            column: function column(v) {
                return { 'flexDirection': v && 'column' };
            },
            row: function row(v) {
                return { 'flexDirection': v && 'row' };
            },
            wrap: function wrap(v) {
                return { 'flexWrap': v && 'wrap' };
            },
            nowrap: function nowrap(v) {
                return { 'flexWrap': v && 'nowrap' };
            },
            grow: function grow(v) {
                return { 'flexGrow': v && 1 || v };
            },
            shrink: function shrink(v) {
                return { 'flexShrink': v && 1 || v };
            },
            basis: function basis(v) {
                return { 'flexBasis': typeof v === 'undefined' && 'auto' || typeof v === 'string' && v || typeof v === 'number' && v > 0 && v < 1 && v * 100 + '%' };
            },
            scroll: function scroll(v) {
                return { 'overflow': v && 'auto' };
            }
        };

        Object.keys(cssObj).forEach(function (inputProperty) {
            var inputValue = cssObj[inputProperty];
            if (typeof dictionary[inputProperty] === 'function') {
                result = Object.assign({}, result, dictionary[inputProperty](inputValue));
            } else {
                result[inputProperty] = inputValue;
            }
        });
        return result;
    }
    exports.mapTranslator = mapTranslator;
});