@gpa-gemstone/react-table 1.2.119 → 1.2.120
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.
|
@@ -42,7 +42,7 @@ function ConfigurableTable(props) {
|
|
|
42
42
|
if (localKeys[0] === '' && localKeys.length == 1)
|
|
43
43
|
localKeys.pop(); // if localstorage is empty, set the array to an empty array. [''] by default
|
|
44
44
|
React.Children.forEach(props.children, (element) => {
|
|
45
|
-
var _a, _b;
|
|
45
|
+
var _a, _b, _c;
|
|
46
46
|
if (!React.isValidElement(element))
|
|
47
47
|
return;
|
|
48
48
|
if (element.type === ConfigurableColumn_1.default) {
|
|
@@ -52,6 +52,7 @@ function ConfigurableTable(props) {
|
|
|
52
52
|
Label: (_a = element.props.Label) !== null && _a !== void 0 ? _a : key,
|
|
53
53
|
Default: (_b = element.props.Default) !== null && _b !== void 0 ? _b : false,
|
|
54
54
|
Enabled: false,
|
|
55
|
+
IsFiltered: (_c = element.props.IsFiltered) !== null && _c !== void 0 ? _c : false
|
|
55
56
|
}; // use local if it has anything
|
|
56
57
|
baseCol.Enabled = localKeys.length > 0 ? localKeys.includes(key) : isEnabled(baseCol);
|
|
57
58
|
updated.set(key, baseCol);
|
|
@@ -123,12 +124,14 @@ function ConfigurableTable(props) {
|
|
|
123
124
|
* @param useLocal If true, will not consider if key is in localstorage
|
|
124
125
|
*/
|
|
125
126
|
function isEnabled(c, useLocal = true) {
|
|
127
|
+
var _a;
|
|
126
128
|
if (c == undefined)
|
|
127
129
|
return false;
|
|
128
130
|
const isDefault = c.Default === true;
|
|
129
131
|
const isSortKey = props.SortKey === c.Key;
|
|
130
132
|
const isInLocal = useLocal && checkLocal(c.Key);
|
|
131
|
-
|
|
133
|
+
const isFiltered = (_a = c.IsFiltered) !== null && _a !== void 0 ? _a : false;
|
|
134
|
+
return isSortKey || isInLocal || isDefault || isFiltered;
|
|
132
135
|
}
|
|
133
136
|
return (React.createElement(React.Fragment, null,
|
|
134
137
|
React.createElement(Table_1.Table, Object.assign({}, props, { LastColumn: React.createElement("div", { style: { marginBottom: 12, cursor: 'pointer' }, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), id: guid + '-tooltip', onClick: () => setShowSettings(true) },
|
|
@@ -182,17 +185,21 @@ function ColumnSelection(props) {
|
|
|
182
185
|
const enabledCols = props.columns.filter((column) => column.Enabled);
|
|
183
186
|
const isOnlyOneEnabled = enabledCols.length === 1;
|
|
184
187
|
const helpMessage = (col) => {
|
|
188
|
+
var _a;
|
|
185
189
|
if (col.Key === props.sortKey)
|
|
186
190
|
return 'The Table is currently sorted by this column, so it cannot be hidden.';
|
|
187
191
|
if (isOnlyOneEnabled && col.Enabled)
|
|
188
192
|
return 'The Table must have one column visible at all times, so it cannot be hidden.';
|
|
193
|
+
if ((_a = col.IsFiltered) !== null && _a !== void 0 ? _a : false)
|
|
194
|
+
return 'The Table is currently filtered by this column, so it cannot be hidden.';
|
|
189
195
|
return undefined;
|
|
190
196
|
};
|
|
191
197
|
return (React.createElement(React.Fragment, null,
|
|
192
198
|
React.createElement("div", { className: "row" }, props.columns.map((c) => React.createElement("div", { className: "col-4", key: c.Key },
|
|
193
199
|
React.createElement(react_forms_1.CheckBox, { Label: c.Label, Field: 'Enabled', Record: c, Setter: () => props.onChange(c.Key), Disabled: c.Key === props.sortKey ||
|
|
194
200
|
(props.disableAdd && !c.Enabled) ||
|
|
195
|
-
(isOnlyOneEnabled && c.Enabled)
|
|
201
|
+
(isOnlyOneEnabled && c.Enabled) ||
|
|
202
|
+
(c.IsFiltered), Help: helpMessage(c) })))),
|
|
196
203
|
props.disableAdd ?
|
|
197
204
|
React.createElement(react_interactive_1.Alert, { Class: 'alert-primary', Style: { marginBottom: 0, marginTop: '0.5em' } }, "Additional columns disabled due to table size.")
|
|
198
205
|
: null));
|
|
@@ -30,6 +30,8 @@ const TextFilter_1 = require("../Filters/TextFilter");
|
|
|
30
30
|
const EnumFilter_1 = require("../Filters/EnumFilter");
|
|
31
31
|
const NumberFilter_1 = require("../Filters/NumberFilter");
|
|
32
32
|
const DateTimeFilters_1 = require("../Filters/DateTimeFilters");
|
|
33
|
+
const react_portal_1 = require("react-portal");
|
|
34
|
+
const helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
33
35
|
/**
|
|
34
36
|
* Wrapper to make any column configurable
|
|
35
37
|
*/
|
|
@@ -40,35 +42,38 @@ function FilterableColumn(props) {
|
|
|
40
42
|
function FilterableColumnHeader(props) {
|
|
41
43
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
42
44
|
const [show, setShow] = React.useState(false);
|
|
45
|
+
const headerRef = React.useRef(null);
|
|
46
|
+
const { top, left, height } = (0, helper_functions_1.useGetContainerPosition)(headerRef);
|
|
43
47
|
return React.createElement(React.Fragment, null,
|
|
44
|
-
React.createElement("div", { onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false) },
|
|
48
|
+
React.createElement("div", { onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), ref: headerRef },
|
|
45
49
|
React.createElement("div", { style: { marginRight: 25 } }, props.Label),
|
|
46
50
|
props.Type !== undefined ? React.createElement(React.Fragment, null,
|
|
47
51
|
React.createElement("div", { style: { width: 25, position: 'absolute', right: 12, top: 12 } }, props.Filter.length > 0 ? React.createElement(gpa_symbols_1.ReactIcons.Filter, null) : null),
|
|
48
|
-
React.createElement(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
React.createElement("
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
React.createElement("
|
|
65
|
-
React.createElement("
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
52
|
+
React.createElement(react_portal_1.Portal, null,
|
|
53
|
+
React.createElement("div", { className: "popover", style: {
|
|
54
|
+
maxHeight: window.innerHeight * 0.50,
|
|
55
|
+
overflowY: 'auto',
|
|
56
|
+
padding: '10px',
|
|
57
|
+
display: show ? 'block' : 'none',
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
backgroundColor: '#fff',
|
|
60
|
+
boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
|
|
61
|
+
zIndex: 9998,
|
|
62
|
+
top: `${top + height}px`,
|
|
63
|
+
left: `${left}px`
|
|
64
|
+
}, "data-tableid": props.Guid, onClick: (evt) => { evt.preventDefault(); evt.stopPropagation(); } },
|
|
65
|
+
React.createElement("table", { style: { margin: 0, width: '100%', padding: 10 } },
|
|
66
|
+
React.createElement("tbody", null,
|
|
67
|
+
((props.ExpandedLabel !== null) && (props.ExpandedLabel !== "") && (props.ExpandedLabel !== undefined)) ?
|
|
68
|
+
React.createElement("tr", null,
|
|
69
|
+
React.createElement("th", { colSpan: props.Type === 'boolean' ? 2 : 1 },
|
|
70
|
+
React.createElement("label", null, props.ExpandedLabel)))
|
|
71
|
+
: null,
|
|
72
|
+
props.Type === 'boolean' ? React.createElement(BooleanFilter_1.BooleanFilter, { SetFilter: props.SetFilter, Filter: props.Filter, FieldName: (_b = (_a = props.Field) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '' }) : null,
|
|
73
|
+
props.Type === 'string' ? React.createElement(TextFilter_1.TextFilter, { SetFilter: props.SetFilter, Filter: props.Filter, FieldName: (_d = (_c = props.Field) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '' }) : null,
|
|
74
|
+
props.Type === 'enum' && props.Options !== undefined ? React.createElement(EnumFilter_1.EnumFilter, { FieldName: (_f = (_e = props.Field) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : '', Filter: props.Filter, SetFilter: props.SetFilter, Options: props.Options }) : null,
|
|
75
|
+
props.Type === 'date' ? React.createElement(DateTimeFilters_1.DateFilter, { FieldName: (_h = (_g = props.Field) === null || _g === void 0 ? void 0 : _g.toString()) !== null && _h !== void 0 ? _h : '', Filter: props.Filter, SetFilter: props.SetFilter }) : null,
|
|
76
|
+
props.Type === 'time' ? React.createElement(DateTimeFilters_1.TimeFilter, { FieldName: (_k = (_j = props.Field) === null || _j === void 0 ? void 0 : _j.toString()) !== null && _k !== void 0 ? _k : '', Filter: props.Filter, SetFilter: props.SetFilter }) : null,
|
|
77
|
+
props.Type === 'number' ? React.createElement(NumberFilter_1.NumberFilter, { FieldName: (_m = (_l = props.Field) === null || _l === void 0 ? void 0 : _l.toString()) !== null && _m !== void 0 ? _m : '', Filter: props.Filter, SetFilter: props.SetFilter, Unit: props.Unit }) : null,
|
|
78
|
+
props.Type === 'datetime' ? React.createElement(DateTimeFilters_1.DateTimeFilter, { FieldName: (_p = (_o = props.Field) === null || _o === void 0 ? void 0 : _o.toString()) !== null && _p !== void 0 ? _p : '', Filter: props.Filter, SetFilter: props.SetFilter }) : null))))) : null));
|
|
74
79
|
}
|