@gpa-gemstone/react-table 1.2.56 → 1.2.58

package/lib/FilterableTable/NumberFilter.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberFilter = NumberFilter;
+// ******************************************************************************************************
+//  NumberFilter.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");
+/**
+ *
+ * @param props
+ * @returns
+ */
+function NumberFilter(props) {
+    var _a, _b, _c, _d, _e;
+    const [value, setValue] = React.useState('');
+    const [secondValue, setSecondValue] = React.useState('');
+    const [operator, setOperator] = React.useState('less than');
+    const [unitIndex, setUnitIndex] = React.useState(0);
+    React.useEffect(() => {
+        if (props.Filter.length === 0) {
+            setValue('');
+            setSecondValue('');
+        }
+        if (props.Filter.length > 1) {
+            const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
+            if (f1 == null)
+                setValue('');
+            else
+                setValue(f1.SearchText);
+            const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
+            if (f2 == null)
+                setSecondValue('');
+            else
+                setSecondValue(f2.SearchText);
+        }
+        if (props.Filter.length === 1) {
+            setSecondValue('');
+            if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
+                setOperator('greater than');
+            else if (props.Filter[0].Operator === '=')
+                setOperator('equal to');
+            else
+                setOperator('less than');
+            setValue(props.Filter[0].SearchText);
+        }
+    }, [props.Filter]);
+    React.useEffect(() => {
+        let handle = null;
+        if (value === '' && secondValue === '' && props.Filter.length !== 0)
+            handle = setTimeout(() => props.SetFilter([]), 500);
+        if (value === '' && secondValue === '')
+            return () => { if (handle !== null)
+                clearTimeout(handle); };
+        if (operator === 'between')
+            handle = setTimeout(() => props.SetFilter([
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '>=',
+                    Type: 'number',
+                    SearchText: value
+                },
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '<=',
+                    Type: 'number',
+                    SearchText: secondValue
+                }
+            ]), 500);
+        else
+            handle = setTimeout(() => props.SetFilter([{
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: transformSymbol(operator),
+                    Type: 'number',
+                    SearchText: value
+                }]), 500);
+        return () => { if (handle !== null)
+            clearTimeout(handle); };
+    }, [operator, value, secondValue]);
+    function transformSymbol(s) {
+        if (s === 'less than')
+            return '<';
+        if (s === 'greater than')
+            return '>';
+        return '=';
+    }
+    const hasUnit = props.Unit !== undefined && unitIndex >= 0 && unitIndex < props.Unit.length;
+    return React.createElement(React.Fragment, null,
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+            React.createElement("td", null,
+                React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
+                        const v = evt.target.value;
+                        setOperator(v);
+                    } },
+                    React.createElement("option", { value: 'less than' },
+                        "Less than (",
+                        '<',
+                        ")"),
+                    React.createElement("option", { value: 'equal to' }, "Equal to (=)"),
+                    React.createElement("option", { value: 'greater than' },
+                        "Greater than (",
+                        '>',
+                        ")"),
+                    React.createElement("option", { value: 'between' }, "In range")))),
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+            React.createElement("td", null,
+                React.createElement("input", { type: 'number', className: 'form-control', value: props.Unit !== undefined && hasUnit ? (_a = props.Unit[unitIndex].GetValue(parseFloat(value)).toString()) !== null && _a !== void 0 ? _a : '' : value, onChange: (evt) => {
+                        let v = evt.target.value;
+                        if (props.Unit !== undefined && unitIndex >= 0 && unitIndex < props.Unit.length) {
+                            v = props.Unit[unitIndex].GetFilter(parseFloat(v)).toString();
+                        }
+                        setValue(v);
+                    } })),
+            props.Unit !== undefined ?
+                React.createElement("td", null,
+                    React.createElement("select", { className: 'form-control', value: (_c = (_b = props.Unit[unitIndex]) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '', onChange: (evt) => {
+                            var _a, _b;
+                            const v = evt.target.value;
+                            setUnitIndex((_b = (_a = props.Unit) === null || _a === void 0 ? void 0 : _a.findIndex(u => u.label === v)) !== null && _b !== void 0 ? _b : -1);
+                        } }, props.Unit.map((u) => React.createElement("option", { value: u.label, key: u.label }, u.label)))) : null),
+        operator === 'between' ? React.createElement(React.Fragment, null,
+            React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+                React.createElement("td", null, "and")),
+            React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+                React.createElement("td", null,
+                    React.createElement("input", { type: 'number', className: 'form-control', value: props.Unit !== undefined && hasUnit ? props.Unit[unitIndex].GetValue(parseFloat(secondValue)).toString() : secondValue, onChange: (evt) => {
+                            let v = evt.target.value;
+                            if (props.Unit !== undefined && unitIndex >= 0 && unitIndex < props.Unit.length) {
+                                v = props.Unit[unitIndex].GetFilter(parseFloat(v)).toString();
+                            }
+                            setSecondValue(v);
+                        } }))),
+            props.Unit !== undefined ?
+                React.createElement("td", null,
+                    React.createElement("select", { className: 'form-control', value: (_e = (_d = props.Unit[unitIndex]) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : '', onChange: (evt) => {
+                            var _a, _b;
+                            const v = evt.target.value;
+                            setUnitIndex((_b = (_a = props.Unit) === null || _a === void 0 ? void 0 : _a.findIndex(u => u.label === v)) !== null && _b !== void 0 ? _b : -1);
+                        } }, props.Unit.map((u) => React.createElement("option", { value: u.label, key: u.label }, u.label)))) : null) : null);
+}

package/lib/FilterableTable/TextFilter.d.ts

@@ -0,0 +1,14 @@
+import { Search } from '@gpa-gemstone/react-interactive';
+interface IProps<T> {
+    SetFilter: (evt: Search.IFilter<T>[]) => void;
+    Filter: Search.IFilter<T>[];
+    FieldName: string;
+    ApproxMatches?: boolean;
+}
+/**
+ * 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.
+ */
+export declare function TextFilter<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/FilterableTable/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/Filters/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/Filters/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/Filters/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 {};