@gpa-gemstone/react-table 1.2.28 → 1.2.30

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/DynamicTable.js +4 -2
  2. package/lib/Table.d.ts +28 -0
  3. package/lib/Table.js +276 -14
  4. package/package.json +2 -2
package/lib/DynamicTable.js CHANGED
@@ -25,6 +25,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  exports.DynamicTable = void 0;
26
26
  var React = require("react");
27
27
  var Table_1 = require("./Table");
28
+ var lodash_1 = require("lodash");
29
+ var empty = new Map();
28
30
  function DynamicTable(props) {
29
31
  if (props.data.length <= 0)
30
32
  return null;
@@ -35,8 +37,8 @@ function DynamicTable(props) {
35
37
  cols.push({ key: key, label: key, field: key });
36
38
  }
37
39
  return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
38
- React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d) { return handleSort(d); } }),
39
- React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return props.onClick(data, e); }, Selected: props.selected, KeySelector: props.keySelector })));
40
+ React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d) { return handleSort(d); }, SetResizeColIndex: function () { lodash_1.noop; }, AllowResize: false, Width: empty, MeasureWidth: function () { lodash_1.noop; } }),
41
+ React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return props.onClick(data, e); }, Selected: props.selected, KeySelector: props.keySelector, Width: empty, MeasureWidth: function () { lodash_1.noop; }, SetTBodyWidth: function () { lodash_1.noop; } })));
40
42
  function handleSort(data) {
41
43
  if (data.colKey !== null)
42
44
  props.onSort(data);
package/lib/Table.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface Column<T> {
6
6
  headerStyle?: React.CSSProperties;
7
7
  rowStyle?: React.CSSProperties;
8
8
  content?(item: T, key: string, field: keyof T | undefined, style: React.CSSProperties, index: number): React.ReactNode;
9
+ allowResize?: boolean;
9
10
  }
10
11
  export interface TableProps<T> {
11
12
  /**
@@ -52,11 +53,30 @@ export interface TableProps<T> {
52
53
  }, e: any) => void);
53
54
  rowStyle?: React.CSSProperties;
54
55
  keySelector?: (data: T) => string;
56
+ /**
57
+ * Flag indicating if the collumns are resizable
58
+ * Default is <code>false</code>
59
+ */
60
+ allowResize?: boolean;
55
61
  /**
56
62
  * Optional Element to display in the last row of the Table
57
63
  * use this for displaying warnings when the Table content gets cut off
58
64
  */
59
65
  lastRow?: string | React.ReactNode;
66
+ /**
67
+ * Minimum width of a collumn when allowResize is true
68
+ */
69
+ MinColWidth?: number;
70
+ /**
71
+ * Function that updates the width of the Table - primary use is for collumn counting in Cnfigurable Table
72
+ * @param w - the width of the table in px
73
+ * @returns - void
74
+ */
75
+ UpdateWidth?: (w: number) => void;
76
+ }
77
+ interface IWidth {
78
+ header: number | undefined;
79
+ row: number | undefined;
60
80
  }
61
81
  export default function Table<T>(props: TableProps<T>): JSX.Element;
62
82
  interface IRowProps<T> {
@@ -81,6 +101,9 @@ interface IRowProps<T> {
81
101
  }, e: any) => void);
82
102
  Selected?: ((data: T) => boolean);
83
103
  KeySelector?: (data: T) => string;
104
+ Width: Map<string, IWidth>;
105
+ MeasureWidth: (key: string, width: number) => void;
106
+ SetTBodyWidth: (w: number) => void;
84
107
  }
85
108
  export declare function Rows<T>(props: IRowProps<T>): JSX.Element | null;
86
109
  interface IHeaderProps<T> {
@@ -89,11 +112,16 @@ interface IHeaderProps<T> {
89
112
  Cols: Column<T>[];
90
113
  SortKey: string;
91
114
  Ascending: boolean;
115
+ ResizeColIndex?: number;
116
+ SetResizeColIndex: (index: number, e: MouseEvent) => void;
92
117
  Click: (data: {
93
118
  colKey: string;
94
119
  colField?: keyof T;
95
120
  ascending: boolean;
96
121
  }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
122
+ AllowResize: boolean;
123
+ Width: Map<string, IWidth>;
124
+ MeasureWidth: (key: string, width: number) => void;
97
125
  }
98
126
  export declare function Header<T>(props: IHeaderProps<T>): JSX.Element;
99
127
  export {};
package/lib/Table.js CHANGED
@@ -35,24 +35,225 @@ var __assign = (this && this.__assign) || function () {
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.Header = exports.Rows = void 0;
37
37
  var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
38
+ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
38
39
  var React = require("react");
40
+ var _ = require("lodash");
39
41
  function Table(props) {
40
- return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
41
- React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d, e) { return handleSort(d, e); } }),
42
- React.createElement(Rows, { DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return (props.onClick === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector }),
43
- props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? __assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
44
- function handleSort(data, event) {
42
+ var _a, _b;
43
+ var measuredWidth = React.useRef(new Map());
44
+ var incWidthChange = React.useRef(0);
45
+ var minimumColWidth = (_a = props.MinColWidth) !== null && _a !== void 0 ? _a : 100;
46
+ var _c = React.useState(null), resizingCol = _c[0], setResizingCol = _c[1];
47
+ var allowResize = (_b = props.allowResize) !== null && _b !== void 0 ? _b : false;
48
+ var _d = React.useState(new Map()), fixedWidths = _d[0], setFixedWidths = _d[1];
49
+ var _e = React.useState(0), positionX = _e[0], setPositionX = _e[1];
50
+ var _f = React.useState(0), totalWidth = _f[0], setTotalWidth = _f[1];
51
+ var nRow = React.useMemo(function () { return props.cols.length; }, [props.cols]);
52
+ React.useEffect(function () { if (props.UpdateWidth !== undefined)
53
+ props.UpdateWidth(totalWidth); }, [totalWidth]);
54
+ (0, helper_functions_1.useEffectWithPrevious)(function (r) {
55
+ if (r === 0 || r === undefined)
56
+ return;
57
+ var updatedWidth = _.cloneDeep(fixedWidths);
58
+ var measuredPrevTotal = Array.from(measuredWidth.current.keys()).reduce(function (s, k) {
59
+ var _a, _b;
60
+ return s + Math.max(((_b = (_a = measuredWidth.current.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0), minimumColWidth);
61
+ }, 0);
62
+ var diff = measuredPrevTotal - totalWidth;
63
+ props.cols.forEach(function (c) {
64
+ if (!measuredWidth.current.has(c.key))
65
+ updatedWidth.set(c.key, { row: minimumColWidth, header: minimumColWidth });
66
+ });
67
+ var keys = props.cols
68
+ .filter(function (c) {
69
+ var _a, _b, _c, _d, _e;
70
+ return ((_a = c.allowResize) !== null && _a !== void 0 ? _a : true) && updatedWidth.has(c.key) &&
71
+ ((_c = (_b = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : 0) > minimumColWidth && ((_e = (_d = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _d === void 0 ? void 0 : _d.row) !== null && _e !== void 0 ? _e : 0) > minimumColWidth;
72
+ }).map(function (c) { return c.key; });
73
+ var _loop_1 = function () {
74
+ var deltaCol = diff / keys.length;
75
+ keys.forEach(function (k) {
76
+ var _a, _b, _c, _d;
77
+ var dCol = determineMaxMovement(updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(k), deltaCol);
78
+ updatedWidth.get(k).header = ((_b = (_a = updatedWidth.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) - dCol;
79
+ updatedWidth.get(k).row = ((_d = (_c = updatedWidth.get(k)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) - dCol;
80
+ diff = diff - dCol;
81
+ });
82
+ keys = keys.filter(function (c) { var _a, _b, _c, _d; return ((_b = (_a = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) > minimumColWidth && ((_d = (_c = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) > minimumColWidth; });
83
+ };
84
+ while (keys.length > 0 && Math.abs(diff) > 1) {
85
+ _loop_1();
86
+ }
87
+ setFixedWidths(updatedWidth);
88
+ }, nRow);
89
+ (0, helper_functions_1.useEffectWithPrevious)(function (prevWidth) {
90
+ if (totalWidth === 0 || prevWidth === 0 || prevWidth === undefined)
91
+ return;
92
+ if (props.allowResize === undefined || !props.allowResize)
93
+ return;
94
+ var change = prevWidth - totalWidth;
95
+ if (Math.abs(change + incWidthChange.current) < 10) {
96
+ incWidthChange.current = incWidthChange.current + change;
97
+ return;
98
+ }
99
+ incWidthChange.current = 0;
100
+ var measuredPrevTotal = Array.from(measuredWidth.current.keys()).reduce(function (s, k) {
101
+ var _a, _b;
102
+ return s + ((_b = (_a = measuredWidth.current.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0);
103
+ }, 0);
104
+ var updatedWidth = _.cloneDeep(fixedWidths);
105
+ var diff = measuredPrevTotal - totalWidth;
106
+ //return;
107
+ var keys = props.cols
108
+ .filter(function (c) {
109
+ var _a, _b, _c, _d, _e;
110
+ return ((_a = c.allowResize) !== null && _a !== void 0 ? _a : true) && updatedWidth.has(c.key) &&
111
+ ((_c = (_b = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : 0) > minimumColWidth && ((_e = (_d = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _d === void 0 ? void 0 : _d.row) !== null && _e !== void 0 ? _e : 0) > minimumColWidth;
112
+ }).map(function (c) { return c.key; });
113
+ var _loop_2 = function () {
114
+ var deltaCol = diff / keys.length;
115
+ keys.forEach(function (k) {
116
+ var _a, _b, _c, _d;
117
+ var dCol = determineMaxMovement(updatedWidth.get(k), deltaCol);
118
+ updatedWidth.get(k).header = ((_b = (_a = updatedWidth.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) - dCol;
119
+ updatedWidth.get(k).row = ((_d = (_c = updatedWidth.get(k)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) - dCol;
120
+ diff = diff - dCol;
121
+ });
122
+ keys = keys.filter(function (c) { var _a, _b, _c, _d; return ((_b = (_a = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) > minimumColWidth && ((_d = (_c = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) > minimumColWidth; });
123
+ };
124
+ while (keys.length > 0 && Math.abs(diff) > 1) {
125
+ _loop_2();
126
+ }
127
+ setFixedWidths(updatedWidth);
128
+ }, totalWidth);
129
+ var handleSort = React.useCallback(function (data, event) {
45
130
  if (data.colKey !== null)
46
131
  props.onSort(data, event);
47
- }
132
+ }, [props.onSort]);
133
+ var handleResizeSelect = React.useCallback(function (i, e) {
134
+ var _a;
135
+ if ((_a = props.allowResize) !== null && _a !== void 0 ? _a : false) {
136
+ setResizingCol(i);
137
+ setPositionX(e.clientX);
138
+ }
139
+ }, [props.allowResize]);
140
+ var handleMouseUp = React.useCallback(function (i) {
141
+ if (resizingCol === null)
142
+ return;
143
+ setResizingCol(null);
144
+ }, [resizingCol]);
145
+ var handleMouseMove = React.useCallback(function (e) {
146
+ var _a, _b, _c, _d, _e, _f, _g, _h;
147
+ if (resizingCol === null)
148
+ return;
149
+ var dW = positionX - e.clientX;
150
+ if (dW == 0)
151
+ return;
152
+ // try to reduce index on left by dW
153
+ var wLeft = 0, whLeft = 0;
154
+ var wRight = 0, whRight = 0;
155
+ if (!measuredWidth.current.has(props.cols[resizingCol - 1].key) ||
156
+ !measuredWidth.current.has(props.cols[resizingCol].key))
157
+ return;
158
+ whLeft = (_b = (_a = measuredWidth.current.get(props.cols[resizingCol - 1].key)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0;
159
+ whRight = (_d = (_c = measuredWidth.current.get(props.cols[resizingCol].key)) === null || _c === void 0 ? void 0 : _c.header) !== null && _d !== void 0 ? _d : 0;
160
+ wLeft = (_f = (_e = measuredWidth.current.get(props.cols[resizingCol - 1].key)) === null || _e === void 0 ? void 0 : _e.row) !== null && _f !== void 0 ? _f : 0;
161
+ wRight = (_h = (_g = measuredWidth.current.get(props.cols[resizingCol].key)) === null || _g === void 0 ? void 0 : _g.row) !== null && _h !== void 0 ? _h : 0;
162
+ if (dW > 0)
163
+ dW = determineMaxMovement(measuredWidth.current.get(props.cols[resizingCol - 1].key), dW);
164
+ else
165
+ dW = -determineMaxMovement(measuredWidth.current.get(props.cols[resizingCol].key), -dW);
166
+ if (dW === 0)
167
+ return;
168
+ setPositionX(e.clientX);
169
+ setFixedWidths(function (d) {
170
+ var _a, _b, _c, _d, _e, _f, _g, _h;
171
+ var u = new Map(d);
172
+ if (!u.has(props.cols[resizingCol - 1].key))
173
+ u.set(props.cols[resizingCol - 1].key, { header: undefined, row: undefined });
174
+ else {
175
+ whLeft = (_b = (_a = u.get(props.cols[resizingCol - 1].key)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0;
176
+ wLeft = (_d = (_c = u.get(props.cols[resizingCol - 1].key)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0;
177
+ }
178
+ if (!u.has(props.cols[resizingCol].key))
179
+ u.set(props.cols[resizingCol].key, { header: undefined, row: undefined });
180
+ else {
181
+ whRight = (_f = (_e = u.get(props.cols[resizingCol].key)) === null || _e === void 0 ? void 0 : _e.header) !== null && _f !== void 0 ? _f : 0;
182
+ wRight = (_h = (_g = u.get(props.cols[resizingCol].key)) === null || _g === void 0 ? void 0 : _g.row) !== null && _h !== void 0 ? _h : 0;
183
+ }
184
+ u.get(props.cols[resizingCol - 1].key).header = whLeft - dW;
185
+ u.get(props.cols[resizingCol].key).header = whRight + dW;
186
+ u.get(props.cols[resizingCol - 1].key).row = wLeft - dW;
187
+ u.get(props.cols[resizingCol].key).row = wRight + dW;
188
+ return u;
189
+ });
190
+ }, [resizingCol, positionX]);
191
+ var determineMaxMovement = function (w, dW) {
192
+ var _a, _b, _c;
193
+ if (dW < 0)
194
+ return dW;
195
+ if (w === undefined)
196
+ return 0;
197
+ if (((_a = w.header) !== null && _a !== void 0 ? _a : 0) <= minimumColWidth || ((_b = w.row) !== null && _b !== void 0 ? _b : 0) <= minimumColWidth)
198
+ return 0;
199
+ if (w.row === undefined || w.row === 0)
200
+ return Math.min(dW, (((_c = w.header) !== null && _c !== void 0 ? _c : 0) - minimumColWidth));
201
+ if (w.header === undefined || w.header === 0)
202
+ return Math.min(dW, (w.row - minimumColWidth));
203
+ var ratio = w.header / w.row;
204
+ if (ratio > 1)
205
+ return Math.min(dW, (w.row - minimumColWidth));
206
+ return Math.min(dW, (w.header - minimumColWidth));
207
+ };
208
+ var measureRowWidth = React.useCallback(function (key, width) {
209
+ var _a, _b, _c;
210
+ if (measuredWidth.current.has(key))
211
+ measuredWidth.current.get(key).row = width;
212
+ else
213
+ measuredWidth.current.set(key, { header: undefined, row: width });
214
+ var canResize = (_b = (_a = props.cols.find(function (c) { return c.key === key; })) === null || _a === void 0 ? void 0 : _a.allowResize) !== null && _b !== void 0 ? _b : true;
215
+ if ((!fixedWidths.has(key) || (((_c = fixedWidths.get(key)) === null || _c === void 0 ? void 0 : _c.row) === undefined)))
216
+ setFixedWidths(function (d) {
217
+ var _a;
218
+ var u = new Map(d);
219
+ u.set(key, { header: (_a = u.get(key)) === null || _a === void 0 ? void 0 : _a.header, row: width });
220
+ return u;
221
+ });
222
+ }, [props.cols, fixedWidths]);
223
+ var measureHeaderWidth = React.useCallback(function (key, width) {
224
+ if (measuredWidth.current.has(key))
225
+ measuredWidth.current.get(key).header = width;
226
+ else
227
+ measuredWidth.current.set(key, { header: width, row: undefined });
228
+ if ((!fixedWidths.has(key) || fixedWidths.get(key).header === undefined))
229
+ setFixedWidths(function (d) {
230
+ var _a;
231
+ var u = new Map(d);
232
+ u.set(key, { row: (_a = u.get(key)) === null || _a === void 0 ? void 0 : _a.row, header: width });
233
+ return u;
234
+ });
235
+ }, [props.cols, fixedWidths]);
236
+ return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle, onMouseLeave: handleMouseUp, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp },
237
+ React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d, e) { return handleSort(d, e); }, SetResizeColIndex: handleResizeSelect, AllowResize: allowResize, MeasureWidth: measureHeaderWidth, Width: fixedWidths }),
238
+ React.createElement(Rows, { MeasureWidth: measureRowWidth, Width: fixedWidths, DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return (props.onClick === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector, SetTBodyWidth: setTotalWidth }),
239
+ props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? __assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
48
240
  }
49
241
  exports.default = Table;
50
242
  function Rows(props) {
243
+ var tbody = React.useRef(null);
244
+ React.useLayoutEffect(function () {
245
+ var _a, _b;
246
+ if (tbody.current == null)
247
+ return;
248
+ var w = (_b = (_a = (0, helper_functions_1.GetNodeSize)(tbody.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
249
+ props.SetTBodyWidth(w);
250
+ });
51
251
  if (props.Data.length === 0)
52
252
  return null;
53
253
  var rows = props.Data.map(function (item, rowIndex) {
54
254
  var cells = props.Cols.map(function (colData) {
55
- return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); }, DragStart: props.DragStart });
255
+ var _a;
256
+ return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); }, DragStart: props.DragStart, MeasureWidth: function (w) { return props.MeasureWidth(colData.key, w); }, Width: (_a = props.Width.get(colData.key)) === null || _a === void 0 ? void 0 : _a.row });
56
257
  });
57
258
  var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
58
259
  if (style.cursor === undefined)
@@ -66,34 +267,95 @@ function Rows(props) {
66
267
  }
67
268
  return (React.createElement("tr", { style: style, key: ToKey(rowIndex, item) }, cells));
68
269
  });
69
- return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, rows));
270
+ return (React.createElement("tbody", { ref: tbody, style: props.BodyStyle, className: props.BodyClass }, rows));
70
271
  }
71
272
  exports.Rows = Rows;
72
273
  function Cell(props) {
73
- var css = (props.Style !== undefined) ? __assign({}, props.Style) : {};
274
+ var tdRef = React.useRef(null);
275
+ var css = React.useMemo(function () { return (props.Style !== undefined) ? __assign(__assign({}, props.Style), { width: (props.Width !== undefined) ? props.Width : props.Style.width }) : {
276
+ width: (props.Width !== undefined) ? props.Width : undefined
277
+ }; }, [props.Width, props.Style]);
74
278
  if (props.DragStart !== undefined)
75
279
  css.cursor = "grab";
76
280
  var getFieldValue = function () { return props.DataField !== undefined ? props.Object[props.DataField] : null; };
77
281
  var getFieldContent = function () { return props.Content !== undefined ? props.Content(props.Object, props.DataKey, props.DataField, css, props.RowIndex) : getFieldValue(); };
78
- return (React.createElement("td", { style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); }, draggable: props.DragStart !== undefined, onDragStart: function (e) { if (props.DragStart !== undefined)
282
+ React.useEffect(function () {
283
+ var _a, _b;
284
+ if (tdRef.current == null)
285
+ return;
286
+ var w = (_b = (_a = (0, helper_functions_1.GetNodeSize)(tdRef.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
287
+ props.MeasureWidth(w - 1);
288
+ });
289
+ return (React.createElement("td", { ref: tdRef, style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); }, draggable: props.DragStart !== undefined, onDragStart: function (e) { if (props.DragStart !== undefined)
79
290
  props.DragStart({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); } }, getFieldContent()));
80
291
  }
81
292
  function Header(props) {
293
+ var _a = React.useState(-1), lastResize = _a[0], setLastResize = _a[1];
294
+ var _b = React.useState(-1), firstResize = _b[0], setFirstResize = _b[1];
295
+ React.useEffect(function () {
296
+ var last = (0, helper_functions_1.findLastIndex)(props.Cols, function (c) { return c.allowResize === undefined || c.allowResize; });
297
+ var first = props.Cols.findIndex(function (c) { return c.allowResize === undefined || c.allowResize; });
298
+ setFirstResize(first);
299
+ setLastResize(last);
300
+ }, [props.Cols]);
301
+ var allowResize = React.useCallback(function (col, i) {
302
+ if (i == 0 || !props.AllowResize)
303
+ return false;
304
+ if (firstResize > -1 && i <= firstResize)
305
+ return false;
306
+ if (lastResize > -1 && i > lastResize)
307
+ return false;
308
+ return true;
309
+ }, [firstResize, lastResize]);
82
310
  return (React.createElement("thead", { className: props.Class, style: props.Style },
83
- React.createElement("tr", null, props.Cols.map(function (col) { return React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: function (e) { return props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e); }, Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending }); }))));
311
+ React.createElement("tr", null, props.Cols.map(function (col, i) {
312
+ var _a;
313
+ return React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: function (e) { return props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e); }, Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending, PullBorder: allowResize(col, i) ? function (e) { props.SetResizeColIndex(i, e); } : undefined, MeasureWidth: function (width) { return props.MeasureWidth(col.key, width); }, Width: (_a = props.Width.get(col.key)) === null || _a === void 0 ? void 0 : _a.header });
314
+ }))));
84
315
  }
85
316
  exports.Header = Header;
86
317
  function HeaderCell(props) {
87
- var style = (props.HeaderStyle !== undefined) ? props.HeaderStyle : {};
318
+ var thRef = React.useRef(null);
319
+ var _a = React.useState(false), showBorder = _a[0], setShowBorder = _a[1];
320
+ var style = React.useMemo(function () { return (props.HeaderStyle !== undefined) ? __assign(__assign({}, props.HeaderStyle), { width: (props.Width !== undefined) ? props.Width : props.HeaderStyle.width }) : {
321
+ width: (props.Width !== undefined) ? props.Width : undefined
322
+ }; }, [props.Width, props.HeaderStyle]);
88
323
  if (style.cursor === undefined && props.DataKey !== null) {
89
324
  style.cursor = 'pointer';
90
325
  }
91
326
  if (style.position === undefined) {
92
327
  style.position = 'relative';
93
328
  }
94
- return (React.createElement("th", { style: style, onClick: function (e) { return props.Click(e); } },
329
+ React.useEffect(function () {
330
+ var _a;
331
+ if (thRef.current == null)
332
+ return;
333
+ var w = (_a = (0, helper_functions_1.GetNodeSize)(thRef.current)) === null || _a === void 0 ? void 0 : _a.width;
334
+ if (w === undefined)
335
+ return;
336
+ props.MeasureWidth(w - 1);
337
+ });
338
+ var onHover = React.useCallback(function () { setShowBorder(true); }, []);
339
+ var onLeave = React.useCallback(function () { setShowBorder(false); }, []);
340
+ var onClick = React.useCallback(function (e) { if (showBorder) {
341
+ props.PullBorder(e.nativeEvent);
342
+ e.stopPropagation();
343
+ } }, [showBorder]);
344
+ return (React.createElement("th", { ref: thRef, style: style, onClick: function (e) { return props.Click(e); } },
345
+ props.PullBorder != undefined ? React.createElement("div", { style: {
346
+ width: 5,
347
+ height: '100%',
348
+ position: 'absolute',
349
+ top: 0,
350
+ left: 0,
351
+ opacity: showBorder ? 1 : 0,
352
+ background: '#e9ecef',
353
+ cursor: 'col-resize'
354
+ }, onMouseEnter: onHover, onMouseLeave: onLeave, onMouseDown: onClick }) : null,
95
355
  React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending }),
96
- React.createElement("div", { style: { marginLeft: (props.SortKey === props.DataKey ? 25 : 0) } }, props.Label)));
356
+ React.createElement("div", { style: {
357
+ marginLeft: (props.SortKey === props.DataKey ? 25 : 0),
358
+ } }, props.Label)));
97
359
  }
98
360
  function RenderAngleIcon(props) {
99
361
  var AngleIcon = function (a) { return a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown; };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-table",
3
- "version": "1.2.28",
3
+ "version": "1.2.30",
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.28",
46
- "@gpa-gemstone/helper-functions": "0.0.24",
46
+ "@gpa-gemstone/helper-functions": "0.0.26",
47
47
  "@types/lodash": "^4.14.171",
48
48
  "@types/react": "^17.0.14",
49
49
  "lodash": "^4.17.21",