react-resizable 1.10.1 → 1.11.0

package/build/Resizable.js.flow

@@ -1,103 +1,13 @@
 // @flow
 import React from 'react';
-import PropTypes from 'prop-types';
+import type {Node as ReactNode} from 'react';
 import {DraggableCore} from 'react-draggable';
 import {cloneElement} from './utils';
-import type {Element as ReactElement, Node as ReactNode} from 'react';
+import {resizableProps} from "./propTypes";
+import type {ResizeHandleAxis, Props, ResizableState, DragCallbackData} from './propTypes';
 
-type Axis = 'both' | 'x' | 'y' | 'none';
-type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
-type State = {
-  slackW: number, slackH: number,
-};
-type DragCallbackData = {
-  node: HTMLElement,
-  x: number, y: number,
-  deltaX: number, deltaY: number,
-  lastX: number, lastY: number
-};
-export type ResizeCallbackData = {
-  node: HTMLElement,
-  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,
-  minConstraints: [number, number],
-  maxConstraints: [number, number],
-  onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object,
-  resizeHandles: ResizeHandle[],
-  transformScale: number,
-};
-
-export default class Resizable extends React.Component<Props, State> {
-  static propTypes = {
-    //
-    // Required Props
-    //
-
-    // Require that one and only one child be present.
-    children: PropTypes.element.isRequired,
-
-    // Initial w/h
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-
-    //
-    // 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'])),
-    transformScale: PropTypes.number,
-
-    // If true, will only allow width/height to move in lockstep
-    lockAspectRatio: PropTypes.bool,
-
-    // Restricts resizing to a particular axis (default: 'both')
-    // 'both' - allows resizing by width or height
-    // 'x' - only allows the width to be changed
-    // 'y' - only allows the height to be changed
-    // 'none' - disables resizing altogether
-    axis: PropTypes.oneOf(['both', 'x', 'y', 'none']),
-
-    // Min/max size
-    minConstraints: PropTypes.arrayOf(PropTypes.number),
-    maxConstraints: PropTypes.arrayOf(PropTypes.number),
-
-    // Callbacks
-    onResizeStop: PropTypes.func,
-    onResizeStart: PropTypes.func,
-    onResize: PropTypes.func,
-
-    // These will be passed wholesale to react-draggable's DraggableCore
-    draggableOpts: PropTypes.object
-  };
+export default class Resizable extends React.Component<Props, ResizableState> {
+  static propTypes = resizableProps;
 
   static defaultProps =  {
     handleSize: [20, 20],
@@ -109,9 +19,14 @@ export default class Resizable extends React.Component<Props, State> {
     transformScale: 1
   };
 
-  state: State = {
-    slackW: 0, slackH: 0
-  };
+  state: ResizableState = undefined;
+
+  lastHandleRect: ?ClientRect = null;
+  slack: ?[number, number] = null;
+
+  componentWillUnmount() {
+    this.resetData();
+  }
 
   lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
     height = width / aspectRatio;
@@ -119,14 +34,19 @@ export default class Resizable extends React.Component<Props, State> {
     return [width, height];
   }
 
-  // If you do this, be careful of constraints
+  resetData() {
+    this.lastHandleRect = this.slack = null;
+  }
+
+  // Clamp width and height within provided constraints
   runConstraints(width: number, height: number): [number, number] {
     const [min, max] = [this.props.minConstraints, this.props.maxConstraints];
     if (!min && !max) return [width, height];
 
-    // Fit width & height to aspect ratio
+    // If constraining to min and max, we need to also fit width and height to aspect ratio.
     if (this.props.lockAspectRatio) {
-      if (height === this.props.height) {
+      const resizingHorizontally = height === this.props.height;
+      if (resizingHorizontally) {
         const ratio = this.props.width / this.props.height;
         height = width / ratio;
         width = height * ratio;
@@ -144,7 +64,7 @@ export default class Resizable extends React.Component<Props, State> {
     // Add slack to the values used to calculate bound position. This will ensure that if
     // we start removing slack, the element won't react to it right away until it's been
     // completely removed.
-    let {slackW, slackH} = this.state;
+    let [slackW, slackH] = this.slack || [0, 0];
     width += slackW;
     height += slackH;
 
@@ -157,12 +77,8 @@ export default class Resizable extends React.Component<Props, State> {
       height = Math.min(max[1], height);
     }
 
-    // If the numbers changed, we must have introduced some slack. Record it for the next iteration.
-    slackW += (oldW - width);
-    slackH += (oldH - height);
-    if (slackW !== this.state.slackW || slackH !== this.state.slackH) {
-      this.setState({slackW, slackH});
-    }
+    // If the width or height changed, we must have introduced some slack. Record it for the next iteration.
+    this.slack = [slackW + (oldW - width), slackH + (oldH - height)];
 
     return [width, height];
   }
@@ -173,75 +89,85 @@ export default class Resizable extends React.Component<Props, State> {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName: string, axis: ResizeHandle): Function {
-    return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
-      deltaX /= this.props.transformScale;
-      deltaY /= this.props.transformScale;
+  resizeHandler(handlerName: 'onResize' | 'onResizeStart' | 'onResizeStop', axis: ResizeHandleAxis): Function {
+    return (e: SyntheticEvent<>, {node, deltaX, deltaY}: DragCallbackData) => {
+      // Reset data in case it was left over somehow (should not be possible)
+      if (handlerName === 'onResizeStart') this.resetData();
 
       // Axis restrictions
-      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;
+      const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && axis !== 'n' && axis !== 's';
+      const canDragY = (this.props.axis === 'both' || this.props.axis === 'y') && axis !== 'e' && axis !== 'w';
+      // No dragging possible.
+      if (!canDragX && !canDragY) return;
+
+      // Decompose axis for later use
+      const axisV = axis[0];
+      const axisH = axis[axis.length - 1]; // intentionally not axis[1], so that this catches axis === 'w' for example
+
+      // Track the element being dragged to account for changes in position.
+      // If a handle's position is changed between callbacks, we need to factor this in to the next callback.
+      // Failure to do so will cause the element to "skip" when resized upwards or leftwards.
+      const handleRect = node.getBoundingClientRect();
+      if (this.lastHandleRect != null) {
+        // If the handle has repositioned on either axis since last render,
+        // we need to increase our callback values by this much.
+        // Only checking 'n', 'w' since resizing by 's', 'w' won't affect the overall position on page,
+        if (axisH === 'w') {
+          const deltaLeftSinceLast = handleRect.left - this.lastHandleRect.left;
+          deltaX += deltaLeftSinceLast;
+        }
+        if (axisV === 'n') {
+          const deltaTopSinceLast = handleRect.top - this.lastHandleRect.top;
+          deltaY += deltaTopSinceLast;
+        }
       }
+      // Storage of last rect so we know how much it has really moved.
+      this.lastHandleRect = handleRect;
 
-      // Update w/h
-      let width = this.props.width + (canDragX ? deltaX : 0);
-      let height = this.props.height + (canDragY ? deltaY : 0);
+      // Reverse delta if using top or left drag handles.
+      if (axisH === 'w') deltaX = -deltaX;
+      if (axisV === 'n') deltaY = -deltaY;
 
-      // Early return if no change
-      const widthChanged = width !== this.props.width, heightChanged = height !== this.props.height;
-      if (handlerName === 'onResize' && !widthChanged && !heightChanged) return;
+      // Update w/h by the deltas. Also factor in transformScale.
+      let width = this.props.width + (canDragX ? deltaX / this.props.transformScale : 0);
+      let height = this.props.height + (canDragY ? deltaY / this.props.transformScale : 0);
 
+      // Run user-provided constraints.
       [width, height] = this.runConstraints(width, height);
 
-      // Set the appropriate state for this handler.
-      const newState = {};
-      if (handlerName === 'onResizeStart') {
-        // nothing
-      } else if (handlerName === 'onResizeStop') {
-        newState.slackW = newState.slackH = 0;
-      } else {
-        // Early return if no change after constraints
-        if (width === this.props.width && height === this.props.height) return;
-      }
+      const dimensionsChanged = width !== this.props.width || height !== this.props.height;
 
-      const hasCb = typeof this.props[handlerName] === 'function';
-      if (hasCb) {
-        // $FlowIgnore isn't refining this correctly to SyntheticEvent
+      // Call user-supplied callback if present.
+      const cb = typeof this.props[handlerName] === 'function' ? this.props[handlerName] : null;
+      // Don't call 'onResize' if dimensions haven't changed.
+      const shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
+      if (cb && !shouldSkipCb) {
         if (typeof e.persist === 'function') e.persist();
-        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}, handle: axis}));
-      } else {
-        this.setState(newState);
+        cb(e, {node, size: {width, height}, handle: axis});
       }
+
+      // Reset internal data
+      if (handlerName === 'onResizeStop') this.resetData();
     };
   }
 
-  renderResizeHandle(resizeHandle: ResizeHandle): ReactNode {
+  renderResizeHandle(resizeHandleAxis: ResizeHandleAxis): ReactNode {
     const {handle} = this.props;
     if (handle) {
       if (typeof handle === 'function') {
-        return handle(resizeHandle);
+        return handle(resizeHandleAxis);
       }
       return handle;
     }
-    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandle}`} />;
+    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandleAxis}`} />;
   }
 
   render(): ReactNode {
+    // Pass along only props not meant for the `<Resizable>`.`
     // eslint-disable-next-line no-unused-vars
-    const {children, draggableOpts, width, height, handleSize,
-        lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
-
-    const className = p.className ?
-      `${p.className} react-resizable`:
-      'react-resizable';
+    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:
@@ -249,18 +175,18 @@ export default class Resizable extends React.Component<Props, State> {
     // One or more draggable handles.
     return cloneElement(children, {
       ...p,
-      className,
+      className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
-        children.props.children,
-        resizeHandles.map(h => (
+        ...children.props.children,
+        ...resizeHandles.map((handleAxis) => (
           <DraggableCore
             {...draggableOpts}
-            key={`resizableHandle-${h}`}
-            onStop={this.resizeHandler('onResizeStop', h)}
-            onStart={this.resizeHandler('onResizeStart', h)}
-            onDrag={this.resizeHandler('onResize', h)}
+            key={`resizableHandle-${handleAxis}`}
+            onStop={this.resizeHandler('onResizeStop', handleAxis)}
+            onStart={this.resizeHandler('onResizeStart', handleAxis)}
+            onDrag={this.resizeHandler('onResize', handleAxis)}
           >
-            {this.renderResizeHandle(h)}
+            {this.renderResizeHandle(handleAxis)}
           </DraggableCore>
         ))
       ]

package/build/ResizableBox.js

@@ -3,16 +3,26 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Resizable = _interopRequireDefault(require("./Resizable"));
 
+var _propTypes2 = require("./propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -21,10 +31,7 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-// An example use of Resizable.
-var ResizableBox =
-/*#__PURE__*/
-function (_React$Component) {
+var ResizableBox = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ResizableBox, _React$Component);
 
   function ResizableBox() {
@@ -45,8 +52,6 @@ function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onResize", function (e, data) {
       var size = data.size;
-      var width = size.width,
-          height = size.height;
 
       if (_this.props.onResize) {
         e.persist && e.persist();
@@ -96,40 +101,38 @@ function (_React$Component) {
         width = _this$props.width,
         height = _this$props.height,
         resizeHandles = _this$props.resizeHandles,
-        props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles"]);
+        style = _this$props.style,
+        transformScale = _this$props.transformScale,
+        props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"]);
 
-    return _react.default.createElement(_Resizable.default, {
+    return /*#__PURE__*/React.createElement(_Resizable.default, {
+      axis: axis,
+      draggableOpts: draggableOpts,
       handle: handle,
       handleSize: handleSize,
-      width: this.state.width,
       height: this.state.height,
+      lockAspectRatio: lockAspectRatio,
+      maxConstraints: maxConstraints,
+      minConstraints: minConstraints,
       onResizeStart: onResizeStart,
       onResize: this.onResize,
       onResizeStop: onResizeStop,
-      draggableOpts: draggableOpts,
-      minConstraints: minConstraints,
-      maxConstraints: maxConstraints,
-      lockAspectRatio: lockAspectRatio,
-      axis: axis,
-      resizeHandles: resizeHandles
-    }, _react.default.createElement("div", _extends({
-      style: {
+      resizeHandles: resizeHandles,
+      transformScale: transformScale,
+      width: this.state.width
+    }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+      style: _objectSpread(_objectSpread({}, style), {}, {
         width: this.state.width + 'px',
         height: this.state.height + 'px'
-      }
-    }, props)));
+      })
+    })));
   };
 
   return ResizableBox;
-}(_react.default.Component);
+}(React.Component);
 
 exports.default = ResizableBox;
 
-_defineProperty(ResizableBox, "propTypes", {
-  height: _propTypes.default.number,
-  width: _propTypes.default.number
-});
-
-_defineProperty(ResizableBox, "defaultProps", {
-  handleSize: [20, 20]
-});
+_defineProperty(ResizableBox, "propTypes", _objectSpread(_objectSpread({}, _propTypes2.resizableProps), {}, {
+  children: _propTypes.default.element
+}));

package/build/ResizableBox.js.flow

@@ -1,34 +1,34 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
+import type {Node as ReactNode, Element as ReactElement} from 'react';
 import PropTypes from 'prop-types';
+
 import Resizable from './Resizable';
-import type {Props as ResizableProps, ResizeCallbackData} from './Resizable';
-import type {Node as ReactNode} from 'react';
+import {resizableProps} from "./propTypes";
+import type {ResizeCallbackData, ResizableBoxState} from './propTypes';
 
-type State = {
-  width: number, height: number,
-  propsWidth: number, propsHeight: number,
-};
+// 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.
+// A <ResizableBox> can also have a `style` property.
+type ResizableBoxProps = {|...React.ElementConfig<typeof Resizable>, style?: Object, children?: ReactElement<any>|};
 
-// An example use of Resizable.
-export default class ResizableBox extends React.Component<ResizableProps, State> {
-  static propTypes = {
-    height: PropTypes.number,
-    width: PropTypes.number
-  };
+export default class ResizableBox extends React.Component<ResizableBoxProps, ResizableBoxState> {
 
-  static defaultProps = {
-    handleSize: [20,20]
+  // PropTypes are identical to <Resizable>, except that children are not strictly required to be present.
+  static propTypes = {
+    ...resizableProps,
+    children: PropTypes.element,
   };
 
-  state: State = {
+  state: ResizableBoxState = {
     width: this.props.width,
     height: this.props.height,
     propsWidth: this.props.width,
     propsHeight: this.props.height,
   };
 
-  static getDerivedStateFromProps(props: ResizableProps, state: State) {
+  static getDerivedStateFromProps(props: ResizableBoxProps, state: ResizableBoxState) {
     // If parent changes height/width, set that in our state.
     if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
       return {
@@ -43,8 +43,6 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
 
   onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
     const {size} = data;
-    const {width, height} = size;
-
     if (this.props.onResize) {
       e.persist && e.persist();
       this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
@@ -57,25 +55,43 @@ 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 {handle, handleSize, onResize, onResizeStart, onResizeStop, draggableOpts, minConstraints,
-      maxConstraints, lockAspectRatio, axis, width, height, resizeHandles, ...props} = this.props;
+    const {
+      handle,
+      handleSize,
+      onResize,
+      onResizeStart,
+      onResizeStop,
+      draggableOpts,
+      minConstraints,
+      maxConstraints,
+      lockAspectRatio,
+      axis,
+      width,
+      height,
+      resizeHandles,
+      style,
+      transformScale,
+      ...props
+    } = this.props;
+
     return (
       <Resizable
+        axis={axis}
+        draggableOpts={draggableOpts}
         handle={handle}
         handleSize={handleSize}
-        width={this.state.width}
         height={this.state.height}
+        lockAspectRatio={lockAspectRatio}
+        maxConstraints={maxConstraints}
+        minConstraints={minConstraints}
         onResizeStart={onResizeStart}
         onResize={this.onResize}
         onResizeStop={onResizeStop}
-        draggableOpts={draggableOpts}
-        minConstraints={minConstraints}
-        maxConstraints={maxConstraints}
-        lockAspectRatio={lockAspectRatio}
-        axis={axis}
         resizeHandles={resizeHandles}
+        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>
     );
   }

package/build/propTypes.js

@@ -0,0 +1,112 @@
+"use strict";
+
+exports.__esModule = true;
+exports.resizableProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDraggable = require("react-draggable");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var resizableProps = {
+  /*
+  * Restricts resizing to a particular axis (default: 'both')
+  * 'both' - allows resizing by width or height
+  * 'x' - only allows the width to be changed
+  * 'y' - only allows the height to be changed
+  * 'none' - disables resizing altogether
+  * */
+  axis: _propTypes.default.oneOf(['both', 'x', 'y', 'none']),
+  className: _propTypes.default.string,
+
+  /*
+  * Require that one and only one child be present.
+  * */
+  children: _propTypes.default.element.isRequired,
+
+  /*
+  * These will be passed wholesale to react-draggable's DraggableCore
+  * */
+  draggableOpts: _propTypes.default.shape({
+    allowAnyClick: _propTypes.default.bool,
+    cancel: _propTypes.default.string,
+    children: _propTypes.default.node,
+    disabled: _propTypes.default.bool,
+    enableUserSelectHack: _propTypes.default.bool,
+    offsetParent: _propTypes.default.node,
+    grid: _propTypes.default.arrayOf(_propTypes.default.number),
+    handle: _propTypes.default.string,
+    nodeRef: _propTypes.default.object,
+    onStart: _propTypes.default.func,
+    onDrag: _propTypes.default.func,
+    onStop: _propTypes.default.func,
+    onMouseDown: _propTypes.default.func,
+    scale: _propTypes.default.number
+  }),
+
+  /*
+  * Initial height
+  * */
+  height: _propTypes.default.number.isRequired,
+
+  /*
+  * Customize cursor resize handle
+  * */
+  handle: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+
+  /*
+  * If you change this, be sure to update your css
+  * */
+  handleSize: _propTypes.default.arrayOf(_propTypes.default.number),
+  lockAspectRatio: _propTypes.default.bool,
+
+  /*
+  * Max X & Y measure
+  * */
+  maxConstraints: _propTypes.default.arrayOf(_propTypes.default.number),
+
+  /*
+  * Min X & Y measure
+  * */
+  minConstraints: _propTypes.default.arrayOf(_propTypes.default.number),
+
+  /*
+  * Called on stop resize event
+  * */
+  onResizeStop: _propTypes.default.func,
+
+  /*
+  * Called on start resize event
+  * */
+  onResizeStart: _propTypes.default.func,
+
+  /*
+  * Called on resize event
+  * */
+  onResize: _propTypes.default.func,
+
+  /*
+  * Defines which resize handles should be rendered (default: 'se')
+  * '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.default.arrayOf(_propTypes.default.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+
+  /*
+  * If `transform: scale(n)` is set on the parent, this should be set to `n`.
+  * */
+  transformScale: _propTypes.default.number,
+
+  /*
+   * Initial width
+   */
+  width: _propTypes.default.number.isRequired
+};
+exports.resizableProps = resizableProps;