@gpa-gemstone/react-table 1.2.32 → 1.2.34

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.
Files changed (4) hide show
  1. package/lib/AdjustableTable/AdjustableColumn.js +1 -1
  2. package/lib/AdjustableTable/AdjustableTable.js +36 -18
  3. package/lib/AdjustableTable/Column.js +1 -1
  4. package/package.json +1 -1
package/lib/AdjustableTable/AdjustableColumn.js CHANGED
@@ -80,7 +80,7 @@ function AdjColumnHeaderWrapper(props) {
80
80
  props.startAdjustment(e);
81
81
  console.log('onCLick border div');
82
82
  }, [props.startAdjustment]);
83
- return React.createElement("th", { ref: thref, style: style, onClick: onClick },
83
+ return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: function (e) { e.stopPropagation(); } },
84
84
  React.createElement("div", { style: {
85
85
  width: 5,
86
86
  height: '100%',
package/lib/AdjustableTable/AdjustableTable.js CHANGED
@@ -39,23 +39,38 @@ var Column_1 = require("./Column");
39
39
  var AdjustableColumn_1 = require("./AdjustableColumn");
40
40
  function AdjustableTable(props) {
41
41
  var _a, _b, _c, _d;
42
+ var tblref = React.useRef(null);
42
43
  var _e = React.useState(false), fixLayout = _e[0], setFixLayout = _e[1];
43
- var _f = React.useState(new Map()), fixedWidths = _f[0], setFixedWidths = _f[1];
44
- var _g = React.useState(new Map()), adjustedWidths = _g[0], setAdjustedWidths = _g[1];
45
- var _h = React.useState((_b = (_a = React.Children.map(props.children, function (element) {
44
+ var _f = React.useState(0), currentTableWidth = _f[0], setCurrentTableWidth = _f[1];
45
+ var _g = React.useState(new Map()), fixedWidths = _g[0], setFixedWidths = _g[1];
46
+ var _h = React.useState(new Map()), adjustedWidths = _h[0], setAdjustedWidths = _h[1];
47
+ var _j = React.useState((_b = (_a = React.Children.map(props.children, function (element) {
46
48
  if (!React.isValidElement(element))
47
49
  return undefined;
48
50
  if (element.type === Column_1.default)
49
51
  return element.props.Key;
50
52
  return undefined;
51
- })) === null || _a === void 0 ? void 0 : _a.filter(function (s) { return s !== undefined; })) !== null && _b !== void 0 ? _b : []), fixedkeys = _h[0], setFixedKeys = _h[1];
52
- var _j = React.useState((_d = (_c = React.Children.map(props.children, function (element) {
53
+ })) === null || _a === void 0 ? void 0 : _a.filter(function (s) { return s !== undefined; })) !== null && _b !== void 0 ? _b : []), fixedkeys = _j[0], setFixedKeys = _j[1];
54
+ var _k = React.useState((_d = (_c = React.Children.map(props.children, function (element) {
53
55
  if (!React.isValidElement(element))
54
56
  return undefined;
55
57
  if (element.type === AdjustableColumn_1.default)
56
58
  return element.props.Key;
57
59
  return undefined;
58
- })) === null || _c === void 0 ? void 0 : _c.filter(function (d) { return d !== undefined; })) !== null && _d !== void 0 ? _d : []), adjKeys = _j[0], setAdjKeys = _j[1];
60
+ })) === null || _c === void 0 ? void 0 : _c.filter(function (d) { return d !== undefined; })) !== null && _d !== void 0 ? _d : []), adjKeys = _k[0], setAdjKeys = _k[1];
61
+ var setTableWidth = React.useCallback(_.debounce(function () { var _a, _b; setCurrentTableWidth((_b = (_a = tblref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0); }, 500), []);
62
+ React.useEffect(function () {
63
+ var element = tblref === null || tblref === void 0 ? void 0 : tblref.current;
64
+ if (!element)
65
+ return;
66
+ var observer = new ResizeObserver(function () {
67
+ setTableWidth();
68
+ });
69
+ observer.observe(element);
70
+ return function () {
71
+ observer.disconnect();
72
+ };
73
+ }, []);
59
74
  React.useEffect(function () {
60
75
  var _a, _b;
61
76
  var keysFixed = (_b = (_a = React.Children.map(props.children, function (element) {
@@ -91,7 +106,7 @@ function AdjustableTable(props) {
91
106
  setFixLayout(false);
92
107
  setFixedWidths(new Map());
93
108
  setAdjustedWidths(new Map());
94
- }, [fixedkeys.length, adjKeys.length]);
109
+ }, [fixedkeys.length, adjKeys.length, currentTableWidth]);
95
110
  React.useEffect(function () {
96
111
  var fixed = fixedkeys.length == fixedWidths.size;
97
112
  var adj = adjKeys.length == adjustedWidths.size;
@@ -139,7 +154,7 @@ function AdjustableTable(props) {
139
154
  });
140
155
  }
141
156
  }, []);
142
- return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : '', style: props.TableStyle },
157
+ return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : '', style: props.TableStyle, ref: tblref },
143
158
  React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: setWidth, GetWidth: getWidth, GetMinWidth: getMinWidth, GetLeftKey: getPrevKey, LastColumn: props.LastColumn, FixedLayout: fixLayout }, props.children),
144
159
  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, AdjWidth: adjustedWidths, FixedWidth: fixedWidths, FixedLayout: fixLayout }, props.children),
145
160
  props.LastRow !== undefined ? React.createElement("tr", { style: (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {}, key: -1 }, props.LastRow) : null));
@@ -163,19 +178,19 @@ function Rows(props) {
163
178
  if (props.Selected !== undefined && props.Selected(d))
164
179
  style.backgroundColor = 'yellow';
165
180
  var key = props.KeySelector(d);
166
- return React.createElement("tr", { key: key, style: { display: (props.FixedLayout ? 'block' : undefined) } },
181
+ return React.createElement("tr", { key: key, style: __assign({ display: (props.FixedLayout ? 'block' : undefined) }, style) },
167
182
  React.Children.map(props.children, function (element) {
168
183
  if (!React.isValidElement(element))
169
184
  return null;
170
185
  if (element.type === AdjustableColumn_1.default)
171
- return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'adjustable'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout }));
186
+ return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'adjustable'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout, onClick: props.OnClick, sel: true }));
172
187
  return null;
173
188
  }),
174
189
  React.Children.map(props.children, function (element) {
175
190
  if (!React.isValidElement(element))
176
191
  return null;
177
192
  if (element.type === Column_1.default)
178
- return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'fixed'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout }));
193
+ return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'fixed'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout, onClick: props.OnClick }));
179
194
  return null;
180
195
  }));
181
196
  })));
@@ -185,7 +200,7 @@ function Header(props) {
185
200
  var _a = React.useState(undefined), adjKeys = _a[0], setAdjKeys = _a[1];
186
201
  var _b = React.useState(0), mouseDown = _b[0], setMouseDown = _b[1];
187
202
  var _c = React.useState(0), deltaX = _c[0], setDeltaX = _c[1];
188
- var finishAdjustment = React.useCallback(function (e) {
203
+ var finishAdjustment = function (e) {
189
204
  var _a, _b;
190
205
  var d = deltaX;
191
206
  if (adjKeys === undefined)
@@ -193,12 +208,14 @@ function Header(props) {
193
208
  var w = limitMovement(adjKeys[0], adjKeys[1], d);
194
209
  var leftWidth = (_a = props.GetWidth(adjKeys[0], 'adjustable')) !== null && _a !== void 0 ? _a : 100;
195
210
  var rightWidth = (_b = props.GetWidth(adjKeys[1], 'adjustable')) !== null && _b !== void 0 ? _b : 100;
196
- props.SetWidth(adjKeys[0], (leftWidth - w), 'adjustable');
197
- props.SetWidth(adjKeys[1], (rightWidth + w), 'adjustable');
211
+ if (Math.abs(w) > 5) {
212
+ props.SetWidth(adjKeys[0], (leftWidth - w), 'adjustable');
213
+ props.SetWidth(adjKeys[1], (rightWidth + w), 'adjustable');
214
+ }
198
215
  setMouseDown(0);
199
216
  setAdjKeys(undefined);
200
217
  setDeltaX(0);
201
- }, [adjKeys]);
218
+ };
202
219
  var onMove = React.useCallback(function (e) {
203
220
  if (adjKeys === undefined)
204
221
  return;
@@ -215,7 +232,7 @@ function Header(props) {
215
232
  w = (leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - leftMin;
216
233
  }
217
234
  if ((rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) + w < rightMin) {
218
- w = (rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) - rightMin;
235
+ w = -(rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) - rightMin;
219
236
  }
220
237
  return w;
221
238
  }
@@ -228,6 +245,7 @@ function Header(props) {
228
245
  return w - deltaX;
229
246
  if (key === adjKeys[1])
230
247
  return w + deltaX;
248
+ return w;
231
249
  };
232
250
  return (React.createElement("thead", { className: props.Class, style: props.Style, onMouseMove: function (e) { onMove(e.nativeEvent); e.stopPropagation(); }, onMouseUp: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); } },
233
251
  React.createElement("tr", { ref: trRef },
@@ -236,7 +254,7 @@ function Header(props) {
236
254
  if (!React.isValidElement(element))
237
255
  return null;
238
256
  if (element.type === AdjustableColumn_1.default)
239
- return React.createElement(AdjustableColumn_1.AdjColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w, min) { return props.SetWidth(element.props.Key, w, 'adjustable', min); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: adjustWidth(props.GetWidth(element.props.Key, 'adjustable'), element.props.Key), startAdjustment: function (e) {
257
+ return React.createElement(AdjustableColumn_1.AdjColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w, min) { return props.SetWidth(element.props.Key, Math.floor(w), 'adjustable', min); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: adjustWidth(props.GetWidth(element.props.Key, 'adjustable'), element.props.Key), startAdjustment: function (e) {
240
258
  if (props.GetLeftKey(element.props.Key) !== undefined)
241
259
  setAdjKeys([props.GetLeftKey(element.props.Key), element.props.Key]);
242
260
  setMouseDown(e.screenX);
@@ -248,7 +266,7 @@ function Header(props) {
248
266
  if (!React.isValidElement(element))
249
267
  return null;
250
268
  if (element.type === Column_1.default)
251
- return React.createElement(Column_1.ColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w) { return props.SetWidth(element.props.Key, w, 'fixed'); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: props.GetWidth(element.props.Key, 'fixed'), fixedLayout: props.FixedLayout }));
269
+ return React.createElement(Column_1.ColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w) { return props.SetWidth(element.props.Key, Math.floor(w), 'fixed'); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: props.GetWidth(element.props.Key, 'fixed'), fixedLayout: props.FixedLayout }));
252
270
  return null;
253
271
  }),
254
272
  React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
package/lib/AdjustableTable/Column.js CHANGED
@@ -73,7 +73,7 @@ function ColumnHeaderWrapper(props) {
73
73
  var onClick = React.useCallback(function (e) {
74
74
  props.onSort(props.Key, e, props.Field);
75
75
  }, [props.onSort]);
76
- return React.createElement("th", { ref: thref, style: style, onClick: onClick },
76
+ return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: function (e) { e.stopPropagation(); } },
77
77
  props.sorted && props.asc ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, gpa_symbols_1.SVGIcons.ArrowDropDown) : null,
78
78
  props.sorted && !props.asc ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, gpa_symbols_1.SVGIcons.ArrowDropUp) : null,
79
79
  React.createElement("div", { style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-table",
3
- "version": "1.2.32",
3
+ "version": "1.2.34",
4
4
  "description": "Table for GPA web applications",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",