@nfq/react-grid/dist/esm/grid/Spacer/utils.js

An fork of react-awesome-styled-grid with more screen classes and some features.

import { configCache } from '../../utils/cache.js';

const calcSpacerInline = ({
  $isInline
}) => {
  const {
    breakpointOrder
  } = configCache.get('breakpointConfig');
  if (!Array.isArray($isInline)) {
    $isInline = $isInline ? breakpointOrder : [];
  }
  let lastInline;
  const mediaQuery = breakpointOrder.map(screenSize => {
    const inline = $isInline.includes(screenSize) ? 'inline-block' : 'block';
    if (inline !== lastInline) {
      lastInline = inline;
      return `display: ${inline};`;
    }
    return null;
  });
  return mediaQuery;
};
const calcSpacerMeasures = propKey => ({
  [`$${propKey}`]: value
}) => {
  const {
    breakpointOrder
  } = configCache.get('breakpointConfig');
  if (typeof value !== 'object') {
    value = {
      xs: value
    };
  }
  const mediaQuery = breakpointOrder.map(screenSize => {
    const currentValue = value[screenSize];
    if (currentValue !== undefined) {
      return `--nfq-grid-spacer-${propKey}: ${currentValue};`;
    }
    return null;
  });
  return mediaQuery;
};
const spacerMaxCssKeys = {
  x: ['$maxX', '$x'],
  y: ['$maxY', '$y']
};
const calcSpacerMaxValues = propKey => ({
  $isNotStretching,
  ...componentProps
}) => {
  const {
    breakpointOrder
  } = configCache.get('breakpointConfig');
  let max = componentProps[spacerMaxCssKeys[propKey][0]];
  let auto = componentProps[spacerMaxCssKeys[propKey][1]];
  if (typeof auto !== 'object') {
    auto = {
      xs: auto
    };
  }
  if (typeof max !== 'object') {
    max = {
      xs: max
    };
  }
  if (!Array.isArray($isNotStretching)) {
    $isNotStretching = $isNotStretching ? breakpointOrder : [];
  }
  let lastAuto;
  let lastMax;
  let lastRealCss;
  const mediaQuery = breakpointOrder.map(screenSize => {
    const currentAuto = auto[screenSize];
    const currentMax = max[screenSize];
    const currentNoStretch = $isNotStretching.includes(screenSize);
    if (currentAuto !== undefined) {
      lastAuto = currentAuto;
    }
    if (currentMax !== undefined) {
      lastMax = currentMax;
    }
    const realMax = currentMax ?? lastMax;
    const realAuto = currentAuto ?? lastAuto;
    let realCss = null;
    if (realMax !== undefined) {
      realCss = realMax;
    } else if (currentNoStretch) {
      realCss = realAuto ?? null;
    } else if (lastRealCss) {
      realCss = 'initial';
    }
    if (realCss !== lastRealCss && realCss !== null) {
      lastRealCss = realCss;
      return `--nfq-grid-spacer-max-${propKey}: ${realCss};`;
    }
    return null;
  });
  return mediaQuery;
};

export { calcSpacerInline, calcSpacerMaxValues, calcSpacerMeasures };
//# sourceMappingURL=utils.js.map