@gpa-gemstone/react-table 1.2.66 → 1.2.67

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/Table.js

@@ -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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.66",
+  "version": "1.2.67",
   "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.38",
+    "@gpa-gemstone/react-interactive": "1.0.145",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",