fix(ReactDOM): automatically pass ReactRef to react-draggable

Fixes React 17 compatibility and react-grid-layout/react-grid-layout#1458

Author: STRML

__tests__/Resizable.test.js

@@ -23,6 +23,7 @@ describe('render Resizable', () => {
     transformScale: 1,
     width: 50,
   };
+  const handleFn = (axis, ref) => <span className={`custom-handle-${axis}`} ref={ref} />;
   const userChildren = <span className={'children'} />;
   const resizableBoxChildren =  <div style={{width: '50px', height: '50px'}}>{userChildren}</div>;
 
@@ -45,6 +46,21 @@ describe('render Resizable', () => {
     expect(cursorE).toHaveLength(1);
   });
 
+  test('with handle function', () => {
+    const handleFn = (axis, ref) => {
+      expect(axis).toMatch(/(se|e)/);
+      expect(ref).toMatchObject({current: null}); // ReactRef
+      return <span className={`custom-handle-${axis}`} ref={ref} />;
+    };
+    const element = shallow(<Resizable {...props} handle={handleFn}>{resizableBoxChildren}</Resizable>);
+    expect(element.find('.test-classname').find('.children'));
+    expect(element.find(DraggableCore)).toHaveLength(2);
+    const cursorSe = element.find('.custom-handle-se');
+    const cursorE = element.find('.custom-handle-e');
+    expect(cursorSe).toHaveLength(1);
+    expect(cursorE).toHaveLength(1);
+  });
+
   describe('and pass handle props', () => {
     test('as component', () => {
       const customProps = {

__tests__/ResizableBox.test.js

@@ -10,7 +10,7 @@ describe('render ResizableBox', () => {
   const props = {
     axis: 'x',
     draggableOpts: {},
-    handle: jest.fn(resizeHandle => <span className={`test-class-${resizeHandle}`} />),
+    handle: (jest.fn((resizeHandle, ref) => <span className={`test-class-${resizeHandle}`} ref={ref} />): Function),
     handleSize: [20, 20],
     height: 50,
     lockAspectRatio: false,

examples/ExampleLayout.js

@@ -19,7 +19,7 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
   };
 
   // On top layout
-  onResize = (event, {element, size, handle}) => {
+  onFirstBoxResize = (event, {element, size, handle}) => {
     this.setState({width: size.width, height: size.height});
   };
 
@@ -56,8 +56,8 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
 
         <h3>Statically Positioned Layout</h3>
         <div className="layoutRoot">
-          <Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onResize} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
-            <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
+          <Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onFirstBoxResize} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
+            <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
               <span className="text">{"Raw use of <Resizable> element. 200x200, all Resize Handles."}</span>
               <button onClick={this.onResetClick} style={{'marginTop': '10px'}}>Reset this element's width/height</button>
             </div>
@@ -77,7 +77,7 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
             className="custom-box box"
             width={200}
             height={200}
-            handle={(h) => <span className={`custom-handle custom-handle-${h}`} />}
+            handle={(h, ref) => <span className={`custom-handle custom-handle-${h}`} />}
             handleSize={[8, 8]}
             resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
             <span className="text">{"<ResizableBox> with custom handles in all locations."}</span>

lib/Resizable.js

@@ -1,12 +1,14 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import type {Node as ReactNode} from 'react';
 import {DraggableCore} from 'react-draggable';
 import {cloneElement} from './utils';
 import {resizableProps} from "./propTypes";
-import type {ResizeHandleAxis, DefaultProps, Props, ReactRef, ResizableState, DragCallbackData} from './propTypes';
+import type {ResizeHandleAxis, DefaultProps, Props, ReactRef, DragCallbackData} from './propTypes';
 
-export default class Resizable extends React.Component<Props, ResizableState> {
+// The base <Resizable> component.
+// This component does not have state and relies on the parent to set its props based on callback data.
+export default class Resizable extends React.Component<Props, void> {
   static propTypes = resizableProps;
 
   static defaultProps: DefaultProps =  {
@@ -19,8 +21,7 @@ export default class Resizable extends React.Component<Props, ResizableState> {
     transformScale: 1
   };
 
-  state: ResizableState = undefined;
-
+  handleRefs: {[key: ResizeHandleAxis]: ReactRef<HTMLElement>} = {};
   lastHandleRect: ?ClientRect = null;
   slack: ?[number, number] = null;
 
@@ -151,15 +152,16 @@ export default class Resizable extends React.Component<Props, ResizableState> {
     };
   }
 
-  renderResizeHandle(resizeHandleAxis: ResizeHandleAxis): ReactNode {
+  // Render a resize handle given an axis & DOM ref.
+  renderResizeHandle(handleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>): ReactNode {
     const {handle} = this.props;
     if (handle) {
       if (typeof handle === 'function') {
-        return handle(resizeHandleAxis);
+        return handle(handleAxis, ref);
       }
-      return handle;
+      return React.cloneElement(handle, {ref});
     }
-    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandleAxis}`} />;
+    return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={ref} />;
   }
 
   render(): ReactNode {
@@ -178,17 +180,22 @@ export default class Resizable extends React.Component<Props, ResizableState> {
       className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
         ...children.props.children,
-        ...resizeHandles.map((handleAxis) => (
-          <DraggableCore
-            {...draggableOpts}
-            key={`resizableHandle-${handleAxis}`}
-            onStop={this.resizeHandler('onResizeStop', handleAxis)}
-            onStart={this.resizeHandler('onResizeStart', handleAxis)}
-            onDrag={this.resizeHandler('onResize', handleAxis)}
-          >
-            {this.renderResizeHandle(handleAxis)}
-          </DraggableCore>
-        ))
+        ...resizeHandles.map((handleAxis) => {
+          // Create a ref to the handle so that `<DraggableCore>` doesn't have to use ReactDOM.findDOMNode().
+          const ref = (this.handleRefs[handleAxis]) ?? (this.handleRefs[handleAxis] = React.createRef());
+          return (
+            <DraggableCore
+              {...draggableOpts}
+              nodeRef={ref}
+              key={`resizableHandle-${handleAxis}`}
+              onStop={this.resizeHandler('onResizeStop', handleAxis)}
+              onStart={this.resizeHandler('onResizeStart', handleAxis)}
+              onDrag={this.resizeHandler('onResize', handleAxis)}
+            >
+              {this.renderResizeHandle(handleAxis, ref)}
+            </DraggableCore>
+          );
+        })
       ]
     });
   }

lib/propTypes.js

@@ -43,7 +43,7 @@ export type Props = {
   className?: ?string,
   draggableOpts?: ?ElementConfig<typeof DraggableCore>,
   height: number,
-  handle?: ReactElement<any> | (resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>,
+  handle?: ReactElement<any> | (resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,
   onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,