@gpa-gemstone/react-table 1.2.44 → 1.2.46
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/AdjustableTable/AdjustableColumn.d.ts +20 -20
- package/lib/AdjustableTable/AdjustableColumn.js +99 -100
- package/lib/AdjustableTable/AdjustableTable.d.ts +102 -102
- package/lib/AdjustableTable/AdjustableTable.js +273 -273
- package/lib/AdjustableTable/Column.d.ts +67 -67
- package/lib/AdjustableTable/Column.js +124 -125
- package/lib/DynamicTable.d.ts +37 -37
- package/lib/DynamicTable.js +45 -46
- package/lib/Paging.d.ts +6 -7
- package/lib/Paging.js +66 -66
- package/lib/SearchableTable.d.ts +15 -16
- package/lib/SearchableTable.js +51 -52
- package/lib/SelectTable.d.ts +19 -19
- package/lib/SelectTable.js +121 -122
- package/lib/Table.d.ts +99 -99
- package/lib/Table.js +105 -106
- package/lib/index.d.ts +15 -15
- package/lib/index.js +47 -47
- package/package.json +6 -6
package/lib/Paging.js
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
//
|
|
5
|
-
//
|
|
6
|
-
//
|
|
7
|
-
//
|
|
8
|
-
//
|
|
9
|
-
// the
|
|
10
|
-
//
|
|
11
|
-
// file
|
|
12
|
-
//
|
|
13
|
-
//
|
|
14
|
-
//
|
|
15
|
-
//
|
|
16
|
-
//
|
|
17
|
-
//
|
|
18
|
-
//
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
//
|
|
22
|
-
//
|
|
23
|
-
//
|
|
24
|
-
//
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
React.
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
p
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = default_1;
|
|
4
|
+
// ******************************************************************************************************
|
|
5
|
+
// Paging.tsx - Gbtc
|
|
6
|
+
//
|
|
7
|
+
// Copyright © 2023, 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
|
+
// 08/01/2023 - C. Lackner
|
|
23
|
+
// Generated original version of source code.
|
|
24
|
+
//
|
|
25
|
+
// ******************************************************************************************************
|
|
26
|
+
var React = require("react");
|
|
27
|
+
function default_1(props) {
|
|
28
|
+
var _a = React.useState([]), pages = _a[0], setPages = _a[1];
|
|
29
|
+
var nPages = 7;
|
|
30
|
+
var minPg = React.useMemo(function () { return Math.min.apply(Math, pages); }, [pages]);
|
|
31
|
+
var maxPg = React.useMemo(function () { return Math.max.apply(Math, pages); }, [pages]);
|
|
32
|
+
React.useEffect(function () {
|
|
33
|
+
var display = [];
|
|
34
|
+
var p = Math.max(props.Current - Math.floor(nPages / 2), 1);
|
|
35
|
+
if (props.Total - p < nPages)
|
|
36
|
+
p = Math.max(props.Total - nPages + 1, 1);
|
|
37
|
+
while (p <= props.Total && display.length < nPages) {
|
|
38
|
+
display.push(p);
|
|
39
|
+
p = p + 1;
|
|
40
|
+
}
|
|
41
|
+
setPages(display);
|
|
42
|
+
}, [props.Total, props.Current]);
|
|
43
|
+
return React.createElement("ul", { className: "pagination justify-content-center" },
|
|
44
|
+
React.createElement("li", { className: "page-item" + (minPg == 1 ? ' disabled' : ""), key: "previous" },
|
|
45
|
+
React.createElement("a", { className: "page-link", onClick: function () {
|
|
46
|
+
if (minPg > 1)
|
|
47
|
+
props.SetPage(Math.max(props.Current - nPages, 1));
|
|
48
|
+
} }, "Previous")),
|
|
49
|
+
minPg > 2 ? React.createElement(React.Fragment, null,
|
|
50
|
+
React.createElement("li", { className: "page-item", key: "1" },
|
|
51
|
+
React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(1); } }, "1")),
|
|
52
|
+
React.createElement("li", { className: "page-item disabled", key: "skip-1" },
|
|
53
|
+
React.createElement("a", { className: "page-link" }, "..."))) : null,
|
|
54
|
+
pages.map(function (p) { return React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : ""), key: p },
|
|
55
|
+
React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(p); } }, p)); }),
|
|
56
|
+
maxPg + 2 <= props.Total ? React.createElement(React.Fragment, null,
|
|
57
|
+
React.createElement("li", { className: "page-item disabled", key: "skip-2" },
|
|
58
|
+
React.createElement("a", { className: "page-link" }, "...")),
|
|
59
|
+
React.createElement("li", { className: "page-item", key: props.Total },
|
|
60
|
+
React.createElement("a", { className: "page-link", onClick: function () { return props.SetPage(props.Total); } }, props.Total))) : null,
|
|
61
|
+
React.createElement("li", { className: "page-item" + (maxPg == props.Total ? ' disabled' : ""), key: 'next' },
|
|
62
|
+
React.createElement("a", { className: "page-link", onClick: function () {
|
|
63
|
+
if (maxPg < props.Total)
|
|
64
|
+
props.SetPage(Math.min(props.Current + nPages, props.Total));
|
|
65
|
+
} }, "Next")));
|
|
66
|
+
}
|
package/lib/SearchableTable.d.ts
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
*
|
|
6
|
-
* @param
|
|
7
|
-
* @
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
export
|
|
16
|
-
export {};
|
|
1
|
+
import { TableProps } from './Table';
|
|
2
|
+
interface ISearchableTableProps<T> extends TableProps<T> {
|
|
3
|
+
/**
|
|
4
|
+
* Function used to filter data
|
|
5
|
+
* @param item: The T to be matched
|
|
6
|
+
* @param search: The string to search by
|
|
7
|
+
* @returns: true if the item should be shown in the Table
|
|
8
|
+
*/
|
|
9
|
+
matchSearch: (item: T, search: string) => boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* A Table with an input Field to search on top
|
|
13
|
+
*/
|
|
14
|
+
export declare function SearchableTable<T>(props: ISearchableTableProps<T>): JSX.Element;
|
|
15
|
+
export {};
|
package/lib/SearchableTable.js
CHANGED
|
@@ -1,52 +1,51 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// ******************************************************************************************************
|
|
3
|
-
// SearchableTable.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/12/2021 - C. Lackner
|
|
21
|
-
// Generated original version of source code.
|
|
22
|
-
//
|
|
23
|
-
// ******************************************************************************************************
|
|
24
|
-
var __assign = (this && this.__assign) || function () {
|
|
25
|
-
__assign = Object.assign || function(t) {
|
|
26
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
27
|
-
s = arguments[i];
|
|
28
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
29
|
-
t[p] = s[p];
|
|
30
|
-
}
|
|
31
|
-
return t;
|
|
32
|
-
};
|
|
33
|
-
return __assign.apply(this, arguments);
|
|
34
|
-
};
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.SearchableTable =
|
|
37
|
-
var React = require("react");
|
|
38
|
-
var Table_1 = require("./Table");
|
|
39
|
-
/**
|
|
40
|
-
* A Table with an input Field to search on top
|
|
41
|
-
*/
|
|
42
|
-
function SearchableTable(props) {
|
|
43
|
-
var _a = React.useState(props.data), data = _a[0], setData = _a[1];
|
|
44
|
-
var _b = React.useState(''), searchTextAS = _b[0], setSearchTextAS = _b[1];
|
|
45
|
-
React.useEffect(function () {
|
|
46
|
-
setData(props.data.filter(function (s) { return props.matchSearch(s, searchTextAS); }));
|
|
47
|
-
}, [props.data, searchTextAS]);
|
|
48
|
-
return React.createElement(React.Fragment, null,
|
|
49
|
-
React.createElement("input", { className: "form-control", placeholder: "Search filter for select box ...", value: searchTextAS, onChange: function (e) { return setSearchTextAS(e.target.value); } }),
|
|
50
|
-
React.createElement(Table_1.default, __assign({}, props, { data: data })));
|
|
51
|
-
}
|
|
52
|
-
exports.SearchableTable = SearchableTable;
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// SearchableTable.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/12/2021 - C. Lackner
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
// ******************************************************************************************************
|
|
24
|
+
var __assign = (this && this.__assign) || function () {
|
|
25
|
+
__assign = Object.assign || function(t) {
|
|
26
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
27
|
+
s = arguments[i];
|
|
28
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
29
|
+
t[p] = s[p];
|
|
30
|
+
}
|
|
31
|
+
return t;
|
|
32
|
+
};
|
|
33
|
+
return __assign.apply(this, arguments);
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.SearchableTable = SearchableTable;
|
|
37
|
+
var React = require("react");
|
|
38
|
+
var Table_1 = require("./Table");
|
|
39
|
+
/**
|
|
40
|
+
* A Table with an input Field to search on top
|
|
41
|
+
*/
|
|
42
|
+
function SearchableTable(props) {
|
|
43
|
+
var _a = React.useState(props.data), data = _a[0], setData = _a[1];
|
|
44
|
+
var _b = React.useState(''), searchTextAS = _b[0], setSearchTextAS = _b[1];
|
|
45
|
+
React.useEffect(function () {
|
|
46
|
+
setData(props.data.filter(function (s) { return props.matchSearch(s, searchTextAS); }));
|
|
47
|
+
}, [props.data, searchTextAS]);
|
|
48
|
+
return React.createElement(React.Fragment, null,
|
|
49
|
+
React.createElement("input", { className: "form-control", placeholder: "Search filter for select box ...", value: searchTextAS, onChange: function (e) { return setSearchTextAS(e.target.value); } }),
|
|
50
|
+
React.createElement(Table_1.default, __assign({}, props, { data: data })));
|
|
51
|
+
}
|
package/lib/SelectTable.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Column } from './Table';
|
|
3
|
-
export interface ISelectTableProps<T> {
|
|
4
|
-
cols: Column<T>[];
|
|
5
|
-
data: T[];
|
|
6
|
-
sortKey: string;
|
|
7
|
-
ascending: boolean;
|
|
8
|
-
tableClass?: string;
|
|
9
|
-
tableStyle?: React.CSSProperties;
|
|
10
|
-
theadStyle?: React.CSSProperties;
|
|
11
|
-
theadClass?: string;
|
|
12
|
-
tbodyStyle?: React.CSSProperties;
|
|
13
|
-
tbodyClass?: string;
|
|
14
|
-
rowStyle?: React.CSSProperties;
|
|
15
|
-
onSelection: (selected: T[]) => void;
|
|
16
|
-
KeyField: keyof T;
|
|
17
|
-
selectAllCounter?: number;
|
|
18
|
-
}
|
|
19
|
-
export declare function SelectTable<T>(props: ISelectTableProps<T>): JSX.Element;
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Column } from './Table';
|
|
3
|
+
export interface ISelectTableProps<T> {
|
|
4
|
+
cols: Column<T>[];
|
|
5
|
+
data: T[];
|
|
6
|
+
sortKey: string;
|
|
7
|
+
ascending: boolean;
|
|
8
|
+
tableClass?: string;
|
|
9
|
+
tableStyle?: React.CSSProperties;
|
|
10
|
+
theadStyle?: React.CSSProperties;
|
|
11
|
+
theadClass?: string;
|
|
12
|
+
tbodyStyle?: React.CSSProperties;
|
|
13
|
+
tbodyClass?: string;
|
|
14
|
+
rowStyle?: React.CSSProperties;
|
|
15
|
+
onSelection: (selected: T[]) => void;
|
|
16
|
+
KeyField: keyof T;
|
|
17
|
+
selectAllCounter?: number;
|
|
18
|
+
}
|
|
19
|
+
export declare function SelectTable<T>(props: ISelectTableProps<T>): JSX.Element;
|
package/lib/SelectTable.js
CHANGED
|
@@ -1,122 +1,121 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// ******************************************************************************************************
|
|
3
|
-
// SelectTable.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
|
-
// 01/22/2021 - C. Lackner
|
|
21
|
-
// Generated original version of source code.
|
|
22
|
-
//
|
|
23
|
-
// ******************************************************************************************************
|
|
24
|
-
var __assign = (this && this.__assign) || function () {
|
|
25
|
-
__assign = Object.assign || function(t) {
|
|
26
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
27
|
-
s = arguments[i];
|
|
28
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
29
|
-
t[p] = s[p];
|
|
30
|
-
}
|
|
31
|
-
return t;
|
|
32
|
-
};
|
|
33
|
-
return __assign.apply(this, arguments);
|
|
34
|
-
};
|
|
35
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
36
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
37
|
-
if (ar || !(i in from)) {
|
|
38
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
39
|
-
ar[i] = from[i];
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
43
|
-
};
|
|
44
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
|
-
exports.SelectTable =
|
|
46
|
-
var React = require("react");
|
|
47
|
-
var _ = require("lodash");
|
|
48
|
-
var Table_1 = require("./Table");
|
|
49
|
-
function SelectTable(props) {
|
|
50
|
-
var didMountRef = React.useRef(false);
|
|
51
|
-
var _a = React.useState(props.data), data = _a[0], setData = _a[1];
|
|
52
|
-
var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
|
|
53
|
-
var _c = React.useState(props.sortKey), sortKey = _c[0], setSortKey = _c[1];
|
|
54
|
-
var _d = React.useState(props.ascending), ascending = _d[0], setAscending = _d[1];
|
|
55
|
-
React.useEffect(function () {
|
|
56
|
-
if (didMountRef.current)
|
|
57
|
-
selectAll();
|
|
58
|
-
else
|
|
59
|
-
didMountRef.current = true;
|
|
60
|
-
}, [props.selectAllCounter]);
|
|
61
|
-
React.useEffect(function () {
|
|
62
|
-
if (props.data.length !== data.length)
|
|
63
|
-
setData(props.data);
|
|
64
|
-
}, [props.data]);
|
|
65
|
-
React.useEffect(function () {
|
|
66
|
-
setSelected(function (d) { return d.filter(function (keyItem) { return data.findIndex(function (item) { return item[props.KeyField] === keyItem; }) > -1; }); });
|
|
67
|
-
}, [data]);
|
|
68
|
-
React.useEffect(function () {
|
|
69
|
-
var sortColumn = props.cols.filter(function (col) { return col.key === sortKey; })[0];
|
|
70
|
-
if (sortColumn === undefined || sortColumn.field === undefined)
|
|
71
|
-
return;
|
|
72
|
-
var sortField = sortColumn.field;
|
|
73
|
-
setData(function (lst) { return (_.orderBy(lst, [sortField], [(ascending ? "asc" : "desc")])); });
|
|
74
|
-
}, [ascending, sortKey]);
|
|
75
|
-
React.useEffect(function () {
|
|
76
|
-
props.onSelection(data.filter(function (item) { return selected.findIndex(function (key) { return key === item[props.KeyField]; }) > -1; }));
|
|
77
|
-
}, [selected]);
|
|
78
|
-
function handleClick(d) {
|
|
79
|
-
var sIndex = selected.findIndex(function (item) { return item === d.row[props.KeyField]; });
|
|
80
|
-
if (sIndex === -1)
|
|
81
|
-
setSelected(function (od) { return __spreadArray(__spreadArray([], od, true), [d.row[props.KeyField]], false); });
|
|
82
|
-
else
|
|
83
|
-
setSelected(function (od) { return od.filter(function (item) { return item !== d.row[props.KeyField]; }); });
|
|
84
|
-
}
|
|
85
|
-
function selectAll() {
|
|
86
|
-
setSelected(function (d) { if (d.length === data.length)
|
|
87
|
-
return [];
|
|
88
|
-
else
|
|
89
|
-
return data.map(function (row) { return row[props.KeyField]; }); });
|
|
90
|
-
}
|
|
91
|
-
function handleSort(d) {
|
|
92
|
-
if (d.colKey === sortKey)
|
|
93
|
-
setAscending(!ascending);
|
|
94
|
-
else
|
|
95
|
-
setSortKey(d.colKey);
|
|
96
|
-
}
|
|
97
|
-
var tableProps = {
|
|
98
|
-
cols: __spreadArray([
|
|
99
|
-
{ key: 'gemstone-checkbox', field: props.KeyField, label: '', headerStyle: { width: '4em' }, rowStyle: { width: '4em' }, content: function (item) {
|
|
100
|
-
var index = selected.findIndex(function (i) { return i === item[props.KeyField]; });
|
|
101
|
-
var iconClass = index > -1 ? 'fa-check-square-o' : 'fa-square-o';
|
|
102
|
-
return React.createElement("div", { style: { textAlign: 'center', verticalAlign: 'middle' } },
|
|
103
|
-
React.createElement("i", { className: "fa "
|
|
104
|
-
} }
|
|
105
|
-
], props.cols, true),
|
|
106
|
-
data: data,
|
|
107
|
-
onClick: handleClick,
|
|
108
|
-
sortKey: sortKey,
|
|
109
|
-
ascending: ascending,
|
|
110
|
-
onSort: handleSort,
|
|
111
|
-
tableClass: props.tableClass,
|
|
112
|
-
tableStyle: props.tableStyle,
|
|
113
|
-
theadStyle: props.theadStyle,
|
|
114
|
-
theadClass: props.theadClass,
|
|
115
|
-
tbodyStyle: props.tbodyStyle,
|
|
116
|
-
tbodyClass: props.tbodyClass,
|
|
117
|
-
selected: function (d) { return false; },
|
|
118
|
-
rowStyle: props.rowStyle
|
|
119
|
-
};
|
|
120
|
-
return React.createElement(Table_1.default, __assign({}, tableProps));
|
|
121
|
-
}
|
|
122
|
-
exports.SelectTable = SelectTable;
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// SelectTable.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
|
+
// 01/22/2021 - C. Lackner
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
// ******************************************************************************************************
|
|
24
|
+
var __assign = (this && this.__assign) || function () {
|
|
25
|
+
__assign = Object.assign || function(t) {
|
|
26
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
27
|
+
s = arguments[i];
|
|
28
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
29
|
+
t[p] = s[p];
|
|
30
|
+
}
|
|
31
|
+
return t;
|
|
32
|
+
};
|
|
33
|
+
return __assign.apply(this, arguments);
|
|
34
|
+
};
|
|
35
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
36
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
37
|
+
if (ar || !(i in from)) {
|
|
38
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
39
|
+
ar[i] = from[i];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
43
|
+
};
|
|
44
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
|
+
exports.SelectTable = SelectTable;
|
|
46
|
+
var React = require("react");
|
|
47
|
+
var _ = require("lodash");
|
|
48
|
+
var Table_1 = require("./Table");
|
|
49
|
+
function SelectTable(props) {
|
|
50
|
+
var didMountRef = React.useRef(false);
|
|
51
|
+
var _a = React.useState(props.data), data = _a[0], setData = _a[1];
|
|
52
|
+
var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
|
|
53
|
+
var _c = React.useState(props.sortKey), sortKey = _c[0], setSortKey = _c[1];
|
|
54
|
+
var _d = React.useState(props.ascending), ascending = _d[0], setAscending = _d[1];
|
|
55
|
+
React.useEffect(function () {
|
|
56
|
+
if (didMountRef.current)
|
|
57
|
+
selectAll();
|
|
58
|
+
else
|
|
59
|
+
didMountRef.current = true;
|
|
60
|
+
}, [props.selectAllCounter]);
|
|
61
|
+
React.useEffect(function () {
|
|
62
|
+
if (props.data.length !== data.length)
|
|
63
|
+
setData(props.data);
|
|
64
|
+
}, [props.data]);
|
|
65
|
+
React.useEffect(function () {
|
|
66
|
+
setSelected(function (d) { return d.filter(function (keyItem) { return data.findIndex(function (item) { return item[props.KeyField] === keyItem; }) > -1; }); });
|
|
67
|
+
}, [data]);
|
|
68
|
+
React.useEffect(function () {
|
|
69
|
+
var sortColumn = props.cols.filter(function (col) { return col.key === sortKey; })[0];
|
|
70
|
+
if (sortColumn === undefined || sortColumn.field === undefined)
|
|
71
|
+
return;
|
|
72
|
+
var sortField = sortColumn.field;
|
|
73
|
+
setData(function (lst) { return (_.orderBy(lst, [sortField], [(ascending ? "asc" : "desc")])); });
|
|
74
|
+
}, [ascending, sortKey]);
|
|
75
|
+
React.useEffect(function () {
|
|
76
|
+
props.onSelection(data.filter(function (item) { return selected.findIndex(function (key) { return key === item[props.KeyField]; }) > -1; }));
|
|
77
|
+
}, [selected]);
|
|
78
|
+
function handleClick(d) {
|
|
79
|
+
var sIndex = selected.findIndex(function (item) { return item === d.row[props.KeyField]; });
|
|
80
|
+
if (sIndex === -1)
|
|
81
|
+
setSelected(function (od) { return __spreadArray(__spreadArray([], od, true), [d.row[props.KeyField]], false); });
|
|
82
|
+
else
|
|
83
|
+
setSelected(function (od) { return od.filter(function (item) { return item !== d.row[props.KeyField]; }); });
|
|
84
|
+
}
|
|
85
|
+
function selectAll() {
|
|
86
|
+
setSelected(function (d) { if (d.length === data.length)
|
|
87
|
+
return [];
|
|
88
|
+
else
|
|
89
|
+
return data.map(function (row) { return row[props.KeyField]; }); });
|
|
90
|
+
}
|
|
91
|
+
function handleSort(d) {
|
|
92
|
+
if (d.colKey === sortKey)
|
|
93
|
+
setAscending(!ascending);
|
|
94
|
+
else
|
|
95
|
+
setSortKey(d.colKey);
|
|
96
|
+
}
|
|
97
|
+
var tableProps = {
|
|
98
|
+
cols: __spreadArray([
|
|
99
|
+
{ key: 'gemstone-checkbox', field: props.KeyField, label: '', headerStyle: { width: '4em' }, rowStyle: { width: '4em' }, content: function (item) {
|
|
100
|
+
var index = selected.findIndex(function (i) { return i === item[props.KeyField]; });
|
|
101
|
+
var iconClass = index > -1 ? 'fa-check-square-o' : 'fa-square-o';
|
|
102
|
+
return React.createElement("div", { style: { textAlign: 'center', verticalAlign: 'middle' } },
|
|
103
|
+
React.createElement("i", { className: "fa ".concat(iconClass, " fa-3x") }));
|
|
104
|
+
} }
|
|
105
|
+
], props.cols, true),
|
|
106
|
+
data: data,
|
|
107
|
+
onClick: handleClick,
|
|
108
|
+
sortKey: sortKey,
|
|
109
|
+
ascending: ascending,
|
|
110
|
+
onSort: handleSort,
|
|
111
|
+
tableClass: props.tableClass,
|
|
112
|
+
tableStyle: props.tableStyle,
|
|
113
|
+
theadStyle: props.theadStyle,
|
|
114
|
+
theadClass: props.theadClass,
|
|
115
|
+
tbodyStyle: props.tbodyStyle,
|
|
116
|
+
tbodyClass: props.tbodyClass,
|
|
117
|
+
selected: function (d) { return false; },
|
|
118
|
+
rowStyle: props.rowStyle
|
|
119
|
+
};
|
|
120
|
+
return React.createElement(Table_1.default, __assign({}, tableProps));
|
|
121
|
+
}
|