fix(handle): fix handleAxis not being passed to custom handles

Author: STRML

README.md

@@ -115,7 +115,7 @@ type ResizableProps =
   onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object,
-  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+  resizeHandles?: ?Array<ResizeHandleAxis> = ['se']
 };
 ```
 
@@ -154,7 +154,8 @@ You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and pr
 ```js
 class MyHandleComponent extends React.Component {
   render() {
-    return <div ref={this.props.innerRef} className="foo" {...this.props} />
+    const {handleAxis, innerRef, ...props} = this.props;
+    return <div ref={innerRef} className={`foo handle-${handleAxis}`} {...props} />
   }
 }
 const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />);
@@ -166,20 +167,21 @@ const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={r
 
 ```js
 const MyHandle = React.forwardRef((props, ref) => {
-  return <div ref={ref} className="foo" {...props} />;
+  const {handleAxis, ...restProps} = props;
+  return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />;
 });
 
 <Resizable handle={<MyHandle />} />
 ```
 
 ##### Custom Function
 
-You can define a function as a handle, which will simply receive props and ref. This may be more clear to read, depending on your coding style.
+You can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style.
 
 ```js
 const MyHandle = (props) => {
   return <div ref={props.innerRef} className="foo" {...props} />;
 };
 
-<Resizable handle={(props, ref) => <MyHandle innerRef={ref} {...props} />} />
+<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} />} />
 ```

__tests__/Resizable.test.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
-import {shallow} from 'enzyme';
+import {shallow, mount} from 'enzyme';
 import {DraggableCore} from "react-draggable";
 
 import Resizable from '../lib/Resizable';
@@ -23,7 +23,6 @@ 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>;
 
@@ -46,40 +45,65 @@ 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 = {
-        ...props,
-        resizeHandles: ['se'],
-        handle: <span className={'custom-component'} />
+  describe('Handles', () => {
+    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 {...customProps}>{resizableBoxChildren}</Resizable>);
-      expect(element.find('.react-resizable-handle-se')).toHaveLength(0);
-      expect(element.find('.custom-component')).toHaveLength(1);
+      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);
     });
-    test('as function', () => {
-      const customProps = {
-        ...props,
-        resizeHandles: ['se'],
-        handle: (h) => <span className={`custom-component-${h}`} />
-      };
-      const element = shallow(<Resizable {...customProps}>{resizableBoxChildren}</Resizable>);
-      expect(element.find('.custom-component-se')).toHaveLength(1);
+
+    test.only('with handle component', () => {
+      const ResizeHandle = React.forwardRef((props, ref) => {
+        // $FlowIgnore doens't know this is cloned and has handleAxis
+        const {handleAxis, ...restProps} = props;
+        return (
+          <div
+            ref={ref}
+            className={`react-resizable-handle element-handle-${handleAxis}`}
+            {...restProps}
+          />
+        );
+      });
+      const element = mount(<Resizable {...props} handle={<ResizeHandle />}>{resizableBoxChildren}</Resizable>);
+
+      expect(element.find('.test-classname').find('.children'));
+      expect(element.find(DraggableCore)).toHaveLength(2);
+      const cursorSe = element.find('.element-handle-se');
+      const cursorE = element.find('.element-handle-e');
+      expect(cursorSe).toHaveLength(1);
+      expect(cursorE).toHaveLength(1);
+    });
+
+    describe('and pass handle props', () => {
+      test('as component', () => {
+        const customProps = {
+          ...props,
+          resizeHandles: ['se'],
+          handle: <span className={'custom-component'} />
+        };
+        const element = shallow(<Resizable {...customProps}>{resizableBoxChildren}</Resizable>);
+        expect(element.find('.react-resizable-handle-se')).toHaveLength(0);
+        expect(element.find('.custom-component')).toHaveLength(1);
+      });
+      test('as function', () => {
+        const customProps = {
+          ...props,
+          resizeHandles: ['se'],
+          handle: (h) => <span className={`custom-component-${h}`} />
+        };
+        const element = shallow(<Resizable {...customProps}>{resizableBoxChildren}</Resizable>);
+        expect(element.find('.custom-component-se')).toHaveLength(1);
+      });
     });
   });
 

lib/Resizable.js

@@ -159,7 +159,7 @@ export default class Resizable extends React.Component<Props, void> {
       if (typeof handle === 'function') {
         return handle(handleAxis, ref);
       }
-      return React.cloneElement(handle, {ref});
+      return React.cloneElement(handle, {ref, handleAxis});
     }
     return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={ref} />;
   }