@gpa-gemstone/react-table
Version:
Table for GPA web applications
75 lines (74 loc) • 6.08 kB
JavaScript
"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.default = FilterableColumn;
exports.FilterableColumnHeader = FilterableColumnHeader;
const React = require("react");
const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
const BooleanFilter_1 = require("../Filters/BooleanFilter");
const TextFilter_1 = require("../Filters/TextFilter");
const EnumFilter_1 = require("../Filters/EnumFilter");
const NumberFilter_1 = require("../Filters/NumberFilter");
const DateTimeFilters_1 = require("../Filters/DateTimeFilters");
/**
* Wrapper to make any column configurable
*/
function FilterableColumn(props) {
return React.createElement(React.Fragment, null, props.children);
}
// Table column header details
function FilterableColumnHeader(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));
}