@gpa-gemstone/react-table 1.2.56 → 1.2.58

package/lib/AdjustableTable/Types.d.ts

@@ -0,0 +1,148 @@
+export interface ITable<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: React.MouseEvent<HTMLElement, MouseEvent>) => 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: React.MouseEvent<HTMLElement, MouseEvent>): 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
+    * Note: Display style overwritten to "block"
+    */
+    TbodyStyle?: React.CSSProperties;
+    /**
+    * Class of the tbody component
+    */
+    TbodyClass?: string;
+    /**
+    * style of the tfoot component
+    */
+    TfootStyle?: React.CSSProperties;
+    /**
+    * Class of the tfoot component
+    */
+    TfootClass?: 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 the 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: React.DragEvent<Element>) => 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.
+    * Data appears in the tfoot element
+    */
+    LastRow?: string | React.ReactNode;
+    /**
+    * Optional Element to display on upper Right corner
+    */
+    LastColumn?: string | React.ReactNode;
+    /**
+    * Optional Callback that gets called when there is not enough space to display columns
+    * @param disabled takes in string of disabled keys
+    */
+    ReduceWidthCallback?: (disabled: string[]) => void;
+}
+export interface IColumn<T> {
+    /**
+     * a unique Key for this Collumn
+     */
+    Key: string;
+    /**
+     * Flag indicating whether sorting by this Collumn is allowed
+     */
+    AllowSort?: boolean;
+    /**
+     * Optional - the Field to be used
+     */
+    Field?: keyof T;
+    /**
+     * The Default style for the th element
+     */
+    HeaderStyle?: React.CSSProperties;
+    /**
+     * The Default style for the td element
+     */
+    RowStyle?: React.CSSProperties;
+    /**
+     * Determines the Content to be displayed
+     * @param d the data to be turned into content
+     * @returns the content displayed
+     */
+    Content?: (d: {
+        item: T;
+        key: string;
+        field: keyof T | undefined;
+        index: number;
+        style?: React.CSSProperties;
+    }) => React.ReactNode;
+}

package/lib/AdjustableTable/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/ConfigurableTable/ConfigurableColumn.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    Default?: boolean;
+    Label?: string;
+    Key: string;
+}
+/**
+ * Wrapper to make any column configurable
+ */
+export default function ConfigurableColumn(props: React.PropsWithChildren<IProps>): JSX.Element;
+export {};

package/lib/ConfigurableTable/ConfigurableColumn.js

@@ -0,0 +1,31 @@
+"use strict";
+// ******************************************************************************************************
+//  ConfigurableColumn.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/18/2023 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ConfigurableColumn;
+const React = require("react");
+/**
+ * Wrapper to make any column configurable
+ */
+function ConfigurableColumn(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}

package/lib/ConfigurableTable/ConfigurableTable.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as ReactTableProps from '../Table/Types';
+interface ITableProps<T> extends ReactTableProps.ITable<T> {
+    /**
+     * Optional ZIndex for the configurable column modal
+     */
+    ModalZIndex?: number;
+    /**
+    * ID of the Portal used for tunneling Collumn settings
+    */
+    SettingsPortal?: string;
+    /**
+    * Callback when Settings modal opens or closes
+    */
+    OnSettingsChange?: (open: boolean) => void;
+    /**
+    * The key used to store columns in local storage
+    */
+    LocalStorageKey?: string;
+}
+/**
+* Table with modal to show and hide columns
+*/
+export default function ConfigurableTable<T>(props: React.PropsWithChildren<ITableProps<T>>): JSX.Element;
+export {};

package/lib/ConfigurableTable/ConfigurableTable.js

@@ -0,0 +1,189 @@
+"use strict";
+// ******************************************************************************************************
+//  ConfigurableTable.tsx - 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:
+//  ----------------------------------------------------------------------------------------------------
+//  09/15/2021 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ConfigurableTable;
+const React = require("react");
+const Table_1 = require("../Table/Table");
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const react_interactive_1 = require("@gpa-gemstone/react-interactive");
+const react_portal_1 = require("react-portal");
+const helper_functions_1 = require("@gpa-gemstone/helper-functions");
+const react_forms_1 = require("@gpa-gemstone/react-forms");
+const _ = require("lodash");
+const ConfigurableColumn_1 = require("./ConfigurableColumn");
+/**
+* Table with modal to show and hide columns
+*/
+function ConfigurableTable(props) {
+    const getKeyMappings = () => {
+        const u = new Map();
+        React.Children.forEach(props.children, (element) => {
+            var _a, _b;
+            if (!React.isValidElement(element))
+                return;
+            if (element.type === ConfigurableColumn_1.default) {
+                const c = {
+                    Default: (_a = element.props.Default) !== null && _a !== void 0 ? _a : false,
+                    Label: (_b = element.props.Label) !== null && _b !== void 0 ? _b : element.props.Key,
+                    Enabled: false,
+                    Key: element.props.Key,
+                };
+                c.Enabled = isEnabled(c);
+                u.set(c.Key, c);
+            }
+        });
+        return u;
+    };
+    const [showSettings, setShowSettings] = React.useState(false);
+    const [columns, setColumns] = React.useState(getKeyMappings());
+    const [hover, setHover] = React.useState(false);
+    const [guid] = React.useState((0, helper_functions_1.CreateGuid)());
+    const [widthDisabledAdd, setWidthDisabledAdd] = React.useState(false);
+    const handleReduceWidthCallback = React.useCallback((hiddenKeys) => {
+        if (hiddenKeys.length !== 0) {
+            setWidthDisabledAdd(true);
+        }
+        else {
+            setWidthDisabledAdd(false);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (props.OnSettingsChange !== undefined)
+            props.OnSettingsChange(showSettings);
+    }, [showSettings]);
+    React.useEffect(() => {
+        saveLocal();
+    }, [columns]);
+    /**
+    *
+    * @returns
+    */
+    function saveLocal() {
+        if (props.LocalStorageKey === undefined)
+            return;
+        const currentState = localStorage.getItem(props.LocalStorageKey);
+        let currentKeys = [];
+        if (currentState !== null)
+            currentKeys = currentState.split(',');
+        const allKeys = Array.from(columns.keys());
+        currentKeys = currentKeys.filter((k) => !allKeys.includes(k));
+        const enabled = Array.from(columns.keys()).filter((k) => { var _a; return (_a = columns.get(k)) === null || _a === void 0 ? void 0 : _a.Enabled; });
+        currentKeys.push(...enabled);
+        localStorage.setItem(props.LocalStorageKey, currentKeys.join(','));
+    }
+    function changeColumns(key) {
+        setColumns((d) => {
+            var _a, _b;
+            const u = _.cloneDeep(d);
+            const mapRef = u.get(key);
+            if (mapRef == null) {
+                console.error("Could not find reference for column " + key);
+            }
+            else
+                mapRef.Enabled = !((_b = (_a = u.get(key)) === null || _a === void 0 ? void 0 : _a.Enabled) !== null && _b !== void 0 ? _b : false);
+            return u;
+        });
+    }
+    function checkLocal(key) {
+        if (props.LocalStorageKey === undefined)
+            return false;
+        const keys = localStorage.getItem(props.LocalStorageKey);
+        if (keys === null)
+            return false;
+        const activeKeys = keys.split(',');
+        return activeKeys.includes(key !== null && key !== void 0 ? key : '');
+    }
+    /**
+    *     * Determines if a column is enabled by default, required, or was saved in the users preferences
+    *     * @param c Column to check
+    *     * @param skipLocal If true, will return whether it is enabled as part of the default settings
+    *     */
+    function isEnabled(c, skipLocal = false) {
+        var _a;
+        const isSort = props.SortKey === (c === null || c === void 0 ? void 0 : c.Key);
+        const isLocal = checkLocal(c === null || c === void 0 ? void 0 : c.Key) && !skipLocal;
+        return ((_a = c === null || c === void 0 ? void 0 : c.Default) !== null && _a !== void 0 ? _a : false) || isSort || isLocal;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Table_1.Table, Object.assign({}, props, { LastColumn: React.createElement("div", { style: { marginLeft: -5, marginBottom: 12 }, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), id: guid + '-tooltip', onClick: () => setShowSettings(true) },
+                React.createElement(gpa_symbols_1.ReactIcons.Settings, null)), ReduceWidthCallback: handleReduceWidthCallback }), React.Children.map(props.children, (element) => {
+            var _a, _b;
+            if (!React.isValidElement(element))
+                return null;
+            if (element.type === ConfigurableColumn_1.default)
+                return ((_b = (_a = columns.get(element.props.Key)) === null || _a === void 0 ? void 0 : _a.Enabled) !== null && _b !== void 0 ? _b : false) ? element.props.children : null;
+            return element;
+        })),
+        React.createElement(react_interactive_1.ToolTip, { Show: hover, Position: 'bottom', Target: guid + '-tooltip', Zindex: 99999 },
+            React.createElement("p", null, "Change Columns")),
+        props.SettingsPortal === undefined ? (React.createElement(react_interactive_1.Modal, { Title: 'Table Columns', Show: showSettings, ShowX: true, ShowCancel: false, ZIndex: props.ModalZIndex, CallBack: (conf) => {
+                setShowSettings(false);
+                if (conf)
+                    setColumns((d) => {
+                        const u = _.cloneDeep(d);
+                        Array.from(d.keys()).forEach((k) => {
+                            var _a;
+                            const ref = u.get(k);
+                            if (ref != null)
+                                ref.Enabled = (_a = isEnabled(u.get(k), true)) !== null && _a !== void 0 ? _a : true;
+                        });
+                        return u;
+                    });
+            }, ConfirmText: 'Reset Defaults', ConfirmBtnClass: 'btn-warning float-left' },
+            React.createElement(ColumnSelection, { columns: Array.from(columns.values()), onChange: changeColumns, sortKey: props.SortKey, disableAdd: widthDisabledAdd }))) : showSettings ? (React.createElement(react_portal_1.Portal, { node: document === null || document === void 0 ? void 0 : document.getElementById(props.SettingsPortal) },
+            React.createElement("div", { className: "card" },
+                React.createElement("div", { className: "card-header" },
+                    React.createElement("h4", { className: "modal-title" }, "Table Columns"),
+                    React.createElement("button", { type: "button", className: "close", onClick: () => setShowSettings(false) }, "\u00D7")),
+                React.createElement("div", { className: "card-body", style: { maxHeight: 'calc(100% - 210px)', overflowY: 'auto' } },
+                    React.createElement(ColumnSelection, { columns: Array.from(columns.values()), onChange: changeColumns, sortKey: props.SortKey, disableAdd: widthDisabledAdd })),
+                React.createElement("div", { className: "card-footer" },
+                    React.createElement("button", { type: "button", className: 'btn btn-primary float-left', onClick: () => {
+                            setShowSettings(false);
+                            setColumns((d) => {
+                                const u = _.cloneDeep(d);
+                                Array.from(d.keys()).forEach((k) => {
+                                    var _a;
+                                    const ref = u.get(k);
+                                    if (ref != null)
+                                        ref.Enabled = (_a = isEnabled(u.get(k), true)) !== null && _a !== void 0 ? _a : true;
+                                });
+                                return u;
+                            });
+                        } }, "Reset Defaults"))))) : null));
+}
+function ColumnSelection(props) {
+    const [showAlert, setShowAlert] = React.useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "row" },
+            React.createElement("div", { className: "col-4" }, props.columns.map((c, i) => i % 3 == 0 ? (React.createElement(react_forms_1.CheckBox, { Label: c.Label, Field: 'Enabled', Record: c, Setter: () => props.onChange(c.Key), key: c.Key, Disabled: c.Key == props.sortKey || (props.disableAdd && !c.Enabled), Help: c.Key == props.sortKey
+                    ? 'The Table is currently sorted by this column so it cannot be hidden.'
+                    : undefined })) : null)),
+            React.createElement("div", { className: "col-4" }, props.columns.map((c, i) => i % 3 == 1 ? (React.createElement(react_forms_1.CheckBox, { Label: c.Label, Field: 'Enabled', Record: c, Setter: () => props.onChange(c.Key), key: c.Key, Disabled: c.Key == props.sortKey || (props.disableAdd && !c.Enabled), Help: c.Key == props.sortKey
+                    ? 'The Table is currently sorted by this column so it cannot be hidden.'
+                    : undefined })) : null)),
+            React.createElement("div", { className: "col-4" }, props.columns.map((c, i) => i % 3 == 2 ? (React.createElement(react_forms_1.CheckBox, { Label: c.Label, Field: 'Enabled', Record: c, Setter: () => props.onChange(c.Key), key: c.Key, Disabled: c.Key == props.sortKey || (props.disableAdd && !c.Enabled), Help: c.Key == props.sortKey
+                    ? 'The Table is currently sorted by this column so it cannot be hidden.'
+                    : undefined })) : null))),
+        props.disableAdd ? (React.createElement(react_interactive_1.Alert, { AlertColor: 'alert-primary', Style: { marginBottom: 0, marginTop: '0.5em' }, Show: showAlert, SetShow: setShowAlert }, "Additional columns disabled due to table size.")) : null));
+}

package/lib/FilterableTable/BooleanFilter.d.ts

@@ -0,0 +1,26 @@
+import { Search } from '@gpa-gemstone/react-interactive';
+/**
+ * Interface defining the properties expected by the BooleanFilter component.
+ */
+interface IFilterProps<T> {
+    /**
+    * Function to set the filter based on Search.IFilter<T> array.
+    * @param evt - Event handler that updates the filter.
+    */
+    SetFilter: (evt: Search.IFilter<T>[]) => void;
+    /**
+    * Array of filters of type Search.IFilter<T>.
+    */
+    Filter: Search.IFilter<T>[];
+    /**
+    * Name of the field for filtering.
+    */
+    FieldName: string;
+}
+/**
+ * Component to handle boolean filtering based on provided filter props.
+ * @param {IFilterProps<T>} props - Props passed to the BooleanFilter component.
+ * @returns JSX element representing the BooleanFilter component.
+ */
+export declare function BooleanFilter<T>(props: IFilterProps<T>): JSX.Element;
+export {};

package/lib/FilterableTable/BooleanFilter.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanFilter = BooleanFilter;
+// ******************************************************************************************************
+//  BooleanFilter.tsx - Gbtc
+//
+//  Copyright © 2022, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  03/02/2022 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+const React = require("react");
+/**
+ * Component to handle boolean filtering based on provided filter props.
+ * @param {IFilterProps<T>} props - Props passed to the BooleanFilter component.
+ * @returns JSX element representing the BooleanFilter component.
+ */
+function BooleanFilter(props) {
+    const [selected, setSelected] = React.useState(false);
+    const [notSelected, setNotSelected] = React.useState(false);
+    React.useEffect(() => {
+        if (props.Filter.length === 0) {
+            setSelected(true);
+            setNotSelected(true);
+            return;
+        }
+        setSelected(props.Filter[0].SearchText === '1');
+        setNotSelected(props.Filter[0].SearchText !== '1');
+    }, [props.Filter]);
+    React.useEffect(() => {
+        if (!selected && !notSelected) {
+            setSelected(true);
+            setNotSelected(true);
+        }
+    }, [selected, notSelected]);
+    React.useEffect(() => {
+        if (selected && !notSelected && (props.Filter.length === 0 || props.Filter[0].SearchText !== '1')) {
+            props.SetFilter([{ FieldName: props.FieldName, IsPivotColumn: false, SearchText: '1', Operator: '=', Type: 'boolean' }]);
+        }
+        if (!selected && notSelected && (props.Filter.length === 0 || props.Filter[0].SearchText !== '0')) {
+            props.SetFilter([{ FieldName: props.FieldName, IsPivotColumn: false, SearchText: '0', Operator: '=', Type: 'boolean' }]);
+        }
+        if (selected && notSelected && props.Filter.length > 0)
+            props.SetFilter([]);
+    }, [selected, notSelected]);
+    return React.createElement(React.Fragment, null,
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); setSelected((s) => !s); } },
+            React.createElement("td", null,
+                React.createElement("input", { type: "checkbox", checked: selected, onChange: () => null })),
+            React.createElement("td", null, "Selected")),
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); setNotSelected((v) => !v); } },
+            React.createElement("td", null,
+                React.createElement("input", { type: "checkbox", checked: notSelected, onChange: () => null })),
+            React.createElement("td", null, "Not Selected")));
+}

package/lib/FilterableTable/DateTimeFilters.d.ts

@@ -0,0 +1,10 @@
+import { Search } from '@gpa-gemstone/react-interactive';
+interface IProps<T> {
+    SetFilter: (evt: Search.IFilter<T>[]) => void;
+    Filter: Search.IFilter<T>[];
+    FieldName: string;
+}
+export declare function DateFilter<T>(props: IProps<T>): JSX.Element;
+export declare function TimeFilter<T>(props: IProps<T>): JSX.Element;
+export declare function DateTimeFilter<T>(props: IProps<T>): JSX.Element;
+export {};