Skip to content

Commit

Permalink
Fixing aggregation bug introduced with infinite scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@caguthrie
caguthrie committed May 22, 2015
1 parent 931dfba commit 338492e
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 30 deletions.
27 changes: 19 additions & 8 deletions build/ReactTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
var totalHeight = target.find("tbody").height();
if( scrolled / (totalHeight-scrolledHeight) > .8 ){
this.setState({
rowMultiplier: this.state.rowMultiplier + 1
rows: this.addMoreRows(true)
});
}
},
Expand Down Expand Up @@ -208,25 +208,36 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
adjustHeaders.call(this);
bindHeadersToMenu($(this.getDOMNode()));
},
addMoreRows: function(){
addMoreRows: function(calledFromScroll){
if( this.props.justAdded ){
console.log("just added");
this.props.justAdded = false;
return this.state.rows;
}
console.log("rasterizing");
var rasterizedData = rasterizeTree({
node: this.state.rootNode,
firstColumn: this.state.columnDefs[0],
selectedDetailRows: this.state.selectedDetailRows
});

if( !calledFromScroll )
this.props.rowMultiplier = this.props.rowMultiplier ? this.props.rowMultiplier : 0;
else
this.props.rowMultiplier = (this.props.rowMultiplier === undefined ? 0 : this.props.rowMultiplier + 1);

var upperBound = (this.state.rowMultiplier + 1) * this.state.itemsPerScroll;
var upperBound = (this.props.rowMultiplier + 1) * this.state.itemsPerScroll;
var rowsToDisplay = [];

if( this.state.rows.length < upperBound && this.state.rows.length < rasterizedData.length ) {
var lowerBound = this.state.rowMultiplier * this.state.itemsPerScroll;
if( calledFromScroll && this.state.rows.length < upperBound && this.state.rows.length < rasterizedData.length ) {
var lowerBound = this.state.rows.length;
rowsToDisplay = rasterizedData.slice(lowerBound, upperBound);
this.state.rows = this.state.rows.concat(rowsToDisplay.map(rowMapper, this));
this.props.justAdded = true;
return this.state.rows.concat(rowsToDisplay.map(rowMapper, this))
}
else {
rowsToDisplay = rasterizedData.slice(0, upperBound);
this.state.rows = rowsToDisplay.map(rowMapper, this);
return rowsToDisplay.map(rowMapper, this)
}
},
render: function () {
Expand All @@ -244,7 +255,7 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
this.state.rows = rowsToDisplay.map(rowMapper, this);
}
else{
this.addMoreRows();
this.state.rows = this.addMoreRows();
}

var headers = buildHeaders(this);
Expand Down
1 change: 0 additions & 1 deletion build/ReactTableEventHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ function ReactTableGetInitialState() {
firstColumnLabel: _construct1StColumnLabel(this),
extraStyle: {},
rows: [],
rowMultiplier: 0,
hasMoreRows: false,
itemsPerScroll: this.props.itemsPerScroll ? this.props.itemsPerScroll : 100
};
Expand Down
28 changes: 19 additions & 9 deletions dist/react-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -887,7 +887,7 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
var totalHeight = target.find("tbody").height();
if( scrolled / (totalHeight-scrolledHeight) > .8 ){
this.setState({
rowMultiplier: this.state.rowMultiplier + 1
rows: this.addMoreRows(true)
});
}
},
Expand Down Expand Up @@ -922,25 +922,36 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
adjustHeaders.call(this);
bindHeadersToMenu($(this.getDOMNode()));
},
addMoreRows: function(){
addMoreRows: function(calledFromScroll){
if( this.props.justAdded ){
console.log("just added");
this.props.justAdded = false;
return this.state.rows;
}
console.log("rasterizing");
var rasterizedData = rasterizeTree({
node: this.state.rootNode,
firstColumn: this.state.columnDefs[0],
selectedDetailRows: this.state.selectedDetailRows
});

if( !calledFromScroll )
this.props.rowMultiplier = this.props.rowMultiplier ? this.props.rowMultiplier : 0;
else
this.props.rowMultiplier = (this.props.rowMultiplier === undefined ? 0 : this.props.rowMultiplier + 1);

var upperBound = (this.state.rowMultiplier + 1) * this.state.itemsPerScroll;
var upperBound = (this.props.rowMultiplier + 1) * this.state.itemsPerScroll;
var rowsToDisplay = [];

if( this.state.rows.length < upperBound && this.state.rows.length < rasterizedData.length ) {
var lowerBound = this.state.rowMultiplier * this.state.itemsPerScroll;
if( calledFromScroll && this.state.rows.length < upperBound && this.state.rows.length < rasterizedData.length ) {
var lowerBound = this.state.rows.length;
rowsToDisplay = rasterizedData.slice(lowerBound, upperBound);
this.state.rows = this.state.rows.concat(rowsToDisplay.map(rowMapper, this));
this.props.justAdded = true;
return this.state.rows.concat(rowsToDisplay.map(rowMapper, this))
}
else {
rowsToDisplay = rasterizedData.slice(0, upperBound);
this.state.rows = rowsToDisplay.map(rowMapper, this);
return rowsToDisplay.map(rowMapper, this)
}
},
render: function () {
Expand All @@ -958,7 +969,7 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
this.state.rows = rowsToDisplay.map(rowMapper, this);
}
else{
this.addMoreRows();
this.state.rows = this.addMoreRows();
}

var headers = buildHeaders(this);
Expand Down Expand Up @@ -1288,7 +1299,6 @@ function _computePageDisplayRange(currentPage, maxDisplayedPages) {
firstColumnLabel: _construct1StColumnLabel(this),
extraStyle: {},
rows: [],
rowMultiplier: 0,
hasMoreRows: false,
itemsPerScroll: this.props.itemsPerScroll ? this.props.itemsPerScroll : 100
};
Expand Down
4 changes: 2 additions & 2 deletions dist/react-table.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/exporting_demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<!--<link rel="stylesheet" href="../src/scss/ReactTable.css"/>-->
<link rel="stylesheet" href="../dist/react-table.css"/>

<!--<script src="../dist/react-table.js"></script>-->
<!--<script src="../dist/react-table2.js"></script>-->
<script src="../build/DOMBuilder.js"></script>
<script src="../build/ReactTableEventHandlers.js"></script>
<script src="../build/ReactTable.js"></script>
Expand Down
1 change: 1 addition & 0 deletions examples/exporting_demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $(function () {
//groupBy: groupBy,
//disableInfiniteScrolling: true,
//itemsPerScroll: 500,
pageSize: 1000,
rowKey: 'id',
customMenuItems: {
Definition: {
Expand Down
27 changes: 19 additions & 8 deletions src/ReactTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ var ReactTable = React.createClass({
var totalHeight = target.find("tbody").height();
if( scrolled / (totalHeight-scrolledHeight) > .8 ){
this.setState({
rowMultiplier: this.state.rowMultiplier + 1
rows: this.addMoreRows(true)
});
}
},
Expand Down Expand Up @@ -208,25 +208,36 @@ var ReactTable = React.createClass({
adjustHeaders.call(this);
bindHeadersToMenu($(this.getDOMNode()));
},
addMoreRows: function(){
addMoreRows: function(calledFromScroll){
if( this.props.justAdded ){
console.log("just added");
this.props.justAdded = false;
return this.state.rows;
}
console.log("rasterizing");
var rasterizedData = rasterizeTree({
node: this.state.rootNode,
firstColumn: this.state.columnDefs[0],
selectedDetailRows: this.state.selectedDetailRows
});

if( !calledFromScroll )
this.props.rowMultiplier = this.props.rowMultiplier ? this.props.rowMultiplier : 0;
else
this.props.rowMultiplier = (this.props.rowMultiplier === undefined ? 0 : this.props.rowMultiplier + 1);

var upperBound = (this.state.rowMultiplier + 1) * this.state.itemsPerScroll;
var upperBound = (this.props.rowMultiplier + 1) * this.state.itemsPerScroll;
var rowsToDisplay = [];

if( this.state.rows.length < upperBound && this.state.rows.length < rasterizedData.length ) {
var lowerBound = this.state.rowMultiplier * this.state.itemsPerScroll;
if( calledFromScroll && this.state.rows.length < upperBound && this.state.rows.length < rasterizedData.length ) {
var lowerBound = this.state.rows.length;
rowsToDisplay = rasterizedData.slice(lowerBound, upperBound);
this.state.rows = this.state.rows.concat(rowsToDisplay.map(rowMapper, this));
this.props.justAdded = true;
return this.state.rows.concat(rowsToDisplay.map(rowMapper, this))
}
else {
rowsToDisplay = rasterizedData.slice(0, upperBound);
this.state.rows = rowsToDisplay.map(rowMapper, this);
return rowsToDisplay.map(rowMapper, this)
}
},
render: function () {
Expand All @@ -244,7 +255,7 @@ var ReactTable = React.createClass({
this.state.rows = rowsToDisplay.map(rowMapper, this);
}
else{
this.addMoreRows();
this.state.rows = this.addMoreRows();
}

var headers = buildHeaders(this);
Expand Down
1 change: 0 additions & 1 deletion src/ReactTableEventHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ function ReactTableGetInitialState() {
firstColumnLabel: _construct1StColumnLabel(this),
extraStyle: {},
rows: [],
rowMultiplier: 0,
hasMoreRows: false,
itemsPerScroll: this.props.itemsPerScroll ? this.props.itemsPerScroll : 100
};
Expand Down

0 comments on commit 338492e

Please sign in to comment.