removing ReactDOM dependency and using regular element refs to get pa…

…ne nodes (#292)

package.json

@@ -3,6 +3,7 @@
   "description": "React split-pane component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
+  "source": "src/index.js",
   "types": "index.d.ts",
   "files": [
     "dist",

rollup.config.js

@@ -5,7 +5,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import pkg from './package.json';
 
 export default {
-  input: 'src/index.js',
+  input: pkg.source,
   output: [
     {
       file: pkg.main,

src/Pane.js

@@ -17,6 +17,7 @@ class Pane extends React.PureComponent {
       split,
       style: styleProps,
       size,
+      eleRef,
     } = this.props;
 
     const classes = ['Pane', split, className];
@@ -38,7 +39,11 @@ class Pane extends React.PureComponent {
     }
 
     return (
-      <div className={classes.join(' ')} style={prefixer.prefix(style)}>
+      <div
+        ref={eleRef}
+        className={classes.join(' ')}
+        style={prefixer.prefix(style)}
+      >
         {children}
       </div>
     );
@@ -52,6 +57,7 @@ Pane.propTypes = {
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   split: PropTypes.oneOf(['vertical', 'horizontal']),
   style: stylePropType,
+  eleRef: PropTypes.func,
 };
 
 Pane.defaultProps = {

src/SplitPane.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import Prefixer from 'inline-style-prefixer';
 import stylePropType from 'react-style-proptype';
 import { polyfill } from 'react-lifecycles-compat';
@@ -134,8 +133,8 @@ class SplitPane extends React.Component {
       const ref = isPrimaryFirst ? this.pane1 : this.pane2;
       const ref2 = isPrimaryFirst ? this.pane2 : this.pane1;
       if (ref) {
-        const node = ReactDOM.findDOMNode(ref);
-        const node2 = ReactDOM.findDOMNode(ref2);
+        const node = ref;
+        const node2 = ref2;
 
         if (node.getBoundingClientRect) {
           const width = node.getBoundingClientRect().width;
@@ -164,11 +163,11 @@ class SplitPane extends React.Component {
 
           let newMaxSize = maxSize;
           if (maxSize !== undefined && maxSize <= 0) {
-            const splPane = this.splitPane;
+            const splitPane = this.splitPane;
             if (split === 'vertical') {
-              newMaxSize = splPane.getBoundingClientRect().width + maxSize;
+              newMaxSize = splitPane.getBoundingClientRect().width + maxSize;
             } else {
-              newMaxSize = splPane.getBoundingClientRect().height + maxSize;
+              newMaxSize = splitPane.getBoundingClientRect().height + maxSize;
             }
           }
 
@@ -318,7 +317,7 @@ class SplitPane extends React.Component {
         <Pane
           className={pane1Classes}
           key="pane1"
-          ref={node => {
+          eleRef={node => {
             this.pane1 = node;
           }}
           size={pane1Size}
@@ -335,17 +334,14 @@ class SplitPane extends React.Component {
           onTouchStart={this.onTouchStart}
           onTouchEnd={this.onMouseUp}
           key="resizer"
-          ref={node => {
-            this.resizer = node;
-          }}
           resizerClassName={resizerClassNamesIncludingDefault}
           split={split}
           style={resizerStyle || {}}
         />
         <Pane
           className={pane2Classes}
           key="pane2"
-          ref={node => {
+          eleRef={node => {
             this.pane2 = node;
           }}
           size={pane2Size}

website/package.json

@@ -55,7 +55,7 @@
     "react-router-dom": "^4.3.1",
     "react-router-hash-link": "^1.2.0",
     "react-scripts": "^2.0.0-next.66cc7a90",
-    "react-split-pane": "latest",
+    "react-split-pane": "link:..",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",

website/yarn.lock

@@ -7720,6 +7720,10 @@ [email protected]:
   version "5.0.0-next.66cc7a90"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.0.0-next.66cc7a90.tgz#68379b131ebe74112a12197504bfe7fa53119b3b"
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
@@ -7804,13 +7808,9 @@ react-scripts@^2.0.0-next.66cc7a90:
   optionalDependencies:
     fsevents "1.2.0"
 
-react-split-pane@latest:
-  version "0.1.77"
-  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.77.tgz#f0c8cd18d076bbac900248dcf6dbcec02d5340db"
-  dependencies:
-    inline-style-prefixer "^3.0.6"
-    prop-types "^15.5.10"
-    react-style-proptype "^3.0.0"
+"react-split-pane@link:..":
+  version "0.0.0"
+  uid ""
 
 react-style-proptype@^3.0.0:
   version "3.2.1"