reflexy/utils.js

Flexbox layout react components

import '@js-toolkit/utils/types';
import { hasIn } from '@js-toolkit/utils/hasIn';
export function defaultClassNameTransformer(calcClassName, userClassName) {
    if (calcClassName && userClassName)
        return `${calcClassName} ${userClassName}`;
    return userClassName || calcClassName;
}
export function defaultStyleTransformer(calcStyle, userStyle) {
    if (userStyle && calcStyle)
        return { ...calcStyle, ...userStyle };
    return userStyle ?? calcStyle;
}
export function getCssValue(space, unit) {
    const value = typeof unit === 'number' ? space * unit : space;
    const cssUnit = typeof unit === 'number' ? 'px' : unit;
    return `${value}${cssUnit}`;
}
export function getAbsSpaceSize(size) {
    if (size.startsWith('-'))
        return size.substring(1);
    return size;
}
export function getSpaceSizeMultiplier(size, sizeMultipliers) {
    return typeof size === 'number' ? size : sizeMultipliers[getAbsSpaceSize(size)];
}
export function getSpace(space, defaultSpace) {
    if (space === true)
        return defaultSpace;
    return space === false ? 0 : space;
}
export function spaceToCssValue(size, sizeMultipliersOrDefaults, unit0) {
    const [sizeMultipliers, unit] = hasIn(sizeMultipliersOrDefaults, 'defaultUnit')
        ? [sizeMultipliersOrDefaults.defaultSizes, sizeMultipliersOrDefaults.defaultUnit]
        : [sizeMultipliersOrDefaults, unit0];
    if (typeof size === 'string') {
        if (size.startsWith('-'))
            return `-${getCssValue(sizeMultipliers[size.substring(1)], unit)}`;
        return getCssValue(sizeMultipliers[size], unit);
    }
    return getCssValue(size, unit);
}
export function gapToCssValue(gap, sizeMultipliersOrDefaults, unit) {
    if (typeof gap === 'string' && gap.length >= 3) {
        const parts = gap.split(' ');
        if (parts.length >= 2) {
            const [row, col] = parts;
            const rowSpace = (Number.isFinite(+row) ? +row : row);
            const colSpace = (Number.isFinite(+col) ? +col : col);
            const rowCss = spaceToCssValue(rowSpace, sizeMultipliersOrDefaults, unit);
            const colCss = spaceToCssValue(colSpace, sizeMultipliersOrDefaults, unit);
            return `${rowCss} ${colCss}`;
        }
    }
    return spaceToCssValue(gap, sizeMultipliersOrDefaults, unit);
}
export function fillToCssValue(propValue) {
    return typeof propValue === 'number'
        ? `${Math.min(propValue, 1) * 100}%`
        : (propValue && '100%') || undefined;
}
export function scrollableToCssValue(scrollableValue) {
    return typeof scrollableValue === 'string'
        ? scrollableValue
        : (scrollableValue === true && 'auto') || (scrollableValue === false && 'hidden') || undefined;
}