@gpa-gemstone/react-table 1.2.66 → 1.2.68

package/lib/ConfigurableTable/ConfigurableTable.js

@@ -186,6 +186,6 @@ function ColumnSelection(props) {
                     ? 'The Table is currently sorted by this column so it cannot be hidden.'
                     : undefined })) : null))),
         props.disableAdd ?
-            React.createElement(react_interactive_1.Alert, { Color: 'alert-primary', Style: { marginBottom: 0, marginTop: '0.5em' } }, "Additional columns disabled due to table size.")
+            React.createElement(react_interactive_1.Alert, { Class: 'alert-primary', Style: { marginBottom: 0, marginTop: '0.5em' } }, "Additional columns disabled due to table size.")
             : null));
 }

package/lib/Paging.d.ts

@@ -3,4 +3,5 @@ export interface IProps {
     Total: number;
     SetPage: (p: number) => void;
 }
-export default function (props: IProps): JSX.Element;
+declare const Paging: (props: IProps) => JSX.Element;
+export default Paging;

package/lib/Paging.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
 //  ******************************************************************************************************
 //  Paging.tsx - Gbtc
 //
@@ -23,54 +22,97 @@ exports.default = default_1;
 //       Generated original version of source code.
 //
 //  ******************************************************************************************************
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const helper_functions_1 = require("@gpa-gemstone/helper-functions");
 const React = require("react");
-function default_1(props) {
-    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]);
-    const maxPg = React.useMemo(() => {
-        const max = Math.max(...pages);
-        if (isFinite(max) && !isNaN(max))
-            return max;
-        return 0;
-    }, [pages]);
+const defaultMaxPagesToShow = 7;
+const Paging = (props) => {
+    const containerRef = React.useRef(null);
+    const { scrollWidth, width } = (0, helper_functions_1.useGetContainerPosition)(containerRef);
+    const [pagesToShow, setPagesToShow] = React.useState([]);
+    const [maxPagesToShow, setMaxPagesToShow] = React.useState(defaultMaxPagesToShow);
+    const minPageToShow = React.useMemo(() => {
+        const min = Math.min(...pagesToShow);
+        if (!isFinite(min) || isNaN(min))
+            return 0;
+        return min;
+    }, [pagesToShow]);
+    const maxPageToShow = React.useMemo(() => {
+        const max = Math.max(...pagesToShow);
+        if (!isFinite(max) || isNaN(max))
+            return 0;
+        return max;
+    }, [pagesToShow]);
     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) {
-            display.push(p);
-            p = p + 1;
+        const newPagesToShow = [];
+        let startPage = Math.max(props.Current - Math.floor(maxPagesToShow / 2), 1);
+        if (props.Total - startPage < maxPagesToShow)
+            startPage = Math.max(props.Total - maxPagesToShow + 1, 1);
+        while (startPage <= props.Total && newPagesToShow.length < maxPagesToShow) {
+            newPagesToShow.push(startPage);
+            startPage = startPage + 1;
         }
-        setPages(display);
-    }, [props.Total, props.Current]);
-    return React.createElement("ul", { className: "pagination justify-content-center" },
-        React.createElement("li", { className: "page-item" + (minPg <= 1 ? ' disabled' : ""), key: "previous" },
+        setPagesToShow(newPagesToShow);
+    }, [props.Total, props.Current, width, scrollWidth, maxPagesToShow]);
+    //Effect to decrement maxPagesToShow if we are overflowing
+    React.useLayoutEffect(() => {
+        if (scrollWidth > width)
+            setMaxPagesToShow(prev => Math.max(prev - 1, 1));
+    }, [width, scrollWidth]);
+    //Effect to increment maxPagesToShow if we have enough space
+    React.useLayoutEffect(() => {
+        if (maxPagesToShow >= defaultMaxPagesToShow || containerRef.current == null)
+            return;
+        const childArray = Array.from(containerRef.current.children);
+        // Sum widths of all <li> elements
+        const trueWidth = childArray.reduce((sum, child) => sum + child.offsetWidth, 0);
+        const availableWidth = width - trueWidth;
+        const estimatedButtonWidthWithTolerance = 50;
+        if (availableWidth >= estimatedButtonWidthWithTolerance)
+            setMaxPagesToShow(prev => Math.min(defaultMaxPagesToShow, prev + 1));
+    }, [width, maxPagesToShow]);
+    const showLeftBlock = maxPagesToShow < defaultMaxPagesToShow
+        ? minPageToShow !== 1
+        : minPageToShow > 2;
+    const showRightBlock = maxPagesToShow < defaultMaxPagesToShow
+        ? maxPageToShow !== props.Total
+        : maxPageToShow + 2 <= props.Total;
+    return (React.createElement("ul", { className: "pagination justify-content-center", ref: containerRef },
+        React.createElement("li", { className: "page-item" + (minPageToShow <= 1 ? ' disabled' : ""), key: "previous", style: { cursor: 'pointer' } },
             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" },
+                    if (minPageToShow > 1)
+                        props.SetPage(Math.max(props.Current - defaultMaxPagesToShow, 1));
+                } },
+                React.createElement(gpa_symbols_1.ReactIcons.DoubleChevronLeft, { Size: 15 }))),
+        React.createElement("li", { className: "page-item" + (props.Current <= 1 ? ' disabled' : ""), key: "step-previous", style: { cursor: 'pointer' } },
+            React.createElement("a", { className: "page-link", onClick: () => {
+                    if (props.Current > 1)
+                        props.SetPage(props.Current - 1);
+                } },
+                React.createElement(gpa_symbols_1.ReactIcons.ChevronLeft, { Size: 15 }))),
+        showLeftBlock ? React.createElement(React.Fragment, null,
+            React.createElement("li", { className: "page-item", key: "1", style: { cursor: 'pointer' } },
                 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((p) => React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : ""), key: p },
+        pagesToShow.map((p) => React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : ""), key: p, style: { cursor: 'pointer' } },
             React.createElement("a", { className: "page-link", onClick: () => props.SetPage(p) }, p))),
-        maxPg + 2 <= props.Total ? React.createElement(React.Fragment, null,
+        showRightBlock ? 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("li", { className: "page-item", key: props.Total, style: { cursor: 'pointer' } },
                 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("li", { className: "page-item" + (props.Current >= props.Total ? ' disabled' : ""), key: "step-next", style: { cursor: 'pointer' } },
+            React.createElement("a", { className: "page-link", onClick: () => {
+                    if (props.Current < props.Total)
+                        props.SetPage(props.Current + 1);
+                } },
+                React.createElement(gpa_symbols_1.ReactIcons.ChevronRight, { Size: 15 }))),
+        React.createElement("li", { className: "page-item" + (maxPageToShow == props.Total ? ' disabled' : ""), key: 'next', style: { cursor: 'pointer' } },
             React.createElement("a", { className: "page-link", onClick: () => {
-                    if (maxPg < props.Total)
-                        props.SetPage(Math.min(props.Current + nPages, props.Total));
-                } }, "Next")));
-}
+                    if (maxPageToShow < props.Total)
+                        props.SetPage(Math.min(props.Current + defaultMaxPagesToShow, props.Total));
+                } },
+                React.createElement(gpa_symbols_1.ReactIcons.DoubleChevronRight, { Size: 15 })))));
+};
+exports.default = Paging;

package/lib/Table/Column.js

@@ -69,5 +69,5 @@ function ColumnHeaderWrapper(props) {
             } }, (_a = props.children) !== null && _a !== void 0 ? _a : props.colKey));
 }
 function ColumnDataWrapper(props) {
-    return (React.createElement("td", { style: props.style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
+    return (React.createElement("td", { style: props.style, onClick: props.onClick, draggable: props.dragStart != undefined, onDragStart: props.dragStart }, props.children));
 }

package/lib/Table/Table.js

@@ -76,7 +76,7 @@ const IsColumnAdjustable = (props) => {
         return propValue;
     return false;
 };
-const scrollBarWidth = getScrollbarWidth();
+const scrollBarWidth = (0, helper_functions_1.GetScrollbarWidth)();
 const lastColumnWidth = 17;
 function Table(props) {
     const bodyRef = React.useRef(null);
@@ -189,32 +189,32 @@ function Table(props) {
                         console.error("Could not find width object for Key: " + key);
                 });
             }
-            let remainingSpace = currentTableWidth;
-            [...newMap.keys()].forEach(key => {
-                const widthObj = newMap.get(key);
-                if (widthObj != null) {
-                    if (widthObj.minWidth <= remainingSpace) {
-                        // This follows behavior consistent with MDN documentation on how these width types should behave
-                        if (widthObj.minWidth > widthObj.width)
-                            widthObj.width = widthObj.minWidth;
-                        if (widthObj.maxWidth != null && widthObj.minWidth > widthObj.maxWidth)
-                            widthObj.maxWidth = widthObj.minWidth;
-                        if (widthObj.maxWidth != null && widthObj.width > widthObj.maxWidth)
-                            widthObj.width = widthObj.maxWidth;
-                        // Constrain Width to remainingSpace
-                        if (widthObj.width > remainingSpace)
-                            widthObj.width = remainingSpace;
-                        remainingSpace -= widthObj.width;
-                    }
-                    else {
-                        widthObj.minWidth = 0;
-                        widthObj.width = 0;
-                        widthObj.maxWidth = 0;
-                    }
+        });
+        let remainingSpace = currentTableWidth;
+        [...newMap.keys()].forEach(key => {
+            const widthObj = newMap.get(key);
+            if (widthObj != null) {
+                if (widthObj.minWidth <= remainingSpace) {
+                    // This follows behavior consistent with MDN documentation on how these width types should behave
+                    if (widthObj.minWidth > widthObj.width)
+                        widthObj.width = widthObj.minWidth;
+                    if (widthObj.maxWidth != null && widthObj.minWidth > widthObj.maxWidth)
+                        widthObj.maxWidth = widthObj.minWidth;
+                    if (widthObj.maxWidth != null && widthObj.width > widthObj.maxWidth)
+                        widthObj.width = widthObj.maxWidth;
+                    // Constrain Width to remainingSpace
+                    if (widthObj.width > remainingSpace)
+                        widthObj.width = remainingSpace;
+                    remainingSpace -= widthObj.width;
                 }
-                else
-                    console.error("Could not find width object for Key: " + key);
-            });
+                else {
+                    widthObj.minWidth = 0;
+                    widthObj.width = 0;
+                    widthObj.maxWidth = 0;
+                }
+            }
+            else
+                console.error("Could not find width object for Key: " + key);
         });
         colWidthsRef.current = newMap;
         oldWidthRef.current = currentTableWidth;
@@ -313,18 +313,19 @@ function Rows(props) {
                         data: d[(_b = element.props) === null || _b === void 0 ? void 0 : _b.Field],
                         index: i,
                     }, e);
-                }, dragStart: (e) => {
-                    var _a, _b;
-                    if (props.DragStart == null)
-                        return;
-                    return props.DragStart({
-                        colKey: element.props.Key,
-                        colField: (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field,
-                        row: d,
-                        data: d[(_b = element.props) === null || _b === void 0 ? void 0 : _b.Field],
-                        index: i,
-                    }, e);
-                }, style: style }, ((_d = element.props) === null || _d === void 0 ? void 0 : _d.Content) != null
+                }, dragStart: props.DragStart == null ? undefined :
+                    (e) => {
+                        var _a, _b;
+                        if (props.DragStart == null)
+                            return;
+                        return props.DragStart({
+                            colKey: element.props.Key,
+                            colField: (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field,
+                            row: d,
+                            data: d[(_b = element.props) === null || _b === void 0 ? void 0 : _b.Field],
+                            index: i,
+                        }, e);
+                    }, style: style }, ((_d = element.props) === null || _d === void 0 ? void 0 : _d.Content) != null
                 ? element.props.Content({
                     item: d,
                     key: element.props.Key,
@@ -506,18 +507,3 @@ function Header(props) {
                 React.createElement("th", { style: { width: lastColumnWidth, padding: 0, maxWidth: lastColumnWidth } }, props.LastColumn)
                 : null)));
 }
-function getScrollbarWidth() {
-    // Creating invisible container
-    const outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.overflow = 'scroll'; // forcing scrollbar to appear
-    document.body.appendChild(outer);
-    // Creating inner element and placing it in the container
-    const inner = document.createElement('div');
-    outer.appendChild(inner);
-    // Calculating difference between container's full width and the child width
-    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
-    // Removing temporary elements from the DOM
-    outer.parentNode.removeChild(outer);
-    return scrollbarWidth;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.66",
+  "version": "1.2.68",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -43,9 +43,9 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/gpa-symbols": "0.0.48",
-    "@gpa-gemstone/helper-functions": "0.0.37",
-    "@gpa-gemstone/react-interactive": "1.0.144",
+    "@gpa-gemstone/gpa-symbols": "0.0.49",
+    "@gpa-gemstone/helper-functions": "0.0.39",
+    "@gpa-gemstone/react-interactive": "1.0.146",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",