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

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(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__namespace.useMemo(
    function () {
      /** If table isn't selectable, return columns */
      if (!selectable) {
        return userDefinedColumns;
      }
      /** Return Columns width Select Column Props and Default */
      return tslib.__spreadArray(
        [
          tslib.__assign(
            { key: '%%selectable%%', width: 50 },
            selectColumnProps
          ),
        ],
        tslib.__read(userDefinedColumns),
        false
      );
    },
    [userDefinedColumns, selectable, selectColumnProps]
  );
  // ----
  // Compute the effective Columns Width
  // ----
  var columnsWidth = React__namespace.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__namespace.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__namespace.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,
  };
}

module.exports = useColumns;