@gpa-gemstone/react-table 1.2.52 → 1.2.53
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.
|
@@ -28,7 +28,6 @@ exports.AdjustableColumnDataWrapper = AdjustableColumnDataWrapper;
|
|
|
28
28
|
//
|
|
29
29
|
// ******************************************************************************************************
|
|
30
30
|
const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
31
|
-
const helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
32
31
|
const React = require("react");
|
|
33
32
|
function AdjustableColumn(props) {
|
|
34
33
|
return React.createElement(React.Fragment, null, props.children);
|
|
@@ -71,7 +70,7 @@ function AdjustableColumnHeaderWrapper(props) {
|
|
|
71
70
|
if (thref.current == null)
|
|
72
71
|
return;
|
|
73
72
|
if (mode == 'minWidth') {
|
|
74
|
-
const w = (_a =
|
|
73
|
+
const w = (_a = thref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
|
|
75
74
|
if (w === undefined)
|
|
76
75
|
return;
|
|
77
76
|
if (w !== minWidth) {
|
|
@@ -85,7 +84,7 @@ function AdjustableColumnHeaderWrapper(props) {
|
|
|
85
84
|
}
|
|
86
85
|
}
|
|
87
86
|
if (mode == 'maxWidth') {
|
|
88
|
-
const w = (_b =
|
|
87
|
+
const w = (_b = thref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
|
|
89
88
|
if (w === undefined)
|
|
90
89
|
return;
|
|
91
90
|
if (w !== maxWidth) {
|
|
@@ -99,7 +98,7 @@ function AdjustableColumnHeaderWrapper(props) {
|
|
|
99
98
|
}
|
|
100
99
|
}
|
|
101
100
|
if (mode == 'width') {
|
|
102
|
-
const w = (_c =
|
|
101
|
+
const w = (_c = thref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width;
|
|
103
102
|
if (w === undefined)
|
|
104
103
|
return;
|
|
105
104
|
if (props.width === undefined || (w !== (props.width + props.extraWidth))) {
|
|
@@ -164,7 +163,7 @@ function AdjustableColumnDataWrapper(props) {
|
|
|
164
163
|
var _a;
|
|
165
164
|
if (tdref.current == null)
|
|
166
165
|
return;
|
|
167
|
-
const w = (_a =
|
|
166
|
+
const w = (_a = tdref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
|
|
168
167
|
if (style.width === undefined && props.width === undefined) {
|
|
169
168
|
props.setWidth(w, isAuto, isUndefined);
|
|
170
169
|
return;
|
|
@@ -28,7 +28,6 @@ exports.default = Column;
|
|
|
28
28
|
exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
|
|
29
29
|
exports.ColumnDataWrapper = ColumnDataWrapper;
|
|
30
30
|
const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
31
|
-
const helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
32
31
|
const React = require("react");
|
|
33
32
|
function Column(props) {
|
|
34
33
|
return React.createElement(React.Fragment, null, props.children);
|
|
@@ -53,7 +52,7 @@ function ColumnHeaderWrapper(props) {
|
|
|
53
52
|
var _a;
|
|
54
53
|
if (thref.current == null)
|
|
55
54
|
return;
|
|
56
|
-
const w = (_a =
|
|
55
|
+
const w = (_a = thref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
|
|
57
56
|
if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
|
|
58
57
|
return;
|
|
59
58
|
props.setWidth(w, isAuto, isUndefined);
|
|
@@ -88,7 +87,7 @@ function ColumnDataWrapper(props) {
|
|
|
88
87
|
var _a;
|
|
89
88
|
if (tdref.current == null)
|
|
90
89
|
return;
|
|
91
|
-
const w = (_a =
|
|
90
|
+
const w = (_a = tdref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
|
|
92
91
|
if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
|
|
93
92
|
return;
|
|
94
93
|
props.setWidth(w, isAuto, isUndefined);
|
|
@@ -60,6 +60,14 @@ interface TableProps<T> {
|
|
|
60
60
|
*/
|
|
61
61
|
TbodyClass?: string;
|
|
62
62
|
/**
|
|
63
|
+
* style of the tfoot component
|
|
64
|
+
*/
|
|
65
|
+
TfootStyle?: React.CSSProperties;
|
|
66
|
+
/**
|
|
67
|
+
* Class of the tfoot component
|
|
68
|
+
*/
|
|
69
|
+
TfootClass?: string;
|
|
70
|
+
/**
|
|
63
71
|
* determines if a row should be styled as selected
|
|
64
72
|
* @param data the item to be checked
|
|
65
73
|
* @returns true if the row should be styled as selected
|
|
@@ -90,7 +98,8 @@ interface TableProps<T> {
|
|
|
90
98
|
KeySelector: (data: T, index?: number) => string | number;
|
|
91
99
|
/**
|
|
92
100
|
* Optional Element to display in the last row of the Table
|
|
93
|
-
* use this for displaying warnings when the Table content gets cut off
|
|
101
|
+
* use this for displaying warnings when the Table content gets cut off.
|
|
102
|
+
* Data appears in the tfoot element
|
|
94
103
|
*/
|
|
95
104
|
LastRow?: string | React.ReactNode;
|
|
96
105
|
/**
|
|
@@ -41,27 +41,42 @@ const defaultTableStyle = {
|
|
|
41
41
|
};
|
|
42
42
|
function AdjustableTable(props) {
|
|
43
43
|
var _a;
|
|
44
|
-
const
|
|
44
|
+
const bodyRef = React.useRef(null);
|
|
45
45
|
const throtleRef = React.useRef(null);
|
|
46
46
|
const colCountRef = React.useRef(null);
|
|
47
47
|
const autoWidth = React.useRef(new Map());
|
|
48
48
|
const [autoWidthVersion, setAutoWidthVersion] = React.useState(0);
|
|
49
49
|
const [currentTableWidth, setCurrentTableWidth] = React.useState(0);
|
|
50
|
+
const [scrolled, setScrolled] = React.useState(false);
|
|
50
51
|
const [extraWidthPerRow, setExtraWidthPerRow] = React.useState(0);
|
|
51
52
|
const setTableWidth = React.useCallback(_.debounce(() => {
|
|
52
|
-
var _a, _b;
|
|
53
|
-
|
|
54
|
-
}, 500), []);
|
|
55
|
-
React.useEffect(() => {
|
|
56
|
-
const element = tblref === null || tblref === void 0 ? void 0 : tblref.current;
|
|
57
|
-
if (element == null)
|
|
53
|
+
var _a, _b, _c, _d;
|
|
54
|
+
if (bodyRef.current == null)
|
|
58
55
|
return;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
// Note: certain body classes may break this check if they set overflow to scroll
|
|
57
|
+
let newScroll = false;
|
|
58
|
+
if (((_a = props.TbodyStyle) === null || _a === void 0 ? void 0 : _a.overflowY) === 'scroll' || ((_b = props.TbodyStyle) === null || _b === void 0 ? void 0 : _b.overflow) === 'scroll')
|
|
59
|
+
newScroll = true;
|
|
60
|
+
else
|
|
61
|
+
newScroll = bodyRef.current.clientHeight < bodyRef.current.scrollHeight;
|
|
62
|
+
setScrolled(newScroll);
|
|
63
|
+
setCurrentTableWidth(((_d = (_c = bodyRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 17) - (newScroll ? 0 : 17));
|
|
64
|
+
}, 100), []);
|
|
65
|
+
React.useEffect(() => {
|
|
66
|
+
let resizeObserver;
|
|
67
|
+
const intervalHandle = setInterval(() => {
|
|
68
|
+
if ((bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) == null)
|
|
69
|
+
return;
|
|
70
|
+
resizeObserver = new ResizeObserver(() => {
|
|
71
|
+
setTableWidth();
|
|
72
|
+
});
|
|
73
|
+
resizeObserver.observe(bodyRef.current);
|
|
74
|
+
clearInterval(intervalHandle);
|
|
75
|
+
}, 10);
|
|
63
76
|
return () => {
|
|
64
|
-
|
|
77
|
+
clearInterval(intervalHandle);
|
|
78
|
+
if (resizeObserver != null && resizeObserver.disconnect != null)
|
|
79
|
+
resizeObserver.disconnect();
|
|
65
80
|
};
|
|
66
81
|
}, []);
|
|
67
82
|
React.useEffect(() => {
|
|
@@ -70,18 +85,18 @@ function AdjustableTable(props) {
|
|
|
70
85
|
}, [currentTableWidth]);
|
|
71
86
|
React.useEffect(() => {
|
|
72
87
|
var _a;
|
|
73
|
-
let
|
|
88
|
+
let totalMaxWidth = 0;
|
|
74
89
|
autoWidth.current.forEach((v) => {
|
|
75
|
-
|
|
90
|
+
totalMaxWidth += v.maxColWidth;
|
|
76
91
|
});
|
|
77
|
-
if (
|
|
92
|
+
if (totalMaxWidth > currentTableWidth && currentTableWidth > 0) {
|
|
78
93
|
const hideKeys = [];
|
|
79
94
|
const showKeys = [];
|
|
80
95
|
let t = 0;
|
|
81
96
|
let colW = 0;
|
|
82
97
|
autoWidth.current.forEach((v, k) => {
|
|
83
98
|
t = t + v.maxColWidth;
|
|
84
|
-
if (t < currentTableWidth
|
|
99
|
+
if (t < currentTableWidth) {
|
|
85
100
|
showKeys.push(k);
|
|
86
101
|
colW += v.maxColWidth;
|
|
87
102
|
}
|
|
@@ -107,7 +122,7 @@ function AdjustableTable(props) {
|
|
|
107
122
|
if (numOfColsWithUndefinedCSS > 0 && numOfColsWithAutoCSS == 0) { // Split only on the css undefined if there are no auto-cols
|
|
108
123
|
colsToDivideBy = numOfColsWithUndefinedCSS;
|
|
109
124
|
}
|
|
110
|
-
const extraSpace = (currentTableWidth -
|
|
125
|
+
const extraSpace = (currentTableWidth - colW - numEnabledColumns) / colsToDivideBy;
|
|
111
126
|
setExtraWidthPerRow(extraSpace);
|
|
112
127
|
(_a = props.ReduceWidthCallback) === null || _a === void 0 ? void 0 : _a.call(props, hideKeys);
|
|
113
128
|
setAutoWidthVersion((v) => v + 1);
|
|
@@ -117,7 +132,7 @@ function AdjustableTable(props) {
|
|
|
117
132
|
const numEnabledColumns = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.enabled).length;
|
|
118
133
|
const numOfColsWithAutoCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isAuto && autoWidth.enabled).length;
|
|
119
134
|
const colsToDivideBy = (numOfColsWithAutoCSS > 0) ? numOfColsWithAutoCSS : numEnabledColumns;
|
|
120
|
-
const extraSpace = (currentTableWidth -
|
|
135
|
+
const extraSpace = (currentTableWidth - totalMaxWidth - numEnabledColumns) / colsToDivideBy;
|
|
121
136
|
setExtraWidthPerRow(extraSpace);
|
|
122
137
|
(_a = props.ReduceWidthCallback) === null || _a === void 0 ? void 0 : _a.call(props, []);
|
|
123
138
|
}
|
|
@@ -151,10 +166,11 @@ function AdjustableTable(props) {
|
|
|
151
166
|
}, [props.OnSort]);
|
|
152
167
|
const setWidth = React.useCallback((colKey, key, width, isAuto, isUndefined) => {
|
|
153
168
|
var _a, _b, _c, _d, _e, _f;
|
|
169
|
+
const flooredWidth = Math.floor(width);
|
|
154
170
|
if (!autoWidth.current.has(colKey)) { // does the column exist
|
|
155
171
|
autoWidth.current.set(colKey, {
|
|
156
|
-
maxColWidth:
|
|
157
|
-
width: new Map([[key,
|
|
172
|
+
maxColWidth: flooredWidth,
|
|
173
|
+
width: new Map([[key, flooredWidth]]),
|
|
158
174
|
enabled: true,
|
|
159
175
|
adjustement: 0,
|
|
160
176
|
isAuto: isAuto,
|
|
@@ -162,19 +178,19 @@ function AdjustableTable(props) {
|
|
|
162
178
|
});
|
|
163
179
|
}
|
|
164
180
|
else if (!((_b = (_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.width.has(key)) !== null && _b !== void 0 ? _b : false)) { // it exists but the key does not
|
|
165
|
-
(_c = autoWidth.current.get(colKey)) === null || _c === void 0 ? void 0 : _c.width.set(key,
|
|
181
|
+
(_c = autoWidth.current.get(colKey)) === null || _c === void 0 ? void 0 : _c.width.set(key, flooredWidth); // add the width for this key
|
|
166
182
|
autoWidth.current.get(colKey).isAuto = isAuto;
|
|
167
|
-
if (
|
|
168
|
-
autoWidth.current.get(colKey).maxColWidth =
|
|
183
|
+
if (flooredWidth > ((_e = (_d = autoWidth.current.get(colKey)) === null || _d === void 0 ? void 0 : _d.maxColWidth) !== null && _e !== void 0 ? _e : 9e10)) // if width is > to max col
|
|
184
|
+
autoWidth.current.get(colKey).maxColWidth = flooredWidth; // set max to width
|
|
169
185
|
}
|
|
170
|
-
else if (autoWidth.current.get(colKey).width.get(key) ==
|
|
186
|
+
else if (autoWidth.current.get(colKey).width.get(key) == flooredWidth) { // width == newW
|
|
171
187
|
autoWidth.current.get(colKey).isAuto = isAuto;
|
|
172
188
|
return;
|
|
173
189
|
}
|
|
174
190
|
else {
|
|
175
|
-
autoWidth.current.get(colKey).width.set(key,
|
|
191
|
+
autoWidth.current.get(colKey).width.set(key, flooredWidth); // otherwise, it exists, just set the width
|
|
176
192
|
autoWidth.current.get(colKey).isAuto = isAuto;
|
|
177
|
-
if (
|
|
193
|
+
if (flooredWidth == ((_f = autoWidth.current.get(colKey)) === null || _f === void 0 ? void 0 : _f.maxColWidth)) // check against max
|
|
178
194
|
autoWidth.current.get(colKey).maxColWidth = Math.max(...autoWidth.current.get(colKey).width.values());
|
|
179
195
|
}
|
|
180
196
|
//cancel ref
|
|
@@ -255,10 +271,11 @@ function AdjustableTable(props) {
|
|
|
255
271
|
setAutoWidthVersion((v) => v + 1);
|
|
256
272
|
}, 10);
|
|
257
273
|
}, []);
|
|
258
|
-
return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : 'table table-hover', style: (_a = props.TableStyle) !== null && _a !== void 0 ? _a : defaultTableStyle
|
|
274
|
+
return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : 'table table-hover', style: (_a = props.TableStyle) !== null && _a !== void 0 ? _a : defaultTableStyle },
|
|
259
275
|
React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: (k, w, a, u) => setWidth(k, -1, w, a, u), SetMaxWidth: setMaxWidth, SetMinWidth: setMinWidth, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, LastColumn: props.LastColumn, SetAdjustment: setAdjustment, ExtraWidth: extraWidthPerRow }, props.children),
|
|
260
|
-
React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: props.RowStyle, BodyStyle: props.TbodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, SetWidth: setWidth, ExtraWidth: extraWidthPerRow }, props.children),
|
|
261
|
-
props.LastRow !== undefined ? (React.createElement("
|
|
276
|
+
React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: props.RowStyle, BodyStyle: props.TbodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, SetWidth: setWidth, ExtraWidth: extraWidthPerRow, BodyRef: bodyRef, BodyScrolled: scrolled }, props.children),
|
|
277
|
+
props.LastRow !== undefined ? (React.createElement("tfoot", { style: props.TfootStyle, className: props.TfootClass },
|
|
278
|
+
React.createElement("tr", { style: props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {} }, props.LastRow))) : null));
|
|
262
279
|
}
|
|
263
280
|
function Rows(props) {
|
|
264
281
|
if (props.Data.length === 0)
|
|
@@ -273,7 +290,8 @@ function Rows(props) {
|
|
|
273
290
|
index: index,
|
|
274
291
|
}, e);
|
|
275
292
|
}, [props.OnClick]);
|
|
276
|
-
|
|
293
|
+
const bodyStyle = React.useMemo(() => (Object.assign(Object.assign({}, props.BodyStyle), { paddingRight: (props.BodyScrolled ? 0 : 17) })), [props.BodyStyle, props.BodyScrolled]);
|
|
294
|
+
return (React.createElement("tbody", { style: bodyStyle, className: props.BodyClass, ref: props.BodyRef }, props.Data.map((d, i) => {
|
|
277
295
|
const style = props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {};
|
|
278
296
|
if (style.cursor === undefined && (props.OnClick !== undefined || props.DragStart !== undefined))
|
|
279
297
|
style.cursor = 'pointer';
|
|
@@ -298,7 +316,7 @@ function Rows(props) {
|
|
|
298
316
|
row: d,
|
|
299
317
|
data: d[element.props.Field],
|
|
300
318
|
index: i,
|
|
301
|
-
}, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key,
|
|
319
|
+
}, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key, w, a, u), style: element.props.RowStyle, width: ((_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.width.has(key)) !== null && _d !== void 0 ? _d : false)
|
|
302
320
|
? (_e = props.AutoWidth.current.get(element.props.Key)) === null || _e === void 0 ? void 0 : _e.maxColWidth // if not auto <-
|
|
303
321
|
: undefined // otherwise get the extrawidth
|
|
304
322
|
, enabled: (_g = (_f = props.AutoWidth.current.get(element.props.Key)) === null || _f === void 0 ? void 0 : _f.enabled) !== null && _g !== void 0 ? _g : true }, element.props.Content !== undefined
|
|
@@ -326,7 +344,7 @@ function Rows(props) {
|
|
|
326
344
|
row: d,
|
|
327
345
|
data: d[element.props.Field],
|
|
328
346
|
index: i,
|
|
329
|
-
}, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key,
|
|
347
|
+
}, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key, w, a, u), style: element.props.RowStyle, width: ((_m = (_l = props.AutoWidth.current.get(element.props.Key)) === null || _l === void 0 ? void 0 : _l.width.has(key)) !== null && _m !== void 0 ? _m : false)
|
|
330
348
|
? (_o = props.AutoWidth.current.get(element.props.Key)) === null || _o === void 0 ? void 0 : _o.maxColWidth
|
|
331
349
|
: undefined, enabled: (_q = (_p = props.AutoWidth.current.get(element.props.Key)) === null || _p === void 0 ? void 0 : _p.enabled) !== null && _q !== void 0 ? _q : true, extraWidth: props.ExtraWidth },
|
|
332
350
|
' ',
|
|
@@ -382,8 +400,6 @@ function Header(props) {
|
|
|
382
400
|
adj = delta;
|
|
383
401
|
else if (currentKeys !== undefined && currentKeys[1] == key)
|
|
384
402
|
adj = -delta;
|
|
385
|
-
console.log(tentativeLimits);
|
|
386
|
-
console.log(delta);
|
|
387
403
|
return ((_b = (_a = props.AutoWidth.current.get(key)) === null || _a === void 0 ? void 0 : _a.adjustement) !== null && _b !== void 0 ? _b : 0) + adj;
|
|
388
404
|
};
|
|
389
405
|
const finishAdjustment = () => {
|
|
@@ -449,7 +465,7 @@ function Header(props) {
|
|
|
449
465
|
return null;
|
|
450
466
|
if (element.type === Column_1.default)
|
|
451
467
|
if ((_b = (_a = props.AutoWidth.current.get(element.props.Key)) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true)
|
|
452
|
-
return (React.createElement(Column_1.ColumnHeaderWrapper, { enabled: (_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : true, setWidth: (w, a, u) => props.SetWidth(element.props.Key,
|
|
468
|
+
return (React.createElement(Column_1.ColumnHeaderWrapper, { enabled: (_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : true, setWidth: (w, a, u) => props.SetWidth(element.props.Key, w, a, u), onSort: (e) => props.OnSort({ colKey: element.props.Key, colField: element.props.Field, ascending: props.Ascending }, e), sorted: props.SortKey === element.props.Key && ((_e = element.props.AllowSort) !== null && _e !== void 0 ? _e : true), asc: props.Ascending, colKey: element.props.Key, key: element.props.Key, allowSort: element.props.AllowSort, width: ((_g = (_f = props.AutoWidth.current.get(element.props.Key)) === null || _f === void 0 ? void 0 : _f.width.has(-1)) !== null && _g !== void 0 ? _g : false)
|
|
453
469
|
? (_h = props.AutoWidth.current.get(element.props.Key)) === null || _h === void 0 ? void 0 : _h.maxColWidth
|
|
454
470
|
: undefined, style: (_j = element.props.HeaderStyle) !== null && _j !== void 0 ? _j : element.props.RowStyle, extraWidth: props.ExtraWidth },
|
|
455
471
|
' ', (_k = element.props.children) !== null && _k !== void 0 ? _k : element.props.Key,
|