@zapperwing/pinterest-view/lib/utils/computeLayout.js

A Pinterest-style grid layout component for React.js with responsive design, dynamic content support, and bulletproof virtualization

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.computeContainerHeight = computeContainerHeight;
exports["default"] = computeLayout;
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
/**
 * Pure function to compute layout for given keys
 * @param {string[]} keys - ordered array of React child keys
 * @param {Map<string,number>} heightCache - cached heights for items
 * @param {Object} config - layout configuration
 * @param {number} config.columnCount - number of columns
 * @param {number} config.columnWidth - width of each column
 * @param {number} config.gutterWidth - horizontal gutter between columns
 * @param {number} config.gutterHeight - vertical gutter between items
 * @returns {Object} - map of key to rect { top, left, width, height }
 */
function computeLayout(keys, heightCache, config) {
  var columnCount = config.columnCount,
    columnWidth = config.columnWidth,
    gutterWidth = config.gutterWidth,
    gutterHeight = config.gutterHeight;
  var columnHeights = new Array(columnCount).fill(0);
  var rectsMap = {};
  keys.forEach(function (key) {
    // Find shortest column
    var shortestColumnIndex = 0;
    var minHeight = columnHeights[0];
    for (var i = 1; i < columnHeights.length; i += 1) {
      if (columnHeights[i] < minHeight) {
        minHeight = columnHeights[i];
        shortestColumnIndex = i;
      }
    }

    // Get item height
    var height = heightCache.get(key) || 200;

    // Calculate position
    var left = shortestColumnIndex * (columnWidth + gutterWidth);
    var top = columnHeights[shortestColumnIndex];

    // Store rect
    rectsMap[key] = {
      top: top,
      left: left,
      width: columnWidth,
      height: height
    };

    // Update column height
    columnHeights[shortestColumnIndex] = top + height + gutterHeight;
  });
  return rectsMap;
}

/**
 * Compute container height from rects
 * @param {Object} rectsMap - map of key to rect
 * @param {Object} config - layout configuration
 * @returns {number} - container height
 */
function computeContainerHeight(rectsMap, _ref) {
  var gutterHeight = _ref.gutterHeight;
  var rects = Object.values(rectsMap);
  if (rects.length === 0) return 0;
  var maxBottom = Math.max.apply(Math, _toConsumableArray(rects.map(function (rect) {
    return rect.top + rect.height;
  })));
  return maxBottom - gutterHeight;
}