Skip to content

Commit 155638e

Browse files
maxhudsonmaxhudson
committed
fixed random id and scrollbar resize on cell resize
1 parent c6d2a8c commit 155638e

File tree

3 files changed

+39
-21
lines changed

3 files changed

+39
-21
lines changed

‎dist/index.js

+20-10
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,13 @@
104104

105105
var _this = _possibleConstructorReturn(this, (StickyTable.__proto__ || Object.getPrototypeOf(StickyTable)).call(this, props));
106106

107-
_this.id = Math.floor(Math.random() * 1000000000) + '';
108-
109107
_this.rowCount = 0;
110108
_this.columnCount = 0;
111109
_this.xScrollSize = 0;
112110
_this.yScrollSize = 0;
113111

112+
_this.dom = {};
113+
114114
_this.stickyHeaderCount = props.stickyHeaderCount === 0 ? 0 : _this.stickyHeaderCount || 1;
115115

116116
_this.isFirefox = navigator && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -131,10 +131,7 @@
131131
value: function componentDidMount() {
132132
var _this2 = this;
133133

134-
this.dom = {};
135-
136-
if (document.getElementById('sticky-table-' + this.id)) {
137-
this.dom.wrapper = document.getElementById('sticky-table-' + this.id);
134+
if (this.dom.wrapper) {
138135
this.dom.bodyTable = this.dom.wrapper.querySelector('.sticky-table-x-wrapper .sticky-table-table');
139136
this.dom.xScrollbar = this.dom.wrapper.querySelector('.x-scrollbar');
140137
this.dom.yScrollbar = this.dom.wrapper.querySelector('.y-scrollbar');
@@ -266,22 +263,29 @@
266263
_ref$forceWrapperResi = _ref.forceWrapperResize,
267264
forceWrapperResize = _ref$forceWrapperResi === undefined ? false : _ref$forceWrapperResi;
268265

269-
var wrapperSize = { width: this.dom.wrapper.offsetWidth, height: this.dom.wrapper.offsetWidth };
266+
var wrapperSize = {
267+
width: this.dom.wrapper.offsetWidth,
268+
height: this.dom.wrapper.offsetWidth
269+
};
270+
270271
var tableCellSizes = {
271272
corner: { width: this.dom.stickyCornerTable.offsetWidth, height: this.dom.stickyCornerTable.offsetHeight },
272273
header: { width: this.dom.stickyHeaderTable.offsetWidth, height: this.dom.stickyHeaderTable.offsetHeight },
273274
column: { width: this.dom.stickyColumnTable.offsetWidth, height: this.dom.stickyColumnTable.offsetHeight },
274275
body: { width: this.dom.bodyTable.offsetWidth, height: this.dom.bodyTable.offsetHeight }
275276
};
276277

277-
if (forceCellTableResize || !this.oldTableCellSizes || JSON.stringify(tableCellSizes) !== JSON.stringify(this.oldTableCellSizes)) {
278+
var tableCellSizesChanged = JSON.stringify(tableCellSizes) !== JSON.stringify(this.oldTableCellSizes);
279+
var wrapperSizeChanged = JSON.stringify(wrapperSize) !== JSON.stringify(this.oldWrapperSize);
280+
281+
if (forceCellTableResize || !this.oldTableCellSizes || tableCellSizesChanged) {
278282
this.setRowHeights();
279283
this.setColumnWidths();
280284

281285
this.oldTableCellSizes = tableCellSizes;
282286
}
283287

284-
if (forceWrapperResize || !this.oldWrapperSize || JSON.stringify(wrapperSize) !== JSON.stringify(this.oldWrapperSize)) {
288+
if (forceWrapperResize || !this.oldWrapperSize || wrapperSizeChanged || tableCellSizesChanged) {
285289
this.setScrollBarDims();
286290
this.setScrollBarWrapperDims();
287291
this.setScrollData();
@@ -496,6 +500,8 @@
496500
}, {
497501
key: 'render',
498502
value: function render() {
503+
var _this9 = this;
504+
499505
//This is probably sub-optimal because render only needs
500506
//to be called for react components that are sub-classed
501507
//and don't have props.children that are <Cell>s
@@ -511,9 +517,13 @@
511517
this.rowCount = rows.length;
512518
this.columnCount = rows[0] && _react2.default.Children.toArray(rows[0].props.children).length || 0;
513519

520+
var setWrapperElement = function setWrapperElement(element) {
521+
if (element) _this9.dom.wrapper = element;
522+
};
523+
514524
return _react2.default.createElement(
515525
'div',
516-
{ className: 'sticky-table ' + (this.props.className || ''), id: 'sticky-table-' + this.id },
526+
{ className: 'sticky-table ' + (this.props.className || ''), ref: setWrapperElement },
517527
_react2.default.createElement(
518528
'div',
519529
{ className: 'x-scrollbar' },

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js

+18-10
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ class StickyTable extends PureComponent {
2828
constructor(props) {
2929
super(props);
3030

31-
this.id = Math.floor(Math.random() * 1000000000) + '';
32-
3331
this.rowCount = 0;
3432
this.columnCount = 0;
3533
this.xScrollSize = 0;
3634
this.yScrollSize = 0;
3735

36+
this.dom = {};
37+
3838
this.stickyHeaderCount = props.stickyHeaderCount === 0 ? 0 : (this.stickyHeaderCount || 1);
3939

4040
this.isFirefox = navigator && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -48,10 +48,7 @@ class StickyTable extends PureComponent {
4848
* @returns {undefined}
4949
*/
5050
componentDidMount() {
51-
this.dom = {};
52-
53-
if (document.getElementById('sticky-table-' + this.id)) {
54-
this.dom.wrapper = document.getElementById('sticky-table-' + this.id);
51+
if (this.dom.wrapper) {
5552
this.dom.bodyTable = this.dom.wrapper.querySelector('.sticky-table-x-wrapper .sticky-table-table');
5653
this.dom.xScrollbar = this.dom.wrapper.querySelector('.x-scrollbar');
5754
this.dom.yScrollbar = this.dom.wrapper.querySelector('.y-scrollbar');
@@ -203,22 +200,29 @@ class StickyTable extends PureComponent {
203200
* @returns {undefined}
204201
*/
205202
considerResizing({forceCellTableResize=false, forceWrapperResize=false} = {}) {
206-
var wrapperSize = {width: this.dom.wrapper.offsetWidth, height: this.dom.wrapper.offsetWidth};
203+
var wrapperSize = {
204+
width: this.dom.wrapper.offsetWidth,
205+
height: this.dom.wrapper.offsetWidth
206+
};
207+
207208
var tableCellSizes = {
208209
corner: {width: this.dom.stickyCornerTable.offsetWidth, height: this.dom.stickyCornerTable.offsetHeight},
209210
header: {width: this.dom.stickyHeaderTable.offsetWidth, height: this.dom.stickyHeaderTable.offsetHeight},
210211
column: {width: this.dom.stickyColumnTable.offsetWidth, height: this.dom.stickyColumnTable.offsetHeight},
211212
body: {width: this.dom.bodyTable.offsetWidth, height: this.dom.bodyTable.offsetHeight}
212213
};
213214

214-
if (forceCellTableResize || !this.oldTableCellSizes || JSON.stringify(tableCellSizes) !== JSON.stringify(this.oldTableCellSizes)) {
215+
var tableCellSizesChanged = JSON.stringify(tableCellSizes) !== JSON.stringify(this.oldTableCellSizes);
216+
var wrapperSizeChanged = JSON.stringify(wrapperSize) !== JSON.stringify(this.oldWrapperSize);
217+
218+
if (forceCellTableResize || !this.oldTableCellSizes || tableCellSizesChanged) {
215219
this.setRowHeights();
216220
this.setColumnWidths();
217221

218222
this.oldTableCellSizes = tableCellSizes;
219223
}
220224

221-
if (forceWrapperResize || !this.oldWrapperSize || JSON.stringify(wrapperSize) !== JSON.stringify(this.oldWrapperSize)) {
225+
if (forceWrapperResize || !this.oldWrapperSize || wrapperSizeChanged || tableCellSizesChanged) {
222226
this.setScrollBarDims();
223227
this.setScrollBarWrapperDims();
224228
this.setScrollData();
@@ -431,8 +435,12 @@ class StickyTable extends PureComponent {
431435
this.rowCount = rows.length;
432436
this.columnCount = (rows[0] && React.Children.toArray(rows[0].props.children).length) || 0;
433437

438+
var setWrapperElement = element => {
439+
if (element) this.dom.wrapper = element;
440+
}
441+
434442
return (
435-
<div className={'sticky-table ' + (this.props.className || '')} id={'sticky-table-' + this.id}>
443+
<div className={'sticky-table ' + (this.props.className || '')} ref={setWrapperElement}>
436444
<div className='x-scrollbar'><div></div></div>
437445
<div className='y-scrollbar'><div></div></div>
438446
<div className='sticky-table-header-wrapper'>

0 commit comments

Comments
 (0)