@appbuckets/react-ui/esm/RxTable/lib/useColumns.js

Just Another React UI Framework

import { __spreadArray, __assign, __read } from 'tslib';
import * as React from 'react';

function useColumns(config) {
  var userDefinedColumns = config.columns,
    selectable = config.selectable,
    selectColumnProps = config.selectColumnProps,
    tableWidth = config.width;
  // ----
  // Update Columns Field using Selectable
  // ----
  var columns = React.useMemo(
    function () {
      /** If table isn't selectable, return columns */
      if (!selectable) {
        return userDefinedColumns;
      }
      /** Return Columns width Select Column Props and Default */
      return __spreadArray(
        [__assign({ key: '%%selectable%%', width: 50 }, selectColumnProps)],
        __read(userDefinedColumns),
        false
      );
    },
    [userDefinedColumns, selectable, selectColumnProps]
  );
  // ----
  // Compute the effective Columns Width
  // ----
  var columnsWidth = React.useMemo(
    function () {
      /** Build the Columns Container */
      var widths = {};
      /** Get the fixed used space */
      var availableFlexibleSpace =
        tableWidth -
        columns
          .filter(function (column) {
            return (
              typeof column.width === 'number' &&
              (!column.widthType || column.widthType === 'fixed')
            );
          })
          .reduce(function (total, next) {
            return total + next.width;
          }, 0);
      /** Get total available spacing for auto column */
      var autoFlexibleSpace = availableFlexibleSpace;
      /** Loop each column to build width */
      columns
        .filter(function (column) {
          return typeof column.width === 'number';
        })
        .forEach(function (column) {
          /** Calc percentage space */
          if (column.widthType === 'percentage') {
            var columnWidth = Math.max(
              0,
              Math.round((availableFlexibleSpace / 100) * column.width)
            );
            widths[column.key] = columnWidth;
            autoFlexibleSpace -= columnWidth;
            return;
          }
          /** Return the user defined width */
          widths[column.key] = Math.round(column.width);
        });
      var autoSizingColumns = columns.filter(function (column) {
        return column.width === 'auto' || column.width === undefined;
      });
      /** Get the maximum grow factor */
      var totalGrowFactor = autoSizingColumns.reduce(function (max, _a) {
        var growFactor = _a.growFactor;
        return (
          max +
          Math.max(
            1,
            growFactor !== null && growFactor !== void 0 ? growFactor : 1
          )
        );
      }, 0);
      /** Compute the Auto Sizing Columns */
      autoSizingColumns.forEach(function (column) {
        var _a;
        /** Divide the spacing equally */
        widths[column.key] = Math.round(
          (autoFlexibleSpace / totalGrowFactor) *
            Math.max(
              1,
              (_a = column.growFactor) !== null && _a !== void 0 ? _a : 1
            )
        );
      });
      return widths;
    },
    [columns, tableWidth]
  );
  // ----
  // Save the Total Columns Width
  // ----
  var totalColumnsWidth = React.useMemo(
    function () {
      return Object.keys(columnsWidth).reduce(function (totalWidth, nextKey) {
        return totalWidth + columnsWidth[nextKey];
      }, 0);
    },
    [columnsWidth]
  );
  // ----
  // Save the max width using tableWidth and totalColumnsWidth
  // ----
  var effectiveTableWidth = Math.max(tableWidth, totalColumnsWidth);
  // ----
  // Build a function the retrieve the exact columnWidth
  // ----
  var getColumnWidth = React.useCallback(
    function (key) {
      var _a;
      /** Check if is last column */
      var isLast = columns[columns.length - 1].key === key;
      /** If is not last then return its declared width */
      if (!isLast) {
        return (_a = columnsWidth[key]) !== null && _a !== void 0 ? _a : 0;
      }
      /** Else, return the remain width */
      var restColumnsWidth = Object.keys(columnsWidth).reduce(function (
        totalWidth,
        nextKey
      ) {
        return nextKey === key
          ? totalWidth
          : totalWidth + columnsWidth[nextKey];
      },
      0);
      return effectiveTableWidth - restColumnsWidth;
    },
    [columnsWidth, columns, effectiveTableWidth]
  );
  // ----
  // Return Tools
  // ----
  return {
    columns: columns,
    columnsWidth: columnsWidth,
    effectiveTableWidth: effectiveTableWidth,
    totalColumnsWidth: totalColumnsWidth,
    getWidth: getColumnWidth,
  };
}

export { useColumns as default };