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

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

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

const calcPadding = ({
  $padding,
  $paddingLeft,
  $paddingRight
}) => {
  const {
    breakpointOrder
  } = configCache.get('breakpointConfig');
  if ($padding) {
    $paddingLeft = typeof $padding === 'object' ? $padding : {
      xs: $padding
    };
    $paddingRight = typeof $padding === 'object' ? $padding : {
      xs: $padding
    };
  } else {
    $paddingLeft = typeof $paddingLeft === 'object' ? $paddingLeft : {
      xs: $paddingLeft
    };
    $paddingRight = typeof $paddingRight === 'object' ? $paddingRight : {
      xs: $paddingRight
    };
  }
  let lastPaddingLeft;
  let lastPaddingRight;
  const mediaQuery = breakpointOrder.map(screenSize => {
    const paddingLeft = $paddingLeft[screenSize];
    const paddingRight = $paddingRight[screenSize];
    if (paddingLeft !== undefined) {
      lastPaddingLeft = paddingLeft;
    }
    if (paddingRight !== undefined) {
      lastPaddingRight = paddingRight;
    }
    if (paddingLeft !== undefined || paddingRight !== undefined) {
      return `
                padding-inline-start: ${paddingLeft ?? lastPaddingLeft};
                padding-inline-end: ${paddingRight ?? lastPaddingRight};
            `;
    }
    return null;
  });
  return mediaQuery;
};
const calcSizes = ({
  $sizes
}) => {
  const {
    breakpointOrder
  } = configCache.get('breakpointConfig');
  let lastColSize = 'auto';
  let lastRealSize;
  if (Object.keys($sizes).length > 0) {
    const mediaQuery = breakpointOrder.map(screenSize => {
      const size = $sizes[screenSize];
      let realSize;
      if (size) {
        lastColSize = size;
      }
      if (['auto', 'max-content', 'min-content'].includes(size ?? lastColSize)) {
        realSize = size ?? lastColSize;
      } else {
        realSize = `calc(100% / var(--nfq-grid-columns) * clamp(1, ${size ?? lastColSize}, var(--nfq-grid-columns)) - var(--column-gap, 0px) + var(--column-gap, 0px) * clamp(1, ${size ?? lastColSize}, var(--nfq-grid-columns)) / var(--nfq-grid-columns))`;
      }
      if (lastRealSize !== realSize) {
        lastRealSize = realSize;
        return `
                    flex: ${realSize === 'auto' ? 'auto' : `0 0 ${realSize}`};
                    max-width: ${realSize === 'auto' ? 'initial' : realSize};
                `;
      }
      return null;
    });
    return mediaQuery;
  }
  return null;
};
const calcOffset = ({
  $offset
}) => {
  const {
    breakpointOrder
  } = configCache.get('breakpointConfig');
  if (typeof $offset !== 'object') {
    $offset = {
      xs: $offset
    };
  }
  let lastOffset = 0;
  let lastRealOffset;
  const mediaQuery = breakpointOrder.map(screenSize => {
    const currentOffset = $offset[screenSize];
    if (currentOffset) {
      lastOffset = currentOffset;
    }
    const finalOffset = currentOffset ?? lastOffset;
    const realOffset = finalOffset === 0 ? undefined : `calc(100% / var(--nfq-grid-columns) * ${finalOffset} + var(--column-gap, 0px) * ${finalOffset} / var(--nfq-grid-columns))`;
    if (lastRealOffset !== realOffset) {
      lastRealOffset = realOffset;
      return `margin-inline-start: ${realOffset};`;
    }
    return null;
  });
  return mediaQuery;
};

export { calcOffset, calcPadding, calcSizes };
//# sourceMappingURL=utils.js.map