@gpa-gemstone/common-pages 0.0.121 → 0.0.123

package/lib/Pipelines/CSVPipeline.js

@@ -0,0 +1,323 @@
+"use strict";
+// ******************************************************************************************************
+//  CSVPipeline.tsx - Gbtc
+//
+//  Copyright © 2024, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  07/24/2024 - Preston Crawford
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCSVPipeline = useCSVPipeline;
+var React = __importStar(require("react"));
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var react_table_1 = require("@gpa-gemstone/react-table");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var react_table_2 = require("@gpa-gemstone/react-table");
+var AdditionalUploadUI = function (props) {
+    return (React.createElement("div", { className: 'row justify-content-center m-0' },
+        React.createElement("div", { className: 'col-6 p-0' },
+            React.createElement(react_forms_1.CheckBox, { Record: { HasHeaders: props.HasHeaders }, Field: "HasHeaders", Setter: function (record) { return props.SetHasHeaders(record.HasHeaders); }, Label: 'My Data Has Headers' }))));
+};
+function useCSVPipeline(csvFields) {
+    var _a = React.useState(false), hasHeaders = _a[0], setHasHeaders = _a[1];
+    return {
+        Select: function (mimeType, fileExt) { return mimeType.toLowerCase() === 'text/csv' || fileExt === 'csv'; },
+        Steps: [{ Label: 'Edit CSV', UI: CsvPipelineEditStep, AdditionalProps: { Fields: csvFields, DataHasHeaders: hasHeaders } }],
+        AdditionalUploadUI: React.createElement(AdditionalUploadUI, { HasHeaders: hasHeaders, SetHasHeaders: setHasHeaders })
+    };
+}
+function CsvPipelineEditStep(props) {
+    var _a, _b;
+    var rawDataRef = React.useRef();
+    var _c = React.useState([]), headers = _c[0], setHeaders = _c[1];
+    var _d = React.useState(new Map()), headerMap = _d[0], setHeaderMap = _d[1];
+    var _e = React.useState([]), data = _e[0], setData = _e[1];
+    var _f = React.useState([]), pagedData = _f[0], setPagedData = _f[1];
+    var _g = React.useState(true), isFileParseable = _g[0], setIsFileParseable = _g[1];
+    var _h = React.useState(false), isCSVMissingHeaders = _h[0], setIsCSVMissingHeaders = _h[1];
+    var _j = React.useState(false), isCSVMissingDataCells = _j[0], setIsCSVMissingDataCells = _j[1];
+    var _k = React.useState(0), page = _k[0], setPage = _k[1];
+    var _l = React.useState(1), totalPages = _l[0], setTotalPages = _l[1];
+    var _m = React.useState(true), showDataHeaderAlert = _m[0], setShowDataHeaderAlert = _m[1];
+    var _o = React.useState(true), showDataOrHeaderAlert = _o[0], setShowDataOrHeaderAlert = _o[1];
+    React.useEffect(function () {
+        if (data.length === 0)
+            return;
+        var pages = Math.ceil(data.length / 10);
+        setTotalPages(pages);
+        var Data = __spreadArray([], data, true);
+        setPagedData(Data.slice(page * 10, (page + 1) * 10));
+    }, [data, page]);
+    React.useEffect(function () {
+        var errors = [];
+        if (props.AdditionalProps == null)
+            return;
+        props.AdditionalProps.Fields.forEach(function (field) {
+            var _a;
+            var matchedHeader = (_a = Array.from(headerMap.entries()).find(function (_a) {
+                var value = _a[1];
+                return value === field.Field;
+            })) === null || _a === void 0 ? void 0 : _a[0];
+            if (matchedHeader == null) {
+                if (field.Required)
+                    errors.push("".concat(field.Label, " is required and must be mapped to a header."));
+                return; // return early if the field was never mapped to a header
+            }
+            var fieldIndex = headers.indexOf(matchedHeader);
+            var uniqueValues = new Set();
+            //Need to also make sure that all the fields that have the Required flag got mapped to a header...
+            data.forEach(function (row) {
+                var value = row[fieldIndex + 1]; //+1 for row index value
+                // Check uniqueness
+                if (field.Unique) {
+                    if (uniqueValues.has(value))
+                        errors.push("All ".concat(field.Label, " values must be unique."));
+                    else
+                        uniqueValues.add(value);
+                }
+                // Check allowed emptiness
+                if (!field.AllowEmpty && (value == null || (value !== null && value !== void 0 ? value : '').trim() === ""))
+                    errors.push("All ".concat(field.Label, " cannot be empty."));
+                //Check validity
+                if (!field.Validate(value))
+                    errors.push("All ".concat(field.Label, " must contain valid values."));
+            });
+        });
+        props.SetErrors(errors);
+    }, [data, headers, headerMap, isFileParseable]);
+    React.useEffect(function () {
+        if (props.RawFileData == null || props.AdditionalProps == null || rawDataRef.current === props.RawFileData)
+            return;
+        var parsedData;
+        try {
+            parsedData = parseCSV(props.RawFileData, props.AdditionalProps.DataHasHeaders, props.AdditionalProps.Fields.filter(function (field) { return field.Required; }).length);
+        }
+        catch (_a) {
+            setIsFileParseable(false);
+            return;
+        }
+        setIsFileParseable(true);
+        setIsCSVMissingDataCells(parsedData.AddedMissingDataValues);
+        setIsCSVMissingHeaders(parsedData.AddedMissingHeaders);
+        setData(parsedData.Data);
+        setHeaders(parsedData.Headers);
+        setHeaderMap(autoMapHeaders(parsedData.Headers, props.AdditionalProps.Fields.map(function (field) { return field.Field; })));
+        rawDataRef.current = props.RawFileData;
+    }, [props.RawFileData, props.AdditionalProps]);
+    React.useEffect(function () {
+        if (props.AdditionalProps == null || props.Errors.length !== 0)
+            return;
+        var mappedData = [];
+        data.forEach(function (row) {
+            var record = {};
+            headers.forEach(function (header, index) {
+                var _a;
+                var mappedField = headerMap.get(header);
+                if (mappedField == null)
+                    return;
+                var field = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields.find(function (f) { return f.Field === mappedField; });
+                if (field == null)
+                    return;
+                var value = row[index + 1];
+                record = field.Process(value, record);
+            });
+            mappedData.push(record);
+        });
+        props.SetData(mappedData);
+    }, [data, headers, headerMap, (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields, props.Errors]);
+    var getFieldSelect = React.useCallback(function (header) {
+        var _a;
+        if (props.AdditionalProps == null || ((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields.length) === 0)
+            return;
+        var field = headerMap.get(header);
+        var updateMap = function (head, val) { return setHeaderMap(new Map(headerMap).set(head, val)); };
+        var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === field; });
+        var help = (matchedField === null || matchedField === void 0 ? void 0 : matchedField.Help) != null ? React.createElement("p", { style: { whiteSpace: 'nowrap' } },
+            "=", matchedField === null || matchedField === void 0 ? void 0 :
+            matchedField.Help) : undefined;
+        return React.createElement(react_forms_1.Select, { Record: { Header: header, Value: field }, EmptyOption: true, Options: props.AdditionalProps.Fields.map(function (field) { return ({ Value: field.Field, Label: field.Label }); }), Field: "Value", Setter: function (record) { return updateMap(record.Header, record.Value); }, Label: ' ', Help: help });
+    }, [(_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields, headerMap]);
+    var handleValueChange = function (rowIndex, colIndex, value) {
+        setData(function (prevData) {
+            var newData = __spreadArray([], prevData, true);
+            newData[rowIndex][colIndex] = value;
+            return newData;
+        });
+    };
+    var handleRowDelete = function (rowIndex) {
+        var newData = __spreadArray([], data, true);
+        newData.splice(rowIndex, 1);
+        setData(newData);
+    };
+    var getHeader = function (header) {
+        if (props.AdditionalProps == null)
+            return;
+        var mappedField = headerMap.get(header);
+        if (mappedField == null)
+            return header;
+        var matchedField = props.AdditionalProps.Fields.find(function (field) { return field.Field === mappedField; });
+        if (matchedField == null)
+            return header;
+        return null; //return null since the select element will have a label attached to it 
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "container-fluid d-flex flex-column p-0 h-100" },
+            React.createElement("div", { className: 'row h-100' },
+                React.createElement("div", { className: 'col-12 d-flex flex-column h-100' }, pagedData.length !== 0 ?
+                    React.createElement(React.Fragment, null,
+                        isCSVMissingDataCells && isCSVMissingHeaders ? (React.createElement("div", { className: 'row' },
+                            React.createElement("div", { className: 'col-12' },
+                                React.createElement(react_interactive_1.Alert, { AlertColor: 'alert-info', Show: showDataHeaderAlert, SetShow: setShowDataHeaderAlert },
+                                    React.createElement("p", { style: { whiteSpace: 'nowrap' } }, "Missing data cells were added to meet the number of required fields."),
+                                    React.createElement("hr", null),
+                                    React.createElement("p", { style: { whiteSpace: 'nowrap' } }, "Missing headers were added to meet the number of required fields."))))) : isCSVMissingDataCells || isCSVMissingHeaders ? (React.createElement("div", { className: 'row' },
+                            React.createElement("div", { className: 'col-12' },
+                                React.createElement(react_interactive_1.Alert, { AlertColor: 'alert-info', Show: showDataOrHeaderAlert, SetShow: setShowDataOrHeaderAlert },
+                                    React.createElement("p", { style: { whiteSpace: 'nowrap' } }, isCSVMissingDataCells ? 'Missing data cells were added to meet the number of required fields.' : 'Missing headers were added to meet the number of required fields.'))))) : null,
+                        React.createElement("div", { className: 'row flex-grow-1', style: { overflowY: 'hidden' } },
+                            React.createElement("div", { className: 'col-12 h-100' },
+                                React.createElement(react_table_1.ConfigurableTable, { Data: pagedData, SortKey: '', Ascending: false, OnSort: function () { }, KeySelector: function (data) { return data[0]; }, TheadStyle: { width: '100%', display: 'table-header-group', }, TbodyStyle: { width: '100%', display: 'block', height: '100%' }, RowStyle: { display: 'table-row', width: '100%', height: 'auto' }, TableStyle: { width: '100%', height: '100%', tableLayout: 'fixed', marginBottom: 0, display: 'block' }, TableClass: 'table', ModalZIndex: 9995 },
+                                    headers.map(function (header, i) {
+                                        return React.createElement(react_table_1.ConfigurableColumn, { Key: header, Label: header, Default: true },
+                                            React.createElement(react_table_1.Column, { Key: header, Field: i + 1, AllowSort: false, Content: function (_a) {
+                                                    var item = _a.item, field = _a.field;
+                                                    if (props.AdditionalProps == null)
+                                                        return;
+                                                    var mappedField = headerMap.get(header);
+                                                    var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === mappedField; });
+                                                    if (matchedField == null)
+                                                        return item[field];
+                                                    var value = item[field];
+                                                    var isValid = matchedField.Validate(value);
+                                                    var feedback = matchedField.Feedback;
+                                                    var allValues = {};
+                                                    headers.forEach(function (header, index) {
+                                                        var mappedField = headerMap.get(header);
+                                                        if (mappedField != null) {
+                                                            allValues[mappedField] = item[index + 1];
+                                                        }
+                                                    });
+                                                    return (React.createElement(matchedField.EditComponent, { Value: value, SetValue: function (val) { return handleValueChange(parseInt(item[0]), field, val); }, Valid: isValid, Feedback: feedback, AllRecordValues: allValues }));
+                                                } },
+                                                getHeader(header),
+                                                getFieldSelect(header)));
+                                    }),
+                                    React.createElement(react_table_1.Column, { Key: 'delete', Field: 0, AllowSort: false, RowStyle: { textAlign: 'right' }, Content: function (_a) {
+                                            var item = _a.item;
+                                            return (React.createElement("button", { className: 'btn', onClick: function () { return handleRowDelete(parseInt(item[0])); } },
+                                                React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: "red" })));
+                                        } }, '')))),
+                        React.createElement("div", { className: 'row' },
+                            React.createElement("div", { className: 'col-12' },
+                                React.createElement(react_table_2.Paging, { Current: page + 1, Total: totalPages, SetPage: function (p) { return setPage(p - 1); } }))))
+                    : null)))));
+}
+//Helper functions
+function autoMapHeaders(headers, fields) {
+    if (headers.length === 0 || fields.length === 0)
+        return new Map();
+    var map = new Map();
+    headers.forEach(function (header) {
+        var match = fields.find(function (field) { return field === header; });
+        if (match != null)
+            map.set(match.toString(), match);
+    });
+    return map;
+}
+var parseCSV = function (csvContent, hasHeaders, numOfRequiredFields) {
+    var rows = (0, helper_functions_1.CsvStringToArray)(csvContent);
+    var headers = hasHeaders ? rows[0] : [];
+    var data = hasHeaders ? rows.slice(1) : rows;
+    data = data.map(function (row, index) { return __spreadArray([(index).toString()], row, true); }); // Add index at the beginning of row
+    var missingHeaders = false;
+    var missingData = false;
+    if (hasHeaders) {
+        // Adjust headers to match numOfRequiredFields
+        if (headers.length < numOfRequiredFields) {
+            missingHeaders = true;
+            while (headers.length < numOfRequiredFields) {
+                headers.push(String.fromCharCode(65 + headers.length)); // A, B, C, etc.
+            }
+        }
+        // Fix headers so no duplicates
+        for (var headerIndex = 0; headerIndex < headers.length; headerIndex++) {
+            var count = 1;
+            for (var index = 0; index < headerIndex; index++) {
+                if (headers[headerIndex] === headers[index]) {
+                    // Change header and restart loop to look for another duplicate
+                    headers[headerIndex] += "_".concat(count);
+                    count++;
+                    index = -1;
+                    continue;
+                }
+            }
+        }
+    }
+    else {
+        var colCount = rows[0].length - 1 < numOfRequiredFields ? numOfRequiredFields : rows[0].length - 1;
+        missingData = rows[0].length - 1 < numOfRequiredFields;
+        for (var i = 0; i < colCount; i++) {
+            headers.push(String.fromCharCode(65 + i)); // A, B, C, etc.
+        }
+    }
+    if (data.some(function (d) { return d.length - 1 < numOfRequiredFields; })) {
+        data = data.map(function (row) {
+            if (row.length - 1 < numOfRequiredFields) {
+                missingData = true;
+                var missingDataVals = Array(numOfRequiredFields - (row.length - 1)).fill('');
+                return __spreadArray(__spreadArray([], row, true), missingDataVals, true);
+            }
+            return row;
+        });
+    }
+    return { Headers: headers, Data: data, AddedMissingHeaders: missingHeaders, AddedMissingDataValues: missingData };
+};

package/lib/SearchBar.js

@@ -67,7 +67,7 @@ var DefaultSearch;
         var defaultSearchcols = [
             { label: 'Key', key: 'AssetKey', type: 'string', isPivotField: false },
             { label: 'Name', key: 'Name', type: 'string', isPivotField: false },
-            { label: 'Substation', key: 'Location', type: 'string', isPivotField: false },
+            { label: 'Substation Name', key: 'Location', type: 'string', isPivotField: false },
             { label: 'Make', key: 'Make', type: 'string', isPivotField: false },
             { label: 'Model', key: 'Model', type: 'string', isPivotField: false },
             { label: 'Number of Assets', key: 'MappedAssets', type: 'number', isPivotField: false },
@@ -97,9 +97,9 @@ var DefaultSearch;
         var defaultSearchcols = [
             { label: 'Name', key: 'Name', type: 'string', isPivotField: false },
             { label: 'Key', key: 'LocationKey', type: 'string', isPivotField: false },
-            { label: 'Transmission Asset', key: 'Asset', type: 'string', isPivotField: false },
-            { label: 'Meter', key: 'Meter', type: 'string', isPivotField: false },
-            { label: 'Number of Transmission Assets', key: 'Assets', type: 'integer', isPivotField: false },
+            { label: 'Asset Key', key: 'Asset', type: 'string', isPivotField: false },
+            { label: 'Meter Key', key: 'Meter', type: 'string', isPivotField: false },
+            { label: 'Number of Assets', key: 'Assets', type: 'integer', isPivotField: false },
             { label: 'Number of Meters', key: 'Meters', type: 'integer', isPivotField: false },
             { label: 'Description', key: 'Description', type: 'string', isPivotField: false },
         ];

package/lib/SelectionPopup.d.ts

@@ -1,7 +1,6 @@
 import React = require("react");
 import { GenericSlice, Search } from "@gpa-gemstone/react-interactive";
 import { Application, OpenXDA, SystemCenter } from "@gpa-gemstone/application-typings";
-import { Column } from "@gpa-gemstone/react-table";
 interface U {
     ID: number | string;
 }
@@ -11,7 +10,6 @@ interface IProps<T extends U> {
     OnClose: (selected: T[], conf: boolean) => void;
     Show: boolean;
     Type?: 'single' | 'multiple';
-    Columns: Column<T>[];
     Title: string;
     GetEnum: (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
     GetAddlFields: (setAddlFields: (cols: Search.IField<T>[]) => void) => () => void;

package/lib/StandardSelectPopup.d.ts

@@ -1,4 +1,3 @@
-import { Column } from "@gpa-gemstone/react-table";
 import * as React from 'react';
 import { GenericSlice } from "@gpa-gemstone/react-interactive";
 interface U {
@@ -11,7 +10,6 @@ interface IProps<T extends U> {
     Show: boolean;
     Searchbar: (children: React.ReactNode) => React.ReactNode;
     Type?: 'single' | 'multiple';
-    Columns: Column<T>[];
     Title: string;
     MinSelection?: number;
     children?: React.ReactNode;

package/lib/StandardSelectPopup.js

@@ -52,12 +52,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SelectPopup;
-var react_table_1 = __importDefault(require("@gpa-gemstone/react-table"));
+var react_table_1 = require("@gpa-gemstone/react-table");
 var React = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_interactive_1 = require("@gpa-gemstone/react-interactive");
@@ -75,13 +72,12 @@ function SelectPopup(props) {
         setSelectedData(props.Selection);
     }, [props.Selection]);
     function AddCurrentList() {
-        var updatedData;
-        updatedData = selectedData.concat(data);
+        var updatedData = selectedData.concat(data);
         setSelectedData(_.uniqBy(updatedData, function (d) { return d.ID; }));
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(react_interactive_1.Modal, { Show: props.Show, Title: props.Title, ShowX: true, Size: 'xlg', CallBack: function (conf) { return props.OnClose(selectedData, conf); }, DisableConfirm: props.MinSelection !== undefined && selectedData.length < props.MinSelection, ConfirmShowToolTip: props.MinSelection !== undefined && selectedData.length < props.MinSelection, ConfirmToolTipContent: React.createElement("p", null,
-                gpa_symbols_1.CrossMark,
+                React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null),
                 " At least ",
                 props.MinSelection,
                 " items must be selected. ") },
@@ -96,13 +92,18 @@ function SelectPopup(props) {
                                 React.createElement("div", { className: "form-group" },
                                     React.createElement("div", { className: "btn btn-danger", onClick: function (event) { event.preventDefault(); setSelectedData([]); } }, "Remove All"))))) : null,
                     React.Children.map(props.children, function (e) {
-                        if (React.isValidElement(e))
+                        if (React.isValidElement(e)) {
+                            if ((e.type === react_table_1.FilterableColumn) ||
+                                (e.type === react_table_1.Column) ||
+                                (e.type === react_table_1.ConfigurableColumn))
+                                return null;
                             return e;
+                        }
                         return null;
                     }))))),
             React.createElement("div", { className: "row" },
                 React.createElement("div", { className: "col", style: { width: (props.Type === undefined || props.Type === 'single' ? '100%' : '60%') } },
-                    React.createElement(react_table_1.default, { cols: props.Columns, tableClass: "table table-hover", data: data, sortKey: sortField, ascending: ascending, onSort: function (d) {
+                    React.createElement(react_table_1.Table, { TableClass: "table table-hover", Data: data, SortKey: sortField, Ascending: ascending, OnSort: function (d) {
                             if (d.colKey === "Scroll")
                                 return;
                             if (d.colKey === sortField)
@@ -110,16 +111,16 @@ function SelectPopup(props) {
                             else {
                                 dispatch(props.Slice.Sort({ SortField: d.colField, Ascending: true }));
                             }
-                        }, onClick: function (d) {
+                        }, OnClick: function (d) {
                             if (props.Type === undefined || props.Type === 'single')
                                 setSelectedData([d.row]);
                             else
                                 setSelectedData(function (s) { return __spreadArray(__spreadArray([], s.filter(function (item) { return item.ID !== d.row.ID; }), true), [d.row], false); });
-                        }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function (item) { return selectedData.findIndex(function (d) { return d.ID === item.ID; }) > -1; } })),
+                        }, Selected: function (item) { return selectedData.findIndex(function (d) { return d.ID === item.ID; }) > -1; }, KeySelector: function (item) { return item.ID; } }, props.children)),
                 props.Type === 'multiple' ? React.createElement("div", { className: "col", style: { width: '40%' } },
                     React.createElement("div", { style: { width: '100%' } },
                         React.createElement("h3", null, " Current Selection ")),
-                    React.createElement(react_table_1.default, { cols: props.Columns, tableClass: "table table-hover", data: selectedData, sortKey: sortKeySelected, ascending: ascendingSelected, onSort: function (d) {
+                    React.createElement(react_table_1.Table, { TableClass: "table table-hover", Data: selectedData, SortKey: sortKeySelected, Ascending: ascendingSelected, OnSort: function (d) {
                             if (d.colKey === sortKeySelected) {
                                 var ordered = _.orderBy(selectedData, [d.colKey], [(!ascendingSelected ? "asc" : "desc")]);
                                 setAscendingSelected(!ascendingSelected);
@@ -131,5 +132,5 @@ function SelectPopup(props) {
                                 setSelectedData(ordered);
                                 setSortKeySelected(d.colKey);
                             }
-                        }, onClick: function (d) { return setSelectedData(__spreadArray([], selectedData.filter(function (item) { return item.ID !== d.row.ID; }), true)); }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function (item) { return false; } })) : null))));
+                        }, OnClick: function (d) { return setSelectedData(__spreadArray([], selectedData.filter(function (item) { return item.ID !== d.row.ID; }), true)); }, Selected: function () { return false; }, KeySelector: function (item) { return item.ID; } }, props.children)) : null))));
 }

package/lib/TimeFilter.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IStartEnd, IStartDuration, IEndDuration, ICenterDuration, TimeUnit } from './TimeWindowUtils';
+import { DateUnit } from './TimeFilter/QuickSelects';
+export type ITimeFilter = IStartEnd | IStartDuration | IEndDuration | ICenterDuration;
+export declare function getTimeWindow(flt: ITimeFilter, format?: string): {
+    center: string;
+    start: string;
+    end: string;
+    unit: TimeUnit;
+    duration: number;
+    halfDuration: number;
+};
+/**
+*    filter: an interface of IStartEnd | IStartDuration | IEndDuration | ICenterDuration
+*    showQuickSelect: displays Quick Select component
+*    isHorizontal: displays Quick Selects in horizontal view
+*/
+interface IProps {
+    filter: ITimeFilter;
+    setFilter: (center: string, start: string, end: string, unit: TimeUnit, duration: number) => void;
+    showQuickSelect: boolean;
+    dateTimeSetting: 'center' | 'startWindow' | 'endWindow' | 'startEnd';
+    timeZone: string;
+    isHorizontal: boolean;
+    format?: DateUnit;
+}
+declare const TimeFilter: (props: IProps) => React.JSX.Element;
+export default TimeFilter;