@gpa-gemstone/react-table 1.2.56 → 1.2.58

package/lib/Filters/TextFilter.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFilter = TextFilter;
+// ******************************************************************************************************
+//  TextFilter.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 for rendering a text input filter.
+ * @param props - Props for configuring and managing the text filter.
+ * @returns JSX for rendering a text input filter with wildcard options.
+ */
+function TextFilter(props) {
+    const [txt, setTxt] = React.useState('');
+    // Handles changes in the Filter prop.
+    React.useEffect(() => {
+        var _a;
+        // Resets text input if there is no filter.
+        if (props.Filter.length === 0) {
+            setTxt('');
+            return;
+        }
+        if (((_a = props.ApproxMatches) !== null && _a !== void 0 ? _a : true))
+            setTxt(props.Filter[0].SearchText.substring(1, props.Filter[0].SearchText.length - 1));
+        else
+            setTxt(props.Filter[0].SearchText);
+    }, [props.Filter]);
+    // Handles text input chanages.
+    React.useEffect(() => {
+        let handle = null;
+        // Clears filter if txt is empty AND filter is not empty.
+        if ((txt == null || txt.trim().length === 0) && props.Filter.length !== 0)
+            handle = setTimeout(() => props.SetFilter([]), 500);
+        // Applies filter based on specifications.
+        if (txt != null && txt.trim().length > 0 && (props.Filter.length === 0 || props.Filter[0].SearchText !== txt.trim()))
+            handle = setTimeout(() => props.SetFilter([{
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    SearchText: (props.ApproxMatches === undefined || props.ApproxMatches ? '%' + txt.trim() + '%' : txt.trim()),
+                    Operator: 'LIKE',
+                    Type: 'string'
+                }]), 500);
+        // Cleans function to clear timeout.
+        return () => { if (handle !== null)
+            clearTimeout(handle); };
+    }, [txt]);
+    // renders text input filter and addl information
+    return React.createElement(React.Fragment, null,
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+            React.createElement("td", null,
+                React.createElement("input", { className: 'form-control', value: txt.replace('$_', '_'), placeholder: "Search", onChange: (evt) => {
+                        const value = evt.target.value;
+                        setTxt(value.replace('_', '$_'));
+                    } }))),
+        React.createElement("tr", null,
+            React.createElement("td", null,
+                " ",
+                React.createElement("label", null, "Wildcard (*) can be used"),
+                " ")));
+}

package/lib/Table/Column.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as ReactTableProps from './Types';
+export declare function Column<T>(props: React.PropsWithChildren<ReactTableProps.IColumn<T>>): JSX.Element;
+export interface IHeaderWrapperProps {
+    onSort: React.MouseEventHandler<HTMLTableCellElement>;
+    startAdjustment?: React.MouseEventHandler<HTMLDivElement>;
+    sorted: boolean;
+    asc: boolean;
+    style: React.CSSProperties;
+    allowSort?: boolean;
+    colKey: string;
+}
+export declare function ColumnHeaderWrapper(props: React.PropsWithChildren<IHeaderWrapperProps>): JSX.Element;
+export interface IDataWrapperProps {
+    dragStart?: (e: React.DragEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    style: React.CSSProperties;
+}
+export declare function ColumnDataWrapper(props: React.PropsWithChildren<IDataWrapperProps>): JSX.Element;

package/lib/Table/Column.js

@@ -0,0 +1,73 @@
+"use strict";
+//  ******************************************************************************************************
+//  Column.tsx - Gbtc
+//
+//  Copyright © 2018, 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/02/2018 - Billy Ernest
+//       Generated original version of source code.
+//  05/31/2024 - C. Lackner
+//       Refactored to fix sizing issues.
+//  12/04/2024 - G. Santos
+//       Refactored to fix performance issues.
+//
+//  ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = Column;
+exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
+exports.ColumnDataWrapper = ColumnDataWrapper;
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const React = require("react");
+function Column(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}
+function ColumnHeaderWrapper(props) {
+    var _a;
+    const [showBorder, setShowBorder] = React.useState(false);
+    const onHover = React.useCallback(() => { setShowBorder(true); }, []);
+    const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
+    const onClickBorder = React.useCallback((e) => {
+        if (props.startAdjustment != null)
+            props.startAdjustment(e);
+    }, [props.startAdjustment]);
+    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 preventPropagation = React.useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    return React.createElement("th", { style: props.style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); }, id: props.colKey },
+        props.startAdjustment == null ? React.createElement(React.Fragment, null) :
+            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, onClick: preventPropagation }),
+        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),
+            } }, (_a = props.children) !== null && _a !== void 0 ? _a : props.colKey));
+}
+function ColumnDataWrapper(props) {
+    return (React.createElement("td", { style: props.style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
+}

package/lib/Table/FilterableColumn.d.ts

@@ -0,0 +1,20 @@
+import * as ReactTableProps from './Types';
+import * as React from 'react';
+import { Search } from '@gpa-gemstone/react-interactive';
+import { IUnit } from '../Filters/NumberFilter';
+/**
+ * Wrapper to make any column configurable
+ */
+export default function FilterableColumn<T>(props: React.PropsWithChildren<ReactTableProps.IFilterableCollumn<T>>): JSX.Element;
+export interface IHeaderProps<T> {
+    Label: string | React.ReactNode;
+    Type?: Search.FieldType;
+    Unit?: IUnit[];
+    Filter: Search.IFilter<T>[];
+    SetFilter: (flt: Search.IFilter<T>[]) => void;
+    Field: string | number | symbol | undefined;
+    Options?: ReactTableProps.IOptions[];
+    ExpandedLabel?: string;
+    Guid: string;
+}
+export declare function FilterableColumnHeader<T>(props: IHeaderProps<T>): JSX.Element;

package/lib/Table/FilterableColumn.js

@@ -0,0 +1,74 @@
+"use strict";
+// ******************************************************************************************************
+//  FilterableColumn.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:
+//  ----------------------------------------------------------------------------------------------------
+//  12/05/2024 - G. Santos
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FilterableColumn;
+exports.FilterableColumnHeader = FilterableColumnHeader;
+const React = require("react");
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const BooleanFilter_1 = require("../Filters/BooleanFilter");
+const TextFilter_1 = require("../Filters/TextFilter");
+const EnumFilter_1 = require("../Filters/EnumFilter");
+const NumberFilter_1 = require("../Filters/NumberFilter");
+const DateTimeFilters_1 = require("../Filters/DateTimeFilters");
+/**
+ * Wrapper to make any column configurable
+ */
+function FilterableColumn(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}
+// Table column header details
+function FilterableColumnHeader(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const [show, setShow] = React.useState(false);
+    return React.createElement(React.Fragment, null,
+        React.createElement("div", { onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false) },
+            React.createElement("div", { style: { marginRight: 25 } }, props.Label),
+            props.Type !== undefined ? React.createElement(React.Fragment, null,
+                React.createElement("div", { style: { width: 25, position: 'absolute', right: 12, top: 12 } }, props.Filter.length > 0 ? React.createElement(gpa_symbols_1.ReactIcons.Filter, null) : null),
+                React.createElement("div", { style: {
+                        maxHeight: window.innerHeight * 0.50,
+                        overflowY: 'auto',
+                        padding: '10 5',
+                        display: show ? 'block' : 'none',
+                        position: 'absolute',
+                        backgroundColor: '#fff',
+                        boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+                        zIndex: 401,
+                        minWidth: 'calc(100% - 50px)',
+                        marginLeft: -25
+                    }, "data-tableid": props.Guid, onClick: (evt) => { evt.preventDefault(); evt.stopPropagation(); } },
+                    React.createElement("table", { style: { margin: 0 } },
+                        React.createElement("tbody", null,
+                            ((props.ExpandedLabel !== null) && (props.ExpandedLabel !== "") && (props.ExpandedLabel !== undefined)) ?
+                                React.createElement("tr", null,
+                                    React.createElement("th", { colSpan: props.Type === 'boolean' ? 2 : 1 },
+                                        React.createElement("label", null, props.ExpandedLabel)))
+                                : null,
+                            props.Type === 'boolean' ? React.createElement(BooleanFilter_1.BooleanFilter, { SetFilter: props.SetFilter, Filter: props.Filter, FieldName: (_b = (_a = props.Field) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '' }) : null,
+                            props.Type === 'string' ? React.createElement(TextFilter_1.TextFilter, { SetFilter: props.SetFilter, Filter: props.Filter, FieldName: (_d = (_c = props.Field) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '' }) : null,
+                            props.Type === 'enum' && props.Options !== undefined ? React.createElement(EnumFilter_1.EnumFilter, { FieldName: (_f = (_e = props.Field) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : '', Filter: props.Filter, SetFilter: props.SetFilter, Options: props.Options }) : null,
+                            props.Type === 'date' ? React.createElement(DateTimeFilters_1.DateFilter, { FieldName: (_h = (_g = props.Field) === null || _g === void 0 ? void 0 : _g.toString()) !== null && _h !== void 0 ? _h : '', Filter: props.Filter, SetFilter: props.SetFilter }) : null,
+                            props.Type === 'time' ? React.createElement(DateTimeFilters_1.TimeFilter, { FieldName: (_k = (_j = props.Field) === null || _j === void 0 ? void 0 : _j.toString()) !== null && _k !== void 0 ? _k : '', Filter: props.Filter, SetFilter: props.SetFilter }) : null,
+                            props.Type === 'number' ? React.createElement(NumberFilter_1.NumberFilter, { FieldName: (_m = (_l = props.Field) === null || _l === void 0 ? void 0 : _l.toString()) !== null && _m !== void 0 ? _m : '', Filter: props.Filter, SetFilter: props.SetFilter, Unit: props.Unit }) : null,
+                            props.Type === 'datetime' ? React.createElement(DateTimeFilters_1.DateTimeFilter, { FieldName: (_p = (_o = props.Field) === null || _o === void 0 ? void 0 : _o.toString()) !== null && _p !== void 0 ? _p : '', Filter: props.Filter, SetFilter: props.SetFilter }) : null)))) : null));
+}

package/lib/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import * as ReactTableProps from './Types';
+export declare function Table<T>(props: React.PropsWithChildren<ReactTableProps.ITable<T>>): JSX.Element;