Merge pull request #1116 from adazzle/am-react-16

React 16 upgrade
adazzle · Feb 16, 2018 · 83f7f3e · 83f7f3e
2 parents 31c9b1a + 305367b
commit 83f7f3e
Show file tree

Hide file tree

Showing 42 changed files with 499 additions and 634 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -6,10 +6,7 @@ const config =  {
     'react-data-grid-addons/dist/react-data-grid-addons': ['./packages/react-data-grid-addons/src'],
     'react-data-grid/dist/react-data-grid.min': ['./packages/react-data-grid/src'],
     'react-data-grid-addons/dist/react-data-grid-addons.min': ['./packages/react-data-grid-addons/src'],
-    'react-data-grid-examples/dist/shared': './packages/react-data-grid-examples/src/shared.js',
-    'react-data-grid-examples/dist/examples': './packages/react-data-grid-examples/src/examples.js',
-    'react-data-grid-examples/dist/index': './packages/react-data-grid-examples/src/index.js',
-    'react-data-grid-examples/dist/documentation': './packages/react-data-grid-examples/src/documentation.js'
+    'react-data-grid-examples/dist/index': './packages/react-data-grid-examples/src'
   },
   output: {
     path: './packages',

diff --git a/package.json b/package.json
@@ -23,23 +23,23 @@
     "react-component"
   ],
   "peerDependencies": {
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "dependencies": {
-    "classnames": "^1.2.0",
+    "classnames": "^2.2.5",
     "es5-shim": "^4.0.3",
-    "fbjs": "^0.6.1",
     "fs-extra": "^0.30.0",
-    "object-assign": "^2.0.0",
+    "keymirror": "^0.1.1",
+    "object-assign": "^4.1.1",
     "prop-types": "^15.5.10",
     "react-contextmenu": "^2.9.2",
-    "react-dnd": "^2.1.4",
-    "react-dnd-html5-backend": "^2.1.2",
-    "react-input-autosize": "1.1.0",
-    "react-select": "^1.0.0-beta14",
+    "react-dnd": "^2.5.4",
+    "react-dnd-html5-backend": "^2.5.4",
+    "react-select": "^1.2.1",
     "reselect": "^2.5.1",
-    "ron-react-autocomplete": "^4.0.5"
+    "ron-react-autocomplete": "^4.0.5",
+    "shallowequal": "^1.0.2"
   },
   "devDependencies": {
     "avcoveralls": "^1.0.0",
@@ -57,7 +57,8 @@
     "copy-dir": "^0.3.0",
     "css-loader": "^0.26.0",
     "del": "^1.2.1",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^1.10.3",
     "eslint-loader": "^1.2.0",
     "eslint-plugin-react": "^3.15.0",
@@ -69,7 +70,7 @@
     "immutable": "^3.7.3",
     "istanbul-instrumenter-loader": "^0.1.2",
     "jasmine-core": "2.6.1",
-    "jasmine-enzyme": "^1.2.0",
+    "jasmine-enzyme": "^4.2.0",
     "karma": "^1.1.0",
     "karma-chrome-launcher": "^0.2.0",
     "karma-coverage": "^0.4.0",
@@ -88,14 +89,12 @@
     "mkdirp": "^0.5.1",
     "moment": "^2.10.6",
     "node-dir": "^0.1.12",
-    "object-assign": "^2.1.1",
     "open": "0.0.5",
-    "react": "^15.6.2",
-    "react-addons-perf": "^15.4.2",
-    "react-dnd-test-backend": "^1.0.2",
+    "react": "^16.2.0",
+    "react-dnd-test-backend": "^2.5.4",
     "react-docgen": "^2.8.2",
-    "react-dom": "^15.6.2",
-    "react-test-renderer": "^15.6.2",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "rewire": "^2.1.3",
     "rewire-webpack": "^1.0.0",
     "run-sequence": "^1.2.2",

diff --git a/packages/react-data-grid-addons/src/__tests__/Grid.spec.js b/packages/react-data-grid-addons/src/__tests__/Grid.spec.js
@@ -86,7 +86,7 @@ describe('Grid', function() {
     };
 
     this.componentWrapper = this.createComponent();
-    this.component = this.componentWrapper.node;
+    this.component = this.componentWrapper.instance();
   });
 
   it('should create a new instance of Grid', function() {
@@ -109,7 +109,7 @@ describe('Grid', function() {
     describe('for defaults props', function() {
       beforeEach(function() {
         const ToolBarStub = new StubComponent('Toolbar');
-        this.component = this.createComponent({ toolbar: <ToolBarStub /> }).node;
+        this.component = this.createComponent({ toolbar: <ToolBarStub /> }).instance();
         this.toolbarInstance = TestUtils.findRenderedComponentWithType(this.component, ToolBarStub);
         this.toolbarInstance.props.onToggleFilter();
         this.baseGrid = this.getBaseGrid();
@@ -131,7 +131,7 @@ describe('Grid', function() {
     describe('for a given row height prop', function() {
       beforeEach(function() {
         const ToolBarStub = new StubComponent('Toolbar');
-        this.component = this.createComponent({ toolbar: <ToolBarStub />, rowHeight: 40 }).node;
+        this.component = this.createComponent({ toolbar: <ToolBarStub />, rowHeight: 40 }).instance();
         this.toolbarInstance = TestUtils.findRenderedComponentWithType(this.component, ToolBarStub);
         this.toolbarInstance.props.onToggleFilter();
         this.baseGrid = this.getBaseGrid();
@@ -153,7 +153,7 @@ describe('Grid', function() {
     describe('for given row and header height props', function() {
       beforeEach(function() {
         const ToolBarStub = new StubComponent('Toolbar');
-        this.component = this.createComponent({ toolbar: <ToolBarStub />, rowHeight: 40, headerRowHeight: 50, headerFiltersHeight: 60 }).node;
+        this.component = this.createComponent({ toolbar: <ToolBarStub />, rowHeight: 40, headerRowHeight: 50, headerFiltersHeight: 60 }).instance();
         this.toolbarInstance = TestUtils.findRenderedComponentWithType(this.component, ToolBarStub);
         this.toolbarInstance.props.onToggleFilter();
         this.baseGrid = this.getBaseGrid();
@@ -176,7 +176,7 @@ describe('Grid', function() {
   describe('if passed in as props to grid', function() {
     beforeEach(function() {
       const ToolBarStub = new StubComponent('Toolbar');
-      this.component = this.createComponent({ toolbar: <ToolBarStub /> }).node;
+      this.component = this.createComponent({ toolbar: <ToolBarStub /> }).instance();
       this.toolbarInstance = TestUtils.findRenderedComponentWithType(this.component, ToolBarStub);
     });
 
@@ -207,7 +207,7 @@ describe('Grid', function() {
         rowGetter: this.rowGetter,
         rowsCount: this._rows.length,
         width: 300
-      }).node;
+      }).instance();
     });
 
     it('grid should be initialized with selected state of {rowIdx : -1, idx : -1}', function() {
@@ -217,7 +217,7 @@ describe('Grid', function() {
 
   describe('When row selection enabled', function() {
     beforeEach(function() {
-      this.component = this.createComponent({ enableRowSelect: true}).node;
+      this.component = this.createComponent({ enableRowSelect: true}).instance();
       this.baseGrid = this.getBaseGrid();
       this.selectRowCol = this.baseGrid.props.columnMetrics.columns[0];
     });
@@ -302,7 +302,7 @@ describe('Grid', function() {
   describe('Cell Navigation', function() {
     describe('when cell navigation is configured to default, none', function() {
       beforeEach(function() {
-        this.component = this.createComponent({enableCellSelect: true}).node;
+        this.component = this.createComponent({enableCellSelect: true}).instance();
       });
 
       describe('when on last cell in a row', function() {
@@ -336,7 +336,7 @@ describe('Grid', function() {
 
     describe('when cell navigation is configured to change rows', function() {
       beforeEach(function() {
-        this.component = this.createComponent({cellNavigationMode: 'changeRow', enableCellSelect: true}).node;
+        this.component = this.createComponent({cellNavigationMode: 'changeRow', enableCellSelect: true}).instance();
       });
 
       describe('when on last cell in a row that\'s not the last', function() {
@@ -388,7 +388,7 @@ describe('Grid', function() {
 
     describe('when cell navigation is configured to loop over cells in row', function() {
       beforeEach(function() {
-        this.component = this.createComponent({cellNavigationMode: 'loopOverRow', enableCellSelect: true}).node;
+        this.component = this.createComponent({cellNavigationMode: 'loopOverRow', enableCellSelect: true}).instance();
       });
 
       describe('when on last cell, looping enabled', function() {
@@ -445,7 +445,7 @@ describe('Grid', function() {
         const extraProps = { onCellSelected: this.noop, onCellDeSelected: this.noop };
         spyOn(extraProps, 'onCellSelected');
         spyOn(extraProps, 'onCellDeSelected');
-        this.component = this.createComponent(extraProps).node;
+        this.component = this.createComponent(extraProps).instance();
       });
 
       describe('cell is selected', function() {
@@ -489,7 +489,7 @@ describe('Grid', function() {
         onRowsDeselected: function(deselectedRows) {
           self._deselectedRows = deselectedRows;
         }
-      }}).node;
+      }}).instance();
       this.baseGrid = this.getBaseGrid();
       this.selectRowCol = this.baseGrid.props.columnMetrics.columns[0];
     });
@@ -550,7 +550,7 @@ describe('Grid', function() {
           onRowsDeselected: function(deselectedRows) {
             self._deselectedRows = deselectedRows;
           }
-        }}).node;
+        }}).instance();
 
         this.baseGrid = this.getBaseGrid();
         this.selectRowCol = this.baseGrid.props.columnMetrics.columns[0];
@@ -587,7 +587,7 @@ describe('Grid', function() {
           onRowsDeselected: function(deselectedRows) {
             self._deselectedRows = deselectedRows;
           }
-        }}).node;
+        }}).instance();
 
         this.baseGrid = this.getBaseGrid();
         this.selectRowCol = this.baseGrid.props.columnMetrics.columns[0];
@@ -656,7 +656,7 @@ describe('Grid', function() {
       beforeEach(function() {
         const editableColumn = Object.assign({ editable: true }, this.columns[1]);
         this.columns[1] = editableColumn;
-        this.component = this.createComponent({ columns: this.columns }).node;
+        this.component = this.createComponent({ columns: this.columns }).instance();
       });
 
       describe('copy a cell value', function() {
@@ -679,7 +679,7 @@ describe('Grid', function() {
           const vCharacterKeyCode = 118;
           spyOn(this.testProps, 'onCellCopyPaste');
           wrapper.setProps({ onCellCopyPaste: this.testProps.onCellCopyPaste });
-          this.component = wrapper.node;
+          this.component = wrapper.instance();
           this.component.setState({
             textToCopy: 'banana',
             selected: { idx: 1, rowIdx: 5 },
@@ -801,7 +801,7 @@ describe('Grid', function() {
           let wrapper = this.createComponent();
           spyOn(this.testProps, 'onCellsDragged');
           wrapper.setProps({ onCellsDragged: this.testProps.onCellsDragged });
-          this.component = wrapper.node;
+          this.component = wrapper.instance();
           this.component.setState({
             selected: { idx: 1, rowIdx: 2 },
             dragged: { idx: 1, rowIdx: 2, value: 'apple', overRowIdx: 6 }
@@ -834,7 +834,7 @@ describe('Grid', function() {
         const newColumns = Object.assign([], this.columns);
         newColumns.splice(2, 0, newColumn);
         wrapper.setProps({ columns: newColumns });
-        this.component = wrapper.node;
+        this.component = wrapper.instance();
         this.columns = this.component.state.columnMetrics.columns;
       });
 
@@ -853,7 +853,7 @@ describe('Grid', function() {
         const newColumns = Object.assign([], this.columns);
         newColumns.splice(1, 1);
         wrapper.setProps({ columns: newColumns });
-        this.component = wrapper.node;
+        this.component = wrapper.instance();
         this.columns = this.component.state.columnMetrics.columns;
       });
 
@@ -921,7 +921,7 @@ describe('Grid', function() {
         let wrapper = this.createComponent();
         spyOn(this.testProps, 'onRowUpdated');
         wrapper.setProps({ onRowUpdated: this.testProps.onRowUpdated });
-        this.component = wrapper.node;
+        this.component = wrapper.instance();
         this.component.setState({ selected: { idx: 3, rowIdx: 3, active: true } });
         this.getCellMetaData().onCommit(this.buildFakeCellUodate());
       });
@@ -1007,7 +1007,7 @@ describe('Grid', function() {
       const editableColumn = Object.assign({ editable: true }, this.columns[0]);
       this.columns[0] = editableColumn;
       wrapper.setProps({ columns: this.columns });
-      this.component = wrapper.node;
+      this.component = wrapper.instance();
     });
 
     it('should keep original metric information', function() {
@@ -1025,7 +1025,7 @@ describe('Grid', function() {
 
     beforeEach(function() {
       wrapper = this.createComponent();
-      this.component = wrapper.node;
+      this.component = wrapper.instance();
       this.tableElement = ReactDOM.findDOMNode(this.component);
     });
 
@@ -1036,7 +1036,7 @@ describe('Grid', function() {
     describe('providing table width as prop', function() {
       beforeEach(function() {
         wrapper.setProps({ minWidth: 900 });
-        this.component = wrapper.node;
+        this.component = wrapper.instance();
       });
 
       it('should set the width of the table', function() {
@@ -1060,7 +1060,7 @@ describe('Grid', function() {
       this.component = this.createComponent({rowsCount: this.rows.length, rowGetter: rowGetter, columns: columns, onRowClick: function(rowIdx, row, column) {
         self.rowClicked = {row, column};
         self.rowClicks++;
-      }}).node;
+      }}).instance();
     });
 
     it('calls handler when row (cell) clicked', function() {

diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableContainer.js b/packages/react-data-grid-addons/src/draggable-header/DraggableContainer.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import html5DragDropContext from '../shared/html5DragDropContext';
 import DraggableHeaderCell from './DraggableHeaderCell';
 
 class DraggableContainer extends React.Component {
@@ -27,4 +26,4 @@ DraggableContainer.propTypes = {
   children: PropTypes.element
 };
 
-export default DragDropContext(HTML5Backend)(DraggableContainer);
+export default html5DragDropContext(DraggableContainer);
diff --git a/packages/react-data-grid-addons/src/draggable/DragDropContainer.js b/packages/react-data-grid-addons/src/draggable/DragDropContainer.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import HTML5Backend from 'react-dnd-html5-backend';
-import { DragDropContext } from 'react-dnd';
+import html5DragDropContext from '../shared/html5DragDropContext';
 import DraggableHeaderCell from './DraggableHeaderCell';
 import RowDragLayer from './RowDragLayer';
 import { utils } from 'react-data-grid';
@@ -41,4 +40,4 @@ DraggableContainer.propTypes = {
   getDragPreviewRow: PropTypes.func
 };
 
-export default DragDropContext(HTML5Backend)(DraggableContainer);
+export default html5DragDropContext(DraggableContainer);
diff --git a/packages/react-data-grid-addons/src/draggable/__tests__/DropTargetRowContainer.spec.js b/packages/react-data-grid-addons/src/draggable/__tests__/DropTargetRowContainer.spec.js
@@ -41,7 +41,7 @@ describe('<DropTargetRowContainer />', () => {
   beforeEach(() => {
     ComponentUnderTest = wrapInTestContext(dropTargetRowContainer(fakeRow));
     wrapper = mount(<ComponentUnderTest {...props}  />);
-    manager = wrapper.node.getManager();
+    manager = wrapper.instance().getManager();
     backend = manager.getBackend();
     registry = manager.getRegistry();
   });

diff --git a/packages/react-data-grid-addons/src/editors/__tests__/ContainerEditorWrapper.spec.js b/packages/react-data-grid-addons/src/editors/__tests__/ContainerEditorWrapper.spec.js
@@ -39,8 +39,8 @@ describe('ContainerEditorWrapper', () => {
         const renderedComp = Enzyme.mount(<ConnectedContainerEditorWrapper />);
 
         // ASSERT
-        let redneredContainerEditorWrapper = renderedComp.find('ContainerEditorWrapper').node;
-        let renderedFakeComponent = renderedComp.find('FakeComponent').node;
+        let redneredContainerEditorWrapper = renderedComp.find('ContainerEditorWrapper').instance();
+        let renderedFakeComponent = renderedComp.find('FakeComponent').instance();
         redneredContainerEditorWrapper.getValue();
 
         expect(renderedComp).toBeDefined();
@@ -55,8 +55,8 @@ describe('ContainerEditorWrapper', () => {
         const renderedComp = Enzyme.mount(<ConnectedContainerEditorWrapper />);
 
         // ASSERT
-        let redneredContainerEditorWrapper = renderedComp.find('ContainerEditorWrapper').node;
-        let renderedFakeComponent = renderedComp.find('FakeComponent').node;
+        let redneredContainerEditorWrapper = renderedComp.find('ContainerEditorWrapper').instance();
+        let renderedFakeComponent = renderedComp.find('FakeComponent').instance();
         redneredContainerEditorWrapper.getInputNode();
 
         expect(renderedComp).toBeDefined();

diff --git a/packages/react-data-grid-addons/src/shared/html5DragDropContext.js b/packages/react-data-grid-addons/src/shared/html5DragDropContext.js
@@ -0,0 +1,4 @@
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+export default DragDropContext(HTML5Backend);