@gpa-gemstone/react-table 1.2.33 → 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 (2) hide show
  1. package/lib/AdjustableTable/AdjustableTable.js +28 -13
  2. package/package.json +1 -1
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
  })));
@@ -239,7 +254,7 @@ function Header(props) {
239
254
  if (!React.isValidElement(element))
240
255
  return null;
241
256
  if (element.type === AdjustableColumn_1.default)
242
- 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) {
243
258
  if (props.GetLeftKey(element.props.Key) !== undefined)
244
259
  setAdjKeys([props.GetLeftKey(element.props.Key), element.props.Key]);
245
260
  setMouseDown(e.screenX);
@@ -251,7 +266,7 @@ function Header(props) {
251
266
  if (!React.isValidElement(element))
252
267
  return null;
253
268
  if (element.type === Column_1.default)
254
- 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 }));
255
270
  return null;
256
271
  }),
257
272
  React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-table",
3
- "version": "1.2.33",
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",