@xo-union/tk-component-header-nav/lib/components/HeaderNav/MegaMenu/validateLayout.js

import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js/instance/index-of";
import _someInstanceProperty from "@babel/runtime-corejs3/core-js/instance/some";
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
// Make sure layout is configured to align perfectly with the grid
const validateLayout = (menuID, _ref) => {
  let {
    __forgiveGridMisalignment,
    name: layoutName,
    linkSection = {},
    featuredSection,
    alignSectionsBreakpoint,
    linkColumnProps = {}
  } = _ref;
  if (!linkSection.numberOfColumns || __forgiveGridMisalignment || process.env.NODE_ENV === 'production') {
    return;
  }
  const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
  const findLastColumnSize = (columnProps, startIndex) => {
    for (let i = startIndex; i >= 0; i -= 1) {
      if (columnProps[breakpoints[i]]) {
        return Number(columnProps[breakpoints[i]]);
      }
    }
    return null;
  };
  const alignSectionsBreakpointIndex = _indexOfInstanceProperty(breakpoints).call(breakpoints, alignSectionsBreakpoint);
  let lastFeaturedSize = findLastColumnSize(featuredSection.containerColumnProps, alignSectionsBreakpointIndex);
  let lastLinkColumnSize = findLastColumnSize(linkColumnProps, alignSectionsBreakpointIndex) || 12 / linkSection.numberOfColumns;
  for (let i = alignSectionsBreakpointIndex; i < breakpoints.length; i += 1) {
    const linkColumnSizesThatAlignWithGrid = [];
    const currentBreakpoint = breakpoints[i];
    const currentFeaturedSize = featuredSection.containerColumnProps[currentBreakpoint];
    lastFeaturedSize = Number(currentFeaturedSize || lastFeaturedSize);
    const linkSectionSize = 12 - lastFeaturedSize;
    const linkSectionSingleColumnSize = linkSectionSize / 12;
    for (let j = 1; j <= 12; j += 1) {
      const columnSize = j * linkSectionSingleColumnSize;
      if (columnSize === Math.round(columnSize) /* Fits perfectly */) {
        linkColumnSizesThatAlignWithGrid.push(j);
      }
    }
    const canFitLinkColumnsWhileAligning = _someInstanceProperty(linkColumnSizesThatAlignWithGrid).call(linkColumnSizesThatAlignWithGrid, size => 12 / linkSection.numberOfColumns >= size);

    // Ensure enough space is given to link section to fit number of columns
    if (!canFitLinkColumnsWhileAligning) {
      throw new Error(`[${layoutName}] [${menuID}] featuredSection is not configured to support ${linkSection.numberOfColumns} link columns in a way that allows those columns to align with the underlying grid`);
    }
    lastLinkColumnSize = Number(linkColumnProps[currentBreakpoint] || lastLinkColumnSize);

    // Ensure link columns are configured to align with the grid
    if (!_includesInstanceProperty(linkColumnSizesThatAlignWithGrid).call(linkColumnSizesThatAlignWithGrid, lastLinkColumnSize)) {
      throw new Error(`[${layoutName}] [${menuID}] linkColumns do not align with the grid in ${currentBreakpoint} breakpoint. Size must be one of ${linkColumnSizesThatAlignWithGrid}. Instead got ${lastLinkColumnSize}`);
    }
    const realColumnSize = lastLinkColumnSize * linkSectionSingleColumnSize;
    if (i >= _indexOfInstanceProperty(breakpoints).call(breakpoints, 'lg')) {
      // Enforce 2 column layout in lg
      if (realColumnSize !== 2) {
        throw new Error(`[${layoutName}] [${menuID}] link columns should be made to take up 2 columns of outer grid on ${currentBreakpoint} breakpoint.
          Instead got ${realColumnSize} -- derived from ${lastLinkColumnSize}.
          Should be ${2 / linkSectionSingleColumnSize}`);
      }
    } else if (i >= _indexOfInstanceProperty(breakpoints).call(breakpoints, 'md')) {
      // Enforce 2 column layout in md
      if (realColumnSize !== 3) {
        throw new Error(`[${layoutName}][${menuID}] link columns should be made to take up 3 columns of outer grid on ${currentBreakpoint} breakpoint.
          Instead got ${realColumnSize} -- derived from ${lastLinkColumnSize}.
          Should be ${3 / linkSectionSingleColumnSize}`);
      }
    }
  }
};
export default validateLayout;