@gpa-gemstone/react-table 1.2.57 → 1.2.59

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

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