(EPROC-20652) Fixed table container ref. (#310)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opuscapita/react-crudeditor",
-  "version": "1.3.19-SNAPSHOT",
+  "version": "1.3.19-EPROC-20652-SNAPSHOT",
   "description": "React.js CRUD Editor",
   "repository": "OpusCapita/react-crudeditor",
   "main": "lib/index.js",
@@ -57,8 +57,8 @@
     "updeep": "1.0.0"
   },
   "peerDependencies": {
-    "react": "^15.6.2 || ^16.2.0",
-    "react-dom": "^15.6.2 || ^16.2.0"
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
     "@opuscapita/i18n": "1.2.4",
@@ -87,7 +87,7 @@
     "cross-env": "5.1.4",
     "css-loader": "0.28.11",
     "enzyme": "3.3.0",
-    "enzyme-adapter-react-15": "1.0.5",
+    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "4.19.1",
     "eslint-config-opuscapita": "2.0.0",
     "eslint-plugin-react": "7.7.0",
@@ -105,11 +105,11 @@
     "precss": "3.1.2",
     "query-string": "5.0.0",
     "raw-loader": "0.5.1",
-    "react": "15.6.2",
-    "react-dom": "15.6.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
-    "react-test-renderer": "15.6.2",
+    "react-test-renderer": "16.14.0",
     "regenerator-runtime": "0.11.1",
     "rimraf": "2.6.2",
     "sinon": "4.5.0",

src/components/ConfirmDialog/ConfirmDialog.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Enzyme from "enzyme";
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import ConfirmDialog from './';

src/components/FieldBoolean/FieldBoolean.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Enzyme from "enzyme";
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import FieldBoolean from "./";

src/components/FieldDate/FieldDate.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Enzyme from "enzyme";
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import FieldDate from "./";

src/components/FieldString/FieldString.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Enzyme from "enzyme";
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import FieldString from "./";

src/components/SearchResultListing/SearchResultButtons.js

@@ -17,12 +17,13 @@ export default class SearchResultButtons extends PureComponent {
   // details: https://stackoverflow.com/a/6433475
   handleToggleDropdown = (dropdownOpened, event, { source }) => {
     const { parentRef } = this.props;
-    const parentWidth = parentRef.clientWidth;
-    const tableWidth = parentRef.firstChild.scrollWidth
+
+    const parentWidth = parentRef.current.clientWidth;
+    const tableWidth = parentRef.current.firstChild.scrollWidth
 
     // table is wider than visible div -> show scroll
     if (parentWidth < tableWidth) {
-      parentRef.style.overflow = 'auto';
+      parentRef.current.style.overflow = 'auto';
       return;
     }
 
@@ -32,7 +33,7 @@ export default class SearchResultButtons extends PureComponent {
       return;
     }
 
-    parentRef.style.overflow = dropdownOpened ? 'visible' : 'auto';
+    parentRef.current.style.overflow = dropdownOpened ? 'visible' : 'auto';
     this.setState({ previousSource: source });
   }
 

src/components/SearchResultListing/index.js

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import Table from 'react-bootstrap/lib/Table';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
@@ -34,8 +33,9 @@ class SearchResultListing extends PureComponent {
     i18n: PropTypes.object
   };
 
-  componentDidMount() {
-    this._myRef = findDOMNode(this);
+  constructor(props) {
+    super(props);
+    this._tableContainerRef = React.createRef();
   }
 
   handleResort = fieldName => _ => this.props.model.actions.searchInstances({
@@ -75,7 +75,7 @@ class SearchResultListing extends PureComponent {
     const bulkOperationsExist = Object.keys(bulkOperations).length > 0;
 
     return (
-      <div className="crud--search-result-listing__table-container">
+      <div className="crud--search-result-listing__table-container" ref={this._tableContainerRef}>
         <Table condensed={true} className="crud--search-result-listing__table">
           <thead>
             <tr>
@@ -158,7 +158,7 @@ class SearchResultListing extends PureComponent {
                         instance,
                         offset: offset + index
                       })}
-                      parentRef={this._myRef}
+                      parentRef={this._tableContainerRef}
                     />
                   </td>
                 </tr>

src/demo/models/contracts/components/DateRangeCellRender/DateRangeCellRender.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Enzyme from "enzyme";
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
 import DateRangeCellRender from "./";
 import { I18nManager } from '@opuscapita/i18n';

src/demo/models/contracts/components/StatusField/StatusField.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Enzyme from "enzyme";
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import StatusField from "./";