@screensdev/styles/lib/commonjs/parseStyle.js

Cross-platform styles for React Native without the complexity.

"use strict";
'use client';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.parseStyle = exports.isPlatformColor = exports.isIOS = exports.isAndroid = void 0;
var _reactNative = require("react-native");
var _container = require("./container");
var _media = require("./media");
const matchBreakpoint = (key, containerWidth, screenSize, breakpoints) => {
  const containerQueryMatches = (0, _container.matchContainerQuery)(key, containerWidth);
  if (containerQueryMatches) {
    return true;
  }
  const mediaQueryMatches = (0, _media.matchMediaQuery)(key, screenSize, breakpoints);
  if (mediaQueryMatches) {
    return true;
  }
  return false;
};
const isIOS = exports.isIOS = _reactNative.Platform.OS === 'ios';
const isAndroid = exports.isAndroid = _reactNative.Platform.OS === 'android';
const isPlatformColor = value => {
  if (!value) {
    return false;
  }
  if (isIOS) {
    return 'semantic' in value && typeof value.semantic === 'object';
  }
  return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object';
};
exports.isPlatformColor = isPlatformColor;
const parseVariantStyles = (variantOptions, variantSelection, containerWidth, screenSize, breakpoints) => {
  if (!variantOptions) {
    return {};
  }

  // Fallback to default if its there
  if (!variantSelection) {
    return variantOptions?.default ? parseStyle(variantOptions.default, containerWidth, screenSize) : {};
  }
  if (typeof variantSelection !== 'object') {
    const selection = variantOptions?.[variantSelection] ?? variantOptions?.default;
    return selection ? parseStyle(selection, containerWidth, screenSize) : {};
  }
  const breakpointKeys = Object.getOwnPropertySymbols(variantSelection);
  let selectedVariantKey;
  // Find the first breakpoint that matches
  for (let i = 0; i < breakpointKeys.length; i++) {
    const currentBreakpointKey = breakpointKeys[i];
    if (!currentBreakpointKey) {
      break;
    }
    if (matchBreakpoint(currentBreakpointKey, containerWidth, screenSize, breakpoints)) {
      selectedVariantKey = variantSelection[currentBreakpointKey];
      break;
    }
  }
  const variantStyles = selectedVariantKey ? variantOptions[selectedVariantKey] : undefined;
  if (!variantStyles) {
    return variantOptions?.default ? parseStyle(variantOptions.default, containerWidth, screenSize) : {};
  }
  return parseStyle(variantStyles, containerWidth, screenSize);
};
const parseStyle = (style, containerWidth, screenSize, variantSelectionMap = {}, breakpoints) => {
  const nonResponsiveStyles = Object.entries(style || {}).reduce((acc, [key, value]) => {
    if (!value) {
      return acc;
    }
    if (key === 'variants') {
      const variantStyleSheet = value;
      return {
        ...acc,
        ...Object.keys(variantStyleSheet).reduce((allParsedVariantStyles, variantName) => ({
          ...allParsedVariantStyles,
          ...parseVariantStyles(variantStyleSheet?.[variantName], variantSelectionMap?.[variantName], containerWidth, screenSize, breakpoints)
        }), {})
      };
    }
    return {
      ...acc,
      [key]: value
    };
  }, {});
  const responsiveKeys = Object.getOwnPropertySymbols(style);
  if (!responsiveKeys.length) {
    return nonResponsiveStyles;
  }
  let responsiveStyles = {};
  responsiveKeys.forEach(query => {
    if (matchBreakpoint(query, containerWidth, screenSize, breakpoints)) {
      const matchingStyles = style[query];
      if (matchingStyles) {
        responsiveStyles = {
          ...responsiveStyles,
          ...parseStyle(matchingStyles, containerWidth, screenSize, variantSelectionMap)
        };
      }
    }
  });
  return {
    ...nonResponsiveStyles,
    ...responsiveStyles
  };
};
exports.parseStyle = parseStyle;
//# sourceMappingURL=parseStyle.js.map