@gpa-gemstone/react-table
Version:
Table for GPA web applications
161 lines (160 loc) • 8.53 kB
JavaScript
;
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);
}