getBoundingClientRect fix

src/components/Splitters/HandleBar.tsx

@@ -1,24 +1,39 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
 import { HandleBarProps } from './typings/index';
 
 class HandleBar extends React.Component<HandleBarProps, {}> {
+    div: HTMLDivElement;
+
     public static defaultProps: Partial<HandleBarProps> = {
         allowResize: true
     };
 
     render() {
         const { position, handleMouseDown, allowResize } = this.props;
-        let allowResizeClass = allowResize ? '' : 'resize-not-allowed';
+
+        const classNames = [
+            'handle-bar',
+            position,
+            !allowResize && 'resize-not-allowed',
+        ].filter((cls) => cls).join(' ');
+
         return (
             <div 
-                className={`handle-bar ${position} ${allowResizeClass}`} 
+                className={classNames} 
+                ref={(node: HTMLDivElement) => this.div = node}
                 onMouseDown={(e) => handleMouseDown(e)} 
                 onTouchStart={(e) => handleMouseDown(e)}
             >
                 <span className="handle-bar_drag" />
             </div>
         );
     }
+
+    getDivInstance = () => {
+        return ReactDOM.findDOMNode(this.div);
+    }
 }
 
 export default HandleBar;

src/components/Splitters/Pane.tsx

@@ -1,16 +1,35 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
 import { PaneProps } from './typings/index';
 
 class Pane extends React.Component<PaneProps, {}> {
+    div: HTMLDivElement;
+
     render() {
         const { hasDetailPane, id, style, position, className } = this.props;
-        const isDetailPane = hasDetailPane ? 'bottom-detail-pane' : '';
+
+        const classNames = [
+            'pane',
+            hasDetailPane && 'bottom-detail-pane',
+            position,
+            className
+        ].filter((cls) => cls).join(' ');
+
         return (
-            <div id={id} className={`pane ${position} ${isDetailPane} ${className || ''}`} style={style}>
+            <div
+                id={id}
+                ref={(node: HTMLDivElement) => this.div = node}
+                className={classNames}
+                style={style}>
                 {this.props.children}
             </div>
         );
     }
+
+    getDivInstance = () => {
+        return ReactDOM.findDOMNode(this.div);
+    }
 }
 
 export default Pane;

src/components/Splitters/Splitter.tsx

@@ -341,8 +341,8 @@ export class Splitter extends React.Component<SplitterProps, SplitterState> {
         let nodeWrapperSize;
         let primaryPaneOffset;
         let wrapper = ReactDOM.findDOMNode(this.paneWrapper).getBoundingClientRect();
-        let primaryPane = ReactDOM.findDOMNode(this.panePrimary).getBoundingClientRect();
-        let handleBarSize = ReactDOM.findDOMNode(this.handlebar).getBoundingClientRect();
+        let primaryPane = this.panePrimary.getDivInstance().getBoundingClientRect();
+        let handleBarSize = this.handlebar.getDivInstance().getBoundingClientRect();
 
         const posInHandleBar = this.props.position === 'vertical' 
             ? handleBarSize.left - cX