From 334e3a9e09cca12a3b69c58fed682d8be17e818c Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 30 Oct 2018 20:36:23 -0500 Subject: [PATCH 1/2] Defining the ref callback as a bound method --- packages/common/editors/SimpleTextEditor.js | 5 +- .../src/editors/AutoCompleteEditor.js | 6 +- packages/react-data-grid/src/Grid.js | 17 +++-- packages/react-data-grid/src/Header.js | 76 ++++++++++--------- packages/react-data-grid/src/ReactDataGrid.js | 9 ++- 5 files changed, 67 insertions(+), 46 deletions(-) diff --git a/packages/common/editors/SimpleTextEditor.js b/packages/common/editors/SimpleTextEditor.js index a4cca46d90..319846da9d 100644 --- a/packages/common/editors/SimpleTextEditor.js +++ b/packages/common/editors/SimpleTextEditor.js @@ -3,9 +3,12 @@ const EditorBase = require('./EditorBase'); class SimpleTextEditor extends EditorBase { + setInputRef = (input) => { + this.input = input; + }; render() { - return ( this.input = node} type="text" onBlur={this.props.onBlur} className="form-control" defaultValue={this.props.value} />); + return (); } } diff --git a/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js b/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js index c851723640..225c340f69 100644 --- a/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js +++ b/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js @@ -95,10 +95,14 @@ class AutoCompleteEditor extends React.Component { return ret.join('|'); }; + setAutocompleteRef = (autoComplete) => { + this.autoComplete = autoComplete; + }; + render() { let label = this.props.label != null ? this.props.label : 'title'; return (
- this.autoComplete = node} label={label} onChange={this.handleChange} onFocus={this.props.onFocus} resultIdentifier={this.props.resultIdentifier} options={this.props.options} value={this.getEditorDisplayValue()} /> +
); } } diff --git a/packages/react-data-grid/src/Grid.js b/packages/react-data-grid/src/Grid.js index 6f59150b15..8fbf435c2b 100644 --- a/packages/react-data-grid/src/Grid.js +++ b/packages/react-data-grid/src/Grid.js @@ -133,9 +133,17 @@ class Grid extends React.Component { this.viewport = viewport; }; + setViewportContainerRef = (viewportContainer) => { + this.viewPortContainer = viewportContainer; + }; + + setEmptyViewRef = (emptyView) => { + this.emptyView = emptyView; + }; + render() { - let headerRows = this.props.headerRows || [{ref: (node) => this.row = node}]; - let EmptyRowsView = this.props.emptyRowsView; + const { headerRows } = this.props; + const EmptyRowsView = this.props.emptyRowsView; return (
@@ -151,13 +159,12 @@ class Grid extends React.Component { draggableHeaderCell={this.props.draggableHeaderCell} onSort={this.props.onSort} onHeaderDrop={this.props.onHeaderDrop} - // onScroll={this.onHeaderScroll} getValidFilterValues={this.props.getValidFilterValues} cellMetaData={this.props.cellMetaData} /> {this.props.rowsCount >= 1 || (this.props.rowsCount === 0 && !this.props.emptyRowsView) ?
{ this.viewPortContainer = node; } } + ref={this.setViewportContainerRef} onKeyDown={this.props.onViewportKeydown} onKeyUp={this.props.onViewportKeyup} > @@ -204,7 +211,7 @@ class Grid extends React.Component { />
: -
{ this.emptyView = node; } } className="react-grid-Empty"> +
} diff --git a/packages/react-data-grid/src/Header.js b/packages/react-data-grid/src/Header.js index 8a07d9b26d..7ccf93bfa0 100644 --- a/packages/react-data-grid/src/Header.js +++ b/packages/react-data-grid/src/Header.js @@ -78,22 +78,25 @@ class Header extends React.Component { } }; + setRowRef = (row) => { + this.row = row; + }; + + setFilterRowRef = (filterRow) => { + this.filterRow = filterRow; + }; + getHeaderRows = () => { - let columnMetrics = this.getColumnMetrics(); - let resizeColumn; - if (this.state.resizing) { - resizeColumn = this.state.resizing.column; - } - let headerRows = []; - this.props.headerRows.forEach((row, index) => { + const columnMetrics = this.getColumnMetrics(); + const resizeColumn = this.state.resizing ? this.state.resizing.column : undefined; + + return this.props.headerRows.map((row, index) => { // To allow header filters to be visible - let rowHeight = 'auto'; - if (row.rowType === HeaderRowType.FILTER) { - rowHeight = '500px'; - } - let scrollbarSize = getScrollbarSize() > 0 ? getScrollbarSize() : 0; - let updatedWidth = isNaN(this.props.totalWidth - scrollbarSize) ? this.props.totalWidth : this.props.totalWidth - scrollbarSize; - let headerRowStyle = { + const isFilterRow = row.rowType === HeaderRowType.FILTER; + const rowHeight = isFilterRow ? '500px' : 'auto'; + const scrollbarSize = getScrollbarSize() > 0 ? getScrollbarSize() : 0; + const updatedWidth = isNaN(this.props.totalWidth - scrollbarSize) ? this.props.totalWidth : this.props.totalWidth - scrollbarSize; + const headerRowStyle = { position: 'absolute', top: this.getCombinedHeaderHeights(index), left: 0, @@ -102,29 +105,30 @@ class Header extends React.Component { minHeight: rowHeight }; - headerRows.push( { return row.rowType === HeaderRowType.FILTER ? this.filterRow = node : this.row = node; }} - rowType={row.rowType} - style={headerRowStyle} - onColumnResize={this.onColumnResize} - onColumnResizeEnd={this.onColumnResizeEnd} - width={columnMetrics.width} - height={row.height || this.props.height} - columns={columnMetrics.columns} - resizing={resizeColumn} - draggableHeaderCell={this.props.draggableHeaderCell} - filterable={row.filterable} - onFilterChange={row.onFilterChange} - onHeaderDrop={this.props.onHeaderDrop} - sortColumn={this.props.sortColumn} - sortDirection={this.props.sortDirection} - onSort={this.props.onSort} - onScroll={this.props.onScroll} - getValidFilterValues={this.props.getValidFilterValues} - />); + return ( + + ); }); - return headerRows; }; getColumnMetrics = () => { diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js index d00a893594..6b679d2f0e 100644 --- a/packages/react-data-grid/src/ReactDataGrid.js +++ b/packages/react-data-grid/src/ReactDataGrid.js @@ -558,10 +558,9 @@ class ReactDataGrid extends React.Component { }; getHeaderRows = () => { - let rows = [{ ref: (node) => this.row = node, height: this.props.headerRowHeight || this.props.rowHeight, rowType: HeaderRowType.HEADER }]; + const rows = [{ height: this.props.headerRowHeight || this.props.rowHeight, rowType: HeaderRowType.HEADER }]; if (this.state.canFilter === true) { rows.push({ - ref: (node) => this.filterRow = node, filterable: true, onFilterChange: this.props.onAddFilter, height: this.props.headerFiltersHeight, @@ -646,6 +645,10 @@ class ReactDataGrid extends React.Component { this.grid = grid; }; + setBaseGridRef = (base) => { + this.base = base; + }; + renderToolbar = () => { let Toolbar = this.props.toolbar; let toolBarProps = {columns: this.props.columns, onToggleFilter: this.onToggleFilter, numberOfRows: this.props.rowsCount}; @@ -694,7 +697,7 @@ class ReactDataGrid extends React.Component { {toolbar}
this.base = node} + ref={this.setBaseGridRef} {...this.props} rowKey={this.props.rowKey} headerRows={this.getHeaderRows()} From 1ae835eb512546cecd362c12437cbf896074b7b0 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 31 Oct 2018 08:12:32 -0500 Subject: [PATCH 2/2] Fix unit tests --- packages/react-data-grid-addons/src/__tests__/Grid.spec.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-data-grid-addons/src/__tests__/Grid.spec.js b/packages/react-data-grid-addons/src/__tests__/Grid.spec.js index b25db98412..2b5199a0e5 100644 --- a/packages/react-data-grid-addons/src/__tests__/Grid.spec.js +++ b/packages/react-data-grid-addons/src/__tests__/Grid.spec.js @@ -191,10 +191,8 @@ describe('Grid', function() { }); it('should set filter state of grid and render a filterable header row', function() { - let filterableHeaderRow = this.baseGrid.props.headerRows[1]; expect(this.component.state.canFilter).toBe(true); expect(this.baseGrid.props.headerRows.length).toEqual(2); - expect(typeof filterableHeaderRow.ref).toEqual('function'); }); }); });