@brizy/ui/es/Inline/getData.js

React elements in Brizy style

import { classNames } from "../classNamesFn";
import { BRZ_PREFIX } from "../constants";
export function getAlign(align) {
    const aligns = Array.isArray(align) ? align : [align];
    const className = aligns.map((align, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        switch (align) {
            case "left":
                return `${BRZ_PREFIX}-${device}-al-lf`;
            case "center":
                return `${BRZ_PREFIX}-${device}-al-ct`;
            case "right":
                return `${BRZ_PREFIX}-${device}-al-rt`;
            case "between":
                return `${BRZ_PREFIX}-${device}-al-bet`;
            default:
                return "";
        }
    });
    return classNames(className)();
}
export function getMargin(spacing) {
    const space = Array.isArray(spacing) ? spacing : [spacing];
    const className = space.map((el, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        if (typeof el === "number") {
            return `${BRZ_PREFIX}-${device}-mr-cs`;
        }
        switch (el) {
            case "middle":
                return `${BRZ_PREFIX}-${device}-mr-md`;
            case "gutter":
                return `${BRZ_PREFIX}-${device}-mr-gt`;
            case "xxsmall":
                return `${BRZ_PREFIX}-${device}-mr-xxsm`;
            case "xsmall":
                return `${BRZ_PREFIX}-${device}-mr-xsm`;
            case "small":
                return `${BRZ_PREFIX}-${device}-mr-sm`;
            case "large":
                return `${BRZ_PREFIX}-${device}-mr-lg`;
            case "xlarge":
                return `${BRZ_PREFIX}-${device}-mr-xlg`;
            case "xxlarge":
                return `${BRZ_PREFIX}-${device}-mr-xxlg`;
            case "none":
                return `${BRZ_PREFIX}-${device}-mr-none`;
            default:
                return "";
        }
    });
    return classNames(className)();
}
export function getAlignY(alignY) {
    const _alignY = Array.isArray(alignY) ? alignY : [alignY];
    const className = _alignY.map((el, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        switch (el) {
            case "top":
                return `${BRZ_PREFIX}-${device}-alY-tp`;
            case "center":
                return `${BRZ_PREFIX}-${device}-alY-ct`;
            case "bottom":
                return `${BRZ_PREFIX}-${device}-alY-bt`;
            default:
                return "";
        }
    });
    return classNames(className)();
}
export function getSpacing(spacing) {
    const space = Array.isArray(spacing) ? spacing : [spacing];
    const className = space.map((el, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        if (typeof el === "number") {
            return `${BRZ_PREFIX}-${device}-sp-cs`;
        }
        switch (el) {
            case "middle":
                return `${BRZ_PREFIX}-${device}-sp-md`;
            case "gutter":
                return `${BRZ_PREFIX}-${device}-sp-gt`;
            case "xxsmall":
                return `${BRZ_PREFIX}-${device}-sp-xxsm`;
            case "xsmall":
                return `${BRZ_PREFIX}-${device}-sp-xsm`;
            case "small":
                return `${BRZ_PREFIX}-${device}-sp-sm`;
            case "large":
                return `${BRZ_PREFIX}-${device}-sp-lg`;
            case "xlarge":
                return `${BRZ_PREFIX}-${device}-sp-xlg`;
            case "xxlarge":
                return `${BRZ_PREFIX}-${device}-sp-xxlg`;
            case "none":
                return `${BRZ_PREFIX}-${device}-sp-none`;
            default:
                return `${BRZ_PREFIX}-${device}-sp-none`;
        }
    });
    return classNames(className)();
}
const getPropertySpacingByDevice = (device) => {
    switch (device) {
        case "desktop":
            return `--${BRZ_PREFIX}-inline--desktop-spacing-custom`;
        case "tablet":
            return `--${BRZ_PREFIX}-inline--tablet-spacing-custom`;
        case "mobile":
            return `--${BRZ_PREFIX}-inline--mobile-spacing-custom`;
    }
};
export function getCustomSpacingStyles(spacing) {
    const space = Array.isArray(spacing) ? spacing : [spacing];
    const data = {};
    space.forEach((item, key) => {
        const device = key === 0 ? "desktop" : key === 1 ? "tablet" : "mobile";
        if (typeof item === "number") {
            data[getPropertySpacingByDevice(device)] = `${item}px`;
        }
    });
    return data;
}
const getPropertyColumnsByDevice = (device) => {
    switch (device) {
        case "desktop":
            return `--${BRZ_PREFIX}-inline--desktop-columns`;
        case "tablet":
            return `--${BRZ_PREFIX}-inline--tablet-columns`;
        case "mobile":
            return `--${BRZ_PREFIX}-inline--mobile-columns`;
    }
};
export function getCustomColumnsStyles(columns) {
    const _columns = Array.isArray(columns) ? columns : [columns];
    const data = {};
    _columns.forEach((item, key) => {
        const device = key === 0 ? "desktop" : key === 1 ? "tablet" : "mobile";
        if (typeof item === "number") {
            data[getPropertyColumnsByDevice(device)] = `${100 / item}%`;
        }
    });
    return data;
}