@gpa-gemstone/react-table 1.2.50 → 1.2.52

package/lib/SelectTable.js

@@ -21,72 +21,52 @@
 //       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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTable = SelectTable;
-var React = require("react");
-var _ = require("lodash");
-var Table_1 = require("./Table");
+const React = require("react");
+const _ = require("lodash");
+const Table_1 = require("./Table");
 function SelectTable(props) {
-    var didMountRef = React.useRef(false);
-    var _a = React.useState(props.data), data = _a[0], setData = _a[1];
-    var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
-    var _c = React.useState(props.sortKey), sortKey = _c[0], setSortKey = _c[1];
-    var _d = React.useState(props.ascending), ascending = _d[0], setAscending = _d[1];
-    React.useEffect(function () {
+    const didMountRef = React.useRef(false);
+    const [data, setData] = React.useState(props.data);
+    const [selected, setSelected] = React.useState([]);
+    const [sortKey, setSortKey] = React.useState(props.sortKey);
+    const [ascending, setAscending] = React.useState(props.ascending);
+    React.useEffect(() => {
         if (didMountRef.current)
             selectAll();
         else
             didMountRef.current = true;
     }, [props.selectAllCounter]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (props.data.length !== data.length)
             setData(props.data);
     }, [props.data]);
-    React.useEffect(function () {
-        setSelected(function (d) { return d.filter(function (keyItem) { return data.findIndex(function (item) { return item[props.KeyField] === keyItem; }) > -1; }); });
+    React.useEffect(() => {
+        setSelected((d) => d.filter(keyItem => data.findIndex(item => item[props.KeyField] === keyItem) > -1));
     }, [data]);
-    React.useEffect(function () {
-        var sortColumn = props.cols.filter(function (col) { return col.key === sortKey; })[0];
+    React.useEffect(() => {
+        const sortColumn = props.cols.filter(col => col.key === sortKey)[0];
         if (sortColumn === undefined || sortColumn.field === undefined)
             return;
-        var sortField = sortColumn.field;
-        setData(function (lst) { return (_.orderBy(lst, [sortField], [(ascending ? "asc" : "desc")])); });
+        const sortField = sortColumn.field;
+        setData((lst) => (_.orderBy(lst, [sortField], [(ascending ? "asc" : "desc")])));
     }, [ascending, sortKey]);
-    React.useEffect(function () {
-        props.onSelection(data.filter(function (item) { return selected.findIndex(function (key) { return key === item[props.KeyField]; }) > -1; }));
+    React.useEffect(() => {
+        props.onSelection(data.filter(item => selected.findIndex(key => key === item[props.KeyField]) > -1));
     }, [selected]);
     function handleClick(d) {
-        var sIndex = selected.findIndex(function (item) { return item === d.row[props.KeyField]; });
+        const sIndex = selected.findIndex(item => item === d.row[props.KeyField]);
         if (sIndex === -1)
-            setSelected(function (od) { return __spreadArray(__spreadArray([], od, true), [d.row[props.KeyField]], false); });
+            setSelected((od) => [...od, d.row[props.KeyField]]);
         else
-            setSelected(function (od) { return od.filter(function (item) { return item !== d.row[props.KeyField]; }); });
+            setSelected((od) => od.filter(item => item !== d.row[props.KeyField]));
     }
     function selectAll() {
-        setSelected(function (d) { if (d.length === data.length)
+        setSelected((d) => { if (d.length === data.length)
             return [];
         else
-            return data.map(function (row) { return row[props.KeyField]; }); });
+            return data.map(row => row[props.KeyField]); });
     }
     function handleSort(d) {
         if (d.colKey === sortKey)
@@ -94,19 +74,20 @@ function SelectTable(props) {
         else
             setSortKey(d.colKey);
     }
-    var tableProps = {
-        cols: __spreadArray([
-            { 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]; });
-                    var iconClass = index > -1 ? 'fa-check-square-o' : 'fa-square-o';
+    const tableProps = {
+        cols: [
+            { key: 'gemstone-checkbox', field: props.KeyField, label: '', headerStyle: { width: '4em' }, rowStyle: { width: '4em' }, content: (item) => {
+                    const index = selected.findIndex(i => i === item[props.KeyField]);
+                    const iconClass = index > -1 ? 'fa-check-square-o' : 'fa-square-o';
                     return React.createElement("div", { style: { textAlign: 'center', verticalAlign: 'middle' } },
-                        React.createElement("i", { className: "fa ".concat(iconClass, " fa-3x") }));
-                } }
-        ], props.cols, true),
-        data: data,
+                        React.createElement("i", { className: `fa ${iconClass} fa-3x` }));
+                } },
+            ...props.cols
+        ],
+        data,
         onClick: handleClick,
-        sortKey: sortKey,
-        ascending: ascending,
+        sortKey,
+        ascending,
         onSort: handleSort,
         tableClass: props.tableClass,
         tableStyle: props.tableStyle,
@@ -114,8 +95,8 @@ function SelectTable(props) {
         theadClass: props.theadClass,
         tbodyStyle: props.tbodyStyle,
         tbodyClass: props.tbodyClass,
-        selected: function (d) { return false; },
+        selected: (d) => false,
         rowStyle: props.rowStyle
     };
-    return React.createElement(Table_1.default, __assign({}, tableProps));
+    return React.createElement(Table_1.default, Object.assign({}, tableProps));
 }

package/lib/Table.js

@@ -21,28 +21,17 @@
 //       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.default = Table;
 exports.Rows = Rows;
 exports.Header = Header;
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var React = require("react");
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const React = require("react");
 function Table(props) {
     return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
-        React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d, e) { return handleSort(d, e); } }),
-        React.createElement(Rows, { DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return (props.onClick === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector }),
-        props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? __assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
+        React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: (d, e) => handleSort(d, e) }),
+        React.createElement(Rows, { DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: (data, e) => (props.onClick === undefined ? null : props.onClick(data, e)), Selected: props.selected, KeySelector: props.keySelector }),
+        props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? Object.assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
     function handleSort(data, event) {
         if (data.colKey !== null)
             props.onSort(data, event);
@@ -51,11 +40,11 @@ function Table(props) {
 function Rows(props) {
     if (props.Data.length === 0)
         return null;
-    var rows = props.Data.map(function (item, rowIndex) {
-        var cells = props.Cols.map(function (colData) {
-            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); }, DragStart: props.DragStart });
+    const rows = props.Data.map((item, rowIndex) => {
+        const cells = props.Cols.map((colData) => {
+            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: (data, e) => props.Click(data, e), DragStart: props.DragStart });
         });
-        var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
+        const style = (props.RowStyle !== undefined) ? Object.assign({}, props.RowStyle) : {};
         if (style.cursor === undefined)
             style.cursor = 'pointer';
         if (props.Selected !== undefined && props.Selected(item))
@@ -70,32 +59,32 @@ function Rows(props) {
     return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, rows));
 }
 function Cell(props) {
-    var css = (props.Style !== undefined) ? __assign({}, props.Style) : {};
+    const css = (props.Style !== undefined) ? Object.assign({}, props.Style) : {};
     if (props.DragStart !== undefined)
         css.cursor = "grab";
-    var getFieldValue = function () { return props.DataField !== undefined ? props.Object[props.DataField] : null; };
-    var getFieldContent = function () { return props.Content !== undefined ? props.Content(props.Object, props.DataKey, props.DataField, css, props.RowIndex) : getFieldValue(); };
-    return (React.createElement("td", { style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); }, draggable: props.DragStart !== undefined, onDragStart: function (e) { if (props.DragStart !== undefined)
+    const getFieldValue = () => props.DataField !== undefined ? props.Object[props.DataField] : null;
+    const getFieldContent = () => props.Content !== undefined ? props.Content(props.Object, props.DataKey, props.DataField, css, props.RowIndex) : getFieldValue();
+    return (React.createElement("td", { style: css, onClick: (e) => props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e), draggable: props.DragStart !== undefined, onDragStart: (e) => { if (props.DragStart !== undefined)
             props.DragStart({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); } }, getFieldContent()));
 }
 function Header(props) {
     return (React.createElement("thead", { className: props.Class, style: props.Style },
-        React.createElement("tr", null, props.Cols.map(function (col) { return React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: function (e) { return props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e); }, Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending }); }))));
+        React.createElement("tr", null, props.Cols.map((col) => React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: (e) => props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e), Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending })))));
 }
 function HeaderCell(props) {
-    var style = (props.HeaderStyle !== undefined) ? props.HeaderStyle : {};
+    const style = (props.HeaderStyle !== undefined) ? props.HeaderStyle : {};
     if (style.cursor === undefined && props.DataKey !== null) {
         style.cursor = 'pointer';
     }
     if (style.position === undefined) {
         style.position = 'relative';
     }
-    return (React.createElement("th", { style: style, onClick: function (e) { return props.Click(e); } },
+    return (React.createElement("th", { style: style, onClick: (e) => props.Click(e) },
         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; };
+    const AngleIcon = (a) => a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown;
     if (props.SortKey === null)
         return null;
     if (props.SortKey !== props.Key)

package/lib/index.d.ts

@@ -3,13 +3,13 @@ import { SelectTable, ISelectTableProps } from './SelectTable';
 import { SearchableTable } from './SearchableTable';
 import { DynamicTableProps, DynamicTable } from './DynamicTable';
 import Paging from './Paging';
-import AdjustableTable from './AdjustableTable/AdjustableTable';
+import AdjustableTable from './AdjustableTable/Table';
 import UpdatedColumn from './AdjustableTable/Column';
-import AdjustableCol from './AdjustableTable/AdjustableColumn';
+import AdjustableColumn from './AdjustableTable/AdjustableColumn';
 declare const ReactTable: {
     Table: typeof AdjustableTable;
     Column: typeof UpdatedColumn;
-    AdjustableCol: typeof AdjustableCol;
+    AdjustableColumn: typeof AdjustableColumn;
 };
 export { ReactTable, TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column, Paging };
 export default Table;

package/lib/index.js

@@ -25,23 +25,23 @@
 //  ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Paging = exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = exports.ReactTable = void 0;
-var Table_1 = require("./Table");
+const Table_1 = require("./Table");
 Object.defineProperty(exports, "Rows", { enumerable: true, get: function () { return Table_1.Rows; } });
-var SelectTable_1 = require("./SelectTable");
+const SelectTable_1 = require("./SelectTable");
 Object.defineProperty(exports, "SelectTable", { enumerable: true, get: function () { return SelectTable_1.SelectTable; } });
-var SearchableTable_1 = require("./SearchableTable");
+const SearchableTable_1 = require("./SearchableTable");
 Object.defineProperty(exports, "SearchableTable", { enumerable: true, get: function () { return SearchableTable_1.SearchableTable; } });
-var DynamicTable_1 = require("./DynamicTable");
+const DynamicTable_1 = require("./DynamicTable");
 Object.defineProperty(exports, "DynamicTable", { enumerable: true, get: function () { return DynamicTable_1.DynamicTable; } });
-var Paging_1 = require("./Paging");
+const Paging_1 = require("./Paging");
 exports.Paging = Paging_1.default;
-var AdjustableTable_1 = require("./AdjustableTable/AdjustableTable");
-var Column_1 = require("./AdjustableTable/Column");
-var AdjustableColumn_1 = require("./AdjustableTable/AdjustableColumn");
-var ReactTable = {
-    Table: AdjustableTable_1.default,
+const Table_2 = require("./AdjustableTable/Table");
+const Column_1 = require("./AdjustableTable/Column");
+const AdjustableColumn_1 = require("./AdjustableTable/AdjustableColumn");
+const ReactTable = {
+    Table: Table_2.default,
     Column: Column_1.default,
-    AdjustableCol: AdjustableColumn_1.default,
+    AdjustableColumn: AdjustableColumn_1.default,
 };
 exports.ReactTable = ReactTable;
 exports.default = Table_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.50",
+  "version": "1.2.52",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -42,8 +42,8 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/gpa-symbols": "0.0.40",
-    "@gpa-gemstone/helper-functions": "0.0.33",
+    "@gpa-gemstone/gpa-symbols": "0.0.41",
+    "@gpa-gemstone/helper-functions": "0.0.34",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",

package/lib/AdjustableTable/AdjustableTable.d.ts

@@ -1,102 +0,0 @@
-import * as React from 'react';
-interface TableProps<T> {
-    /**
-     * List of T objects used to generate rows
-     */
-    Data: T[];
-    /**
-     * Callback when the user clicks on a data entry
-     * @param data contains the data including the columnKey
-     * @param event the onClick Event to allow propagation as needed
-     * @returns
-     */
-    OnClick?: (data: {
-        colKey: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, event: any) => void;
-    /**
-     * Key of the collumn to sort by
-     */
-    SortKey: string;
-    /**
-     * Boolen to indicate whether the sort is ascending or descending
-     */
-    Ascending: boolean;
-    /**
-     * Callback when the data should be sorted
-     * @param data the information of the collumn including the Key of the collumn
-     * @param event The onCLick event to allow Propagation as needed
-     */
-    OnSort(data: {
-        colKey: string;
-        colField?: keyof T;
-        ascending: boolean;
-    }, event: any): void;
-    /**
-     * Class of the table component
-     */
-    TableClass?: string;
-    /**
-     * style of the table component
-     */
-    TableStyle?: React.CSSProperties;
-    /**
-     * style of the thead component
-     */
-    TheadStyle?: React.CSSProperties;
-    /**
-     * Class of the thead component
-     */
-    TheadClass?: string;
-    /**
-     * style of the tbody component
-     */
-    TbodyStyle?: React.CSSProperties;
-    /**
-     * Class of the tbody component
-     */
-    TbodyClass?: string;
-    /**
-     * determines if a row should be styled as selected
-     * @param data the item to be checked
-     * @returns true if the row should be styled as selected
-     */
-    Selected?: (data: T, index: number) => boolean;
-    /**
-     *
-     * @param data he information of the row including the item of the row
-     * @param e the event triggering this
-     * @returns
-     */
-    OnDragStart?: (data: {
-        colKey: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, e: any) => void;
-    /**
-     * The default style for the tr element
-     */
-    RowStyle?: React.CSSProperties;
-    /**
-     * a Function that retrieves a unique key used for React key properties
-     * @param data the item to be turned into a key
-     * @returns a unique Key
-     */
-    KeySelector: (data: T, index?: number) => string | number;
-    /**
-     * Optional Element to display in the last row of the Table
-     * use this for displaying warnings when the Table content gets cut off
-     */
-    LastRow?: string | React.ReactNode;
-    /**
-     * Optional Element to display on upper Right corner
-     */
-    LastColumn?: string | React.ReactNode;
-}
-export default function AdjustableTable<T>(props: React.PropsWithChildren<TableProps<T>>): JSX.Element;
-export {};