twrnc/dist/esm/helpers.js

simple, expressive API for tailwindcss + react-native

var _a;
import { Unit } from './types';
export function complete(style) {
    return { kind: `complete`, style };
}
export function parseNumericValue(value, context = {}) {
    const { fractions } = context;
    if (fractions && value.includes(`/`)) {
        const [numerator = ``, denominator = ``] = value.split(`/`, 2);
        const parsedNumerator = parseNumericValue(numerator);
        const parsedDenominator = parseNumericValue(denominator);
        if (!parsedNumerator || !parsedDenominator) {
            return null;
        }
        return [parsedNumerator[0] / parsedDenominator[0], parsedDenominator[1]];
    }
    const number = parseFloat(value);
    if (Number.isNaN(number)) {
        return null;
    }
    const match = value.match(/(([a-z]{2,}|%))$/);
    if (!match) {
        return [number, Unit.none];
    }
    switch (match === null || match === void 0 ? void 0 : match[1]) {
        case `rem`:
            return [number, Unit.rem];
        case `px`:
            return [number, Unit.px];
        case `em`:
            return [number, Unit.em];
        case `%`:
            return [number, Unit.percent];
        case `vw`:
            return [number, Unit.vw];
        case `vh`:
            return [number, Unit.vh];
        default:
            return null;
    }
}
export function getCompleteStyle(prop, value, context = {}) {
    const styleVal = parseStyleVal(value, context);
    return styleVal === null ? null : complete({ [prop]: styleVal });
}
export function mergeStyle(prop, value, style) {
    const styleVal = parseStyleVal(value);
    if (styleVal !== null) {
        style[prop] = styleVal;
    }
    return style;
}
export function getStyle(prop, value) {
    const styleVal = parseStyleVal(value);
    return styleVal === null ? null : { [prop]: styleVal };
}
export function parseStyleVal(value, context = {}) {
    if (value === undefined) {
        return null;
    }
    const parsed = parseNumericValue(String(value), context);
    if (parsed) {
        return toStyleVal(...parsed, context);
    }
    else {
        return null;
    }
}
export function toStyleVal(number, unit, context = {}) {
    const { isNegative, device } = context;
    switch (unit) {
        case Unit.rem:
            return number * 16 * (isNegative ? -1 : 1);
        case Unit.px:
            return number * (isNegative ? -1 : 1);
        case Unit.percent:
            return `${isNegative ? `-` : ``}${number}%`;
        case Unit.none:
            return number * (isNegative ? -1 : 1);
        case Unit.vw:
            if (!(device === null || device === void 0 ? void 0 : device.windowDimensions)) {
                warn(`\`vw\` CSS unit requires configuration with \`useDeviceContext()\``);
                return null;
            }
            return device.windowDimensions.width * (number / 100);
        case Unit.vh:
            if (!(device === null || device === void 0 ? void 0 : device.windowDimensions)) {
                warn(`\`vh\` CSS unit requires configuration with \`useDeviceContext()\``);
                return null;
            }
            return device.windowDimensions.height * (number / 100);
        default:
            return null;
    }
}
export function toPx(value) {
    const parsed = parseNumericValue(value);
    if (!parsed) {
        return null;
    }
    const [number, unit] = parsed;
    switch (unit) {
        case Unit.rem:
            return number * 16;
        case Unit.px:
            return number;
        default:
            return null;
    }
}
const DIR_MAP = {
    t: `Top`,
    tr: `TopRight`,
    tl: `TopLeft`,
    b: `Bottom`,
    br: `BottomRight`,
    bl: `BottomLeft`,
    l: `Left`,
    r: `Right`,
    x: `Horizontal`,
    y: `Vertical`,
};
export function getDirection(string) {
    return DIR_MAP[string !== null && string !== void 0 ? string : ``] || `All`;
}
export function parseAndConsumeDirection(utilityFragment) {
    let direction = `All`;
    const consumed = utilityFragment.replace(/^-(t|b|r|l|tr|tl|br|bl)(-|$)/, (_, dir) => {
        direction = getDirection(dir);
        return ``;
    });
    return [consumed, direction];
}
export function parseUnconfigged(value, context = {}) {
    if (value.includes(`/`)) {
        const style = unconfiggedStyleVal(value, { ...context, fractions: true });
        if (style)
            return style;
    }
    if (value[0] === `[`) {
        value = value.slice(1, -1);
    }
    return unconfiggedStyleVal(value, context);
}
export function unconfiggedStyle(prop, value, context = {}) {
    const styleVal = parseUnconfigged(value, context);
    if (styleVal === null) {
        return null;
    }
    return complete({ [prop]: styleVal });
}
function unconfiggedStyleVal(value, context = {}) {
    if (value === `px`) {
        return 1;
    }
    const parsed = parseNumericValue(value, context);
    if (!parsed) {
        return null;
    }
    let [number, unit] = parsed;
    if (context.fractions) {
        unit = Unit.percent;
        number *= 100;
    }
    // not sure if this is the right approach, but this allows arbitrary
    // non-bracket numbers, like top-73 and it INFERS the meaning to be
    // tailwind's default scale for spacing, which is 1 = 0.25rem
    if (unit === Unit.none) {
        number = number / 4;
        unit = Unit.rem;
    }
    return toStyleVal(number, unit, context);
}
function consoleWarn(...args) {
    console.warn(...args); // eslint-disable-line no-console
}
function noopWarn(..._) {
    // ¯\_(ツ)_/¯
}
export const warn = typeof process === `undefined` || ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.JEST_WORKER_ID) === undefined
    ? consoleWarn
    : noopWarn;