Remove Mixins (Comcast#1078)

* Remove ScrollShim mixin

* Convert Canvas to class component

* Fix ESLint errors

* Add HOC and Keyboard utils

* Remove keyboardHandlerMixin from EditorConfig

* Convert EditorContainer to a class component

* Remove displayName as it is inferred from the name of the class

* Add scrollUtils

* Remove KeyboardHandlerMixin from ReactDataGrid component

* Extract ViewportScrollMixin logic into viewportUtils

* Move ViewportScrollMix code to Viewport component

* Remove unused flow anotation

* Remove GridScrollMixin

* Add mising ReactDOM import

* Remove ColumnUtilsMixin from HeaderRow component

* Convert HeaderRow to a class component

* Remove displayName static property

* Remove ColumnUtilsMixin from Row component

* Revert "Remove displayName static property"

This reverts commit e46a22d.

* Revert "Convert HeaderRow to a class component"

This reverts commit bfd939d.

* Revert "Remove displayName as it is inferred from the name of the class"

This reverts commit 1858fd0.

* Revert "Convert EditorContainer to a class component"

This reverts commit e8ce7da.

* Revert "Fix ESLint errors"

This reverts commit 320b843.

* Revert "Add scrollUtils"

This reverts commit 4c5d43d.

* Revert "Convert Canvas to class component"

This reverts commit 87521bb.

* Add scrollUtils

* Remove MetricsComputatorMixin from the Grid component
(ReactDataGrid component adds the MetricsComputatorMixin so mixin methods are available to any child component via the context api, it does not need to be added to the Grid component)

* Remove MetricsComputatorMixin from ReadDataGrid component

* Remove ViewportScrollMixin from Viewport component

* Remove ColumnMetricsMixin from ReactDataGrid component

* Delete hocUtils as it is not used anywhere

* Set _mounted to false on componentWillUnmount

* Delete unused mixins

* Delete unused getRenderedColumnCount method

* Add tests for KeyboardHandlerMixins methods

* Use ref instead of React.findDOMNode

* Add unit tests for scrollUtils

* Add unit tests for viewportUtils

* Add unit tests for getRenderedColumnCount

* Add unit tests for getNextScrollState

* Add unit tests for keyboardUtils

* Fix unit tests

* Fix cel navigation for locked cells: Check if the node containes the class instead of strict equality

Author: amanmahajan7

packages/react-data-grid/src/Canvas.js

@@ -1,12 +1,11 @@
 const React = require('react');
 const createReactClass = require('create-react-class');
-const ReactDOM = require('react-dom');
 const joinClasses = require('classnames');
 import PropTypes from 'prop-types';
-const ScrollShim = require('./ScrollShim');
 const Row = require('./Row');
 const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape');
 const RowUtils = require('./RowUtils');
+import { createScrollShim } from './utils/scrollUtils';
 require('../../../themes/react-data-grid-core.css');
 
 import shallowEqual from 'fbjs/lib/shallowEqual';
@@ -15,7 +14,6 @@ import RowGroup from './RowGroup';
 
 const Canvas = createReactClass({
   displayName: 'Canvas',
-  mixins: [ScrollShim],
 
   propTypes: {
     rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
@@ -67,6 +65,38 @@ const Canvas = createReactClass({
     isScrolling: PropTypes.bool
   },
 
+  appendScrollShim() {
+    if (!this._scrollShim) {
+      const size = this._scrollShimSize();
+      const shim = createScrollShim(size);
+      this.canvas.appendChild(shim);
+      this._scrollShim = shim;
+    }
+    this._scheduleRemoveScrollShim();
+  },
+
+  _scrollShimSize(): { width: number; height: number } {
+    return {
+      width: this.props.width,
+      height: this.props.length * this.props.rowHeight
+    };
+  },
+
+  _scheduleRemoveScrollShim() {
+    if (this._scheduleRemoveScrollShimTimer) {
+      clearTimeout(this._scheduleRemoveScrollShimTimer);
+    }
+    this._scheduleRemoveScrollShimTimer = setTimeout(
+      this._removeScrollShim, 200);
+  },
+
+  _removeScrollShim() {
+    if (this._scrollShim) {
+      this._scrollShim.parentNode.removeChild(this._scrollShim);
+      this._scrollShim = undefined;
+    }
+  },
+
   getDefaultProps() {
     return {
       rowRenderer: Row,
@@ -136,7 +166,7 @@ const Canvas = createReactClass({
       this.setScrollLeft(this._scroll.scrollLeft);
     }
     if (this.props.scrollToRowIndex !== 0) {
-      this.div.scrollTop = Math.min(
+      this.canvas.scrollTop = Math.min(
         this.props.scrollToRowIndex * this.props.rowHeight,
         this.props.rowsCount * this.props.rowHeight - this.props.height
       );
@@ -152,7 +182,7 @@ const Canvas = createReactClass({
   },
 
   onScroll(e: any) {
-    if (ReactDOM.findDOMNode(this) !== e.target) {
+    if (this.canvas !== e.target) {
       return;
     }
     this.appendScrollShim();
@@ -183,15 +213,13 @@ const Canvas = createReactClass({
   },
 
   getScrollbarWidth() {
-    let scrollbarWidth = 0;
     // Get the scrollbar width
-    let canvas = ReactDOM.findDOMNode(this);
-    scrollbarWidth = canvas.offsetWidth - canvas.clientWidth;
+    const scrollbarWidth = this.canvas.offsetWidth - this.canvas.clientWidth;
     return scrollbarWidth;
   },
 
   getScroll() {
-    let {scrollTop, scrollLeft} = ReactDOM.findDOMNode(this);
+    const { scrollTop, scrollLeft } = this.canvas;
     return { scrollTop, scrollLeft };
   },
 
@@ -207,7 +235,7 @@ const Canvas = createReactClass({
 
     // Else use new rowSelection props
     if (this.props.rowSelection) {
-      let {keys, indexes, isSelectedKey} = this.props.rowSelection;
+      let { keys, indexes, isSelectedKey } = this.props.rowSelection;
       return RowUtils.isRowSelected(keys, indexes, isSelectedKey, row, idx);
     }
 
@@ -255,7 +283,7 @@ const Canvas = createReactClass({
     }
     let RowsRenderer = this.props.rowRenderer;
     if (typeof RowsRenderer === 'function') {
-      return <RowsRenderer {...props}/>;
+      return <RowsRenderer {...props} />;
     }
 
     if (React.isValidElement(this.props.rowRenderer)) {
@@ -266,7 +294,7 @@ const Canvas = createReactClass({
   renderPlaceholder(key: string, height: number): ?ReactElement {
     // just renders empty cells
     // if we wanted to show gridlines, we'd need classes and position as with renderScrollingPlaceholder
-    return (<div key={ key } style={{ height: height }}>
+    return (<div key={key} style={{ height: height }}>
       {
         this.props.columns.map(
           (column, idx) => <div style={{ width: column.width }} key={idx} />
@@ -325,10 +353,10 @@ const Canvas = createReactClass({
 
     return (
       <div
-        ref={(div) => {this.div = div;}}
+        ref={(div) => { this.canvas = div; }}
         style={style}
         onScroll={this.onScroll}
-        className={joinClasses('react-grid-Canvas', this.props.className, { opaque: this.props.cellMetaData.selected && this.props.cellMetaData.selected.active }) }>
+        className={joinClasses('react-grid-Canvas', this.props.className, { opaque: this.props.cellMetaData.selected && this.props.cellMetaData.selected.active })}>
         <RowsContainer
           width={this.props.width}
           rows={rows}

packages/react-data-grid/src/Cell.js

@@ -377,7 +377,7 @@ class Cell extends React.Component {
   };
 
   isFocusedOnCell = () => {
-    return document.activeElement && document.activeElement.className === 'react-grid-Cell';
+    return document.activeElement && document.activeElement.className.indexOf('react-grid-Cell') !== -1;
   };
 
   checkFocus = () => {