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

"use strict";

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/instance/index-of"));
var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/instance/some"));
var _includes = _interopRequireDefault(require("@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 = (0, _indexOf.default)(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 = (0, _some.default)(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 (!(0, _includes.default)(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 >= (0, _indexOf.default)(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 >= (0, _indexOf.default)(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}`);
      }
    }
  }
};
var _default = validateLayout;
exports.default = _default;