Skip to content

Commit

Permalink
Fix regression around column resize state being retained too aggressi…
Browse files Browse the repository at this point in the history 
…vely (schrodinger#278)

Fixes schrodinger#276
  • Loading branch information
@wcjordan
wcjordan authored Jan 9, 2018
1 parent 6d3c02a commit a483994
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 101 deletions.
163 changes: 66 additions & 97 deletions examples/ObjectDataExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,109 +9,78 @@ const { DateCell, ImageCell, LinkCell, TextCell } = require('./helpers/cells');
const { Table, Column, Cell } = require('fixed-data-table-2');
const React = require('react');

const numOfRows = 5;
const numOfCols = 4;
const width = 800;
const height = 500;
class ObjectDataExample extends React.Component {
constructor(props) {
super(props);

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
columnText: 'No resize yet',
_rows: [],
dataLoading: false,
buttonText: "Start Data Load",
interval: ""
dataList: new FakeObjectDataListStore(1000000),
};
this.onColumnResizeEndCallback = this.onColumnResizeEndCallback.bind(this);
this.render = this.render.bind(this);
}

componentWillMount() {
this.createRows();

this._columns = [];
for(var i = 0; i < numOfCols; i++) {
this._columns.push({ key: i, name: 'Col ' + i });
}
}

createRows() {
let rows = [];
for (let i = 0; i < numOfRows; i++) {
let rowValues = {};
for(var j=0; j < numOfCols; j++) {
rowValues[j] = (i * numOfCols + j);
}
rows.push(rowValues);
}

this.setState({_rows: rows});
}

onColumnResizeEndCallback(newWidth, columnKey) {
this.setState({columnText: 'Column ' + columnKey + ' updated with width ' + newWidth});
}

handleButtonClick() {
if (this.state.dataLoading) {
clearInterval(this.state.interval);
this.setState({dataLoading: false, buttonText: "Start Data Load"});
}
else {
let v = setInterval(() => {
let rows = this.state._rows;
let rowValues = {};
for (var j=0; j < numOfCols; j++) {
rowValues[j] = (numOfCols + j);
}
rows.push(rowValues);
this.setState({_rows: rows});
}, 100);
this.setState({dataLoading: true, buttonText: "Stop Data Load", interval: v});
}
}

render() {
return (
<div>
{this.state.columnText}
<button
onClick={this.handleButtonClick.bind(this)}
classname="btn btn-primary">{this.state.buttonText}
</button>
<Table
rowsCount={this.state._rows.length}
headerHeight={50}
rowHeight={50}
width={width}
height={height}
onColumnResizeEndCallback={this.onColumnResizeEndCallback}
>
{
this._columns
.map(c => c.key)
.map(field => (
<Column
columnKey={field}
key={field}
header={<Cell>{'Col' + field}</Cell>}
isResizable={true}
cell={({rowIndex}) => (
<Cell className="text-cell">
{this.state._rows[rowIndex][field]}
</Cell>
)}
allowCellsRecycling={true}
width={200}
/>
))
}
</Table>
</div>
var {dataList} = this.state;
return (
<Table
rowHeight={50}
headerHeight={50}
rowsCount={dataList.getSize()}
width={1000}
height={500}
{...this.props}>
<Column
columnKey="avatar"
cell={<ImageCell data={dataList} />}
fixed={true}
width={50}
/>
<Column
columnKey="firstName"
header={<Cell>First Name</Cell>}
cell={<LinkCell data={dataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="lastName"
header={<Cell>Last Name</Cell>}
cell={<TextCell data={dataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="city"
header={<Cell>City</Cell>}
cell={<TextCell data={dataList} />}
width={100}
/>
<Column
columnKey="street"
header={<Cell>Street</Cell>}
cell={<TextCell data={dataList} />}
width={200}
/>
<Column
columnKey="zipCode"
header={<Cell>Zip Code</Cell>}
cell={<TextCell data={dataList} />}
width={200}
/>
<Column
columnKey="email"
header={<Cell>Email</Cell>}
cell={<LinkCell data={dataList} />}
width={200}
/>
<Column
columnKey="date"
header={<Cell>DOB</Cell>}
cell={<DateCell data={dataList} />}
width={200}
/>
</Table>
);
}
};
}

module.exports = Example;
module.exports = ObjectDataExample;
10 changes: 6 additions & 4 deletions src/FixedDataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1135,7 +1135,7 @@ var FixedDataTable = createReactClass({
}
}

// Figure out if the vertical scrollbar will be visible first,
// Figure out if the vertical scrollbar will be visible first,
// because it will determine the width of the table
var useGroupHeader = false;
var groupHeaderHeight = 0;
Expand All @@ -1155,7 +1155,7 @@ var FixedDataTable = createReactClass({
var maxScrollY = Math.max(0, scrollContentHeight - bodyHeight);

// If vertical scrollbar is necessary, adjust the table width to give it room
var adjustedWidth = props.width;
var adjustedWidth = props.width;
if (maxScrollY) {
adjustedWidth = adjustedWidth - Scrollbar.SIZE - 1;
}
Expand All @@ -1177,7 +1177,9 @@ var FixedDataTable = createReactClass({
}

var columnResizingData;
if (props.isColumnResizing || (oldState && oldState.isColumnResizing)) {
var continuingResizing = props.isColumnResizing === undefined &&
oldState && oldState.isColumnResizing;
if (props.isColumnResizing || continuingResizing) {
columnResizingData = oldState && oldState.columnResizingData;
} else {
columnResizingData = EMPTY_OBJECT;
Expand Down Expand Up @@ -1208,7 +1210,7 @@ var FixedDataTable = createReactClass({
);

var lastScrollToColumn = oldState ? oldState.scrollToColumn : undefined;
if (props.scrollToColumn !== null
if (props.scrollToColumn !== null
&& props.scrollToColumn !== lastScrollToColumn
&& columnInfo.bodyScrollableColumns.length > 0) {
// If selected column is a fixed column, don't scroll
Expand Down

0 comments on commit a483994

Please sign in to comment.