@tkirk1/react-native-grid2/lib/utils/styleCache.js

Cross-platform MUI Grid v2 implementation for React Native. Drop-in replacement for Material-UI Grid with breakpoint-aware responsive layouts, TypeScript support, and mobile-first design.

import { I18nManager } from 'react-native';
// Cache for memoized styles to improve performance
const styleCache = new Map();
/**
 * Generates and caches item styles based on span, columns, and spacing
 */
export const getItemStyles = (span, columns, columnSpacing, rowSpacing, direction) => {
    const cacheKey = `${span}-${columns}-${columnSpacing}-${rowSpacing}-${direction}-${I18nManager.isRTL}`;
    if (styleCache.has(cacheKey)) {
        return styleCache.get(cacheKey);
    }
    const isRow = direction === 'row' || direction === 'row-reverse';
    // Calculate flex basis as percentage
    const widthPercentage = (span / columns) * 100;
    // Calculate padding based on direction
    const horizontalPadding = isRow ? columnSpacing / 2 : 0;
    const verticalPadding = !isRow ? rowSpacing / 2 : 0;
    const styles = {
        flexBasis: `${widthPercentage}%`,
        maxWidth: `${widthPercentage}%`,
        paddingHorizontal: horizontalPadding,
        paddingVertical: verticalPadding,
        ...(I18nManager.isRTL && isRow && {
            // RTL support: swap padding for horizontal layouts
            paddingLeft: horizontalPadding,
            paddingRight: horizontalPadding,
        }),
    };
    // Cache the computed styles
    styleCache.set(cacheKey, styles);
    return styles;
};
/**
 * Clears the style cache (useful for testing or memory management)
 */
export const clearStyleCache = () => {
    styleCache.clear();
};
/**
 * Gets the current cache size (useful for debugging)
 */
export const getStyleCacheSize = () => {
    return styleCache.size;
};
//# sourceMappingURL=styleCache.js.map