react-flexigrid/lib/FlexiGridWidthHelper.js

A React table component designed to allow presenting millions of rows of data.

import React from 'react';

function getTotalWidth(columns) {
  var totalWidth = 0;
  for (var i = 0; i < columns.length; i += 1) {
    totalWidth += columns[i].props.width;
  }
  return totalWidth;
}

function getTotalFlexGrow(columns) {
  var totalFlexGrow = 0;
  for (var i = 0; i < columns.length; i += 1) {
    totalFlexGrow += columns[i].props.flexGrow || 0;
  }
  return totalFlexGrow;
}

function distributeFlexWidth(columns, flexWidth) {
  if (flexWidth <= 0) {
    return {
      columns: columns,
      width: getTotalWidth(columns)
    };
  }
  var remainingFlexGrow = getTotalFlexGrow(columns);
  var remainingFlexWidth = flexWidth;
  var newColumns = [];
  var totalWidth = 0;
  for (var i = 0; i < columns.length; i += 1) {
    var column = columns[i];
    if (!column.props.flexGrow) {
      totalWidth += column.props.width;
      newColumns.push(column);
    } else {
      var columnFlexWidth = Math.floor(column.props.flexGrow / remainingFlexGrow * remainingFlexWidth);
      var newColumnWidth = Math.floor(column.props.width + columnFlexWidth);
      totalWidth += newColumnWidth;

      remainingFlexGrow -= column.props.flexGrow;
      remainingFlexWidth -= columnFlexWidth;

      newColumns.push(React.cloneElement(column, { width: newColumnWidth }));
    }
  }

  return {
    columns: newColumns,
    width: totalWidth
  };
}

function adjustColumnGroupWidths(columnGroups, expectedWidth) {
  var allColumns = [];
  var i = void 0;
  for (i = 0; i < columnGroups.length; i += 1) {
    React.Children.forEach(columnGroups[i].props.children, function (column) {
      allColumns.push(column);
    });
  }
  var columnsWidth = getTotalWidth(allColumns);
  var remainingFlexGrow = getTotalFlexGrow(allColumns);
  var remainingFlexWidth = Math.max(expectedWidth - columnsWidth, 0);

  var newAllColumns = [];
  var newColumnGroups = [];

  var _loop = function _loop() {
    var columnGroup = columnGroups[i];
    var currentColumns = [];

    React.Children.forEach(columnGroup.props.children, function (column) {
      currentColumns.push(column);
    });

    var columnGroupFlexGrow = getTotalFlexGrow(currentColumns);
    var columnGroupFlexWidth = Math.floor(columnGroupFlexGrow / remainingFlexGrow * remainingFlexWidth);

    var newColumnSettings = distributeFlexWidth(currentColumns, columnGroupFlexWidth);

    remainingFlexGrow -= columnGroupFlexGrow;
    remainingFlexWidth -= columnGroupFlexWidth;

    for (var j = 0; j < newColumnSettings.columns.length; j += 1) {
      newAllColumns.push(newColumnSettings.columns[j]);
    }

    newColumnGroups.push(React.cloneElement(columnGroup, { width: newColumnSettings.width }));
  };

  for (i = 0; i < columnGroups.length; i += 1) {
    _loop();
  }

  return {
    columns: newAllColumns,
    columnGroups: newColumnGroups
  };
}

function adjustColumnWidths(columns, expectedWidth) {
  var columnsWidth = getTotalWidth(columns);
  if (columnsWidth < expectedWidth) {
    return distributeFlexWidth(columns, expectedWidth - columnsWidth).columns;
  }
  return columns;
}

module.exports = {
  getTotalWidth: getTotalWidth,
  getTotalFlexGrow: getTotalFlexGrow,
  distributeFlexWidth: distributeFlexWidth,
  adjustColumnWidths: adjustColumnWidths,
  adjustColumnGroupWidths: adjustColumnGroupWidths
};