@gpa-gemstone/react-table
Version:
Table for GPA web applications
79 lines (78 loc) • 3.92 kB
JavaScript
;
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"),
" ")));
}