Version 0.8.7

schrodinger · Dec 6, 2017 · 59b74ef · 59b74ef
1 parent e8f5a72
commit 59b74ef
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 82 deletions.
diff --git a/dist/fixed-data-table-base.css b/dist/fixed-data-table-base.css
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.

diff --git a/dist/fixed-data-table-base.min.css b/dist/fixed-data-table-base.min.css
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.

diff --git a/dist/fixed-data-table-style.css b/dist/fixed-data-table-style.css
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.

diff --git a/dist/fixed-data-table-style.min.css b/dist/fixed-data-table-style.min.css
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.

diff --git a/dist/fixed-data-table.css b/dist/fixed-data-table.css
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.

diff --git a/dist/fixed-data-table.js b/dist/fixed-data-table.js
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.
@@ -2799,7 +2799,7 @@ var FixedDataTableRoot = {
   Table: _FixedDataTable2.default
 };
 
-FixedDataTableRoot.version = '0.8.6';
+FixedDataTableRoot.version = '0.8.7';
 module.exports = FixedDataTableRoot;
 
 /***/ }),
@@ -4112,11 +4112,13 @@ var FixedDataTable = (0, _createReactClass2.default)({
       x = x < 0 ? 0 : x;
       x = x > this.state.maxScrollX ? this.state.maxScrollX : x;
 
+      var roundedX = Math.round(x);
+
       //NOTE (asif) This is a hacky workaround to prevent FDT from setting its internal state
       var onHorizontalScroll = this.props.onHorizontalScroll;
-      if (onHorizontalScroll ? onHorizontalScroll(x) : true) {
+      if (onHorizontalScroll ? onHorizontalScroll(roundedX) : true) {
         this.setState({
-          scrollX: x
+          scrollX: roundedX
         });
       }
     }
@@ -4131,10 +4133,13 @@ var FixedDataTable = (0, _createReactClass2.default)({
     if (!this._isScrolling) {
       this._didScrollStart();
     }
+
+    var roundedScrollPos = Math.round(scrollPos);
+
     var onHorizontalScroll = this.props.onHorizontalScroll;
-    if (onHorizontalScroll ? onHorizontalScroll(scrollPos) : true) {
+    if (onHorizontalScroll ? onHorizontalScroll(roundedScrollPos) : true) {
       this.setState({
-        scrollX: scrollPos
+        scrollX: roundedScrollPos
       });
     }
     this._didScrollStop();

diff --git a/dist/fixed-data-table.min.css b/dist/fixed-data-table.min.css
@@ -1,5 +1,5 @@
 /**
- * FixedDataTable v0.8.6 
+ * FixedDataTable v0.8.7 
  *
  * Copyright Schrodinger, LLC
  * All rights reserved.

diff --git a/dist/fixed-data-table.min.js b/dist/fixed-data-table.min.js
diff --git a/examples/ObjectDataExample.js b/examples/ObjectDataExample.js
@@ -9,78 +9,109 @@ const { DateCell, ImageCell, LinkCell, TextCell } = require('./helpers/cells');
 const { Table, Column, Cell } = require('fixed-data-table-2');
 const React = require('react');
 
-class ObjectDataExample extends React.Component {
-  constructor(props) {
-    super(props);
+const numOfRows = 5;
+const numOfCols = 4;
+const width = 800;
+const height = 500;
 
+class Example extends React.Component {
+	constructor(props) {
+  	super(props);
     this.state = {
-      dataList: new FakeObjectDataListStore(1000000),
+      columnText: 'No resize yet',
+      _rows: [],
+      dataLoading: false,
+      buttonText: "Start Data Load",
+      interval: ""
     };
+    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() {
-    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>
+    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>
     );
   }
-}
+};
 
-module.exports = ObjectDataExample;
+module.exports = Example;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fixed-data-table-2",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "A React table component designed to allow presenting thousands of rows of data.",
   "main": "main.js",
   "peerDependencies": {

diff --git a/src/FixedDataTableRoot.js b/src/FixedDataTableRoot.js
@@ -23,5 +23,5 @@ var FixedDataTableRoot = {
   Table: FixedDataTable,
 };
 
-FixedDataTableRoot.version = '0.8.6';
+FixedDataTableRoot.version = '0.8.7';
 module.exports = FixedDataTableRoot;