Remove ReactDataGrid dependency from addons bundle (#1272)

* Fix some zIndex issues around frozen cells and editors

* Remove rdg dependency from addons package

* Fix object assign

* Adress PR comments

* Fix tests

* Fix lint error

* add ref to draggable header cell

* Adress PR comments

config/karma.js

@@ -87,7 +87,10 @@ module.exports = function (config) {
         loaders: webpackConfig.module.loaders
       },
       resolve: {
-        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
+        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'],
+        alias: {
+          common: path.resolve('packages/common/')
+        }
       },
       plugins: [
         new RewirePlugin()

config/webpack.common.config.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const argv = require('minimist')(process.argv.slice(2));
 const RELEASE = argv.release;
+const path = require('path');
 
 function getPlugins() {
   const nodeEnv = RELEASE ? '"production"' : '"development"';
@@ -36,7 +37,8 @@ const config = {
       amd: 'react-dom'
     },
     'react/addons': 'React',
-    moment: 'moment'
+    moment: 'moment',
+    immutable: 'immutable'
   },
   module: {
     loaders: [
@@ -45,6 +47,11 @@ const config = {
     ]
   },
   plugins: getPlugins(),
+  resolve: {
+    alias: {
+      common: path.resolve('packages/common/')
+    }
+  },
   postLoaders: [
     {
       test: /\.js$/,

packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js → packages/common/cells/headerCells/FilterableHeaderCell.js

@@ -1,5 +1,5 @@
-const React              = require('react');
-const ExcelColumn        = require('../../PropTypeShapes/ExcelColumn');
+import React from 'react';
+import ExcelColumn from 'common/prop-shapes/ExcelColumn';
 import PropTypes from 'prop-types';
 
 class FilterableHeaderCell extends React.Component {

packages/common/constants/index.js

@@ -0,0 +1,29 @@
+import * as CellNavigationMode from './CellNavigationMode';
+import * as EventTypes from './EventTypes';
+import keyMirror from 'keymirror';
+
+
+const UpdateActions = keyMirror({
+  CELL_UPDATE: null,
+  COLUMN_FILL: null,
+  COPY_PASTE: null,
+  CELL_DRAG: null
+});
+
+const DragItemTypes = {
+  Column: 'column'
+};
+
+const CellExpand = {
+  DOWN_TRIANGLE: String.fromCharCode(9660),
+  RIGHT_TRIANGLE: String.fromCharCode(9654)
+};
+
+
+export {
+  CellNavigationMode,
+  EventTypes,
+  UpdateActions,
+  CellExpand,
+  DragItemTypes
+};

packages/react-data-grid/src/editors/CheckboxEditor.js → packages/common/editors/CheckboxEditor.js

@@ -1,6 +1,6 @@
 const React = require('react');
 import PropTypes from 'prop-types';
-require('../../../../themes/react-data-grid-checkbox.css');
+require('../../../themes/react-data-grid-checkbox.css');
 
 class CheckboxEditor extends React.Component {
   static propTypes = {

packages/react-data-grid/src/editors/EditorBase.js → packages/common/editors/EditorBase.js

@@ -1,6 +1,6 @@
 const React                   = require('react');
 const ReactDOM = require('react-dom');
-const ExcelColumn             = require('../PropTypeShapes/ExcelColumn');
+import ExcelColumn from 'common/prop-shapes/ExcelColumn';
 import PropTypes from 'prop-types';
 
 class EditorBase extends React.Component {

packages/react-data-grid/src/editors/EditorContainer.js → packages/common/editors/EditorContainer.js

@@ -2,11 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import joinClasses from 'classnames';
 import SimpleTextEditor from './SimpleTextEditor';
-import isFunction from'../utils/isFunction';
-import { isKeyPrintable, isCtrlKeyHeldDown } from '../utils/keyboardUtils';
-import zIndexes from '../constants/zIndexes';
-import columnUtils from '../ColumnUtils';
-require('../../../../themes/react-data-grid-core.css');
+import {isFunction} from 'common/utils';
+import { isKeyPrintable, isCtrlKeyHeldDown } from 'common/utils/keyboardUtils';
+import zIndexes from 'common/constants/zIndexes';
+require('../../../themes/react-data-grid-core.css');
+
+const isFrozen = column => column.frozen === true || column.locked === true;
 
 class EditorContainer extends React.Component {
   static displayName = 'EditorContainer';
@@ -322,8 +323,8 @@ class EditorContainer extends React.Component {
 
   render() {
     const { left, top, width, height, column, scrollLeft } = this.props;
-    const editorLeft = columnUtils.isFrozen(column) ? left + scrollLeft : left;
-    const zIndex = columnUtils.isFrozen(column) ? zIndexes.FROZEN_EDITOR_CONTAINER : zIndexes.EDITOR_CONTAINER;
+    const editorLeft = isFrozen(column) ? left + scrollLeft : left;
+    const zIndex = isFrozen(column) ? zIndexes.FROZEN_EDITOR_CONTAINER : zIndexes.EDITOR_CONTAINER;
     const style = { position: 'absolute', height, width, zIndex, transform: `translate(${editorLeft}px, ${top}px)` };
     return (
         <div style={style} className={this.getContainerClass()} onBlur={this.handleBlur} onKeyDown={this.onKeyDown} onContextMenu={this.handleRightClick}>

packages/react-data-grid/src/RowComparer.js → packages/common/utils/RowComparer.js

@@ -1,20 +1,17 @@
-import ColumnMetrics from './ColumnMetrics';
-
-export const shouldRowUpdate = (nextProps, currentProps) => {
-  return !(ColumnMetrics.sameColumns(currentProps.columns, nextProps.columns, ColumnMetrics.sameColumn)) ||
-    nextProps.row !== currentProps.row ||
-    currentProps.colOverscanStartIdx !== nextProps.colOverscanStartIdx ||
-    currentProps.colOverscanEndIdx !== nextProps.colOverscanEndIdx ||
-    currentProps.colVisibleStartIdx !== nextProps.colVisibleStartIdx ||
-    currentProps.colVisibleEndIdx !== nextProps.colVisibleEndIdx ||
-    currentProps.isSelected !== nextProps.isSelected ||
-    currentProps.isScrolling !== nextProps.isScrolling ||
-    nextProps.height !== currentProps.height ||
-    currentProps.isOver !== nextProps.isOver ||
-    currentProps.expandedRows !== nextProps.expandedRows ||
-    currentProps.canDrop !== nextProps.canDrop ||
-    currentProps.forceUpdate === true ||
-    currentProps.extraClasses !== nextProps.extraClasses;
-};
-
-export default shouldRowUpdate;
+export default function shouldRowUpdate(nextProps, currentProps) {
+  return currentProps.columns !== nextProps.columns ||
+    nextProps.row !== currentProps.row ||
+    currentProps.colOverscanStartIdx !== nextProps.colOverscanStartIdx ||
+    currentProps.colOverscanEndIdx !== nextProps.colOverscanEndIdx ||
+    currentProps.colVisibleStartIdx !== nextProps.colVisibleStartIdx ||
+    currentProps.colVisibleEndIdx !== nextProps.colVisibleEndIdx ||
+    currentProps.isSelected !== nextProps.isSelected ||
+    currentProps.isScrolling !== nextProps.isScrolling ||
+    nextProps.height !== currentProps.height ||
+    currentProps.isOver !== nextProps.isOver ||
+    currentProps.expandedRows !== nextProps.expandedRows ||
+    currentProps.canDrop !== nextProps.canDrop ||
+    currentProps.forceUpdate === true ||
+    currentProps.extraClasses !== nextProps.extraClasses;
+}
+

packages/common/utils/index.js

@@ -0,0 +1,50 @@
+import { List, Iterable, Map } from 'immutable';
+
+export const isColumnsImmutable = (columns) => {
+  return (typeof Immutable !== 'undefined' && (columns instanceof Immutable.List));
+};
+
+export const isEmptyArray = (obj) => {
+  return Array.isArray(obj) && obj.length === 0;
+};
+
+export const isFunction = (functionToCheck) => {
+  let getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};
+
+export const isEmptyObject = (obj) => {
+  return Object.keys(obj).length === 0 && obj.constructor === Object;
+};
+
+export const isImmutableCollection = objToVerify => {
+  return Iterable.isIterable(objToVerify);
+};
+
+export const getMixedTypeValueRetriever = (isImmutable) => {
+  let retObj = {};
+  const retriever = (item, key) => { return item[key]; };
+  const immutableRetriever =  (immutable, key) => { return immutable.get(key); };
+
+  retObj.getValue = isImmutable ? immutableRetriever : retriever;
+
+  return retObj;
+};
+
+export const isImmutableMap = Map.isMap;
+
+export const last = arrayOrList => {
+  if (arrayOrList == null) {
+    throw new Error('arrayOrCollection is null');
+  }
+
+  if (List.isList(arrayOrList)) {
+    return arrayOrList.last();
+  }
+
+  if (Array.isArray(arrayOrList)) {
+    return arrayOrList[arrayOrList.length - 1];
+  }
+
+  throw new Error('Cant get last of: ' + typeof(arrayOrList));
+};

packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js

@@ -2,9 +2,8 @@ import 'react-select/dist/react-select.css';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
-import { utils, shapes } from 'react-data-grid';
-const { isEmptyArray } = utils;
-const { ExcelColumn } = shapes;
+import {isEmptyArray} from 'common/utils';
+import ExcelColumn from 'common/prop-shapes/ExcelColumn';
 
 class AutoCompleteFilter extends React.Component {
   constructor(props) {

packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { shapes } from 'react-data-grid';
-const { ExcelColumn } = shapes;
+import ExcelColumn from 'common/prop-shapes/ExcelColumn';
+
 const RuleType = {
   Number: 1,
   Range: 2,

packages/react-data-grid-addons/src/data/RowFilterer.js

@@ -1,5 +1,4 @@
-import { utils } from 'react-data-grid';
-const { getMixedTypeValueRetriever, isImmutableCollection } = utils;
+import {isImmutableCollection, getMixedTypeValueRetriever} from 'common/utils';
 
 const filterRows = (filters, rows = []) => {
   return rows.filter(r => {

packages/react-data-grid-addons/src/data/RowGrouper.js

@@ -1,6 +1,6 @@
-import { utils } from 'react-data-grid';
+import {isImmutableCollection} from 'common/utils';
 import Resolver from './RowGrouperResolver';
-const { isImmutableCollection } = utils;
+
 
 class RowGrouper {
 

packages/react-data-grid-addons/src/data/RowGrouperResolver.js

@@ -1,7 +1,6 @@
 import {List} from 'immutable';
 import groupBy from 'lodash/groupBy';
-import { utils } from 'react-data-grid';
-const { getMixedTypeValueRetriever, isImmutableMap } = utils;
+import { isImmutableMap, getMixedTypeValueRetriever} from 'common/utils';
 
 export default class RowGrouperResolver {
 

packages/react-data-grid-addons/src/data/RowSorter.js

@@ -1,5 +1,4 @@
-import { utils } from 'react-data-grid';
-const { getMixedTypeValueRetriever, isImmutableCollection } = utils;
+import {getMixedTypeValueRetriever, isImmutableCollection} from 'common/utils';
 
 const comparer = (a, b) => {
   if (a > b) {

packages/react-data-grid-addons/src/data/Selectors.js

@@ -1,6 +1,5 @@
 import { createSelector } from 'reselect';
-import { utils } from 'react-data-grid';
-const { isEmptyArray, isEmptyObject } = utils;
+import {isEmptyObject, isEmptyArray} from 'common/utils';
 const groupRows = require('./RowGrouper');
 const filterRows = require('./RowFilterer');
 const sortRows = require('./RowSorter');

packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js

@@ -1,7 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DragSource, DropTarget } from 'react-dnd';
-import { HeaderCell } from 'react-data-grid';
+
+class HeaderCell extends React.Component {
+  static propTypes = {
+    column: PropTypes.isRequired,
+    height: PropTypes.number.isRequired,
+    className: PropTypes.string
+  };
+
+  getStyle() {
+    return {
+      width: this.props.column.width,
+      left: this.props.column.left,
+      display: 'inline-block',
+      position: 'absolute',
+      height: this.props.height,
+      margin: 0,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    };
+  }
+
+  setScrollLeft = (scrollLeft) => {
+    if (this.node) {
+      node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`;
+      node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`;
+    }
+  };
+
+  render() {
+    return (
+      <div ref={node => this.node = node} className="react-grid-HeaderCell" style={this.getStyle()}>
+        {this.props.column.name}
+      </div>
+    );
+  }
+}
 
 class DraggableHeaderCell extends React.Component {
   render() {
@@ -26,7 +61,7 @@ class DraggableHeaderCell extends React.Component {
           style={{ width: 0, cursor: 'move', opacity }}
           className={isOver && canDrop ? 'rdg-can-drop' : ''}
         >
-          <HeaderCell {...this.props} />
+          <HeaderCell {...this.props}/>
         </div>
       )
     );

packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js

@@ -3,13 +3,14 @@ import { shallow } from 'enzyme';
 
 import DraggableContainer from '../DraggableContainer';
 import DraggableHeaderCell from '../DraggableHeaderCell';
-import { HeaderCell } from 'react-data-grid';
+
+const HeaderCell = () => <div/>;
 
 describe('<DraggableHeaderCell />', () => {
   it('should render grid HeaderCell wrapper with cursor: move ', () => {
     const wrapper = shallow(
       <DraggableContainer>
-        <DraggableHeaderCell />
+        <DraggableHeaderCell renderHeaderCell={() => <HeaderCell/>}/>
       </DraggableContainer>
     );
     expect(wrapper.find(HeaderCell));

packages/react-data-grid-addons/src/draggable/DragDropContainer.js

@@ -2,8 +2,7 @@ import React, {Component} from 'react';
 import html5DragDropContext from '../shared/html5DragDropContext';
 import DraggableHeaderCell from './DraggableHeaderCell';
 import RowDragLayer from './RowDragLayer';
-import { utils } from 'react-data-grid';
-const { isColumnsImmutable } = utils;
+import {isColumnsImmutable} from 'common/utils';
 import PropTypes from 'prop-types';
 
 class DraggableContainer extends Component {

packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js

@@ -1,8 +1,7 @@
 import { DragSource } from 'react-dnd';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import { _constants, HeaderCell } from 'react-data-grid';
-const { DragItemTypes } = _constants;
+import { DragItemTypes } from 'common/constants';
 
 class DraggableHeaderCell extends Component {
 
@@ -16,24 +15,26 @@ class DraggableHeaderCell extends Component {
   }
 
   setScrollLeft(scrollLeft) {
-    let node = ReactDOM.findDOMNode(this);
-    node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`;
-    node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`;
+    if (this.node) {
+      node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`;
+      node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`;
+    }
   }
 
   render() {
     const { connectDragSource, isDragging} = this.props;
     if (isDragging) {
       return null;
     }
-    return connectDragSource(<div style={{cursor: 'move'}}><HeaderCell {...this.props}/></div>);
+    return connectDragSource(<div ref={node => this.node = node} style={{cursor: 'move'}}>{this.props.renderHeaderCell(this.props)}</div>);
   }
 }
 
 DraggableHeaderCell.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   connectDragPreview: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired
+  isDragging: PropTypes.bool.isRequired,
+  renderHeaderCell: PropTypes.func.isRequired
 };
 
 function collect(connect, monitor) {