@awsui/components-react/table/resizer/index.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 clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
import { getOverflowParents } from '../../internal/utils/scrollable-containers';
import { findUpUntil } from '../../internal/utils/dom';
import tableStyles from '../styles.css.js';
import styles from './styles.css.js';
var AUTO_GROW_START_TIME = 10;
var AUTO_GROW_INTERVAL = 10;
var AUTO_GROW_INCREMENT = 5;
export function Resizer(_a) {
    var onDragMove = _a.onDragMove, onFinish = _a.onFinish;
    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
    var _c = useState(), headerCell = _c[0], setHeaderCell = _c[1];
    var autoGrowTimeout = useRef();
    var onFinishStable = useStableEventHandler(onFinish);
    var onDragStable = useStableEventHandler(onDragMove);
    useEffect(function () {
        if (!isDragging || !headerCell) {
            return;
        }
        var rootElement = findUpUntil(headerCell, function (element) { return element.className.indexOf(tableStyles.root) > -1; });
        var tableBodyElement = rootElement.querySelector('tbody');
        var tracker = rootElement.querySelector("." + styles.tracker);
        var scrollParent = getOverflowParents(headerCell)[0];
        var _a = scrollParent.getBoundingClientRect(), leftEdge = _a.left, rightEdge = _a.right;
        var updateTrackerPosition = function (newOffset) {
            var scrollParentLeft = tableBodyElement.getBoundingClientRect().left;
            tracker.style.top = headerCell.getBoundingClientRect().height + 'px';
            tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';
        };
        var updateColumnWidth = function (newWidth) {
            onDragStable(newWidth);
            updateTrackerPosition(headerCell.getBoundingClientRect().right);
        };
        var onAutoGrow = function () {
            var width = headerCell.getBoundingClientRect().width;
            autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);
            updateColumnWidth(width + AUTO_GROW_INCREMENT);
            scrollParent.scrollLeft += AUTO_GROW_INCREMENT;
        };
        var onMouseMove = function (event) {
            clearTimeout(autoGrowTimeout.current);
            var offset = event.pageX;
            if (offset > rightEdge) {
                autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);
            }
            else if (offset > leftEdge) {
                var cellLeft = headerCell.getBoundingClientRect().left;
                var newWidth = offset - cellLeft;
                updateColumnWidth(newWidth);
            }
        };
        var onMouseUp = function () {
            setIsDragging(false);
            onFinishStable();
            clearTimeout(autoGrowTimeout.current);
        };
        updateTrackerPosition(headerCell.getBoundingClientRect().right);
        document.body.classList.add(styles['resize-active']);
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        return function () {
            clearTimeout(autoGrowTimeout.current);
            document.body.classList.remove(styles['resize-active']);
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        };
    }, [headerCell, isDragging, onDragStable, onFinishStable]);
    return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active']), onMouseDown: function (event) {
            if (event.button !== 0) {
                return;
            }
            event.preventDefault();
            var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
            setIsDragging(true);
            setHeaderCell(headerCell);
        } }));
}
export function ResizeTracker() {
    return React.createElement("span", { className: styles.tracker });
}