@gpa-gemstone/react-table 1.2.51 → 1.2.53

package/lib/AdjustableTable/Table.js

@@ -0,0 +1,490 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AdjustableTable;
+//  ******************************************************************************************************
+//  Table.tsx - Gbtc
+//
+//  Copyright © 2023, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  11/18/2023 - C. Lackner
+//       Generated original version of source code.
+//  05/31/2024 - C. Lackner
+//       Refactored to fix sizing issues.
+//
+//  ******************************************************************************************************
+const React = require("react");
+const _ = require("lodash");
+const Column_1 = require("./Column");
+const AdjustableColumn_1 = require("./AdjustableColumn");
+const defaultTableStyle = {
+    padding: 0,
+    width: '100%',
+    height: '100%',
+    tableLayout: 'fixed',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: 0,
+};
+function AdjustableTable(props) {
+    var _a;
+    const bodyRef = React.useRef(null);
+    const throtleRef = React.useRef(null);
+    const colCountRef = React.useRef(null);
+    const autoWidth = React.useRef(new Map());
+    const [autoWidthVersion, setAutoWidthVersion] = React.useState(0);
+    const [currentTableWidth, setCurrentTableWidth] = React.useState(0);
+    const [scrolled, setScrolled] = React.useState(false);
+    const [extraWidthPerRow, setExtraWidthPerRow] = React.useState(0);
+    const setTableWidth = React.useCallback(_.debounce(() => {
+        var _a, _b, _c, _d;
+        if (bodyRef.current == null)
+            return;
+        // Note: certain body classes may break this check if they set overflow to scroll
+        let newScroll = false;
+        if (((_a = props.TbodyStyle) === null || _a === void 0 ? void 0 : _a.overflowY) === 'scroll' || ((_b = props.TbodyStyle) === null || _b === void 0 ? void 0 : _b.overflow) === 'scroll')
+            newScroll = true;
+        else
+            newScroll = bodyRef.current.clientHeight < bodyRef.current.scrollHeight;
+        setScrolled(newScroll);
+        setCurrentTableWidth(((_d = (_c = bodyRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 17) - (newScroll ? 0 : 17));
+    }, 100), []);
+    React.useEffect(() => {
+        let resizeObserver;
+        const intervalHandle = setInterval(() => {
+            if ((bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) == null)
+                return;
+            resizeObserver = new ResizeObserver(() => {
+                setTableWidth();
+            });
+            resizeObserver.observe(bodyRef.current);
+            clearInterval(intervalHandle);
+        }, 10);
+        return () => {
+            clearInterval(intervalHandle);
+            if (resizeObserver != null && resizeObserver.disconnect != null)
+                resizeObserver.disconnect();
+        };
+    }, []);
+    React.useEffect(() => {
+        autoWidth.current = new Map();
+        setAutoWidthVersion(0);
+    }, [currentTableWidth]);
+    React.useEffect(() => {
+        var _a;
+        let totalMaxWidth = 0;
+        autoWidth.current.forEach((v) => {
+            totalMaxWidth += v.maxColWidth;
+        });
+        if (totalMaxWidth > currentTableWidth && currentTableWidth > 0) {
+            const hideKeys = [];
+            const showKeys = [];
+            let t = 0;
+            let colW = 0;
+            autoWidth.current.forEach((v, k) => {
+                t = t + v.maxColWidth;
+                if (t < currentTableWidth) {
+                    showKeys.push(k);
+                    colW += v.maxColWidth;
+                }
+                else
+                    hideKeys.push(k);
+            });
+            const numEnabledColumns = showKeys.length;
+            if (Array.from(autoWidth.current.values()).filter(autoWidth => !autoWidth.enabled).length == hideKeys.length) {
+                return;
+            }
+            if (colCountRef.current !== null)
+                clearTimeout(colCountRef.current);
+            colCountRef.current = setTimeout(() => {
+                var _a;
+                hideKeys.forEach((k) => (autoWidth.current.get(k).enabled = false));
+                showKeys.forEach((k) => (autoWidth.current.get(k).enabled = true));
+                const numOfColsWithAutoCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isAuto && autoWidth.enabled).length;
+                const numOfColsWithUndefinedCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isUndefined && autoWidth.enabled).length;
+                let colsToDivideBy = numEnabledColumns; // Split the extra across all cols
+                if (numOfColsWithAutoCSS > 0) { // Split only on the css auto-cols and no css undefined cols
+                    colsToDivideBy = numOfColsWithAutoCSS;
+                }
+                if (numOfColsWithUndefinedCSS > 0 && numOfColsWithAutoCSS == 0) { // Split only on the css undefined if there are no auto-cols
+                    colsToDivideBy = numOfColsWithUndefinedCSS;
+                }
+                const extraSpace = (currentTableWidth - colW - numEnabledColumns) / colsToDivideBy;
+                setExtraWidthPerRow(extraSpace);
+                (_a = props.ReduceWidthCallback) === null || _a === void 0 ? void 0 : _a.call(props, hideKeys);
+                setAutoWidthVersion((v) => v + 1);
+            }, 500);
+        }
+        else if (currentTableWidth > 0) {
+            const numEnabledColumns = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.enabled).length;
+            const numOfColsWithAutoCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isAuto && autoWidth.enabled).length;
+            const colsToDivideBy = (numOfColsWithAutoCSS > 0) ? numOfColsWithAutoCSS : numEnabledColumns;
+            const extraSpace = (currentTableWidth - totalMaxWidth - numEnabledColumns) / colsToDivideBy;
+            setExtraWidthPerRow(extraSpace);
+            (_a = props.ReduceWidthCallback) === null || _a === void 0 ? void 0 : _a.call(props, []);
+        }
+    }, [autoWidthVersion]);
+    React.useEffect(() => {
+        // if there are keys in the map not present in children, map is old
+        const children = React.Children.toArray(props.children);
+        const childKeys = [];
+        const mapKeys = autoWidth.current.keys();
+        children.forEach(child => {
+            if (!React.isValidElement(child))
+                return;
+            if (child.type === Column_1.default ||
+                child.type === AdjustableColumn_1.default)
+                childKeys.push(child.props.Key);
+        });
+        for (const key of mapKeys) {
+            if (childKeys.includes(key)) {
+                continue;
+            }
+            else {
+                autoWidth.current.clear();
+                setAutoWidthVersion(0);
+                break;
+            }
+        }
+    }, [props.children]);
+    const handleSort = React.useCallback((data, event) => {
+        if (data.colKey !== null)
+            props.OnSort(data, event);
+    }, [props.OnSort]);
+    const setWidth = React.useCallback((colKey, key, width, isAuto, isUndefined) => {
+        var _a, _b, _c, _d, _e, _f;
+        const flooredWidth = Math.floor(width);
+        if (!autoWidth.current.has(colKey)) { // does the column exist
+            autoWidth.current.set(colKey, {
+                maxColWidth: flooredWidth,
+                width: new Map([[key, flooredWidth]]),
+                enabled: true,
+                adjustement: 0,
+                isAuto: isAuto,
+                isUndefined: isUndefined
+            });
+        }
+        else if (!((_b = (_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.width.has(key)) !== null && _b !== void 0 ? _b : false)) { // it exists but the key does not
+            (_c = autoWidth.current.get(colKey)) === null || _c === void 0 ? void 0 : _c.width.set(key, flooredWidth); // add the width for this key
+            autoWidth.current.get(colKey).isAuto = isAuto;
+            if (flooredWidth > ((_e = (_d = autoWidth.current.get(colKey)) === null || _d === void 0 ? void 0 : _d.maxColWidth) !== null && _e !== void 0 ? _e : 9e10)) // if width is > to max col
+                autoWidth.current.get(colKey).maxColWidth = flooredWidth; // set max to width
+        }
+        else if (autoWidth.current.get(colKey).width.get(key) == flooredWidth) { // width == newW
+            autoWidth.current.get(colKey).isAuto = isAuto;
+            return;
+        }
+        else {
+            autoWidth.current.get(colKey).width.set(key, flooredWidth); // otherwise, it exists, just set the width
+            autoWidth.current.get(colKey).isAuto = isAuto;
+            if (flooredWidth == ((_f = autoWidth.current.get(colKey)) === null || _f === void 0 ? void 0 : _f.maxColWidth)) // check against max
+                autoWidth.current.get(colKey).maxColWidth = Math.max(...autoWidth.current.get(colKey).width.values());
+        }
+        //cancel ref
+        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
+        if (throtleRef.current !== null)
+            clearTimeout(throtleRef.current);
+        throtleRef.current = setTimeout(() => {
+            setAutoWidthVersion((v) => v + 1);
+        }, 10);
+    }, []);
+    const setAdjustment = React.useCallback((colKey, w) => {
+        if (!autoWidth.current.has(colKey) || autoWidth.current.get(colKey) == undefined) { // doesnt exist/is undefined
+            autoWidth.current.set(colKey, {
+                maxColWidth: 0,
+                width: new Map(),
+                enabled: true,
+                adjustement: w,
+                isAuto: false,
+                isUndefined: false
+            });
+        }
+        else {
+            const x = autoWidth.current.get(colKey);
+            if ((x === null || x === void 0 ? void 0 : x.adjustement) != undefined)
+                x.adjustement += w;
+        }
+        //cancel ref
+        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
+        if (throtleRef.current !== null)
+            clearTimeout(throtleRef.current);
+        throtleRef.current = setTimeout(() => {
+            setAutoWidthVersion((v) => v + 1);
+        }, 10);
+    }, []);
+    const setMinWidth = React.useCallback((colKey, w) => {
+        var _a;
+        if (!autoWidth.current.has(colKey))
+            autoWidth.current.set(colKey, {
+                maxColWidth: 0,
+                width: new Map(),
+                enabled: true,
+                adjustement: 0,
+                minWidth: w,
+                isAuto: false,
+                isUndefined: false
+            });
+        else if (((_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.minWidth) == w)
+            return;
+        autoWidth.current.get(colKey).minWidth = w;
+        //cancel ref
+        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
+        if (throtleRef.current !== null)
+            clearTimeout(throtleRef.current);
+        throtleRef.current = setTimeout(() => {
+            setAutoWidthVersion((v) => v + 1);
+        }, 10);
+    }, []);
+    const setMaxWidth = React.useCallback((colKey, w) => {
+        var _a;
+        if (!autoWidth.current.has(colKey))
+            autoWidth.current.set(colKey, {
+                maxColWidth: 0,
+                width: new Map(),
+                enabled: true,
+                adjustement: 0,
+                maxWidth: w,
+                isAuto: false,
+                isUndefined: false
+            });
+        else if (((_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.maxWidth) == w)
+            return;
+        autoWidth.current.get(colKey).maxWidth = w;
+        //cancel ref
+        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
+        if (throtleRef.current !== null)
+            clearTimeout(throtleRef.current);
+        throtleRef.current = setTimeout(() => {
+            setAutoWidthVersion((v) => v + 1);
+        }, 10);
+    }, []);
+    return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : 'table table-hover', style: (_a = props.TableStyle) !== null && _a !== void 0 ? _a : defaultTableStyle },
+        React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: (k, w, a, u) => setWidth(k, -1, w, a, u), SetMaxWidth: setMaxWidth, SetMinWidth: setMinWidth, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, LastColumn: props.LastColumn, SetAdjustment: setAdjustment, ExtraWidth: extraWidthPerRow }, props.children),
+        React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: props.RowStyle, BodyStyle: props.TbodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, SetWidth: setWidth, ExtraWidth: extraWidthPerRow, BodyRef: bodyRef, BodyScrolled: scrolled }, props.children),
+        props.LastRow !== undefined ? (React.createElement("tfoot", { style: props.TfootStyle, className: props.TfootClass },
+            React.createElement("tr", { style: props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {} }, props.LastRow))) : null));
+}
+function Rows(props) {
+    if (props.Data.length === 0)
+        return null;
+    const onClick = React.useCallback((e, item, index) => {
+        if (props.OnClick !== undefined)
+            props.OnClick({
+                colKey: undefined,
+                colField: undefined,
+                row: item,
+                data: null,
+                index: index,
+            }, e);
+    }, [props.OnClick]);
+    const bodyStyle = React.useMemo(() => (Object.assign(Object.assign({}, props.BodyStyle), { paddingRight: (props.BodyScrolled ? 0 : 17) })), [props.BodyStyle, props.BodyScrolled]);
+    return (React.createElement("tbody", { style: bodyStyle, className: props.BodyClass, ref: props.BodyRef }, props.Data.map((d, i) => {
+        const style = props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {};
+        if (style.cursor === undefined && (props.OnClick !== undefined || props.DragStart !== undefined))
+            style.cursor = 'pointer';
+        if (props.Selected !== undefined && props.Selected(d, i))
+            style.backgroundColor = 'yellow';
+        const key = props.KeySelector(d, i);
+        return (React.createElement("tr", { key: key, style: style, onClick: (e) => onClick(e, d, i) }, React.Children.map(props.children, (element) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            if (!React.isValidElement(element))
+                return null;
+            if (element.type === Column_1.default)
+                if ((_b = (_a = props.AutoWidth.current.get(element.props.Key)) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true)
+                    return (React.createElement(Column_1.ColumnDataWrapper, { key: element.key, extraWidth: props.ExtraWidth, onClick: (props.OnClick !== undefined && props.OnClick !== null) ? (e) => props.OnClick({
+                            colKey: element.props.Key,
+                            colField: element.props.Field,
+                            row: d,
+                            data: d[element.props.Field],
+                            index: i,
+                        }, e) : undefined, dragStart: (props.DragStart !== undefined && props.DragStart !== null) ? (e) => props.DragStart({
+                            colKey: element.props.Key,
+                            colField: element.props.Field,
+                            row: d,
+                            data: d[element.props.Field],
+                            index: i,
+                        }, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key, w, a, u), style: element.props.RowStyle, width: ((_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.width.has(key)) !== null && _d !== void 0 ? _d : false)
+                            ? (_e = props.AutoWidth.current.get(element.props.Key)) === null || _e === void 0 ? void 0 : _e.maxColWidth // if not auto <-
+                            : undefined // otherwise get the extrawidth
+                        , enabled: (_g = (_f = props.AutoWidth.current.get(element.props.Key)) === null || _f === void 0 ? void 0 : _f.enabled) !== null && _g !== void 0 ? _g : true }, element.props.Content !== undefined
+                        ? element.props.Content({
+                            item: d,
+                            key: element.props.Key,
+                            field: element.props.Field,
+                            style: style,
+                            index: i,
+                        })
+                        : element.props.Field !== undefined
+                            ? d[element.props.Field]
+                            : null));
+            if (element.type === AdjustableColumn_1.default)
+                if ((_j = (_h = props.AutoWidth.current.get(element.props.Key)) === null || _h === void 0 ? void 0 : _h.enabled) !== null && _j !== void 0 ? _j : true)
+                    return (React.createElement(AdjustableColumn_1.AdjustableColumnDataWrapper, { adjustment: (_k = props.AutoWidth.current.get(element.props.Key)) === null || _k === void 0 ? void 0 : _k.adjustement, key: element.key, onClick: (props.OnClick !== undefined && props.OnClick !== null) ? (e) => props.OnClick({
+                            colKey: element.props.Key,
+                            colField: element.props.Field,
+                            row: d,
+                            data: d[element.props.Field],
+                            index: i,
+                        }, e) : undefined, dragStart: (props.DragStart !== undefined && props.DragStart !== null) ? (e) => props.DragStart({
+                            colKey: element.props.Key,
+                            colField: element.props.Field,
+                            row: d,
+                            data: d[element.props.Field],
+                            index: i,
+                        }, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key, w, a, u), style: element.props.RowStyle, width: ((_m = (_l = props.AutoWidth.current.get(element.props.Key)) === null || _l === void 0 ? void 0 : _l.width.has(key)) !== null && _m !== void 0 ? _m : false)
+                            ? (_o = props.AutoWidth.current.get(element.props.Key)) === null || _o === void 0 ? void 0 : _o.maxColWidth
+                            : undefined, enabled: (_q = (_p = props.AutoWidth.current.get(element.props.Key)) === null || _p === void 0 ? void 0 : _p.enabled) !== null && _q !== void 0 ? _q : true, extraWidth: props.ExtraWidth },
+                        ' ',
+                        element.props.Content !== undefined
+                            ? element.props.Content({
+                                item: d,
+                                key: element.props.Key,
+                                field: element.props.Field,
+                                style: style,
+                                index: i,
+                            })
+                            : element.props.Field !== undefined
+                                ? d[element.props.Field]
+                                : null));
+            return null;
+        })));
+    })));
+}
+function Header(props) {
+    const trRef = React.useRef(null);
+    const [mouseDown, setMouseDown] = React.useState(0);
+    const [currentKeys, setCurrentKeys] = React.useState(undefined);
+    const [deltaW, setDeltaW] = React.useState(0);
+    const [tentativeLimits, setTentativeLimits] = React.useState({ min: -Infinity, max: Infinity });
+    const calculateDeltaLimits = React.useCallback((mapKeys, autoWidthRef) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        if (mapKeys === undefined)
+            return ({ min: -Infinity, max: Infinity });
+        const maxLeftAdjustment = ((_b = (_a = autoWidthRef.current.get(mapKeys[0])) === null || _a === void 0 ? void 0 : _a.maxColWidth) !== null && _b !== void 0 ? _b : 0) +
+            ((_d = (_c = autoWidthRef.current.get(mapKeys[0])) === null || _c === void 0 ? void 0 : _c.adjustement) !== null && _d !== void 0 ? _d : 0);
+        const minWidthLeftAdjusted = ((_f = (_e = autoWidthRef.current.get(mapKeys[0])) === null || _e === void 0 ? void 0 : _e.minWidth) !== null && _f !== void 0 ? _f : 100) - maxLeftAdjustment;
+        const maxWidthLeftAdjusted = ((_h = (_g = autoWidthRef.current.get(mapKeys[0])) === null || _g === void 0 ? void 0 : _g.maxWidth) !== null && _h !== void 0 ? _h : 9e10) - maxLeftAdjustment;
+        const maxRightAdjustment = ((_k = (_j = autoWidthRef.current.get(mapKeys[1])) === null || _j === void 0 ? void 0 : _j.maxColWidth) !== null && _k !== void 0 ? _k : 0) +
+            ((_m = (_l = autoWidthRef.current.get(mapKeys[1])) === null || _l === void 0 ? void 0 : _l.adjustement) !== null && _m !== void 0 ? _m : 0);
+        const minWidthRightAdjusted = ((_p = (_o = autoWidthRef.current.get(mapKeys[1])) === null || _o === void 0 ? void 0 : _o.minWidth) !== null && _p !== void 0 ? _p : 100) - maxRightAdjustment;
+        const maxWidthRightAdjusted = ((_r = (_q = autoWidthRef.current.get(mapKeys[1])) === null || _q === void 0 ? void 0 : _q.maxWidth) !== null && _r !== void 0 ? _r : 9e10) - maxRightAdjustment;
+        // Recall that a right movement is the result of a negative value on deltaW
+        const minDeltaW = Math.abs(minWidthLeftAdjusted) < Math.abs(maxWidthRightAdjusted) ? minWidthLeftAdjusted : -maxWidthRightAdjusted;
+        const maxDeltaW = Math.abs(minWidthRightAdjusted) < Math.abs(maxWidthLeftAdjusted) ? -minWidthRightAdjusted : maxWidthLeftAdjusted;
+        return ({ min: minDeltaW, max: maxDeltaW });
+    }, []);
+    const calculateAdjustment = (key) => {
+        var _a, _b;
+        let adj = 0;
+        let delta;
+        if (deltaW > tentativeLimits.max)
+            delta = tentativeLimits.max;
+        else if (deltaW < tentativeLimits.min)
+            delta = tentativeLimits.min;
+        else
+            delta = deltaW;
+        if (currentKeys !== undefined && currentKeys[0] == key)
+            adj = delta;
+        else if (currentKeys !== undefined && currentKeys[1] == key)
+            adj = -delta;
+        return ((_b = (_a = props.AutoWidth.current.get(key)) === null || _a === void 0 ? void 0 : _a.adjustement) !== null && _b !== void 0 ? _b : 0) + adj;
+    };
+    const finishAdjustment = () => {
+        if (currentKeys === undefined)
+            return;
+        if (Math.abs(deltaW) > 5) {
+            const deltaLimits = calculateDeltaLimits(currentKeys, props.AutoWidth);
+            let delta;
+            if (deltaW > deltaLimits.max)
+                delta = deltaLimits.max;
+            else if (deltaW < deltaLimits.min)
+                delta = deltaLimits.min;
+            else
+                delta = deltaW;
+            props.SetAdjustment(currentKeys[0], delta);
+            props.SetAdjustment(currentKeys[1], -delta);
+        }
+        setMouseDown(0);
+        setTentativeLimits({ min: -Infinity, max: Infinity });
+        setCurrentKeys(undefined);
+        setDeltaW(0);
+    };
+    const getLeftKey = React.useCallback((key) => {
+        var _a;
+        const keys = React.Children.map((_a = props.children) !== null && _a !== void 0 ? _a : [], (element) => {
+            var _a;
+            if (!React.isValidElement(element)) {
+                return null;
+            }
+            if ((_a = !(props.AutoWidth.current.get(element.props.Key).enabled)) !== null && _a !== void 0 ? _a : true) {
+                return null;
+            }
+            if (element.type === AdjustableColumn_1.default) {
+                return element.props.Key;
+            }
+            return null;
+        }).filter((item) => item !== null);
+        const index = keys.indexOf(key);
+        if (index < 1)
+            return undefined;
+        return keys[index - 1];
+    }, [props.children]);
+    const onMove = React.useCallback((e) => {
+        if (currentKeys === undefined)
+            return;
+        const w = e.screenX - mouseDown;
+        setDeltaW(w);
+    }, [mouseDown, currentKeys]);
+    return (React.createElement("thead", { className: props.Class, style: props.Style, onMouseMove: (e) => {
+            onMove(e.nativeEvent);
+            e.stopPropagation();
+        }, onMouseUp: (e) => {
+            finishAdjustment();
+            e.stopPropagation();
+        }, onMouseLeave: (e) => {
+            finishAdjustment();
+            e.stopPropagation();
+        } },
+        React.createElement("tr", { ref: trRef },
+            React.Children.map(props.children, (element) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === Column_1.default)
+                    if ((_b = (_a = props.AutoWidth.current.get(element.props.Key)) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true)
+                        return (React.createElement(Column_1.ColumnHeaderWrapper, { enabled: (_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : true, setWidth: (w, a, u) => props.SetWidth(element.props.Key, w, a, u), onSort: (e) => props.OnSort({ colKey: element.props.Key, colField: element.props.Field, ascending: props.Ascending }, e), sorted: props.SortKey === element.props.Key && ((_e = element.props.AllowSort) !== null && _e !== void 0 ? _e : true), asc: props.Ascending, colKey: element.props.Key, key: element.props.Key, allowSort: element.props.AllowSort, width: ((_g = (_f = props.AutoWidth.current.get(element.props.Key)) === null || _f === void 0 ? void 0 : _f.width.has(-1)) !== null && _g !== void 0 ? _g : false)
+                                ? (_h = props.AutoWidth.current.get(element.props.Key)) === null || _h === void 0 ? void 0 : _h.maxColWidth
+                                : undefined, style: (_j = element.props.HeaderStyle) !== null && _j !== void 0 ? _j : element.props.RowStyle, extraWidth: props.ExtraWidth },
+                            ' ', (_k = element.props.children) !== null && _k !== void 0 ? _k : element.props.Key,
+                            ' '));
+                if (element.type === AdjustableColumn_1.default)
+                    if ((_m = (_l = props.AutoWidth.current.get(element.props.Key)) === null || _l === void 0 ? void 0 : _l.enabled) !== null && _m !== void 0 ? _m : true)
+                        return (React.createElement(AdjustableColumn_1.AdjustableColumnHeaderWrapper, { enabled: (_p = (_o = props.AutoWidth.current.get(element.props.Key)) === null || _o === void 0 ? void 0 : _o.enabled) !== null && _p !== void 0 ? _p : true, setWidth: (w, a, u) => props.SetWidth(element.props.Key, w, a, u), setMinWidth: (w) => props.SetMinWidth(element.props.Key, Math.round(w)), minWidth: (_q = props.AutoWidth.current.get(element.props.Key)) === null || _q === void 0 ? void 0 : _q.minWidth, setMaxWidth: (w) => props.SetMaxWidth(element.props.Key, Math.round(w)), maxWidth: (_r = props.AutoWidth.current.get(element.props.Key)) === null || _r === void 0 ? void 0 : _r.maxWidth, extraWidth: props.ExtraWidth, onSort: (e) => props.OnSort({ colKey: element.props.Key, colField: element.props.Field, ascending: props.Ascending }, e), sorted: props.SortKey === element.props.Key && ((_s = element.props.AllowSort) !== null && _s !== void 0 ? _s : true), key: element.props.Key, colKey: element.props.Key, asc: props.Ascending, allowSort: element.props.AllowSort, width: ((_u = (_t = props.AutoWidth.current.get(element.props.Key)) === null || _t === void 0 ? void 0 : _t.width.has(-1)) !== null && _u !== void 0 ? _u : false)
+                                ? (_v = props.AutoWidth.current.get(element.props.Key)) === null || _v === void 0 ? void 0 : _v.maxColWidth
+                                : undefined, startAdjustment: (e) => {
+                                let newCurrentKeys;
+                                if (getLeftKey(element.props.Key) !== undefined)
+                                    newCurrentKeys = [getLeftKey(element.props.Key), element.props.Key];
+                                setCurrentKeys(newCurrentKeys);
+                                setMouseDown(e.screenX);
+                                setTentativeLimits(calculateDeltaLimits(newCurrentKeys, props.AutoWidth));
+                                setDeltaW(0);
+                            }, adjustment: calculateAdjustment(element.props.Key), style: (_w = element.props.HeaderStyle) !== null && _w !== void 0 ? _w : element.props.RowStyle },
+                            ' ', (_x = element.props.children) !== null && _x !== void 0 ? _x : element.props.Key));
+                return null;
+            }),
+            React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
+}

package/lib/DynamicTable.js

@@ -23,21 +23,20 @@
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicTable = DynamicTable;
-var React = require("react");
-var Table_1 = require("./Table");
-var empty = new Map();
+const React = require("react");
+const Table_1 = require("./Table");
+const empty = new Map();
 function DynamicTable(props) {
     if (props.data.length <= 0)
         return null;
-    var cols = [];
-    var keys = Object.keys(props.data[0]);
-    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
-        var key = keys_1[_i];
-        cols.push({ key: key, label: key, field: key });
+    const cols = [];
+    const keys = Object.keys(props.data[0]);
+    for (const key of keys) {
+        cols.push({ key, label: key, field: key });
     }
     return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
-        React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d) { return handleSort(d); } }),
-        React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return props.onClick(data, e); }, Selected: props.selected, KeySelector: props.keySelector })));
+        React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: (d) => handleSort(d) }),
+        React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: (data, e) => props.onClick(data, e), Selected: props.selected, KeySelector: props.keySelector })));
     function handleSort(data) {
         if (data.colKey !== null)
             props.onSort(data);

package/lib/Paging.js

@@ -23,25 +23,25 @@ exports.default = default_1;
 //       Generated original version of source code.
 //
 //  ******************************************************************************************************
-var React = require("react");
+const React = require("react");
 function default_1(props) {
-    var _a = React.useState([]), pages = _a[0], setPages = _a[1];
-    var nPages = 7;
-    var minPg = React.useMemo(function () {
-        var min = Math.min.apply(Math, pages);
+    const [pages, setPages] = React.useState([]);
+    const nPages = 7;
+    const minPg = React.useMemo(() => {
+        const min = Math.min(...pages);
         if (isFinite(min) && !isNaN(min))
             return min;
         return 0;
     }, [pages]);
-    var maxPg = React.useMemo(function () {
-        var max = Math.max.apply(Math, pages);
+    const maxPg = React.useMemo(() => {
+        const max = Math.max(...pages);
         if (isFinite(max) && !isNaN(max))
             return max;
         return 0;
     }, [pages]);
-    React.useEffect(function () {
-        var display = [];
-        var p = Math.max(props.Current - Math.floor(nPages / 2), 1);
+    React.useEffect(() => {
+        const display = [];
+        let p = Math.max(props.Current - Math.floor(nPages / 2), 1);
         if (props.Total - p < nPages)
             p = Math.max(props.Total - nPages + 1, 1);
         while (p <= props.Total && display.length < nPages) {
@@ -52,24 +52,24 @@ function default_1(props) {
     }, [props.Total, props.Current]);
     return React.createElement("ul", { className: "pagination justify-content-center" },
         React.createElement("li", { className: "page-item" + (minPg <= 1 ? ' disabled' : ""), key: "previous" },
-            React.createElement("a", { className: "page-link", onClick: function () {
+            React.createElement("a", { className: "page-link", onClick: () => {
                     if (minPg > 1)
                         props.SetPage(Math.max(props.Current - nPages, 1));
                 } }, "Previous")),
         minPg > 2 ? React.createElement(React.Fragment, null,
             React.createElement("li", { className: "page-item", key: "1" },
-                React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(1); } }, "1")),
+                React.createElement("a", { className: "page-link", onClick: () => props.SetPage(1) }, "1")),
             React.createElement("li", { className: "page-item disabled", key: "skip-1" },
                 React.createElement("a", { className: "page-link" }, "..."))) : null,
-        pages.map(function (p) { return React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : ""), key: p },
-            React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(p); } }, p)); }),
+        pages.map((p) => React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : ""), key: p },
+            React.createElement("a", { className: "page-link", onClick: () => props.SetPage(p) }, p))),
         maxPg + 2 <= props.Total ? React.createElement(React.Fragment, null,
             React.createElement("li", { className: "page-item disabled", key: "skip-2" },
                 React.createElement("a", { className: "page-link" }, "...")),
             React.createElement("li", { className: "page-item", key: props.Total },
-                React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(props.Total); } }, props.Total))) : null,
+                React.createElement("a", { className: "page-link", onClick: () => props.SetPage(props.Total) }, props.Total))) : null,
         React.createElement("li", { className: "page-item" + (maxPg == props.Total ? ' disabled' : ""), key: 'next' },
-            React.createElement("a", { className: "page-link", onClick: function () {
+            React.createElement("a", { className: "page-link", onClick: () => {
                     if (maxPg < props.Total)
                         props.SetPage(Math.min(props.Current + nPages, props.Total));
                 } }, "Next")));

package/lib/SearchableTable.js

@@ -21,31 +21,20 @@
 //       Generated original version of source code.
 //
 // ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchableTable = SearchableTable;
-var React = require("react");
-var Table_1 = require("./Table");
+const React = require("react");
+const Table_1 = require("./Table");
 /**
  * A Table with an input Field to search on top
  */
 function SearchableTable(props) {
-    var _a = React.useState(props.data), data = _a[0], setData = _a[1];
-    var _b = React.useState(''), searchTextAS = _b[0], setSearchTextAS = _b[1];
-    React.useEffect(function () {
-        setData(props.data.filter(function (s) { return props.matchSearch(s, searchTextAS); }));
+    const [data, setData] = React.useState(props.data);
+    const [searchTextAS, setSearchTextAS] = React.useState('');
+    React.useEffect(() => {
+        setData(props.data.filter(s => props.matchSearch(s, searchTextAS)));
     }, [props.data, searchTextAS]);
     return React.createElement(React.Fragment, null,
-        React.createElement("input", { className: "form-control", placeholder: "Search filter for select box ...", value: searchTextAS, onChange: function (e) { return setSearchTextAS(e.target.value); } }),
-        React.createElement(Table_1.default, __assign({}, props, { data: data })));
+        React.createElement("input", { className: "form-control", placeholder: "Search filter for select box ...", value: searchTextAS, onChange: (e) => setSearchTextAS(e.target.value) }),
+        React.createElement(Table_1.default, Object.assign({}, props, { data: data })));
 }