export function renderedSize()

in src/components/common/data-table/cell-size.js [30:85]

• 48 lines of code
• 3 McCabe index (conditional complexity)

export function renderedSize({
  text: {rows, column},
  type = 'string',
  colIdx,
  numRowsToCalculate = 10,
  fontSize = 12,
  font = 'Lato',
  cellPadding = 30,
  maxCellSize = 400,
  maxHeaderSize = 150,
  minCellSize = 45,
  optionsButton = 30
}) {
  if (!document) {
    return {
      row: 0,
      header: 0
    };
  }
  const textCanvas = document.createElement('canvas');
  document.body.appendChild(textCanvas);
  const context = textCanvas.getContext('2d');
  context.font = [fontSize, font].join('px ');
  let rowsToSample = [...Array(numRowsToCalculate)].map(() =>
    Math.floor(Math.random() * (rows.length - 1 - 0 + 1))
  );

  // IF we have less than 10 rows, lets measure all of them
  if (rows.length < numRowsToCalculate) {
    rowsToSample = Array.from(Array(rows.length).keys());
  }
  const rowWidth = Math.max(
    ...rowsToSample.map(
      rowIdx =>
        Math.ceil(context.measureText(parseFieldValue(rows[rowIdx][colIdx], type)).width) +
        cellPadding
    )
  );
  // header cell only has left padding
  const headerWidth =
    Math.ceil(context.measureText(column).width) + cellPadding / 2 + optionsButton;

  const minRowWidth = minCellSize + cellPadding;
  const minHeaderWidth = minCellSize + cellPadding / 2 + optionsButton;

  const clampedRowWidth = clamp(minRowWidth, maxCellSize, rowWidth);
  const clampedHeaderWidth = clamp(minHeaderWidth, maxHeaderSize, headerWidth);

  // cleanup
  textCanvas.parentElement.removeChild(textCanvas);

  return {
    row: clampedRowWidth,
    header: clampedHeaderWidth
  };
}