@brizy/ui/es/Card/utils.js

React elements in Brizy style

import { getHexByColorType } from "../utils/colors";
import { BRZ_PREFIX } from "../constants";
const getPropertyByDevice = (device) => {
    switch (device) {
        case "desktop":
            return [
                `--${BRZ_PREFIX}-card-custom-size-desktop-top`,
                `--${BRZ_PREFIX}-card-custom-size-desktop-right`,
                `--${BRZ_PREFIX}-card-custom-size-desktop-bottom`,
                `--${BRZ_PREFIX}-card-custom-size-desktop-left`,
            ];
        case "tablet":
            return [
                `--${BRZ_PREFIX}-card-custom-size-tablet-top`,
                `--${BRZ_PREFIX}-card-custom-size-tablet-right`,
                `--${BRZ_PREFIX}-card-custom-size-tablet-bottom`,
                `--${BRZ_PREFIX}-card-custom-size-tablet-left`,
            ];
        case "mobile":
            return [
                `--${BRZ_PREFIX}-card-custom-size-mobile-top`,
                `--${BRZ_PREFIX}-card-custom-size-mobile-right`,
                `--${BRZ_PREFIX}-card-custom-size-mobile-bottom`,
                `--${BRZ_PREFIX}-card-custom-size-mobile-left`,
            ];
    }
};
export const getCustomSize = (data) => {
    const sizes = Array.isArray(data) ? data : [data];
    const _data = {};
    sizes.forEach((size, key) => {
        const device = key === 0 ? "desktop" : key === 1 ? "tablet" : "mobile";
        const [top, right, bottom, left] = getPropertyByDevice(device);
        if (typeof size === "number") {
            _data[top] = `${size}px`;
            _data[right] = `${size}px`;
            _data[bottom] = `${size}px`;
            _data[left] = `${size}px`;
        }
        else if (typeof size === "object" && size.custom) {
            const { custom } = size;
            if (custom.length === 2) {
                const [spaceX, spaceY] = custom;
                _data[top] = `${spaceX}px`;
                _data[right] = `${spaceY}px`;
                _data[bottom] = `${spaceX}px`;
                _data[left] = `${spaceY}px`;
            }
            if (custom.length === 3) {
                const [spaceTop, spaceY, spaceBottom] = custom;
                _data[top] = `${spaceTop}px`;
                _data[right] = `${spaceY}px`;
                _data[bottom] = `${spaceBottom}px`;
                _data[left] = `${spaceY}px`;
            }
            if (custom.length === 4) {
                const [spaceTop, spaceRight, spaceBottom, spaceLeft] = custom;
                _data[top] = `${spaceTop}px`;
                _data[right] = `${spaceRight}px`;
                _data[bottom] = `${spaceBottom}px`;
                _data[left] = `${spaceLeft}px`;
            }
        }
    });
    return _data;
};
export const getSizeResponsive = (data) => {
    const sizes = Array.isArray(data) ? data : [data];
    return sizes.map((size, key) => {
        const device = key === 0 ? "dsk" : key === 1 ? "tbl" : "mbl";
        if (typeof size === "number" || typeof size === "object") {
            return `${BRZ_PREFIX}-card-${device}-custom`;
        }
        switch (size) {
            case "xsmall":
                return `${BRZ_PREFIX}-card-${device}-xsm`;
            case "small":
                return `${BRZ_PREFIX}-card-${device}-sm`;
            default:
                return `${BRZ_PREFIX}-card-${device}-md`;
        }
    });
};
export const getHeightStyle = (height) => {
    if (height) {
        return {
            [`--${BRZ_PREFIX}-card--height`]: height,
        };
    }
    return {};
};
export const getWidthStyle = (width) => {
    return width
        ? {
            [`--${BRZ_PREFIX}-card--width`]: width,
        }
        : undefined;
};
export const getBorderStyle = (borderWidth, borderRadius, borderStyle, borderColor) => {
    if (borderWidth || borderRadius || borderStyle || borderColor) {
        const width = borderWidth ? { [`--${BRZ_PREFIX}-card-border-width`]: borderWidth } : {};
        const radius = borderRadius ? { [`--${BRZ_PREFIX}-card-border-radius`]: borderRadius } : {};
        const style = borderStyle ? { [`--${BRZ_PREFIX}-card-border-style`]: borderStyle } : {};
        const color = borderColor ? { [`--${BRZ_PREFIX}-card-border-color`]: getHexByColorType(borderColor) } : {};
        return Object.assign(Object.assign(Object.assign(Object.assign({}, width), radius), style), color);
    }
    return undefined;
};
export const getColor = (color, hoverColor) => {
    if (color || hoverColor) {
        const backgroundColor = color ? { [`--${BRZ_PREFIX}-card-background`]: getHexByColorType(color) } : {};
        const backgroundHoverColor = hoverColor
            ? { [`--${BRZ_PREFIX}-card-background-hover`]: getHexByColorType(hoverColor) }
            : {};
        return Object.assign(Object.assign({}, backgroundColor), backgroundHoverColor);
    }
};
export const getZIndexStyle = (zIndex) => {
    return zIndex
        ? {
            [`--${BRZ_PREFIX}-card--z-index`]: zIndex,
        }
        : undefined;
};