From e5651939accd2aa5ae0dac52a8e575a541fd204e Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Sun, 15 Sep 2019 13:41:59 +0100
Subject: [PATCH] add ref to both draggable and draggable-core

---
 lib/Draggable.js     | 13 ++++++++-----
 lib/DraggableCore.js | 22 +++++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/lib/Draggable.js b/lib/Draggable.js
index 2a6ec238..118cbf8c 100644
--- a/lib/Draggable.js
+++ b/lib/Draggable.js
@@ -31,6 +31,7 @@ export type DraggableProps = {
   defaultPosition: ControlPosition,
   positionOffset: PositionOffsetControlPosition,
   position: ControlPosition,
+  draggableRef: Element,
   scale: number
 };
 
@@ -179,14 +180,14 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
     // Set x/y if a new position is provided in props that is different than the previous.
     if (
       position &&
-      (!prevPropsPosition || 
+      (!prevPropsPosition ||
         position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y
       )
     ) {
       log('Draggable: getDerivedStateFromProps %j', {position, prevPropsPosition});
       return {
-        x: position.x, 
-        y: position.y, 
+        x: position.x,
+        y: position.y,
         prevPropsPosition: {...position}
       };
     }
@@ -222,11 +223,13 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
         'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' +
         '`position` of this element.');
     }
+
+    this.draggableRef = React.createRef();
   }
 
   componentDidMount() {
     // Check to see if the element passed is an instanceof SVGElement
-    if(typeof window.SVGElement !== 'undefined' && ReactDOM.findDOMNode(this) instanceof window.SVGElement) {
+    if(typeof window.SVGElement !== 'undefined' && this.draggableRef.current instanceof window.SVGElement) {
       this.setState({isElementSVG: true});
     }
   }
@@ -373,7 +376,7 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return (
-      <DraggableCore {...draggableCoreProps} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
+      <DraggableCore ref={this.draggableRef} {...draggableCoreProps} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
         {React.cloneElement(React.Children.only(children), {
           className: className,
           style: {...children.props.style, ...style},
diff --git a/lib/DraggableCore.js b/lib/DraggableCore.js
index 4fbabfd2..42195279 100644
--- a/lib/DraggableCore.js
+++ b/lib/DraggableCore.js
@@ -63,6 +63,7 @@ export type DraggableCoreProps = {
   offsetParent: HTMLElement,
   grid: [number, number],
   handle: string,
+  elementRef: Element,
   onStart: DraggableEventHandler,
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
@@ -78,6 +79,11 @@ export type DraggableCoreProps = {
 
 export default class DraggableCore extends React.Component<DraggableCoreProps, DraggableCoreState> {
 
+  constructor(props) {
+    super(props);
+    this.elementRef = React.createRef();
+  }
+
   static displayName = 'DraggableCore';
 
   static propTypes = {
@@ -116,7 +122,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      * `grid` specifies the x and y that dragging should snap to.
      */
     grid: PropTypes.arrayOf(PropTypes.number),
-    
+
     /**
      * `handle` specifies a selector to be used as the handle that initiates drag.
      *
@@ -185,6 +191,10 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      */
     onMouseDown: PropTypes.func,
 
+    /**
+     * The element ref to be used
+     */
+    elementRef: PropTypes.func,
     /**
      * These properties should be defined on the child, not here.
      */
@@ -202,6 +212,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     handle: null,
     grid: null,
     transform: null,
+    elementRef: null,
     onStart: function(){},
     onDrag: function(){},
     onStop: function(){},
@@ -218,7 +229,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
   componentWillUnmount() {
     // Remove any leftover event handlers. Remove both touch and mouse handlers in case
     // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.elementRef.current;
     if (thisNode) {
       const {ownerDocument} = thisNode;
       removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag);
@@ -237,7 +248,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     if (!this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
 
     // Get nodes. Be sure to grab relative document (could be iframed)
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.elementRef.current;
     if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
       throw new Error('<DraggableCore> not mounted on DragStart!');
     }
@@ -346,7 +357,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     const {x, y} = position;
     const coreEvent = createCoreData(this, x, y);
 
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.elementRef.current;
     if (thisNode) {
       // Remove user-select hack
       if (this.props.enableUserSelectHack) removeUserSelectStyles(thisNode.ownerDocument);
@@ -410,7 +421,8 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
       onMouseDown: this.onMouseDown,
       onTouchStart: this.onTouchStart,
       onMouseUp: this.onMouseUp,
-      onTouchEnd: this.onTouchEnd
+      onTouchEnd: this.onTouchEnd,
+      ref: this.elementRef
     });
   }
 }