feat(ResizableBox): Accept a "style" param

Author: STRML

README.md

@@ -65,3 +65,13 @@ These props apply to both `<Resizable>` and `<ResizableBox>`.
   resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 };
 ```
+
+The following props can also be used on `<ResizableBox>`:
+
+```js
+{
+  style?: Object
+}
+```
+
+If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.

__tests__/ResizableBox.test.js

@@ -21,7 +21,7 @@ describe('render ResizableBox', () => {
     resizeHandles: ['w'],
     width: 50,
   };
-  const children = <span className={'children'} />;
+  const children = <span className="children" />;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -60,4 +60,21 @@ describe('render ResizableBox', () => {
     resizable.simulate('resizeStop', fakeEvent, data);
     expect(props.onResizeStop).toHaveBeenCalledWith(fakeEvent, data);
   });
+
+  test('style prop', () => {
+    const element = shallow(<ResizableBox {...props} style={{backgroundColor: 'red'}}>{children}</ResizableBox>);
+    expect(element.find('div').at(0).prop('style')).toEqual({
+      width: '50px',
+      height: '50px',
+      backgroundColor: 'red'
+    });
+  });
+
+  test('style prop width and height ignored', () => {
+    const element = shallow(<ResizableBox {...props} style={{width: 10, height: 10}}>{children}</ResizableBox>);
+    expect(element.find('div').at(0).prop('style')).toEqual({
+      width: '50px',
+      height: '50px',
+    });
+  });
 });

lib/ResizableBox.js

@@ -9,7 +9,8 @@ import type {ResizeCallbackData, ResizableBoxState} from './propTypes';
 // ElementConfig gives us an object type where all items present in `defaultProps` are made optional.
 // <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.
-type ResizableBoxProps = React.ElementConfig<typeof Resizable>;
+// A <ResizableBox> can also have a `style` property.
+type ResizableBoxProps = {|...React.ElementConfig<typeof Resizable>, style?: Object|};
 
 export default class ResizableBox extends React.Component<ResizableBoxProps, ResizableBoxState> {
   static propTypes = resizableProps;
@@ -62,6 +63,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
       width,
       height,
       resizeHandles,
+      style,
       transformScale,
       ...props
     } = this.props;
@@ -83,7 +85,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
         transformScale={transformScale}
         width={this.state.width}
       >
-        <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} {...props} />
+        <div {...props} style={{...style, width: this.state.width + 'px', height: this.state.height + 'px'}} />
       </Resizable>
     );
   }