@gpa-gemstone/react-table 1.2.57 → 1.2.58

package/lib/Table/Types.js

@@ -0,0 +1,24 @@
+"use strict";
+// ******************************************************************************************************
+//  Types.ts - Gbtc
+//
+//  Copyright © 2021, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  12/06/2024 - G. Santos
+//       Migrated props to namespace.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/index.d.ts

@@ -1,15 +1,8 @@
-import Table, { TableProps, Rows, Column } from './Table';
-import { SelectTable, ISelectTableProps } from './SelectTable';
-import { SearchableTable } from './SearchableTable';
-import { DynamicTableProps, DynamicTable } from './DynamicTable';
 import Paging from './Paging';
-import AdjustableTable from './AdjustableTable/Table';
-import UpdatedColumn from './AdjustableTable/Column';
-import AdjustableColumn from './AdjustableTable/AdjustableColumn';
-declare const ReactTable: {
-    Table: typeof AdjustableTable;
-    Column: typeof UpdatedColumn;
-    AdjustableColumn: typeof AdjustableColumn;
-};
-export { ReactTable, TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column, Paging };
-export default Table;
+import * as ReactTableProps from './Table/Types';
+import { Table } from './Table/Table';
+import { Column } from './Table/Column';
+import FilterableColumn from './Table/FilterableColumn';
+import ConfigurableTable from './ConfigurableTable/ConfigurableTable';
+import ConfigurableColumn from './ConfigurableTable/ConfigurableColumn';
+export { ReactTableProps, Table, Column, FilterableColumn, ConfigurableTable, ConfigurableColumn, Paging };

package/lib/index.js

@@ -24,24 +24,18 @@
 //
 //  ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paging = exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = exports.ReactTable = void 0;
-const Table_1 = require("./Table");
-Object.defineProperty(exports, "Rows", { enumerable: true, get: function () { return Table_1.Rows; } });
-const SelectTable_1 = require("./SelectTable");
-Object.defineProperty(exports, "SelectTable", { enumerable: true, get: function () { return SelectTable_1.SelectTable; } });
-const SearchableTable_1 = require("./SearchableTable");
-Object.defineProperty(exports, "SearchableTable", { enumerable: true, get: function () { return SearchableTable_1.SearchableTable; } });
-const DynamicTable_1 = require("./DynamicTable");
-Object.defineProperty(exports, "DynamicTable", { enumerable: true, get: function () { return DynamicTable_1.DynamicTable; } });
+exports.Paging = exports.ConfigurableColumn = exports.ConfigurableTable = exports.FilterableColumn = exports.Column = exports.Table = exports.ReactTableProps = void 0;
 const Paging_1 = require("./Paging");
 exports.Paging = Paging_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,
-    AdjustableColumn: AdjustableColumn_1.default,
-};
-exports.ReactTable = ReactTable;
-exports.default = Table_1.default;
+const ReactTableProps = require("./Table/Types");
+exports.ReactTableProps = ReactTableProps;
+const Table_1 = require("./Table/Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
+const Column_1 = require("./Table/Column");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Column_1.Column; } });
+const FilterableColumn_1 = require("./Table/FilterableColumn");
+exports.FilterableColumn = FilterableColumn_1.default;
+const ConfigurableTable_1 = require("./ConfigurableTable/ConfigurableTable");
+exports.ConfigurableTable = ConfigurableTable_1.default;
+const ConfigurableColumn_1 = require("./ConfigurableTable/ConfigurableColumn");
+exports.ConfigurableColumn = ConfigurableColumn_1.default;

package/package.json

@@ -1,53 +1,57 @@
-{
-  "name": "@gpa-gemstone/react-table",
-  "version": "1.2.57",
-  "description": "Table for GPA web applications",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": ["lib"],
-  "scripts":   {
-    "test": "jest --config jestconfig.json",
-    "build": "tsc",
-    "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "eslint . --ext .ts,.tsx",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run lint",
-    "preversion": "npm run lint",
-    "version": "npm run format && git add -A src",
-    "postversion": "git push && git push --tags"
-  },
-  "repository":   {
-    "type": "git",
-    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
-  },
-  "keywords":   [
-    "React",
-    "Table",
-    "GSF",
-    "Gemstone",
-    "GridProtectionAlliance"
-  ],
-  "author": "GridProtectionAlliance",
-  "license": "MIT",
-  "bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
-  "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": "^29.0.0",
-    "prettier": "^2.3.2",
-    "ts-jest": "^29.0.0",
-    "typescript": "5.5.3"
-  },
-  "dependencies":   {
-    "@gpa-gemstone/gpa-symbols": "0.0.44",
-    "@gpa-gemstone/helper-functions": "0.0.36",
-    "@types/lodash": "^4.14.171",
-    "@types/react": "^17.0.14",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0"
-  },
-  "publishConfig": {"access": "public"}
+{
+  "name": "@gpa-gemstone/react-table",
+  "version": "1.2.58",
+  "description": "Table for GPA web applications",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": ["lib"],
+  "scripts":   {
+    "test": "jest --config jestconfig.json",
+    "build": "tsc",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "eslint . --ext .ts,.tsx",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
+  },
+  "repository":   {
+    "type": "git",
+    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
+  },
+  "keywords":   [
+    "React",
+    "Table",
+    "GSF",
+    "Gemstone",
+    "GridProtectionAlliance"
+  ],
+  "author": "GridProtectionAlliance",
+  "license": "MIT",
+  "bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
+  "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",
+    "@types/react-portal": "4.0.4",
+    "eslint": "^8.43.0",
+    "jest": "^29.0.0",
+    "prettier": "^2.3.2",
+    "ts-jest": "^29.0.0",
+    "typescript": "5.5.3"
+  },
+  "dependencies":   {
+    "@gpa-gemstone/gpa-symbols": "0.0.45",
+    "@gpa-gemstone/helper-functions": "0.0.36",
+    "@gpa-gemstone/react-interactive": "1.0.137",
+    "@types/lodash": "^4.14.171",
+    "@types/react": "^17.0.14",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-portal": "4.2.2"
+  },
+  "publishConfig": {"access": "public"}
 }

package/lib/AdjustableTable/AdjustableColumn.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { IColumnProps, IDataWrapperProps, IHeaderWrapperProps } from './Column';
-export default function AdjustableColumn<T>(props: React.PropsWithChildren<IColumnProps<T>>): JSX.Element;
-interface IAdjustableHeaderWrapperProps extends IHeaderWrapperProps {
-    adjustment: number;
-    startAdjustment: React.MouseEventHandler<HTMLDivElement>;
-    setMinWidth: (w: number) => void;
-    minWidth?: number;
-    setMaxWidth: (w: number) => void;
-    maxWidth?: number;
-    extraWidth: number;
-}
-export declare function AdjustableColumnHeaderWrapper(props: React.PropsWithChildren<IAdjustableHeaderWrapperProps>): JSX.Element | null;
-interface IAdjustableDataWrapperProps extends IDataWrapperProps {
-    adjustment?: number;
-}
-export declare function AdjustableColumnDataWrapper(props: React.PropsWithChildren<IAdjustableDataWrapperProps>): JSX.Element | null;
-export {};

package/lib/AdjustableTable/AdjustableColumn.js

@@ -1,187 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = AdjustableColumn;
-exports.AdjustableColumnHeaderWrapper = AdjustableColumnHeaderWrapper;
-exports.AdjustableColumnDataWrapper = AdjustableColumnDataWrapper;
-//  ******************************************************************************************************
-//  AdjustableColumn.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/19/2023 - C. Lackner
-//       Generated original version of source code.
-//  05/31/2024 - C. Lackner
-//       Refactored to fix sizing issues.
-//
-//  ******************************************************************************************************
-const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-const React = require("react");
-function AdjustableColumn(props) {
-    return React.createElement(React.Fragment, null, props.children);
-}
-function AdjustableColumnHeaderWrapper(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const thref = React.useRef(null);
-    const [mode, setMode] = React.useState('minWidth');
-    //const [width, setWidth] = React.useState<number>();
-    const [minWidth, setMinWidth] = React.useState();
-    const [maxWidth, setMaxWidth] = React.useState();
-    const [showBorder, setShowBorder] = React.useState(false);
-    const onHover = React.useCallback(() => { setShowBorder(true); }, []);
-    const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    style.position = (_c = style.position) !== null && _c !== void 0 ? _c : 'relative';
-    style.borderTop = (_d = style.borderTop) !== null && _d !== void 0 ? _d : 'none';
-    style.minWidth = (_e = style.minWidth) !== null && _e !== void 0 ? _e : 100;
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined && mode === 'width') {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (mode === 'minWidth') {
-        style.width = style.minWidth;
-    }
-    if (mode === 'maxWidth') {
-        style.width = style.maxWidth;
-    }
-    if (mode === 'width' && props.adjustment !== undefined && props.adjustment !== 0 && style.width !== undefined) {
-        style.width = `calc(${formatwidth(style.width).toString()} ${props.adjustment < 0 ? '-' : '+'} ${Math.abs(props.adjustment).toString()}px)`;
-    }
-    if (style.cursor === undefined && ((_f = props.allowSort) !== null && _f !== void 0 ? _f : true)) {
-        style.cursor = 'pointer';
-    }
-    React.useLayoutEffect(() => {
-        var _a, _b, _c;
-        if (thref.current == null)
-            return;
-        if (mode == 'minWidth') {
-            const w = (_a = thref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-            if (w === undefined)
-                return;
-            if (w !== minWidth) {
-                setMinWidth(w);
-            }
-            if (maxWidth === undefined && style.maxWidth !== undefined) {
-                setMode('maxWidth');
-            }
-            else if (props.width === undefined) {
-                setMode('width');
-            }
-        }
-        if (mode == 'maxWidth') {
-            const w = (_b = thref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-            if (w === undefined)
-                return;
-            if (w !== maxWidth) {
-                setMaxWidth(w);
-            }
-            if (props.width === undefined) {
-                setMode('width');
-            }
-            else if (props.minWidth === undefined && style.minWidth !== undefined) {
-                setMode('minWidth');
-            }
-        }
-        if (mode == 'width') {
-            const w = (_c = thref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width;
-            if (w === undefined)
-                return;
-            if (props.width === undefined || (w !== (props.width + props.extraWidth))) {
-                props.setWidth(w, isAuto, isUndefined);
-            }
-            if (maxWidth === undefined && style.maxWidth !== undefined) {
-                setMode('maxWidth');
-            }
-            else if (minWidth === undefined && style.minWidth !== undefined) {
-                setMode('minWidth');
-            }
-        }
-    });
-    React.useEffect(() => {
-        if (minWidth !== props.minWidth)
-            props.setMinWidth(minWidth);
-    }, [minWidth]);
-    React.useEffect(() => {
-        if (maxWidth !== props.maxWidth)
-            props.setMaxWidth(maxWidth);
-    }, [maxWidth]);
-    const onClick = React.useCallback((e) => {
-        var _a;
-        if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
-            props.onSort(e);
-    }, [props.onSort, props.allowSort]);
-    const onClickBorder = React.useCallback((e) => {
-        props.startAdjustment(e);
-    }, [props.startAdjustment]);
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); } },
-        React.createElement("div", { style: {
-                width: 5,
-                height: '100%',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                opacity: showBorder ? 1 : 0,
-                background: '#e9ecef',
-                cursor: 'col-resize'
-            }, onMouseEnter: onHover, onMouseLeave: onLeave, onMouseDown: onClickBorder }),
-        props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
-        React.createElement("div", { style: {
-                marginLeft: (props.sorted ? 25 : 0),
-            } }, (_g = props.children) !== null && _g !== void 0 ? _g : props.colKey));
-}
-function AdjustableColumnDataWrapper(props) {
-    var _a, _b;
-    const tdref = React.useRef(null);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (props.dragStart !== undefined)
-        style.cursor = "grab";
-    React.useLayoutEffect(() => {
-        var _a;
-        if (tdref.current == null)
-            return;
-        const w = (_a = tdref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        if (style.width === undefined && props.width === undefined) {
-            props.setWidth(w, isAuto, isUndefined);
-            return;
-        }
-        if (props.adjustment !== undefined && props.adjustment !== 0)
-            return;
-        if (w === undefined || (props.width !== undefined && w == (props.width + props.extraWidth)))
-            return;
-        props.setWidth(w, isAuto, isUndefined);
-    });
-    if (props.adjustment !== undefined && props.adjustment !== 0 && style.width !== undefined)
-        style.width = `calc(${formatwidth(style.width)} ${props.adjustment < 0 ? '-' : '+'} ${Math.abs(props.adjustment).toString()}px)`;
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return (React.createElement("td", { ref: tdref, style: style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
-}
-function formatwidth(style) {
-    if (style.toString().endsWith('%') || style.toString().endsWith('px'))
-        return style;
-    return style.toString() + "px";
-}