@gpa-gemstone/react-table 1.2.56 → 1.2.58

package/lib/FilterableTable/DateTimeFilters.js

@@ -0,0 +1,321 @@
+"use strict";
+// ******************************************************************************************************
+//  DateTimeFilters.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.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateFilter = DateFilter;
+exports.TimeFilter = TimeFilter;
+exports.DateTimeFilter = DateTimeFilter;
+const React = require("react");
+const react_forms_1 = require("@gpa-gemstone/react-forms");
+// Defines time and date formats
+const momentDateFormat = "MM/DD/YYYY";
+const momentTimeFormat = "HH:mm:ss.SSS"; // Also is the gemstone format
+// Filter for date only
+function DateFilter(props) {
+    const [date, setDate] = React.useState('');
+    const [secondDate, setSecondDate] = React.useState('');
+    const [operator, setOperator] = React.useState('after');
+    React.useEffect(() => {
+        if (props.Filter.length === 0) {
+            setDate('');
+            setSecondDate('');
+        }
+        if (props.Filter.length > 1) {
+            const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
+            if (f1 == null)
+                setDate('');
+            else
+                setDate(f1.SearchText);
+            const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
+            if (f2 == null)
+                setSecondDate('');
+            else
+                setSecondDate(f2.SearchText);
+            if (f1 !== null && f2 !== null)
+                setOperator('between');
+            else if (f1 == null)
+                setOperator('before');
+            else
+                setOperator('after');
+        }
+        if (props.Filter.length === 1) {
+            setSecondDate('');
+            if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
+                setOperator('after');
+            else
+                setOperator('before');
+            setDate(props.Filter[0].SearchText);
+        }
+    }, [props.Filter]);
+    React.useEffect(() => {
+        let handle = null;
+        if (date === '' && secondDate === '' && props.Filter.length !== 0)
+            handle = setTimeout(() => props.SetFilter([]), 500);
+        if (date === '' && secondDate === '')
+            return () => { if (handle !== null)
+                clearTimeout(handle); };
+        if (operator === 'between')
+            handle = setTimeout(() => props.SetFilter([
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '>=',
+                    Type: 'datetime',
+                    SearchText: date
+                },
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '<=',
+                    Type: 'datetime',
+                    SearchText: secondDate
+                }
+            ]), 500);
+        else
+            handle = setTimeout(() => props.SetFilter([{
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: (operator === 'after' ? '>' : '<'),
+                    Type: 'datetime',
+                    SearchText: date
+                }]), 500);
+        return () => { if (handle !== null)
+            clearTimeout(handle); };
+    }, [operator, date, secondDate]);
+    return React.createElement(React.Fragment, null,
+        React.createElement("tr", null,
+            React.createElement("td", null,
+                React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
+                        const value = evt.target.value;
+                        setOperator(value);
+                    } },
+                    React.createElement("option", { value: 'before' }, "Before"),
+                    React.createElement("option", { value: 'after' }, "After"),
+                    React.createElement("option", { value: 'between' }, "Between")))),
+        React.createElement("tr", null,
+            React.createElement("td", null,
+                React.createElement("input", { type: 'date', className: 'form-control', value: date, onChange: (evt) => {
+                        const value = evt.target.value;
+                        setDate(value);
+                    } }))),
+        operator === 'between' ? React.createElement(React.Fragment, null,
+            React.createElement("tr", null,
+                React.createElement("td", null, "and")),
+            React.createElement("tr", null,
+                React.createElement("td", null,
+                    React.createElement("input", { type: 'date', className: 'form-control', value: secondDate, onChange: (evt) => {
+                            const value = evt.target.value;
+                            setSecondDate(value);
+                        } })))) : null);
+}
+// Time filter only
+function TimeFilter(props) {
+    const [time, setTime] = React.useState('');
+    const [secondTime, setSecondTime] = React.useState('');
+    const [operator, setOperator] = React.useState('after');
+    React.useEffect(() => {
+        if (props.Filter.length === 0) {
+            setTime('');
+            setSecondTime('');
+        }
+        if (props.Filter.length > 1) {
+            const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
+            if (f1 == null)
+                setTime('');
+            else
+                setTime(f1.SearchText);
+            const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
+            if (f2 == null)
+                setSecondTime('');
+            else
+                setSecondTime(f2.SearchText);
+            if (f1 !== null && f2 !== null)
+                setOperator('between');
+            else if (f1 == null)
+                setOperator('before');
+            else
+                setOperator('after');
+        }
+        if (props.Filter.length === 1) {
+            setSecondTime('');
+            if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
+                setOperator('after');
+            else
+                setOperator('before');
+            setTime(props.Filter[0].SearchText);
+        }
+    }, [props.Filter]);
+    React.useEffect(() => {
+        let handle = null;
+        if (time === '' && secondTime === '' && props.Filter.length !== 0)
+            handle = setTimeout(() => props.SetFilter([]), 500);
+        if (time === '' && secondTime === '')
+            return () => { if (handle !== null)
+                clearTimeout(handle); };
+        if (operator === 'between')
+            handle = setTimeout(() => props.SetFilter([
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '>=',
+                    Type: 'datetime',
+                    SearchText: time
+                },
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '<=',
+                    Type: 'datetime',
+                    SearchText: secondTime
+                }
+            ]), 500);
+        else
+            handle = setTimeout(() => props.SetFilter([{
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: (operator === 'after' ? '>' : '<'),
+                    Type: 'datetime',
+                    SearchText: time
+                }]), 500);
+        return () => { if (handle !== null)
+            clearTimeout(handle); };
+    }, [operator, time, secondTime]);
+    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 value = evt.target.value;
+                        setOperator(value);
+                    } },
+                    React.createElement("option", { value: 'before' }, "Before"),
+                    React.createElement("option", { value: 'after' }, "After"),
+                    React.createElement("option", { value: 'between' }, "Between")))),
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+            React.createElement("td", null,
+                React.createElement("input", { type: 'time', className: 'form-control', value: time, onChange: (evt) => {
+                        const value = evt.target.value;
+                        setTime(value);
+                    } }))),
+        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: 'time', className: 'form-control', value: secondTime, onChange: (evt) => {
+                            const value = evt.target.value;
+                            setSecondTime(value);
+                        } })))) : null);
+}
+// DateTime combination filter
+function DateTimeFilter(props) {
+    const [dateTime, setDateTime] = React.useState('');
+    const [secondDateTime, setSecondDateTime] = React.useState('');
+    const val = React.useMemo(() => ({ Value: dateTime }), [dateTime]);
+    const val2 = React.useMemo(() => ({ Value: secondDateTime }), [secondDateTime]);
+    const [operator, setOperator] = React.useState('after');
+    React.useEffect(() => {
+        if (props.Filter.length === 0) {
+            setDateTime('');
+            setSecondDateTime('');
+        }
+        if (props.Filter.length > 1) {
+            const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
+            if (f1 == null)
+                setDateTime('');
+            else
+                setDateTime(f1.SearchText);
+            const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
+            if (f2 == null)
+                setSecondDateTime('');
+            else
+                setSecondDateTime(f2.SearchText);
+            if (f1 !== null && f2 !== null)
+                setOperator('between');
+            else if (f1 == null)
+                setOperator('before');
+            else
+                setOperator('after');
+        }
+        if (props.Filter.length === 1) {
+            setSecondDateTime('');
+            if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
+                setOperator('after');
+            else
+                setOperator('before');
+            setDateTime(props.Filter[0].SearchText);
+        }
+    }, [props.Filter]);
+    React.useEffect(() => {
+        let handle = null;
+        if (dateTime === '' && secondDateTime === '' && props.Filter.length !== 0)
+            handle = setTimeout(() => props.SetFilter([]), 500);
+        if (dateTime === '' && secondDateTime === '')
+            return () => { if (handle !== null)
+                clearTimeout(handle); };
+        if (operator === 'between')
+            handle = setTimeout(() => props.SetFilter([
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '>=',
+                    Type: 'datetime',
+                    SearchText: dateTime
+                },
+                {
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: '<=',
+                    Type: 'datetime',
+                    SearchText: secondDateTime
+                }
+            ]), 500);
+        else
+            handle = setTimeout(() => props.SetFilter([{
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: (operator === 'after' ? '>' : '<'),
+                    Type: 'datetime',
+                    SearchText: dateTime
+                }]), 500);
+        return () => { if (handle !== null)
+            clearTimeout(handle); };
+    }, [operator, dateTime, secondDateTime]);
+    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 value = evt.target.value;
+                        setOperator(value);
+                    } },
+                    React.createElement("option", { value: 'before' }, "Before"),
+                    React.createElement("option", { value: 'after' }, "After"),
+                    React.createElement("option", { value: 'between' }, "Between")))),
+        React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
+            React.createElement("td", null,
+                React.createElement(react_forms_1.DatePicker, { Record: val, Field: "Value", Setter: (r) => setDateTime(r.Value), Label: '', Type: 'datetime-local', Valid: () => true, Format: momentDateFormat + ' ' + momentTimeFormat }))),
+        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(react_forms_1.DatePicker, { Record: val2, Field: "Value", Setter: (r) => setSecondDateTime(r.Value), Label: '', Type: 'datetime-local', Valid: () => true, Format: momentDateFormat + ' ' + momentTimeFormat })))) : null);
+}

package/lib/FilterableTable/EnumFilter.d.ts

@@ -0,0 +1,37 @@
+import { Search } from '@gpa-gemstone/react-interactive';
+/**
+* Represents an option with a value and label.
+*/
+interface IOptions {
+    Value: string | number;
+    Label: string;
+}
+/**
+* Represents the properties expected by the EnumFilter component.
+*/
+interface IProps<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 filtering field.
+     */
+    FieldName: string;
+    /**
+     * The array of IOptions[] for filtering.
+     */
+    Options: IOptions[];
+}
+/**
+ * Component to handle enum filtering based on provided filter props.
+ * @param {IProps<T>} props - Props passed to EnumFilter.
+ * @returns JSX element representing EnumFilter component.
+ */
+export declare function EnumFilter<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/FilterableTable/EnumFilter.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnumFilter = EnumFilter;
+// ******************************************************************************************************
+//  EnumFilter.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 enum filtering based on provided filter props.
+ * @param {IProps<T>} props - Props passed to EnumFilter.
+ * @returns JSX element representing EnumFilter component.
+ */
+function EnumFilter(props) {
+    // State for options with selection.
+    const [options, setOptions] = React.useState([]);
+    // Update options based on props.Options changes.
+    React.useEffect(() => {
+        if (props.Options.length !== options.length)
+            setOptions(props.Options.map(item => (Object.assign(Object.assign({}, item), { Selected: true }))));
+        else if (props.Options.some((o, i) => o.Label !== options[i].Label || o.Value !== options[i].Value))
+            setOptions(props.Options.map(item => (Object.assign(Object.assign({}, item), { Selected: true }))));
+    }, [props.Options]);
+    // Updates filter based on selected option changes.
+    React.useEffect(() => {
+        if (props.Filter.length !== 0 && (options.filter((x) => x.Selected).length === options.length)) {
+            props.SetFilter([]);
+            return;
+        }
+        if (options.some(item => !item.Selected))
+            props.SetFilter([{
+                    FieldName: props.FieldName,
+                    IsPivotColumn: false,
+                    Operator: 'IN',
+                    Type: 'enum',
+                    SearchText: `(${options.filter(o => o.Selected).map(x => x.Value).join(',')})`
+                }]);
+    }, [options]);
+    // Updates options based on filter changes.
+    React.useEffect(() => {
+        if (props.Filter.length === 0)
+            setOptions((opt) => opt.map(item => (Object.assign(Object.assign({}, item), { Selected: true }))));
+        else {
+            let list = props.Filter[0].SearchText.replace('(', '').replace(')', '').split(',');
+            list = list.filter(x => x !== "");
+            const hasChanged = options.some(item => {
+                const i = list.findIndex(l => l === item.Value);
+                if (i < 0 && item.Selected)
+                    return true;
+                if (i >= 0 && !item.Selected)
+                    return true;
+                return false;
+            });
+            if (hasChanged)
+                setOptions((opt) => opt.map((item) => (Object.assign(Object.assign({}, item), { Selected: list.findIndex(l => l == item.Value) >= 0 }))));
+        }
+    }, [props.Filter]);
+    // Renders option checkboxes.
+    return React.createElement(React.Fragment, null,
+        React.createElement("tr", { onClick: (evt) => {
+                evt.preventDefault();
+                const isChecked = options.filter((x) => x.Selected).length === options.length;
+                setOptions((old) => old.map((o) => (Object.assign(Object.assign({}, o), { Selected: !isChecked }))));
+            } },
+            React.createElement("td", null,
+                React.createElement("input", { type: "checkbox", checked: options.filter((x) => x.Selected).length === options.length, onChange: () => null })),
+            React.createElement("td", null, "All")),
+        options.map((f, i) => (React.createElement("tr", { key: i, onClick: () => { setOptions((old) => old.map((o) => (Object.assign(Object.assign({}, o), { Selected: (o.Value === f.Value ? !o.Selected : o.Selected) })))); } },
+            React.createElement("td", null,
+                React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: () => null })),
+            React.createElement("td", null, f.Label)))));
+}

package/lib/FilterableTable/FilterableColumn.d.ts

@@ -0,0 +1,20 @@
+import * as ReactTableProps from '../Table/Types';
+import * as React from 'react';
+import { Search } from '@gpa-gemstone/react-interactive';
+import { IUnit } from './NumberFilter';
+interface IOptions {
+    Value: string | number;
+    Label: string;
+}
+export declare const IsFilterableColumnProps: (props: any) => boolean;
+interface IFilterableCollumn<T> extends ReactTableProps.IColumn<T> {
+    Type?: Search.FieldType;
+    Enum?: IOptions[];
+    ExpandedLabel?: string;
+    Unit?: IUnit[];
+}
+/**
+ * Wrapper to make any column configurable
+ */
+export default function FilterableColumn<T>(props: React.PropsWithChildren<IFilterableCollumn<T>>): JSX.Element;
+export {};

package/lib/FilterableTable/FilterableColumn.js

@@ -0,0 +1,34 @@
+"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.IsFilterableColumnProps = void 0;
+exports.default = FilterableColumn;
+const React = require("react");
+const IsFilterableColumnProps = (props) => ((props === null || props === void 0 ? void 0 : props['Key']) != null);
+exports.IsFilterableColumnProps = IsFilterableColumnProps;
+/**
+ * Wrapper to make any column configurable
+ */
+function FilterableColumn(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}

package/lib/FilterableTable/FilterableTable.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as ReactTableProps from '../Table/Types';
+import { Search } from '@gpa-gemstone/react-interactive';
+interface IProps<T> extends ReactTableProps.ITable<T> {
+    SetFilter: (filters: Search.IFilter<T>[]) => void;
+    DefaultFilter?: Search.IFilter<T>[];
+}
+/**
+ * Table with Filters in the column headers
+ */
+export default function FilterableTable<T>(props: React.PropsWithChildren<IProps<T>>): JSX.Element;
+export {};

package/lib/FilterableTable/FilterableTable.js

@@ -0,0 +1,95 @@
+"use strict";
+// ******************************************************************************************************
+//  FilterableTable.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.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FilterableTable;
+const React = require("react");
+const Table_1 = require("../Table/Table");
+const Column_1 = require("../Table/Column");
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const BooleanFilter_1 = require("./BooleanFilter");
+const TextFilter_1 = require("./TextFilter");
+const EnumFilter_1 = require("./EnumFilter");
+const NumberFilter_1 = require("./NumberFilter");
+const DateTimeFilters_1 = require("./DateTimeFilters");
+const helper_functions_1 = require("@gpa-gemstone/helper-functions");
+const FilterableColumn_1 = require("./FilterableColumn");
+// ToDo: This whole structure is kinda gross, this should live in react-table so we don't have to map FilterableColumn -> Column -> HeaderWrapper
+/**
+ * Table with Filters in the column headers
+ */
+function FilterableTable(props) {
+    const [filters, setFilters] = React.useState((props.DefaultFilter === undefined ? [] : props.DefaultFilter));
+    const [guid] = React.useState((0, helper_functions_1.CreateGuid)());
+    function updateFilters(flts, fld) {
+        setFilters((fls) => {
+            const otherFilters = fls.filter(item => item.FieldName !== fld);
+            return otherFilters.concat(flts);
+        });
+    }
+    React.useEffect(() => { props.SetFilter(filters); }, [filters]);
+    return (React.createElement(Table_1.Table, Object.assign({}, props), React.Children.map(props.children, (element) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!React.isValidElement(element))
+            return null;
+        if (!(0, FilterableColumn_1.IsFilterableColumnProps)(element.props))
+            return null;
+        return (React.createElement(Column_1.Column, Object.assign({}, element.props),
+            React.createElement(Header, { Label: (_a = element.props) === null || _a === void 0 ? void 0 : _a.children, Filter: filters.filter(f => { var _a, _b; return f.FieldName === ((_b = (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field) === null || _b === void 0 ? void 0 : _b.toString()); }), SetFilter: (f) => { var _a; return updateFilters(f, (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field); }, Field: (_b = element.props) === null || _b === void 0 ? void 0 : _b.Field, Type: (_c = element.props) === null || _c === void 0 ? void 0 : _c.Type, Options: (_d = element.props) === null || _d === void 0 ? void 0 : _d.Enum, ExpandedLabel: (_e = element.props) === null || _e === void 0 ? void 0 : _e.ExpandedLabel, Guid: guid, Unit: (_f = element.props) === null || _f === void 0 ? void 0 : _f.Unit })));
+    })));
+}
+// Table column header details
+function Header(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/FilterableTable/NumberFilter.d.ts

@@ -0,0 +1,19 @@
+import { Search } from '@gpa-gemstone/react-interactive';
+interface IProps<T> {
+    SetFilter: (evt: Search.IFilter<T>[]) => void;
+    Filter: Search.IFilter<T>[];
+    FieldName: string;
+    Unit?: IUnit[];
+}
+export interface IUnit {
+    label: string;
+    GetValue: (value: number) => number;
+    GetFilter: (filter: number) => number;
+}
+/**
+ *
+ * @param props
+ * @returns
+ */
+export declare function NumberFilter<T>(props: IProps<T>): JSX.Element;
+export {};