fix(props): revert removal of props passthrough from #133 (#144)

This breaks certain important use cases such as wrapping a
Resizable in a Draggable, which is used heavily by React-Grid-Layout.

This means that we can move back to the 1.x branch as the breaking
change is removed.

Author: STRML

README.md

@@ -43,7 +43,7 @@ render() {
 
 ### Props
 
-These props apply to both `<Resizable>` and `<ResizableBox>`.
+These props apply to both `<Resizable>` and `<ResizableBox>`. Unknown props that are not in the list below will be passed to the child component.
 
 ```js
 {

__tests__/Resizable.test.js

@@ -10,12 +10,15 @@ describe('render Resizable', () => {
   const props = {
     axis: 'both',
     className: 'test-classname',
+    draggableOpts: {},
     handleSize: [20, 20],
     height: 50,
     lockAspectRatio: false,
     maxConstraints: [Infinity, Infinity],
     minConstraints: [20, 20],
     onResize: jest.fn(),
+    onResizeStart: jest.fn(),
+    onResizeStop: jest.fn(),
     resizeHandles: ['se', 'e'],
     transformScale: 1,
     width: 50,
@@ -64,6 +67,29 @@ describe('render Resizable', () => {
     });
   });
 
+  describe('<Resizable> props filtering', () => {
+    const allProps = {
+      ...props,
+      draggableOpts: {},
+      handle: <div />,
+    };
+
+    // Ensure everything in propTypes is represented here. Otherwise the next two tests are not valid
+    test('all intended props are in our allProps object', () => {
+      expect(['children', ...Object.keys(allProps)].sort()).toEqual(Object.keys(Resizable.propTypes).sort());
+    });
+
+    test('none of these props leak down to the child', () => {
+      const element = shallow(<Resizable {...allProps}><div className="foo" /></Resizable>);
+      expect(Object.keys(element.find('.foo').props())).toEqual(['className', 'children']);
+    });
+
+    test('className is constructed properly', () => {
+      const element = shallow(<Resizable {...allProps}><div className="foo" /></Resizable>);
+      expect(element.find('.foo').props().className).toEqual(`foo ${allProps.className} react-resizable`);
+    });
+  });
+
   describe('onResize callback with modified position', () => {
     const customProps = {
       ...props,

__tests__/ResizableBox.test.js

@@ -9,6 +9,7 @@ import Resizable from "../lib/Resizable";
 describe('render ResizableBox', () => {
   const props = {
     axis: 'x',
+    draggableOpts: {},
     handle: jest.fn(resizeHandle => <span className={`test-class-${resizeHandle}`} />),
     handleSize: [20, 20],
     height: 50,
@@ -19,6 +20,7 @@ describe('render ResizableBox', () => {
     onResizeStart: jest.fn(),
     onResizeStop: jest.fn(),
     resizeHandles: ['w'],
+    transformScale: 1,
     width: 50,
   };
   const children = <span className="children" />;
@@ -61,6 +63,23 @@ describe('render ResizableBox', () => {
     expect(props.onResizeStop).toHaveBeenCalledWith(fakeEvent, data);
   });
 
+  describe('<Resizable> props filtering', () => {
+    // Ensure everything in propTypes is represented here. Otherwise the next two tests are not valid
+    test('all intended props are in our props object', () => {
+      expect(['children', 'className', ...Object.keys(props)].sort()).toEqual(Object.keys(Resizable.propTypes).sort());
+    });
+
+    test('none of these props leak down to the child', () => {
+      const element = shallow(<ResizableBox {...props} />);
+      expect(Object.keys(element.find('div').props())).toEqual(['style']);
+    });
+
+    test('className is constructed properly', () => {
+      const element = shallow(<ResizableBox {...props} className='foo' />);
+      expect(element.find('div').props().className).toEqual(`foo`);
+    });
+  });
+
   test('style prop', () => {
     const element = shallow(<ResizableBox {...props} style={{backgroundColor: 'red'}}>{children}</ResizableBox>);
     expect(element.find('div').at(0).prop('style')).toEqual({

lib/Resizable.js

@@ -163,13 +163,18 @@ export default class Resizable extends React.Component<Props, ResizableState> {
   }
 
   render(): ReactNode {
-    const {children, draggableOpts, resizeHandles, className} = this.props;
+    // Pass along only props not meant for the `<Resizable>`.`
+    // eslint-disable-next-line no-unused-vars
+    const {children, className, draggableOpts, width, height, handle, handleSize,
+            lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
+            onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
 
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // Its original children (resizable's child's children), and
     // One or more draggable handles.
     return cloneElement(children, {
+      ...p,
       className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
         ...children.props.children,

lib/ResizableBox.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import type {Node as ReactNode} from 'react';
+import type {Node as ReactNode, Element as ReactElement} from 'react';
+import PropTypes from 'prop-types';
 
 import Resizable from './Resizable';
 import {resizableProps} from "./propTypes";
@@ -10,10 +11,15 @@ import type {ResizeCallbackData, ResizableBoxState} from './propTypes';
 // <ResizableBox> does not have defaultProps, so we can use this type to tell Flow that we don't
 // care about that and will handle it in <Resizable> instead.
 // A <ResizableBox> can also have a `style` property.
-type ResizableBoxProps = {|...React.ElementConfig<typeof Resizable>, style?: Object|};
+type ResizableBoxProps = {|...React.ElementConfig<typeof Resizable>, style?: Object, children?: ReactElement<any>|};
 
 export default class ResizableBox extends React.Component<ResizableBoxProps, ResizableBoxState> {
-  static propTypes = resizableProps;
+
+  // PropTypes are identical to <Resizable>, except that children are not strictly required to be present.
+  static propTypes = {
+    ...resizableProps,
+    children: PropTypes.element,
+  };
 
   state: ResizableBoxState = {
     width: this.props.width,