@awsui/components-react/table/use-column-widths.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign } from "tslib";
import React, { useEffect, useRef, useState, createContext, useContext } from 'react';
import { getColumnKey } from './utils';
import styles from './styles.css.js';
import { warnOnce } from '../internal/logging';
export var DEFAULT_WIDTH = 120;
var SELECTION_CELL_WIDTH = 54;
function checkProperty(column, name) {
    var value = column[name];
    if (typeof value !== 'number' && typeof value !== 'undefined') {
        warnOnce('Table', "resizableColumns feature requires " + name + " property to be a number, got " + value + ". The component may work incorrectly.");
    }
}
export function checkColumnWidths(columnDefinitions) {
    for (var _i = 0, columnDefinitions_1 = columnDefinitions; _i < columnDefinitions_1.length; _i++) {
        var column = columnDefinitions_1[_i];
        checkProperty(column, 'minWidth');
        checkProperty(column, 'width');
    }
}
function readWidths(headerEl, columnDefinitions, hasSelection) {
    var result = {};
    for (var index = 0; index < columnDefinitions.length; index++) {
        var column = columnDefinitions[index];
        var id = getColumnKey(columnDefinitions[index], index);
        var width = column.width || 0;
        var minWidth = column.minWidth || width || DEFAULT_WIDTH;
        if (!width &&
            index !== columnDefinitions.length - 1) {
            var colIndex = hasSelection ? index + 2 : index + 1;
            var colEl = headerEl.querySelector("." + styles['header-cell'] + ":nth-child(" + colIndex + ")");
            width = colEl.getBoundingClientRect().width;
        }
        result[id] = Math.max(width, minWidth);
    }
    return result;
}
function updateWidths(columnDefinitions, oldWidths, newWidth, colIndex) {
    var _a;
    var definition = columnDefinitions[colIndex];
    var id = getColumnKey(definition, colIndex);
    var minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;
    newWidth = Math.max(newWidth, minWidth);
    if (oldWidths[id] === newWidth) {
        return oldWidths;
    }
    return __assign(__assign({}, oldWidths), (_a = {}, _a[id] = newWidth, _a));
}
var WidthsContext = createContext({
    totalWidth: 0,
    columnWidths: {},
    updateColumn: function () { }
});
export function ColumnWidthsProvider(_a) {
    var tableRef = _a.tableRef, visibleColumnDefinitions = _a.visibleColumnDefinitions, resizableColumns = _a.resizableColumns, hasSelection = _a.hasSelection, children = _a.children;
    var visibleColumns = useRef(null);
    var _b = useState({}), columnWidths = _b[0], setColumnWidths = _b[1];
    useEffect(function () {
        if (!resizableColumns) {
            return;
        }
        var lastVisible = visibleColumns.current;
        if (lastVisible) {
            var _loop_1 = function (index) {
                var column = visibleColumnDefinitions[index];
                var id = getColumnKey(column, index);
                if (!columnWidths[id] && lastVisible.indexOf(column.id) === -1) {
                    setColumnWidths(function (columnWidths) {
                        var _a;
                        return (__assign(__assign({}, columnWidths), (_a = {}, _a[id] = column.width || DEFAULT_WIDTH, _a)));
                    });
                }
            };
            for (var index = 0; index < visibleColumnDefinitions.length; index++) {
                _loop_1(index);
            }
        }
        visibleColumns.current = visibleColumnDefinitions.map(function (column) { return column.id; });
    }, [columnWidths, resizableColumns, visibleColumnDefinitions]);
    useEffect(function () {
        if (!resizableColumns) {
            return;
        }
        setColumnWidths(function () { return readWidths(tableRef.current, visibleColumnDefinitions, hasSelection); });
    }, []);
    function updateColumn(colIndex, newWidth) {
        setColumnWidths(function (columnWidths) { return updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex); });
    }
    var totalWidth = visibleColumnDefinitions.reduce(function (total, column, index) { return total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH); }, 0);
    if (hasSelection) {
        totalWidth += SELECTION_CELL_WIDTH;
    }
    return React.createElement(WidthsContext.Provider, { value: { columnWidths: columnWidths, totalWidth: totalWidth, updateColumn: updateColumn } }, children);
}
export function useColumnWidths() {
    return useContext(WidthsContext);
}