@gpa-gemstone/react-table 1.2.24 → 1.2.26

package/lib/DynamicTable.d.ts

@@ -10,7 +10,7 @@ export interface DynamicTableProps<T> {
         row: T;
         data: T[keyof T] | null;
         index: number;
-    }, event: any) => void;
+    }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     /**
      * Key of the collumn to sort by
      */

package/lib/DynamicTable.js

@@ -35,9 +35,9 @@ function DynamicTable(props) {
         cols.push({ key: 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, e) { return handleSort(d, e); } }),
+        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 })));
-    function handleSort(data, event) {
+    function handleSort(data) {
         if (data.colKey !== null)
             props.onSort(data);
     }

package/lib/Paging.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface IProps {
+    Current: number;
+    Total: number;
+    SetPage: (p: number) => void;
+}
+export default function (props: IProps): JSX.Element;

package/lib/Paging.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//  ******************************************************************************************************
+//  Paging.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:
+//  ----------------------------------------------------------------------------------------------------
+//  08/01/2023 - C. Lackner
+//       Generated original version of source code.
+//
+//  ******************************************************************************************************
+var 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 () { return Math.min.apply(Math, pages); }, [pages]);
+    var maxPg = React.useMemo(function () { return Math.max.apply(Math, pages); }, [pages]);
+    React.useEffect(function () {
+        var display = [];
+        var 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;
+        }
+        setPages(display);
+    }, [props.Total, props.Current]);
+    return React.createElement("ul", { className: "pagination justify-content-center" },
+        React.createElement("li", { className: "page-item" + (minPg == 1 ? 'disabled' : "") },
+            React.createElement("a", { className: "page-link", onClick: function () {
+                    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" },
+                React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(1); } }, "1")),
+            React.createElement("li", { className: "page-item disabled" },
+                React.createElement("a", { className: "page-link" }, "..."))) : null,
+        pages.map(function (p) { return React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : "") },
+            React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(p); } }, p)); }),
+        maxPg + 2 < props.Total ? React.createElement(React.Fragment, null,
+            React.createElement("li", { className: "page-item disabled" },
+                React.createElement("a", { className: "page-link" }, "...")),
+            React.createElement("li", { className: "page-item" },
+                React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(props.Total); } }, props.Total))) : null,
+        React.createElement("li", { className: "page-item" + (maxPg == props.Total ? 'disabled' : "") },
+            React.createElement("a", { className: "page-link", onClick: function () {
+                    if (maxPg < props.Total)
+                        props.SetPage(Math.min(props.Current + nPages, props.Total));
+                } }, "Next")));
+}
+exports.default = default_1;

package/lib/SelectTable.js

@@ -75,7 +75,7 @@ function SelectTable(props) {
     React.useEffect(function () {
         props.onSelection(data.filter(function (item) { return selected.findIndex(function (key) { return key === item[props.KeyField]; }) > -1; }));
     }, [selected]);
-    function handleClick(d, event) {
+    function handleClick(d) {
         var sIndex = selected.findIndex(function (item) { return item === d.row[props.KeyField]; });
         if (sIndex === -1)
             setSelected(function (od) { return __spreadArray(__spreadArray([], od, true), [d.row[props.KeyField]], false); });
@@ -96,7 +96,7 @@ function SelectTable(props) {
     }
     var tableProps = {
         cols: __spreadArray([
-            { key: 'gemstone-checkbox', field: props.KeyField, label: '', headerStyle: { width: '4em' }, rowStyle: { width: '4em' }, content: function (item, key, field, style) {
+            { key: 'gemstone-checkbox', field: props.KeyField, label: '', headerStyle: { width: '4em' }, rowStyle: { width: '4em' }, content: function (item) {
                     var index = selected.findIndex(function (i) { return i === item[props.KeyField]; });
                     if (index > -1)
                         return React.createElement("div", { style: { marginTop: '16px', textAlign: 'center' } },

package/lib/Table.d.ts

@@ -71,7 +71,7 @@ interface IRowProps<T> {
         row: T;
         data: T[keyof T] | null;
         index: number;
-    }, e: React.MouseEvent<HTMLTableHeaderCellElement, MouseEvent>) => void;
+    }, e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     DragStart?: ((data: {
         colKey: string;
         colField?: keyof T;
@@ -93,7 +93,7 @@ interface IHeaderProps<T> {
         colKey: string;
         colField?: keyof T;
         ascending: boolean;
-    }, event: React.MouseEvent<HTMLTableHeaderCellElement, MouseEvent>) => void;
+    }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 export declare function Header<T>(props: IHeaderProps<T>): JSX.Element;
 export {};

package/lib/Table.js

@@ -92,9 +92,8 @@ function HeaderCell(props) {
         style.position = 'relative';
     }
     return (React.createElement("th", { style: style, onClick: function (e) { return props.Click(e); } },
-        React.createElement("div", { style: { position: 'absolute', width: 25 } },
-            React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending })),
-        React.createElement("div", { style: { marginLeft: 25 } }, props.Label)));
+        React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending }),
+        React.createElement("div", { style: { marginLeft: (props.SortKey === props.DataKey ? 25 : 0) } }, props.Label)));
 }
 function RenderAngleIcon(props) {
     var AngleIcon = function (a) { return a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown; };
@@ -102,6 +101,6 @@ function RenderAngleIcon(props) {
         return null;
     if (props.SortKey !== props.Key)
         return null;
-    return React.createElement(AngleIcon, { ascending: props.Ascending });
+    return React.createElement("div", { style: { position: 'absolute', width: 25 } },
+        React.createElement(AngleIcon, { ascending: props.Ascending }));
 }
-;

package/lib/index.d.ts

@@ -2,5 +2,6 @@ import Table, { TableProps, Rows, Column } from './Table';
 import { SelectTable, ISelectTableProps } from './SelectTable';
 import { SearchableTable } from './SearchableTable';
 import { DynamicTableProps, DynamicTable } from './DynamicTable';
-export { TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column };
+import Paging from './Paging';
+export { TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column, Paging };
 export default Table;

package/lib/index.js

@@ -24,7 +24,7 @@
 //
 //  ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = void 0;
+exports.Paging = exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = void 0;
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Rows", { enumerable: true, get: function () { return Table_1.Rows; } });
 var SelectTable_1 = require("./SelectTable");
@@ -33,4 +33,6 @@ var SearchableTable_1 = require("./SearchableTable");
 Object.defineProperty(exports, "SearchableTable", { enumerable: true, get: function () { return SearchableTable_1.SearchableTable; } });
 var DynamicTable_1 = require("./DynamicTable");
 Object.defineProperty(exports, "DynamicTable", { enumerable: true, get: function () { return DynamicTable_1.DynamicTable; } });
+var Paging_1 = require("./Paging");
+exports.Paging = Paging_1.default;
 exports.default = Table_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.24",
+  "version": "1.2.26",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -9,7 +9,7 @@
     "test": "jest --config jestconfig.json",
     "build": "tsc",
     "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "tslint -p tsconfig.json",
+    "lint": "eslint . --ext .ts,.tsx",
     "prepare": "npm run build",
     "prepublishOnly": "npm test && npm run lint",
     "preversion": "npm run lint",
@@ -33,16 +33,17 @@
   "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
   "devDependencies":   {
     "@types/jest": "^27.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "eslint": "^8.43.0",
     "jest": "^27.0.6",
     "prettier": "^2.3.2",
     "ts-jest": "^27.0.4",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
     "typescript": "4.4.4"
   },
   "dependencies":   {
-    "@gpa-gemstone/gpa-symbols": "0.0.26",
-    "@gpa-gemstone/helper-functions": "0.0.20",
+    "@gpa-gemstone/gpa-symbols": "0.0.27",
+    "@gpa-gemstone/helper-functions": "0.0.21",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",