@gpa-gemstone/react-table 1.2.52 → 1.2.54

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 = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _a === void 0 ? void 0 : _a.width;
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 = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _b === void 0 ? void 0 : _b.width;
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 = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _c === void 0 ? void 0 : _c.width;
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 = (0, helper_functions_1.GetNodeSize)(tdref.current)) === null || _a === void 0 ? void 0 : _a.width;
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 = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _a === void 0 ? void 0 : _a.width;
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 = (0, helper_functions_1.GetNodeSize)(tdref.current)) === null || _a === void 0 ? void 0 : _a.width;
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 tblref = React.useRef(null);
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
- setCurrentTableWidth((_b = (_a = tblref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0);
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
- const resizeObserver = new ResizeObserver(() => {
60
- setTableWidth();
61
- });
62
- resizeObserver.observe(element);
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
- resizeObserver.disconnect();
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 t = 0;
88
+ let totalMaxWidth = 0;
74
89
  autoWidth.current.forEach((v) => {
75
- t = t + v.maxColWidth;
90
+ totalMaxWidth += v.maxColWidth;
76
91
  });
77
- if (t > currentTableWidth - 17 && currentTableWidth > 0) {
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 - 17) {
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 - 17 - colW - numEnabledColumns) / colsToDivideBy;
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 - 17 - t - numEnabledColumns) / colsToDivideBy;
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: width,
157
- width: new Map([[key, width]]),
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, width); // add the width for this 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 (width > ((_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
168
- autoWidth.current.get(colKey).maxColWidth = width; // set max to width
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) == width) { // width == newW
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, width); // otherwise, it exists, just set the width
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 (width == ((_f = autoWidth.current.get(colKey)) === null || _f === void 0 ? void 0 : _f.maxColWidth)) // check against max
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, ref: tblref },
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("tr", { style: props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {}, key: -1 }, props.LastRow)) : null));
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
- return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, props.Data.map((d, i) => {
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, Math.floor(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)
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, Math.floor(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)
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, Math.floor(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)
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,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-table",
3
- "version": "1.2.52",
3
+ "version": "1.2.54",
4
4
  "description": "Table for GPA web applications",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -43,7 +43,7 @@
43
43
  },
44
44
  "dependencies": {
45
45
  "@gpa-gemstone/gpa-symbols": "0.0.41",
46
- "@gpa-gemstone/helper-functions": "0.0.34",
46
+ "@gpa-gemstone/helper-functions": "0.0.35",
47
47
  "@types/lodash": "^4.14.171",
48
48
  "@types/react": "^17.0.14",
49
49
  "lodash": "^4.17.21",