twrnc/dist/esm/resolve/filter.js

simple, expressive API for tailwindcss + react-native

import { isArbitraryValue, parseNumericValue, parseStyleVal } from '../helpers';
export function filterBrightness(value, context = {}, config) {
    const styleVal = getBaseFilterStyleValue(value, context, config === null || config === void 0 ? void 0 : config[value]);
    return createStyle(`brightness`, styleVal);
}
export function filterContrast(value, context = {}, config) {
    const styleVal = getBaseFilterStyleValue(value, context, config === null || config === void 0 ? void 0 : config[value]);
    return createStyle(`contrast`, styleVal);
}
export function filterSaturate(value, context = {}, config) {
    const styleVal = getBaseFilterStyleValue(value, context, config === null || config === void 0 ? void 0 : config[value]);
    return createStyle(`saturate`, styleVal);
}
export function filterGrayscale(value, context = {}, config) {
    const parsed = value.startsWith(`-`) ? value.slice(1) : `100`;
    const styleVal = getPercentageFilterStyleValue(parsed, context, config === null || config === void 0 ? void 0 : config[value]);
    return createStyle(`grayscale`, styleVal);
}
export function filterInvert(value, context = {}, config) {
    const parsed = value.startsWith(`-`) ? value.slice(1) : `100`;
    const styleVal = getPercentageFilterStyleValue(parsed, context, config === null || config === void 0 ? void 0 : config[value]);
    return createStyle(`invert`, styleVal);
}
export function filterSepia(value, context = {}, config) {
    const parsed = value.startsWith(`-`) ? value.slice(1) : `100`;
    const styleVal = getPercentageFilterStyleValue(parsed, context, config === null || config === void 0 ? void 0 : config[value]);
    return createStyle(`sepia`, styleVal);
}
export function filterHueRotate(value, context = {}, config) {
    const configValue = config === null || config === void 0 ? void 0 : config[value];
    let styleVal;
    if (configValue) {
        styleVal = parseStyleVal(configValue, context);
    }
    else if (isArbitraryValue(value)) {
        const parsed = parseNumericValue(value.slice(1, -1));
        styleVal = parsed ? `${parsed[0]}${parsed[1]}` : null;
    }
    else {
        const parsed = parseNumericValue(value);
        styleVal = parsed ? `${parsed[0]}${parsed[1]}` : null;
    }
    return createStyle(`hueRotate`, styleVal);
}
function getBaseFilterStyleValue(value, context = {}, configValue) {
    if (configValue) {
        return parseStyleVal(configValue, context);
    }
    else if (isArbitraryValue(value)) {
        const parsed = parseNumericValue(value.slice(1, -1));
        return parsed ? parsed[0] : null;
    }
    else {
        const parsed = parseNumericValue(value);
        return parsed ? parsed[0] / 100 : null;
    }
}
function getPercentageFilterStyleValue(value, context = {}, configValue) {
    var _a;
    if (configValue) {
        const parsed = (_a = parseStyleVal(configValue, context)) === null || _a === void 0 ? void 0 : _a.toString().slice(0, -1);
        return parsed ? parseInt(parsed) / 100 : null;
    }
    else if (isArbitraryValue(value)) {
        const parsed = parseNumericValue(value.slice(1, -1));
        if (parsed === null) {
            return null;
        }
        if (Number.isInteger(parsed[0])) {
            return parsed[0] / 100;
        }
        return parsed[0];
    }
    else {
        const parsed = parseNumericValue(value);
        if (parsed === null) {
            return null;
        }
        if (Number.isInteger(parsed[0])) {
            return parsed[0] / 100;
        }
        return parsed[0];
    }
}
function createStyle(filterType, styleVal) {
    return {
        kind: `dependent`,
        complete(style) {
            updateFilterStyle(style, filterType, styleVal);
        },
    };
}
function updateFilterStyle(style, key, styleVal) {
    if (styleVal === null) {
        return;
    }
    const existingFilter = (style.filter || []);
    if (Array.isArray(existingFilter) && existingFilter) {
        style.filter = [...existingFilter, { [key]: styleVal }];
    }
    else {
        style.filter = existingFilter;
    }
}