react-resizable 1.7.5 → 1.8.0

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.55.0
+^0.98.0
 
 [ignore]
 .*/node_modules/babel.*
@@ -28,4 +28,3 @@ module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=.
 module.use_strict=true
 server.max_workers=6
-unsafe.enable_getters_and_setters=true

package/.github/ISSUE_TEMPLATE.md

@@ -19,5 +19,5 @@ OS:
 #### Reproduction
 
 If this is a bug report, please provide a reproduction of the issue by going to
-http://www.webpackbin.com/41YFBvekG.
+https://codesandbox.io/s/9229wz40yo?fontsize=14.
 Paste a link here to your working reproduction.

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,5 @@
 Thanks for submitting a pull request to React-Resizable!
 
-Please reference an open issue. If one has not been created, please create one along with a failing
-example or test case.
+Please reference an open issue. If one has not been created, please create one along with a failing example or test case.
 
 Please do not commit built files (`/dist`) to pull requests. They are built only at release.

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+### 1.8.0 (May 15 2019)
+
+- Added support for custom resize handles (https://github.com/STRML/react-resizable/pull/79)
+- Added support for resize handles on all corners (https://github.com/STRML/react-resizable/pull/191)
+
 ### 1.7.5 (Sep 26, 2017)
 
 - Support for React 16 (no changes required, updated `peerDependencies`)

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-2018 Samuel Reed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,7 +2,7 @@
 
 [View the Demo](https://strml.github.io/react-resizable/examples/1.html)
 
-A simple widget that can be resized via a handle.
+A simple widget that can be resized via one or more handles.
 
 You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.
 
@@ -50,6 +50,8 @@ These props apply to both `<Resizable>` and `<ResizableBox>`.
   children: React.Element<any>,
   width: number,
   height: number,
+  // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
+  handle: ReactElement<any> | (resizeHandle: 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne') => ReactElement<any>,
   // If you change this, be sure to update your css
   handleSize: [number, number] = [10, 10],
   lockAspectRatio: boolean = false,
@@ -59,6 +61,7 @@ These props apply to both `<Resizable>` and `<ResizableBox>`.
   onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 };
 ```

package/build/Resizable.js

@@ -121,7 +121,7 @@ var Resizable = function (_React$Component) {
    */
 
 
-  Resizable.prototype.resizeHandler = function resizeHandler(handlerName) {
+  Resizable.prototype.resizeHandler = function resizeHandler(handlerName, axis) {
     var _this2 = this;
 
     return function (e, _ref2) {
@@ -131,8 +131,16 @@ var Resizable = function (_React$Component) {
 
 
       // Axis restrictions
-      var canDragX = _this2.props.axis === 'both' || _this2.props.axis === 'x';
-      var canDragY = _this2.props.axis === 'both' || _this2.props.axis === 'y';
+      var canDragX = (_this2.props.axis === 'both' || _this2.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
+      var canDragY = (_this2.props.axis === 'both' || _this2.props.axis === 'y') && ['e', 'w'].indexOf(axis) === -1;
+
+      // reverse delta if using top or left drag handles
+      if (canDragX && axis[axis.length - 1] === 'w') {
+        deltaX = -deltaX;
+      }
+      if (canDragY && axis[0] === 'n') {
+        deltaY = -deltaY;
+      }
 
       // Update w/h
       var width = _this2.state.width + (canDragX ? deltaX : 0);
@@ -163,9 +171,10 @@ var Resizable = function (_React$Component) {
 
       var hasCb = typeof _this2.props[handlerName] === 'function';
       if (hasCb) {
+        // $FlowIgnore isn't refining this correctly to SyntheticEvent
         if (typeof e.persist === 'function') e.persist();
         _this2.setState(newState, function () {
-          return _this2.props[handlerName](e, { node: node, size: { width: width, height: height } });
+          return _this2.props[handlerName](e, { node: node, size: { width: width, height: height }, handle: axis });
         });
       } else {
         _this2.setState(newState);
@@ -173,7 +182,21 @@ var Resizable = function (_React$Component) {
     };
   };
 
+  Resizable.prototype.renderResizeHandle = function renderResizeHandle(resizeHandle) {
+    var handle = this.props.handle;
+
+    if (handle) {
+      if (typeof handle === 'function') {
+        return handle(resizeHandle);
+      }
+      return handle;
+    }
+    return _react2.default.createElement('span', { className: 'react-resizable-handle react-resizable-handle-' + resizeHandle });
+  };
+
   Resizable.prototype.render = function render() {
+    var _this3 = this;
+
     // eslint-disable-next-line no-unused-vars
     var _props = this.props,
         children = _props.children,
@@ -188,26 +211,29 @@ var Resizable = function (_React$Component) {
         onResize = _props.onResize,
         onResizeStop = _props.onResizeStop,
         onResizeStart = _props.onResizeStart,
-        p = _objectWithoutProperties(_props, ['children', 'draggableOpts', 'width', 'height', 'handleSize', 'lockAspectRatio', 'axis', 'minConstraints', 'maxConstraints', 'onResize', 'onResizeStop', 'onResizeStart']);
+        resizeHandles = _props.resizeHandles,
+        p = _objectWithoutProperties(_props, ['children', 'draggableOpts', 'width', 'height', 'handleSize', 'lockAspectRatio', 'axis', 'minConstraints', 'maxConstraints', 'onResize', 'onResizeStop', 'onResizeStart', 'resizeHandles']);
 
     var className = p.className ? p.className + ' react-resizable' : 'react-resizable';
 
     // 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
-    // A draggable handle.
+    // One or more draggable handles.
     return (0, _cloneElement2.default)(children, _extends({}, p, {
       className: className,
-      children: [children.props.children, _react2.default.createElement(
-        _reactDraggable.DraggableCore,
-        _extends({}, draggableOpts, {
-          key: 'resizableHandle',
-          onStop: this.resizeHandler('onResizeStop'),
-          onStart: this.resizeHandler('onResizeStart'),
-          onDrag: this.resizeHandler('onResize')
-        }),
-        _react2.default.createElement('span', { className: 'react-resizable-handle' })
-      )]
+      children: [children.props.children, resizeHandles.map(function (h) {
+        return _react2.default.createElement(
+          _reactDraggable.DraggableCore,
+          _extends({}, draggableOpts, {
+            key: 'resizableHandle-' + h,
+            onStop: _this3.resizeHandler('onResizeStop', h),
+            onStart: _this3.resizeHandler('onResizeStart', h),
+            onDrag: _this3.resizeHandler('onResize', h)
+          }),
+          _this3.renderResizeHandle(h)
+        );
+      })]
     }));
   };
 
@@ -230,9 +256,24 @@ Resizable.propTypes = {
   // Optional props
   //
 
+  // Custom resize handle
+  handle: _propTypes2.default.element,
+
   // If you change this, be sure to update your css
   handleSize: _propTypes2.default.array,
 
+  // Defines which resize handles should be rendered (default: 'se')
+  // Allows for any combination of:
+  // 's' - South handle (bottom-center)
+  // 'w' - West handle (left-center)
+  // 'e' - East handle (right-center)
+  // 'n' - North handle (top-center)
+  // 'sw' - Southwest handle (bottom-left)
+  // 'nw' - Northwest handle (top-left)
+  // 'se' - Southeast handle (bottom-right)
+  // 'ne' - Northeast handle (top-center)
+  resizeHandles: _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+
   // If true, will only allow width/height to move in lockstep
   lockAspectRatio: _propTypes2.default.bool,
 
@@ -260,6 +301,7 @@ Resizable.defaultProps = {
   lockAspectRatio: false,
   axis: 'both',
   minConstraints: [20, 20],
-  maxConstraints: [Infinity, Infinity]
+  maxConstraints: [Infinity, Infinity],
+  resizeHandles: ['se']
 };
 exports.default = Resizable;

package/build/Resizable.js.flow

@@ -6,6 +6,7 @@ import cloneElement from './cloneElement';
 import type {Element as ReactElement, Node as ReactNode} from 'react';
 
 type Axis = 'both' | 'x' | 'y' | 'none';
+type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 type State = {
   resizing: boolean,
   width: number, height: number,
@@ -19,13 +20,15 @@ type DragCallbackData = {
 };
 export type ResizeCallbackData = {
   node: HTMLElement,
-  size: {width: number, height: number}
+  size: {width: number, height: number},
+  handle: ResizeHandle
 };
 export type Props = {
   children: ReactElement<any>,
   className?: ?string,
   width: number,
   height: number,
+  handle: ReactElement<any> | (resizeHandle: ResizeHandle) => ReactElement<any>,
   handleSize: [number, number],
   lockAspectRatio: boolean,
   axis: Axis,
@@ -34,7 +37,8 @@ export type Props = {
   onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  resizeHandles: ResizeHandle[]
 };
 
 export default class Resizable extends React.Component<Props, State> {
@@ -54,9 +58,24 @@ export default class Resizable extends React.Component<Props, State> {
     // Optional props
     //
 
+    // Custom resize handle
+    handle: PropTypes.element,
+
     // If you change this, be sure to update your css
     handleSize: PropTypes.array,
 
+    // Defines which resize handles should be rendered (default: 'se')
+    // Allows for any combination of:
+    // 's' - South handle (bottom-center)
+    // 'w' - West handle (left-center)
+    // 'e' - East handle (right-center)
+    // 'n' - North handle (top-center)
+    // 'sw' - Southwest handle (bottom-left)
+    // 'nw' - Northwest handle (top-left)
+    // 'se' - Southeast handle (bottom-right)
+    // 'ne' - Northeast handle (top-center)
+    resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+
     // If true, will only allow width/height to move in lockstep
     lockAspectRatio: PropTypes.bool,
 
@@ -85,7 +104,8 @@ export default class Resizable extends React.Component<Props, State> {
     lockAspectRatio: false,
     axis: 'both',
     minConstraints: [20, 20],
-    maxConstraints: [Infinity, Infinity]
+    maxConstraints: [Infinity, Infinity],
+    resizeHandles: ['se']
   };
 
   state: State = {
@@ -157,12 +177,20 @@ export default class Resizable extends React.Component<Props, State> {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName: string): Function {
+  resizeHandler(handlerName: string, axis: ResizeHandle): Function {
     return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
 
       // Axis restrictions
-      const canDragX = this.props.axis === 'both' || this.props.axis === 'x';
-      const canDragY = this.props.axis === 'both' || this.props.axis === 'y';
+      const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
+      const canDragY = (this.props.axis === 'both' || this.props.axis === 'y') && ['e', 'w'].indexOf(axis) === -1;
+
+      // reverse delta if using top or left drag handles
+      if (canDragX && axis[axis.length - 1] === 'w') {
+        deltaX = -deltaX;
+      }
+      if (canDragY && axis[0] === 'n') {
+        deltaY = -deltaY;
+      }
 
       // Update w/h
       let width = this.state.width + (canDragX ? deltaX : 0);
@@ -190,19 +218,31 @@ export default class Resizable extends React.Component<Props, State> {
 
       const hasCb = typeof this.props[handlerName] === 'function';
       if (hasCb) {
+        // $FlowIgnore isn't refining this correctly to SyntheticEvent
         if (typeof e.persist === 'function') e.persist();
-        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}}));
+        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}, handle: axis}));
       } else {
         this.setState(newState);
       }
     };
   }
 
+  renderResizeHandle(resizeHandle: ResizeHandle): ReactNode {
+    const {handle} = this.props;
+    if (handle) {
+      if (typeof handle === 'function') {
+        return handle(resizeHandle);
+      }
+      return handle;
+    }
+    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandle}`} />;
+  }
+
   render(): ReactNode {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, ...p} = this.props;
+        onResizeStop, onResizeStart, resizeHandles, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`:
@@ -211,21 +251,23 @@ export default class Resizable extends React.Component<Props, State> {
     // 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
-    // A draggable handle.
+    // One or more draggable handles.
     return cloneElement(children, {
       ...p,
       className,
       children: [
         children.props.children,
-        <DraggableCore
-          {...draggableOpts}
-          key="resizableHandle"
-          onStop={this.resizeHandler('onResizeStop')}
-          onStart={this.resizeHandler('onResizeStart')}
-          onDrag={this.resizeHandler('onResize')}
+        resizeHandles.map(h => (
+          <DraggableCore
+            {...draggableOpts}
+            key={`resizableHandle-${h}`}
+            onStop={this.resizeHandler('onResizeStop', h)}
+            onStart={this.resizeHandler('onResizeStart', h)}
+            onDrag={this.resizeHandler('onResize', h)}
           >
-          <span className="react-resizable-handle" />
-        </DraggableCore>
+            {this.renderResizeHandle(h)}
+          </DraggableCore>
+        ))
       ]
     });
   }

package/build/ResizableBox.js

@@ -73,6 +73,7 @@ var ResizableBox = function (_React$Component) {
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
     var _props = this.props,
+        handle = _props.handle,
         handleSize = _props.handleSize,
         onResize = _props.onResize,
         onResizeStart = _props.onResizeStart,
@@ -84,11 +85,13 @@ var ResizableBox = function (_React$Component) {
         axis = _props.axis,
         width = _props.width,
         height = _props.height,
-        props = _objectWithoutProperties(_props, ['handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height']);
+        resizeHandles = _props.resizeHandles,
+        props = _objectWithoutProperties(_props, ['handle', 'handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height', 'resizeHandles']);
 
     return _react2.default.createElement(
       _Resizable2.default,
       {
+        handle: handle,
         handleSize: handleSize,
         width: this.state.width,
         height: this.state.height,
@@ -99,7 +102,8 @@ var ResizableBox = function (_React$Component) {
         minConstraints: minConstraints,
         maxConstraints: maxConstraints,
         lockAspectRatio: lockAspectRatio,
-        axis: axis
+        axis: axis,
+        resizeHandles: resizeHandles
       },
       _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))
     );

package/build/ResizableBox.js.flow

@@ -48,10 +48,11 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
-    const {handleSize, onResize, onResizeStart, onResizeStop, draggableOpts,
-         minConstraints, maxConstraints, lockAspectRatio, axis, width, height, ...props} = this.props;
+    const {handle, handleSize, onResize, onResizeStart, onResizeStop, draggableOpts, minConstraints,
+      maxConstraints, lockAspectRatio, axis, width, height, resizeHandles, ...props} = this.props;
     return (
       <Resizable
+        handle={handle}
         handleSize={handleSize}
         width={this.state.width}
         height={this.state.height}
@@ -63,7 +64,8 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
         maxConstraints={maxConstraints}
         lockAspectRatio={lockAspectRatio}
         axis={axis}
-        >
+        resizeHandles={resizeHandles}
+      >
         <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} {...props} />
       </Resizable>
     );

package/css/styles.css

@@ -5,13 +5,61 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  bottom: 0;
-  right: 0;
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
-  background-position: bottom right;
-  padding: 0 3px 3px 0;
   background-repeat: no-repeat;
   background-origin: content-box;
   box-sizing: border-box;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
   cursor: se-resize;
 }
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
   "scripts": {
@@ -35,28 +35,28 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.6",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.7.2",
+    "css-loader": "^2.1.1",
+    "eslint": "^5.16.0",
     "eslint-plugin-react": "^7.4.0",
-    "flow-bin": "^0.55.0",
+    "flow-bin": "^0.98.1",
     "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "style-loader": "^0.23.1",
+    "webpack": "^4.31.0",
+    "webpack-dev-server": "^3.3.1"
   },
   "dependencies": {
     "prop-types": "15.x",
-    "react-draggable": "^2.2.6 || ^3.0.3"
+    "react-draggable": "^3.0.3"
   },
   "peerDependencies": {
     "react": "0.14.x || 15.x || 16.x",