@up-group-ui/react-controls/dist/Components/Containers/Box/styles.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSize = exports.getBoxStyles = exports.calculateFullStyle = exports.boxSizeToStyle = exports.sizeToString = exports.calculateFlexWrap = void 0;
var utils_1 = require("../../../Common/theming/utils");
var typestyle_1 = require("typestyle");
var types_1 = require("./types");
function calculateFlexWrap(wrap, reverse) {
    if (wrap && reverse) {
        return 'wrap-reverse';
    }
    else if (wrap && !reverse) {
        return 'wrap';
    }
    else {
        return 'nowrap';
    }
}
exports.calculateFlexWrap = calculateFlexWrap;
function sizeToString(size, smallSize) {
    if (smallSize === void 0) { smallSize = false; }
    var returnVal;
    if (typeof size === 'string') {
        returnVal = "" + (0, utils_1.toRem)(types_1.SIZE_MAP[size]);
    }
    else if (typeof size === 'object') {
        var horizontal = size.horizontal || 'none';
        var vertical = size.vertical || 'none';
        returnVal = (0, utils_1.toRem)(types_1.SIZE_MAP[vertical]) + " " + (0, utils_1.toRem)(types_1.SIZE_MAP[horizontal]);
    }
    else {
        returnVal = "0";
    }
    return returnVal;
}
exports.sizeToString = sizeToString;
function stringBoxStyle(size) {
    if (size === 'full') {
        return {
            width: '100vw',
            height: '100vh',
        };
    }
    else {
        return {
            width: size ? "" + (0, utils_1.toRem)(types_1.BOX_SIZE_MAP[size]) : '',
            height: size ? "" + (0, utils_1.toRem)(types_1.BOX_SIZE_MAP[size]) : '',
        };
    }
}
function objectBoxStyle(size) {
    var width = null;
    var height = null;
    if (size.vertical) {
        height = size.vertical === 'full' ? '100vh' : "" + (0, utils_1.toRem)(types_1.BOX_SIZE_MAP[size.vertical]);
    }
    if (size.horizontal) {
        width = size.horizontal === 'full' ? '100%' : "" + (0, utils_1.toRem)(types_1.BOX_SIZE_MAP[size.horizontal]);
    }
    return {
        width: width,
        height: height,
    };
}
function boxSizeToStyle(size) {
    if (typeof size === 'string') {
        return stringBoxStyle(size);
    }
    else if (typeof size === 'object') {
        return objectBoxStyle(size);
    }
}
exports.boxSizeToStyle = boxSizeToStyle;
function calculateFullStyle(full, postFix) {
    if (typeof full === 'object') {
        if (postFix === 'vw') {
            return full.horizontal ? '100%' : 'auto';
        }
        else {
            return full.vertical ? '100%' : 'auto';
        }
    }
    else if (typeof full === 'boolean') {
        return '100%';
    }
}
exports.calculateFullStyle = calculateFullStyle;
var getBoxStyles = function (props) {
    var BoxStyles = (0, typestyle_1.style)({
        display: 'flex',
        backgroundColor: props.backgroundColor,
        color: props.color,
        alignContent: props.alignContent,
        justifyContent: props.justifyContent,
        alignItems: props.alignItems,
        flexDirection: props.flexDirection,
        padding: sizeToString(props.pad),
        margin: sizeToString(props.margin),
        userSelect: props.selectable,
        flexWrap: calculateFlexWrap(props.flexWrap, props.reverse),
    });
    return BoxStyles;
};
exports.getBoxStyles = getBoxStyles;
var getSize = function (props) {
    var sizes = (0, typestyle_1.style)({
        width: props.boxSize !== 'auto' ? boxSizeToStyle(props.boxSize).width : null,
        height: props.boxSize !== 'auto' ? boxSizeToStyle(props.boxSize).height : null,
        minHeight: props.full ? calculateFullStyle(props.full, 'vh') : null,
        minWidth: props.full ? calculateFullStyle(props.full, 'vw') : null,
    });
    return props.full || props.boxSize !== 'auto' ? sizes : null;
};
exports.getSize = getSize;
//# sourceMappingURL=styles.js.map