@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
186 lines (185 loc) • 12 kB
JavaScript
;
// ******************************************************************************************************
// FilterCreator.tsx - Gbtc
//
// Copyright © 2020, 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/23/2025 - Preston Crawford
// Generated original version of source code.
//
// ******************************************************************************************************
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_forms_1 = require("@gpa-gemstone/react-forms");
var FilterCreator = function (props) {
var _a = React.useState([]), options = _a[0], setOptions = _a[1];
React.useEffect(function () {
if (props.Field === undefined)
return;
if (props.Field.enum !== undefined)
setOptions(props.Field.enum);
if (props.Enum !== undefined)
return props.Enum(setOptions, props.Field);
if (props.Field.enum === undefined)
setOptions([]);
}, [props.Field, props.Enum]);
if (props.Field === undefined)
return null;
if (props.Field.type === "string") {
return (React.createElement(React.Fragment, null,
React.createElement("label", null, "Column type is string. Wildcard (*) can be used with 'LIKE' and 'NOT LIKE'"),
React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-4' },
React.createElement("select", { className: 'form-control', value: props.Filter.Operator, onChange: function (evt) {
var value = evt.target.value;
props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { Operator: value })); });
} },
React.createElement("option", { value: 'LIKE' }, "LIKE"),
React.createElement("option", { value: '=' }, "="),
React.createElement("option", { value: 'NOT LIKE' }, "NOT LIKE"))),
React.createElement("div", { className: 'col' },
React.createElement("input", { className: 'form-control', value: props.Filter.SearchText.replace('$_', '_'), onChange: function (evt) {
var value = evt.target.value;
props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: value.replace('_', '$_') })); });
} })))));
}
else if (props.Field.type === "integer" || props.Field.type === "number") {
return (React.createElement(React.Fragment, null,
React.createElement("label", null,
"Column type is ",
props.Field.type,
"."),
React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-4' },
React.createElement("select", { className: 'form-control', value: props.Filter.Operator, onChange: function (evt) {
var value = evt.target.value;
props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { Operator: value })); });
} },
React.createElement("option", { value: '=' }, "="),
React.createElement("option", { value: '<>' }, "<>"),
React.createElement("option", { value: '>' }, ">"),
React.createElement("option", { value: '>=' }, ">="),
React.createElement("option", { value: '<' }, "<"),
React.createElement("option", { value: '<=' }, "<="))),
React.createElement("div", { className: 'col' },
React.createElement("input", { type: 'number', className: 'form-control', value: props.Filter.SearchText, onChange: function (evt) {
var value = evt.target.value;
props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: value })); });
} })))));
}
else if (props.Field.type === "datetime") {
return (React.createElement(React.Fragment, null,
React.createElement("label", null,
"Column type is ",
props.Field.type,
"."),
React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-4' },
React.createElement("select", { className: 'form-control', value: props.Filter.Operator, onChange: function (evt) {
var value = evt.target.value;
props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { Operator: value })); });
} },
React.createElement("option", { value: '>' }, ">"),
React.createElement("option", { value: '>=' }, ">="),
React.createElement("option", { value: '<' }, "<"),
React.createElement("option", { value: '<=' }, "<="))),
React.createElement("div", { className: 'col' },
React.createElement(react_forms_1.DatePicker, { Record: props.Filter, Field: "SearchText", Setter: function (r) {
var value = r.SearchText;
props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: value })); });
}, Label: '', Type: 'datetime-local', Valid: function () { return true; }, Format: 'MM/DD/YYYY HH:mm:ss.SSS' })))));
}
else if (props.Field.type === "boolean") {
return React.createElement("div", { className: "form-check" },
React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
props.Setter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { Operator: '=', SearchText: evt.target.checked ? "1" : "0" })); });
}, value: props.Filter.SearchText === "1" ? 'on' : 'off', checked: props.Filter.SearchText === "1" ? true : false }),
React.createElement("label", { className: "form-check-label" }, "Column type is boolean. Yes/On is checked."));
}
else {
return (React.createElement(React.Fragment, null,
React.createElement("label", null, "Column type is enumerable. Select from below."),
React.createElement("ul", { style: { listStyle: 'none' } },
React.createElement("li", null,
React.createElement("div", { className: "form-check" },
React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
if (evt.target.checked)
props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: "(".concat(options.map(function (x) { return x.Value; }).join(','), ")") })); });
else
props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: '' })); });
}, defaultValue: 'off' }),
React.createElement("label", { className: "form-check-label" }, "Select All"))),
options.map(function (vli, index) {
return React.createElement("li", { key: index },
React.createElement("div", { className: "form-check" },
React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
if (evt.target.checked) {
var list = stripParenthesisAndSplit(props.Filter.SearchText);
list = list.filter(function (x) { return x !== ""; });
list.push(vli.Value);
var text_1 = "(".concat(list.join(','), ")");
props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: text_1 })); });
}
else {
var list = stripParenthesisAndSplit(props.Filter.SearchText);
list = list.filter(function (x) { return x !== ""; });
list = list.filter(function (x) { return x !== vli.Value; });
var text_2 = "(".concat(list.join(','), ")");
props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: text_2 })); });
}
}, value: props.Filter.SearchText.indexOf(vli.Value) >= 0 ? 'on' : 'off', checked: stripParenthesisAndSplit(props.Filter.SearchText).indexOf(vli.Value) >= 0 }),
React.createElement("label", { className: "form-check-label" }, vli.Label)));
}))));
}
};
var stripParenthesisAndSplit = function (str) {
return (str.match(/^\(.*\)$/) != null ? str.slice(1, -1) : str).split(',');
};
exports.default = FilterCreator;