Merge commit '410c64b14385c625dac32c4b0b657607fbd10548' into upmerge_to_v1

Author: wcjordan

.travis.yml

@@ -2,5 +2,7 @@ language: node_js
 node_js:
   - "7"
   - "6"
-before_script:
-  - npm install react react-dom
+  - "5"
+  - "4"
+install:
+  - yarn install

examples/LongClickExample.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright Schrodinger, LLC
+ */
+
+'use strict';
+
+const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
+const { TextCell } = require('./helpers/cells');
+const { Table, Column, Cell } = require('fixed-data-table-2');
+const React = require('react');
+
+class LongClickExample extends React.Component {
+
+  longClickTimer = null;
+
+  displayColumns = {
+    firstName: 'First Name',
+    lastName: 'Last Name',
+    city: 'City',
+    street: 'zipCode',
+  };
+
+  constructor(props) {
+    super(props);
+
+    var dataList = new FakeObjectDataListStore(1000000);
+
+    this.state = {
+      dataList,
+      columns: this.getColumns(),
+      longPressedRowIndex: -1,
+    };
+  }
+
+  handleRowMouseDown(rowIndex) {
+    this.cancelLongClick();
+    this.longClickTimer = setTimeout(() => {
+      this.setState({
+        longPressedRowIndex: rowIndex
+      });
+    }, 1000);
+  }
+
+  handleRowMouseUp() {
+    this.cancelLongClick();
+  }
+
+  cancelLongClick() {
+    if (this.longClickTimer) {
+      clearTimeout(this.longClickTimer);
+      this.longClickTimer = null;
+    }
+  }
+
+  getColumns() {
+    let columns = [];
+
+    Object.keys(this.displayColumns).forEach(columnKey => {
+      columns.push(
+        <Column
+          key={columnKey}
+          columnKey={columnKey}
+          flexGrow={2}
+          header={<Cell>{columns[columnKey]}</Cell>}
+          cell={cell => this.getCell(cell.rowIndex, cell.columnKey)}
+          width={100}
+        />);
+    });
+
+    return columns;
+  }
+
+  getCell(rowIndex, columnKey) {
+    let isCellHighlighted = this.state.longPressedRowIndex === rowIndex;
+
+    let rowStyle = {
+      backgroundColor: isCellHighlighted ? 'yellow' : 'transparent',
+      width: '100%',
+      height: '100%'
+    }
+
+    return <TextCell style={rowStyle}
+      data={this.state.dataList}
+      rowIndex={rowIndex}
+      columnKey={columnKey} />;
+  }
+
+  render() {
+    return (
+      <Table
+        rowHeight={50}
+        headerHeight={50}
+        rowsCount={this.state.dataList.getSize()}
+        width={1000}
+        height={500}
+        onRowMouseDown={(event, rowIndex) => { this.handleRowMouseDown(rowIndex); }}
+        onRowMouseUp={(event, rowIndex) => { this.handleRowMouseUp(rowIndex); }}
+        {...this.props}>
+        {this.state.columns}
+      </Table>
+    );
+  }
+}
+
+module.exports = LongClickExample;

site/Constants.js

@@ -144,6 +144,12 @@ exports.ExamplePages = {
     title: 'Owner Height',
     description: 'A table example that displays a table footer sticking to the screen.'
   },
+  LONG_CLICK_EXAMPLE: {
+    location: 'example-long-click.html',
+    fileName: 'LongClickExample.js',
+    title: 'Row Long Click',
+    description: 'A table example that highlights a row after a long click',
+  },
   CONTEXT_EXAMPLE: {
     location: 'example-context.html',
     fileName: 'ContextExample.js',

site/examples/ExamplesPage.js

@@ -46,13 +46,14 @@ var EXAMPLE_COMPONENTS = {
   [ExamplePages.FOOTER_EXAMPLE.location]: require('../../examples/FooterExample'),
   [ExamplePages.MAX_HEIGHT_EXAMPLE.location]: require('../../examples/MaxHeightExample'),
   [ExamplePages.OWNER_HEIGHT_EXAMPLE.location]: require('../../examples/OwnerHeightExample'),
+  [ExamplePages.LONG_CLICK_EXAMPLE.location]: require('../../examples/LongClickExample'),
   [ExamplePages.CONTEXT_EXAMPLE.location]: require('../../examples/ContextExample'),
 };
 
 class ExamplesPage extends React.Component {
   constructor(props) {
     super(props);
-    
+
     this.state = {
       renderPage: false
     };

src/FixedDataTable.js

@@ -303,6 +303,11 @@ class FixedDataTable extends React.Component {
      */
     onRowMouseDown: PropTypes.func,
 
+    /**
+     * Callback that is called when a mouse-up event happens on a row.
+     */
+    onRowMouseUp: PropTypes.func,
+
     /**
      * Callback that is called when a mouse-enter event happens on a row.
      */
@@ -703,6 +708,7 @@ class FixedDataTable extends React.Component {
         offsetTop={offsetTop}
         onRowClick={props.onRowClick}
         onRowDoubleClick={props.onRowDoubleClick}
+        onRowMouseUp={props.onRowMouseUp}
         onRowMouseDown={props.onRowMouseDown}
         onRowMouseEnter={props.onRowMouseEnter}
         onRowMouseLeave={props.onRowMouseLeave}

src/FixedDataTableBufferedRows.js

@@ -26,6 +26,7 @@ class FixedDataTableBufferedRows extends React.Component {
     onRowClick: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
     onRowMouseDown: PropTypes.func,
+    onRowMouseUp: PropTypes.func,
     onRowMouseEnter: PropTypes.func,
     onRowMouseLeave: PropTypes.func,
     rowClassNameGetter: PropTypes.func,
@@ -118,6 +119,7 @@ class FixedDataTableBufferedRows extends React.Component {
           onClick={props.onRowClick}
           onDoubleClick={props.onRowDoubleClick}
           onMouseDown={props.onRowMouseDown}
+          onMouseUp={props.onRowMouseUp}
           onMouseEnter={props.onRowMouseEnter}
           onMouseLeave={props.onRowMouseLeave}
           className={joinClasses(

src/FixedDataTableRow.js

@@ -197,6 +197,7 @@ class FixedDataTableRowImpl extends React.Component {
         onClick={this.props.onClick ? this._onClick : null}
         onDoubleClick={this.props.onDoubleClick ? this._onDoubleClick : null}
         onMouseDown={this.props.onMouseDown ? this._onMouseDown : null}
+        onMouseUp={this.props.onMouseUp ? this._onMouseUp : null}
         onMouseEnter={this.props.onMouseEnter ? this._onMouseEnter : null}
         onMouseLeave={this.props.onMouseLeave ? this._onMouseLeave : null}
         style={style}>
@@ -271,6 +272,10 @@ class FixedDataTableRowImpl extends React.Component {
     this.props.onDoubleClick(event, this.props.index);
   };
 
+  _onMouseUp = (/*object*/ event) => {
+    this.props.onMouseUp(event, this.props.index);
+  };
+
   _onMouseDown = (/*object*/ event) => {
     this.props.onMouseDown(event, this.props.index);
   };