@gpa-gemstone/react-table 1.2.58 → 1.2.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ConfigurableTable/ConfigurableTable.d.ts +4 -0
- package/lib/ConfigurableTable/ConfigurableTable.js +3 -0
- package/lib/Table/Table.js +35 -10
- package/package.json +56 -56
- package/lib/AdjustableTable/Column.d.ts +0 -20
- package/lib/AdjustableTable/Column.js +0 -77
- package/lib/AdjustableTable/Table.d.ts +0 -3
- package/lib/AdjustableTable/Table.js +0 -470
- package/lib/AdjustableTable/Types.d.ts +0 -148
- package/lib/AdjustableTable/Types.js +0 -24
- package/lib/DynamicTable.d.ts +0 -37
- package/lib/DynamicTable.js +0 -44
- package/lib/FilterableTable/BooleanFilter.d.ts +0 -26
- package/lib/FilterableTable/BooleanFilter.js +0 -68
- package/lib/FilterableTable/DateTimeFilters.d.ts +0 -10
- package/lib/FilterableTable/DateTimeFilters.js +0 -321
- package/lib/FilterableTable/EnumFilter.d.ts +0 -37
- package/lib/FilterableTable/EnumFilter.js +0 -89
- package/lib/FilterableTable/FilterableColumn.d.ts +0 -20
- package/lib/FilterableTable/FilterableColumn.js +0 -34
- package/lib/FilterableTable/FilterableTable.d.ts +0 -12
- package/lib/FilterableTable/FilterableTable.js +0 -95
- package/lib/FilterableTable/NumberFilter.d.ts +0 -19
- package/lib/FilterableTable/NumberFilter.js +0 -160
- package/lib/FilterableTable/TextFilter.d.ts +0 -14
- package/lib/FilterableTable/TextFilter.js +0 -78
- package/lib/SearchableTable.d.ts +0 -15
- package/lib/SearchableTable.js +0 -40
- package/lib/SelectTable.d.ts +0 -19
- package/lib/SelectTable.js +0 -102
- package/lib/Table.d.ts +0 -99
- package/lib/Table.js +0 -94
package/lib/DynamicTable.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// ******************************************************************************************************
|
|
3
|
-
// DynamicTable.tsx - Gbtc
|
|
4
|
-
//
|
|
5
|
-
// Copyright © 2021, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
-
//
|
|
7
|
-
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
-
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
-
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
-
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
-
//
|
|
12
|
-
// http://opensource.org/licenses/MIT
|
|
13
|
-
//
|
|
14
|
-
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
-
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
-
// License for the specific language governing permissions and limitations.
|
|
17
|
-
//
|
|
18
|
-
// Code Modification History:
|
|
19
|
-
// ----------------------------------------------------------------------------------------------------
|
|
20
|
-
// 07/26/2021 - Billy Ernest
|
|
21
|
-
// Generated original version of source code.
|
|
22
|
-
//
|
|
23
|
-
// ******************************************************************************************************
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.DynamicTable = DynamicTable;
|
|
26
|
-
const React = require("react");
|
|
27
|
-
const Table_1 = require("./Table");
|
|
28
|
-
const empty = new Map();
|
|
29
|
-
function DynamicTable(props) {
|
|
30
|
-
if (props.data.length <= 0)
|
|
31
|
-
return null;
|
|
32
|
-
const cols = [];
|
|
33
|
-
const keys = Object.keys(props.data[0]);
|
|
34
|
-
for (const key of keys) {
|
|
35
|
-
cols.push({ key, label: key, field: key });
|
|
36
|
-
}
|
|
37
|
-
return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
|
|
38
|
-
React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: (d) => handleSort(d) }),
|
|
39
|
-
React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: (data, e) => props.onClick(data, e), Selected: props.selected, KeySelector: props.keySelector })));
|
|
40
|
-
function handleSort(data) {
|
|
41
|
-
if (data.colKey !== null)
|
|
42
|
-
props.onSort(data);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Search } from '@gpa-gemstone/react-interactive';
|
|
2
|
-
/**
|
|
3
|
-
* Interface defining the properties expected by the BooleanFilter component.
|
|
4
|
-
*/
|
|
5
|
-
interface IFilterProps<T> {
|
|
6
|
-
/**
|
|
7
|
-
* Function to set the filter based on Search.IFilter<T> array.
|
|
8
|
-
* @param evt - Event handler that updates the filter.
|
|
9
|
-
*/
|
|
10
|
-
SetFilter: (evt: Search.IFilter<T>[]) => void;
|
|
11
|
-
/**
|
|
12
|
-
* Array of filters of type Search.IFilter<T>.
|
|
13
|
-
*/
|
|
14
|
-
Filter: Search.IFilter<T>[];
|
|
15
|
-
/**
|
|
16
|
-
* Name of the field for filtering.
|
|
17
|
-
*/
|
|
18
|
-
FieldName: string;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Component to handle boolean filtering based on provided filter props.
|
|
22
|
-
* @param {IFilterProps<T>} props - Props passed to the BooleanFilter component.
|
|
23
|
-
* @returns JSX element representing the BooleanFilter component.
|
|
24
|
-
*/
|
|
25
|
-
export declare function BooleanFilter<T>(props: IFilterProps<T>): JSX.Element;
|
|
26
|
-
export {};
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.BooleanFilter = BooleanFilter;
|
|
4
|
-
// ******************************************************************************************************
|
|
5
|
-
// BooleanFilter.tsx - Gbtc
|
|
6
|
-
//
|
|
7
|
-
// Copyright © 2022, Grid Protection Alliance. All Rights Reserved.
|
|
8
|
-
//
|
|
9
|
-
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
10
|
-
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
11
|
-
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
12
|
-
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
13
|
-
//
|
|
14
|
-
// http://opensource.org/licenses/MIT
|
|
15
|
-
//
|
|
16
|
-
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
17
|
-
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
18
|
-
// License for the specific language governing permissions and limitations.
|
|
19
|
-
//
|
|
20
|
-
// Code Modification History:
|
|
21
|
-
// ----------------------------------------------------------------------------------------------------
|
|
22
|
-
// 03/02/2022 - C. Lackner
|
|
23
|
-
// Generated original version of source code.
|
|
24
|
-
// ******************************************************************************************************
|
|
25
|
-
const React = require("react");
|
|
26
|
-
/**
|
|
27
|
-
* Component to handle boolean filtering based on provided filter props.
|
|
28
|
-
* @param {IFilterProps<T>} props - Props passed to the BooleanFilter component.
|
|
29
|
-
* @returns JSX element representing the BooleanFilter component.
|
|
30
|
-
*/
|
|
31
|
-
function BooleanFilter(props) {
|
|
32
|
-
const [selected, setSelected] = React.useState(false);
|
|
33
|
-
const [notSelected, setNotSelected] = React.useState(false);
|
|
34
|
-
React.useEffect(() => {
|
|
35
|
-
if (props.Filter.length === 0) {
|
|
36
|
-
setSelected(true);
|
|
37
|
-
setNotSelected(true);
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
setSelected(props.Filter[0].SearchText === '1');
|
|
41
|
-
setNotSelected(props.Filter[0].SearchText !== '1');
|
|
42
|
-
}, [props.Filter]);
|
|
43
|
-
React.useEffect(() => {
|
|
44
|
-
if (!selected && !notSelected) {
|
|
45
|
-
setSelected(true);
|
|
46
|
-
setNotSelected(true);
|
|
47
|
-
}
|
|
48
|
-
}, [selected, notSelected]);
|
|
49
|
-
React.useEffect(() => {
|
|
50
|
-
if (selected && !notSelected && (props.Filter.length === 0 || props.Filter[0].SearchText !== '1')) {
|
|
51
|
-
props.SetFilter([{ FieldName: props.FieldName, IsPivotColumn: false, SearchText: '1', Operator: '=', Type: 'boolean' }]);
|
|
52
|
-
}
|
|
53
|
-
if (!selected && notSelected && (props.Filter.length === 0 || props.Filter[0].SearchText !== '0')) {
|
|
54
|
-
props.SetFilter([{ FieldName: props.FieldName, IsPivotColumn: false, SearchText: '0', Operator: '=', Type: 'boolean' }]);
|
|
55
|
-
}
|
|
56
|
-
if (selected && notSelected && props.Filter.length > 0)
|
|
57
|
-
props.SetFilter([]);
|
|
58
|
-
}, [selected, notSelected]);
|
|
59
|
-
return React.createElement(React.Fragment, null,
|
|
60
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); setSelected((s) => !s); } },
|
|
61
|
-
React.createElement("td", null,
|
|
62
|
-
React.createElement("input", { type: "checkbox", checked: selected, onChange: () => null })),
|
|
63
|
-
React.createElement("td", null, "Selected")),
|
|
64
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); setNotSelected((v) => !v); } },
|
|
65
|
-
React.createElement("td", null,
|
|
66
|
-
React.createElement("input", { type: "checkbox", checked: notSelected, onChange: () => null })),
|
|
67
|
-
React.createElement("td", null, "Not Selected")));
|
|
68
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Search } from '@gpa-gemstone/react-interactive';
|
|
2
|
-
interface IProps<T> {
|
|
3
|
-
SetFilter: (evt: Search.IFilter<T>[]) => void;
|
|
4
|
-
Filter: Search.IFilter<T>[];
|
|
5
|
-
FieldName: string;
|
|
6
|
-
}
|
|
7
|
-
export declare function DateFilter<T>(props: IProps<T>): JSX.Element;
|
|
8
|
-
export declare function TimeFilter<T>(props: IProps<T>): JSX.Element;
|
|
9
|
-
export declare function DateTimeFilter<T>(props: IProps<T>): JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,321 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// ******************************************************************************************************
|
|
3
|
-
// DateTimeFilters.tsx - Gbtc
|
|
4
|
-
//
|
|
5
|
-
// Copyright © 2022, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
-
//
|
|
7
|
-
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
-
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
-
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
-
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
-
//
|
|
12
|
-
// http://opensource.org/licenses/MIT
|
|
13
|
-
//
|
|
14
|
-
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
-
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
-
// License for the specific language governing permissions and limitations.
|
|
17
|
-
//
|
|
18
|
-
// Code Modification History:
|
|
19
|
-
// ----------------------------------------------------------------------------------------------------
|
|
20
|
-
// 03/02/2022 - C Lackner
|
|
21
|
-
// Generated original version of source code.
|
|
22
|
-
// ******************************************************************************************************
|
|
23
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
24
|
-
exports.DateFilter = DateFilter;
|
|
25
|
-
exports.TimeFilter = TimeFilter;
|
|
26
|
-
exports.DateTimeFilter = DateTimeFilter;
|
|
27
|
-
const React = require("react");
|
|
28
|
-
const react_forms_1 = require("@gpa-gemstone/react-forms");
|
|
29
|
-
// Defines time and date formats
|
|
30
|
-
const momentDateFormat = "MM/DD/YYYY";
|
|
31
|
-
const momentTimeFormat = "HH:mm:ss.SSS"; // Also is the gemstone format
|
|
32
|
-
// Filter for date only
|
|
33
|
-
function DateFilter(props) {
|
|
34
|
-
const [date, setDate] = React.useState('');
|
|
35
|
-
const [secondDate, setSecondDate] = React.useState('');
|
|
36
|
-
const [operator, setOperator] = React.useState('after');
|
|
37
|
-
React.useEffect(() => {
|
|
38
|
-
if (props.Filter.length === 0) {
|
|
39
|
-
setDate('');
|
|
40
|
-
setSecondDate('');
|
|
41
|
-
}
|
|
42
|
-
if (props.Filter.length > 1) {
|
|
43
|
-
const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
|
|
44
|
-
if (f1 == null)
|
|
45
|
-
setDate('');
|
|
46
|
-
else
|
|
47
|
-
setDate(f1.SearchText);
|
|
48
|
-
const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
|
|
49
|
-
if (f2 == null)
|
|
50
|
-
setSecondDate('');
|
|
51
|
-
else
|
|
52
|
-
setSecondDate(f2.SearchText);
|
|
53
|
-
if (f1 !== null && f2 !== null)
|
|
54
|
-
setOperator('between');
|
|
55
|
-
else if (f1 == null)
|
|
56
|
-
setOperator('before');
|
|
57
|
-
else
|
|
58
|
-
setOperator('after');
|
|
59
|
-
}
|
|
60
|
-
if (props.Filter.length === 1) {
|
|
61
|
-
setSecondDate('');
|
|
62
|
-
if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
|
|
63
|
-
setOperator('after');
|
|
64
|
-
else
|
|
65
|
-
setOperator('before');
|
|
66
|
-
setDate(props.Filter[0].SearchText);
|
|
67
|
-
}
|
|
68
|
-
}, [props.Filter]);
|
|
69
|
-
React.useEffect(() => {
|
|
70
|
-
let handle = null;
|
|
71
|
-
if (date === '' && secondDate === '' && props.Filter.length !== 0)
|
|
72
|
-
handle = setTimeout(() => props.SetFilter([]), 500);
|
|
73
|
-
if (date === '' && secondDate === '')
|
|
74
|
-
return () => { if (handle !== null)
|
|
75
|
-
clearTimeout(handle); };
|
|
76
|
-
if (operator === 'between')
|
|
77
|
-
handle = setTimeout(() => props.SetFilter([
|
|
78
|
-
{
|
|
79
|
-
FieldName: props.FieldName,
|
|
80
|
-
IsPivotColumn: false,
|
|
81
|
-
Operator: '>=',
|
|
82
|
-
Type: 'datetime',
|
|
83
|
-
SearchText: date
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
FieldName: props.FieldName,
|
|
87
|
-
IsPivotColumn: false,
|
|
88
|
-
Operator: '<=',
|
|
89
|
-
Type: 'datetime',
|
|
90
|
-
SearchText: secondDate
|
|
91
|
-
}
|
|
92
|
-
]), 500);
|
|
93
|
-
else
|
|
94
|
-
handle = setTimeout(() => props.SetFilter([{
|
|
95
|
-
FieldName: props.FieldName,
|
|
96
|
-
IsPivotColumn: false,
|
|
97
|
-
Operator: (operator === 'after' ? '>' : '<'),
|
|
98
|
-
Type: 'datetime',
|
|
99
|
-
SearchText: date
|
|
100
|
-
}]), 500);
|
|
101
|
-
return () => { if (handle !== null)
|
|
102
|
-
clearTimeout(handle); };
|
|
103
|
-
}, [operator, date, secondDate]);
|
|
104
|
-
return React.createElement(React.Fragment, null,
|
|
105
|
-
React.createElement("tr", null,
|
|
106
|
-
React.createElement("td", null,
|
|
107
|
-
React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
|
|
108
|
-
const value = evt.target.value;
|
|
109
|
-
setOperator(value);
|
|
110
|
-
} },
|
|
111
|
-
React.createElement("option", { value: 'before' }, "Before"),
|
|
112
|
-
React.createElement("option", { value: 'after' }, "After"),
|
|
113
|
-
React.createElement("option", { value: 'between' }, "Between")))),
|
|
114
|
-
React.createElement("tr", null,
|
|
115
|
-
React.createElement("td", null,
|
|
116
|
-
React.createElement("input", { type: 'date', className: 'form-control', value: date, onChange: (evt) => {
|
|
117
|
-
const value = evt.target.value;
|
|
118
|
-
setDate(value);
|
|
119
|
-
} }))),
|
|
120
|
-
operator === 'between' ? React.createElement(React.Fragment, null,
|
|
121
|
-
React.createElement("tr", null,
|
|
122
|
-
React.createElement("td", null, "and")),
|
|
123
|
-
React.createElement("tr", null,
|
|
124
|
-
React.createElement("td", null,
|
|
125
|
-
React.createElement("input", { type: 'date', className: 'form-control', value: secondDate, onChange: (evt) => {
|
|
126
|
-
const value = evt.target.value;
|
|
127
|
-
setSecondDate(value);
|
|
128
|
-
} })))) : null);
|
|
129
|
-
}
|
|
130
|
-
// Time filter only
|
|
131
|
-
function TimeFilter(props) {
|
|
132
|
-
const [time, setTime] = React.useState('');
|
|
133
|
-
const [secondTime, setSecondTime] = React.useState('');
|
|
134
|
-
const [operator, setOperator] = React.useState('after');
|
|
135
|
-
React.useEffect(() => {
|
|
136
|
-
if (props.Filter.length === 0) {
|
|
137
|
-
setTime('');
|
|
138
|
-
setSecondTime('');
|
|
139
|
-
}
|
|
140
|
-
if (props.Filter.length > 1) {
|
|
141
|
-
const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
|
|
142
|
-
if (f1 == null)
|
|
143
|
-
setTime('');
|
|
144
|
-
else
|
|
145
|
-
setTime(f1.SearchText);
|
|
146
|
-
const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
|
|
147
|
-
if (f2 == null)
|
|
148
|
-
setSecondTime('');
|
|
149
|
-
else
|
|
150
|
-
setSecondTime(f2.SearchText);
|
|
151
|
-
if (f1 !== null && f2 !== null)
|
|
152
|
-
setOperator('between');
|
|
153
|
-
else if (f1 == null)
|
|
154
|
-
setOperator('before');
|
|
155
|
-
else
|
|
156
|
-
setOperator('after');
|
|
157
|
-
}
|
|
158
|
-
if (props.Filter.length === 1) {
|
|
159
|
-
setSecondTime('');
|
|
160
|
-
if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
|
|
161
|
-
setOperator('after');
|
|
162
|
-
else
|
|
163
|
-
setOperator('before');
|
|
164
|
-
setTime(props.Filter[0].SearchText);
|
|
165
|
-
}
|
|
166
|
-
}, [props.Filter]);
|
|
167
|
-
React.useEffect(() => {
|
|
168
|
-
let handle = null;
|
|
169
|
-
if (time === '' && secondTime === '' && props.Filter.length !== 0)
|
|
170
|
-
handle = setTimeout(() => props.SetFilter([]), 500);
|
|
171
|
-
if (time === '' && secondTime === '')
|
|
172
|
-
return () => { if (handle !== null)
|
|
173
|
-
clearTimeout(handle); };
|
|
174
|
-
if (operator === 'between')
|
|
175
|
-
handle = setTimeout(() => props.SetFilter([
|
|
176
|
-
{
|
|
177
|
-
FieldName: props.FieldName,
|
|
178
|
-
IsPivotColumn: false,
|
|
179
|
-
Operator: '>=',
|
|
180
|
-
Type: 'datetime',
|
|
181
|
-
SearchText: time
|
|
182
|
-
},
|
|
183
|
-
{
|
|
184
|
-
FieldName: props.FieldName,
|
|
185
|
-
IsPivotColumn: false,
|
|
186
|
-
Operator: '<=',
|
|
187
|
-
Type: 'datetime',
|
|
188
|
-
SearchText: secondTime
|
|
189
|
-
}
|
|
190
|
-
]), 500);
|
|
191
|
-
else
|
|
192
|
-
handle = setTimeout(() => props.SetFilter([{
|
|
193
|
-
FieldName: props.FieldName,
|
|
194
|
-
IsPivotColumn: false,
|
|
195
|
-
Operator: (operator === 'after' ? '>' : '<'),
|
|
196
|
-
Type: 'datetime',
|
|
197
|
-
SearchText: time
|
|
198
|
-
}]), 500);
|
|
199
|
-
return () => { if (handle !== null)
|
|
200
|
-
clearTimeout(handle); };
|
|
201
|
-
}, [operator, time, secondTime]);
|
|
202
|
-
return React.createElement(React.Fragment, null,
|
|
203
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
204
|
-
React.createElement("td", null,
|
|
205
|
-
React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
|
|
206
|
-
const value = evt.target.value;
|
|
207
|
-
setOperator(value);
|
|
208
|
-
} },
|
|
209
|
-
React.createElement("option", { value: 'before' }, "Before"),
|
|
210
|
-
React.createElement("option", { value: 'after' }, "After"),
|
|
211
|
-
React.createElement("option", { value: 'between' }, "Between")))),
|
|
212
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
213
|
-
React.createElement("td", null,
|
|
214
|
-
React.createElement("input", { type: 'time', className: 'form-control', value: time, onChange: (evt) => {
|
|
215
|
-
const value = evt.target.value;
|
|
216
|
-
setTime(value);
|
|
217
|
-
} }))),
|
|
218
|
-
operator === 'between' ? React.createElement(React.Fragment, null,
|
|
219
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
220
|
-
React.createElement("td", null, "and")),
|
|
221
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
222
|
-
React.createElement("td", null,
|
|
223
|
-
React.createElement("input", { type: 'time', className: 'form-control', value: secondTime, onChange: (evt) => {
|
|
224
|
-
const value = evt.target.value;
|
|
225
|
-
setSecondTime(value);
|
|
226
|
-
} })))) : null);
|
|
227
|
-
}
|
|
228
|
-
// DateTime combination filter
|
|
229
|
-
function DateTimeFilter(props) {
|
|
230
|
-
const [dateTime, setDateTime] = React.useState('');
|
|
231
|
-
const [secondDateTime, setSecondDateTime] = React.useState('');
|
|
232
|
-
const val = React.useMemo(() => ({ Value: dateTime }), [dateTime]);
|
|
233
|
-
const val2 = React.useMemo(() => ({ Value: secondDateTime }), [secondDateTime]);
|
|
234
|
-
const [operator, setOperator] = React.useState('after');
|
|
235
|
-
React.useEffect(() => {
|
|
236
|
-
if (props.Filter.length === 0) {
|
|
237
|
-
setDateTime('');
|
|
238
|
-
setSecondDateTime('');
|
|
239
|
-
}
|
|
240
|
-
if (props.Filter.length > 1) {
|
|
241
|
-
const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
|
|
242
|
-
if (f1 == null)
|
|
243
|
-
setDateTime('');
|
|
244
|
-
else
|
|
245
|
-
setDateTime(f1.SearchText);
|
|
246
|
-
const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
|
|
247
|
-
if (f2 == null)
|
|
248
|
-
setSecondDateTime('');
|
|
249
|
-
else
|
|
250
|
-
setSecondDateTime(f2.SearchText);
|
|
251
|
-
if (f1 !== null && f2 !== null)
|
|
252
|
-
setOperator('between');
|
|
253
|
-
else if (f1 == null)
|
|
254
|
-
setOperator('before');
|
|
255
|
-
else
|
|
256
|
-
setOperator('after');
|
|
257
|
-
}
|
|
258
|
-
if (props.Filter.length === 1) {
|
|
259
|
-
setSecondDateTime('');
|
|
260
|
-
if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
|
|
261
|
-
setOperator('after');
|
|
262
|
-
else
|
|
263
|
-
setOperator('before');
|
|
264
|
-
setDateTime(props.Filter[0].SearchText);
|
|
265
|
-
}
|
|
266
|
-
}, [props.Filter]);
|
|
267
|
-
React.useEffect(() => {
|
|
268
|
-
let handle = null;
|
|
269
|
-
if (dateTime === '' && secondDateTime === '' && props.Filter.length !== 0)
|
|
270
|
-
handle = setTimeout(() => props.SetFilter([]), 500);
|
|
271
|
-
if (dateTime === '' && secondDateTime === '')
|
|
272
|
-
return () => { if (handle !== null)
|
|
273
|
-
clearTimeout(handle); };
|
|
274
|
-
if (operator === 'between')
|
|
275
|
-
handle = setTimeout(() => props.SetFilter([
|
|
276
|
-
{
|
|
277
|
-
FieldName: props.FieldName,
|
|
278
|
-
IsPivotColumn: false,
|
|
279
|
-
Operator: '>=',
|
|
280
|
-
Type: 'datetime',
|
|
281
|
-
SearchText: dateTime
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
FieldName: props.FieldName,
|
|
285
|
-
IsPivotColumn: false,
|
|
286
|
-
Operator: '<=',
|
|
287
|
-
Type: 'datetime',
|
|
288
|
-
SearchText: secondDateTime
|
|
289
|
-
}
|
|
290
|
-
]), 500);
|
|
291
|
-
else
|
|
292
|
-
handle = setTimeout(() => props.SetFilter([{
|
|
293
|
-
FieldName: props.FieldName,
|
|
294
|
-
IsPivotColumn: false,
|
|
295
|
-
Operator: (operator === 'after' ? '>' : '<'),
|
|
296
|
-
Type: 'datetime',
|
|
297
|
-
SearchText: dateTime
|
|
298
|
-
}]), 500);
|
|
299
|
-
return () => { if (handle !== null)
|
|
300
|
-
clearTimeout(handle); };
|
|
301
|
-
}, [operator, dateTime, secondDateTime]);
|
|
302
|
-
return React.createElement(React.Fragment, null,
|
|
303
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
304
|
-
React.createElement("td", null,
|
|
305
|
-
React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
|
|
306
|
-
const value = evt.target.value;
|
|
307
|
-
setOperator(value);
|
|
308
|
-
} },
|
|
309
|
-
React.createElement("option", { value: 'before' }, "Before"),
|
|
310
|
-
React.createElement("option", { value: 'after' }, "After"),
|
|
311
|
-
React.createElement("option", { value: 'between' }, "Between")))),
|
|
312
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
313
|
-
React.createElement("td", null,
|
|
314
|
-
React.createElement(react_forms_1.DatePicker, { Record: val, Field: "Value", Setter: (r) => setDateTime(r.Value), Label: '', Type: 'datetime-local', Valid: () => true, Format: momentDateFormat + ' ' + momentTimeFormat }))),
|
|
315
|
-
operator === 'between' ? React.createElement(React.Fragment, null,
|
|
316
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
317
|
-
React.createElement("td", null, "and")),
|
|
318
|
-
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
|
|
319
|
-
React.createElement("td", null,
|
|
320
|
-
React.createElement(react_forms_1.DatePicker, { Record: val2, Field: "Value", Setter: (r) => setSecondDateTime(r.Value), Label: '', Type: 'datetime-local', Valid: () => true, Format: momentDateFormat + ' ' + momentTimeFormat })))) : null);
|
|
321
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Search } from '@gpa-gemstone/react-interactive';
|
|
2
|
-
/**
|
|
3
|
-
* Represents an option with a value and label.
|
|
4
|
-
*/
|
|
5
|
-
interface IOptions {
|
|
6
|
-
Value: string | number;
|
|
7
|
-
Label: string;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Represents the properties expected by the EnumFilter component.
|
|
11
|
-
*/
|
|
12
|
-
interface IProps<T> {
|
|
13
|
-
/**
|
|
14
|
-
* Function to set the filter based on Search.IFilter<T> array.
|
|
15
|
-
* @param evt - Event handler that updates the filter.
|
|
16
|
-
*/
|
|
17
|
-
SetFilter: (evt: Search.IFilter<T>[]) => void;
|
|
18
|
-
/**
|
|
19
|
-
* Array of filters of type Search.IFilter<T>.
|
|
20
|
-
*/
|
|
21
|
-
Filter: Search.IFilter<T>[];
|
|
22
|
-
/**
|
|
23
|
-
* Name of filtering field.
|
|
24
|
-
*/
|
|
25
|
-
FieldName: string;
|
|
26
|
-
/**
|
|
27
|
-
* The array of IOptions[] for filtering.
|
|
28
|
-
*/
|
|
29
|
-
Options: IOptions[];
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Component to handle enum filtering based on provided filter props.
|
|
33
|
-
* @param {IProps<T>} props - Props passed to EnumFilter.
|
|
34
|
-
* @returns JSX element representing EnumFilter component.
|
|
35
|
-
*/
|
|
36
|
-
export declare function EnumFilter<T>(props: IProps<T>): JSX.Element;
|
|
37
|
-
export {};
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.EnumFilter = EnumFilter;
|
|
4
|
-
// ******************************************************************************************************
|
|
5
|
-
// EnumFilter.tsx - Gbtc
|
|
6
|
-
//
|
|
7
|
-
// Copyright © 2022, Grid Protection Alliance. All Rights Reserved.
|
|
8
|
-
//
|
|
9
|
-
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
10
|
-
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
11
|
-
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
12
|
-
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
13
|
-
//
|
|
14
|
-
// http://opensource.org/licenses/MIT
|
|
15
|
-
//
|
|
16
|
-
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
17
|
-
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
18
|
-
// License for the specific language governing permissions and limitations.
|
|
19
|
-
//
|
|
20
|
-
// Code Modification History:
|
|
21
|
-
// ----------------------------------------------------------------------------------------------------
|
|
22
|
-
// 03/02/2022 - C Lackner
|
|
23
|
-
// Generated original version of source code.
|
|
24
|
-
// ******************************************************************************************************
|
|
25
|
-
const React = require("react");
|
|
26
|
-
/**
|
|
27
|
-
* Component to handle enum filtering based on provided filter props.
|
|
28
|
-
* @param {IProps<T>} props - Props passed to EnumFilter.
|
|
29
|
-
* @returns JSX element representing EnumFilter component.
|
|
30
|
-
*/
|
|
31
|
-
function EnumFilter(props) {
|
|
32
|
-
// State for options with selection.
|
|
33
|
-
const [options, setOptions] = React.useState([]);
|
|
34
|
-
// Update options based on props.Options changes.
|
|
35
|
-
React.useEffect(() => {
|
|
36
|
-
if (props.Options.length !== options.length)
|
|
37
|
-
setOptions(props.Options.map(item => (Object.assign(Object.assign({}, item), { Selected: true }))));
|
|
38
|
-
else if (props.Options.some((o, i) => o.Label !== options[i].Label || o.Value !== options[i].Value))
|
|
39
|
-
setOptions(props.Options.map(item => (Object.assign(Object.assign({}, item), { Selected: true }))));
|
|
40
|
-
}, [props.Options]);
|
|
41
|
-
// Updates filter based on selected option changes.
|
|
42
|
-
React.useEffect(() => {
|
|
43
|
-
if (props.Filter.length !== 0 && (options.filter((x) => x.Selected).length === options.length)) {
|
|
44
|
-
props.SetFilter([]);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
if (options.some(item => !item.Selected))
|
|
48
|
-
props.SetFilter([{
|
|
49
|
-
FieldName: props.FieldName,
|
|
50
|
-
IsPivotColumn: false,
|
|
51
|
-
Operator: 'IN',
|
|
52
|
-
Type: 'enum',
|
|
53
|
-
SearchText: `(${options.filter(o => o.Selected).map(x => x.Value).join(',')})`
|
|
54
|
-
}]);
|
|
55
|
-
}, [options]);
|
|
56
|
-
// Updates options based on filter changes.
|
|
57
|
-
React.useEffect(() => {
|
|
58
|
-
if (props.Filter.length === 0)
|
|
59
|
-
setOptions((opt) => opt.map(item => (Object.assign(Object.assign({}, item), { Selected: true }))));
|
|
60
|
-
else {
|
|
61
|
-
let list = props.Filter[0].SearchText.replace('(', '').replace(')', '').split(',');
|
|
62
|
-
list = list.filter(x => x !== "");
|
|
63
|
-
const hasChanged = options.some(item => {
|
|
64
|
-
const i = list.findIndex(l => l === item.Value);
|
|
65
|
-
if (i < 0 && item.Selected)
|
|
66
|
-
return true;
|
|
67
|
-
if (i >= 0 && !item.Selected)
|
|
68
|
-
return true;
|
|
69
|
-
return false;
|
|
70
|
-
});
|
|
71
|
-
if (hasChanged)
|
|
72
|
-
setOptions((opt) => opt.map((item) => (Object.assign(Object.assign({}, item), { Selected: list.findIndex(l => l == item.Value) >= 0 }))));
|
|
73
|
-
}
|
|
74
|
-
}, [props.Filter]);
|
|
75
|
-
// Renders option checkboxes.
|
|
76
|
-
return React.createElement(React.Fragment, null,
|
|
77
|
-
React.createElement("tr", { onClick: (evt) => {
|
|
78
|
-
evt.preventDefault();
|
|
79
|
-
const isChecked = options.filter((x) => x.Selected).length === options.length;
|
|
80
|
-
setOptions((old) => old.map((o) => (Object.assign(Object.assign({}, o), { Selected: !isChecked }))));
|
|
81
|
-
} },
|
|
82
|
-
React.createElement("td", null,
|
|
83
|
-
React.createElement("input", { type: "checkbox", checked: options.filter((x) => x.Selected).length === options.length, onChange: () => null })),
|
|
84
|
-
React.createElement("td", null, "All")),
|
|
85
|
-
options.map((f, i) => (React.createElement("tr", { key: i, onClick: () => { setOptions((old) => old.map((o) => (Object.assign(Object.assign({}, o), { Selected: (o.Value === f.Value ? !o.Selected : o.Selected) })))); } },
|
|
86
|
-
React.createElement("td", null,
|
|
87
|
-
React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: () => null })),
|
|
88
|
-
React.createElement("td", null, f.Label)))));
|
|
89
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as ReactTableProps from '../Table/Types';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { Search } from '@gpa-gemstone/react-interactive';
|
|
4
|
-
import { IUnit } from './NumberFilter';
|
|
5
|
-
interface IOptions {
|
|
6
|
-
Value: string | number;
|
|
7
|
-
Label: string;
|
|
8
|
-
}
|
|
9
|
-
export declare const IsFilterableColumnProps: (props: any) => boolean;
|
|
10
|
-
interface IFilterableCollumn<T> extends ReactTableProps.IColumn<T> {
|
|
11
|
-
Type?: Search.FieldType;
|
|
12
|
-
Enum?: IOptions[];
|
|
13
|
-
ExpandedLabel?: string;
|
|
14
|
-
Unit?: IUnit[];
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Wrapper to make any column configurable
|
|
18
|
-
*/
|
|
19
|
-
export default function FilterableColumn<T>(props: React.PropsWithChildren<IFilterableCollumn<T>>): JSX.Element;
|
|
20
|
-
export {};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// ******************************************************************************************************
|
|
3
|
-
// FilterableColumn.tsx - Gbtc
|
|
4
|
-
//
|
|
5
|
-
// Copyright © 2023, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
-
//
|
|
7
|
-
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
-
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
-
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
-
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
-
//
|
|
12
|
-
// http://opensource.org/licenses/MIT
|
|
13
|
-
//
|
|
14
|
-
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
-
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
-
// License for the specific language governing permissions and limitations.
|
|
17
|
-
//
|
|
18
|
-
// Code Modification History:
|
|
19
|
-
// ----------------------------------------------------------------------------------------------------
|
|
20
|
-
// 12/05/2024 - G. Santos
|
|
21
|
-
// Generated original version of source code.
|
|
22
|
-
// ******************************************************************************************************
|
|
23
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
24
|
-
exports.IsFilterableColumnProps = void 0;
|
|
25
|
-
exports.default = FilterableColumn;
|
|
26
|
-
const React = require("react");
|
|
27
|
-
const IsFilterableColumnProps = (props) => ((props === null || props === void 0 ? void 0 : props['Key']) != null);
|
|
28
|
-
exports.IsFilterableColumnProps = IsFilterableColumnProps;
|
|
29
|
-
/**
|
|
30
|
-
* Wrapper to make any column configurable
|
|
31
|
-
*/
|
|
32
|
-
function FilterableColumn(props) {
|
|
33
|
-
return React.createElement(React.Fragment, null, props.children);
|
|
34
|
-
}
|