react-resizable 1.7.5 → 1.11.0

package/build/Resizable.js.flow

@@ -1,108 +1,31 @@
 // @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 './cloneElement';
-import type {Element as ReactElement, Node as ReactNode} from 'react';
-
-type Axis = 'both' | 'x' | 'y' | 'none';
-type State = {
-  resizing: boolean,
-  width: number, height: number,
-  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}
-};
-export type Props = {
-  children: ReactElement<any>,
-  className?: ?string,
-  width: number,
-  height: number,
-  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
-};
-
-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
-    //
-
-    // If you change this, be sure to update your css
-    handleSize: PropTypes.array,
-
-    // 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
-  };
+import {cloneElement} from './utils';
+import {resizableProps} from "./propTypes";
+import type {ResizeHandleAxis, Props, ResizableState, DragCallbackData} from './propTypes';
+
+export default class Resizable extends React.Component<Props, ResizableState> {
+  static propTypes = resizableProps;
 
   static defaultProps =  {
     handleSize: [20, 20],
     lockAspectRatio: false,
     axis: 'both',
     minConstraints: [20, 20],
-    maxConstraints: [Infinity, Infinity]
+    maxConstraints: [Infinity, Infinity],
+    resizeHandles: ['se'],
+    transformScale: 1
   };
 
-  state: State = {
-    resizing: false,
-    width: this.props.width, height: this.props.height,
-    slackW: 0, slackH: 0
-  };
+  state: ResizableState = undefined;
 
-  componentWillReceiveProps(nextProps: Object) {
-    // If parent changes height/width, set that in our state.
-    if (!this.state.resizing &&
-        (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
-    }
+  lastHandleRect: ?ClientRect = null;
+  slack: ?[number, number] = null;
+
+  componentWillUnmount() {
+    this.resetData();
   }
 
   lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
@@ -111,24 +34,37 @@ 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];
 
+    // If constraining to min and max, we need to also fit width and height to aspect ratio.
     if (this.props.lockAspectRatio) {
-      const ratio = this.state.width / this.state.height;
-      height = width / ratio;
-      width = height * ratio;
+      const resizingHorizontally = height === this.props.height;
+      if (resizingHorizontally) {
+        const ratio = this.props.width / this.props.height;
+        height = width / ratio;
+        width = height * ratio;
+      } else {
+        // Take into account vertical resize with N/S handles on locked aspect
+        // ratio. Calculate the change height-first, instead of width-first
+        const ratio = this.props.height / this.props.width;
+        width = height / ratio;
+        height = width * ratio;
+      }
     }
 
-    if (!min && !max) return [width, height];
-
     const [oldW, oldH] = [width, height];
 
     // 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;
 
@@ -141,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];
   }
@@ -157,75 +89,106 @@ export default class Resizable extends React.Component<Props, State> {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName: string): Function {
-    return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
+  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';
-      const canDragY = this.props.axis === 'both' || this.props.axis === 'y';
+      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.state.width + (canDragX ? deltaX : 0);
-      let height = this.state.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.state.width, heightChanged = height !== this.state.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') {
-        newState.resizing = true;
-      } else if (handlerName === 'onResizeStop') {
-        newState.resizing = false;
-        newState.slackW = newState.slackH = 0;
-      } else {
-        // Early return if no change after constraints
-        if (width === this.state.width && height === this.state.height) return;
-        newState.width = width;
-        newState.height = height;
-      }
+      const dimensionsChanged = width !== this.props.width || height !== this.props.height;
 
-      const hasCb = typeof this.props[handlerName] === 'function';
-      if (hasCb) {
+      // 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}}));
-      } else {
-        this.setState(newState);
+        cb(e, {node, size: {width, height}, handle: axis});
       }
+
+      // Reset internal data
+      if (handlerName === 'onResizeStop') this.resetData();
     };
   }
 
+  renderResizeHandle(resizeHandleAxis: ResizeHandleAxis): ReactNode {
+    const {handle} = this.props;
+    if (handle) {
+      if (typeof handle === 'function') {
+        return handle(resizeHandleAxis);
+      }
+      return handle;
+    }
+    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, ...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:
     // Its original children (resizable's child's children), and
-    // A draggable handle.
+    // One or more draggable handles.
     return cloneElement(children, {
       ...p,
-      className,
+      className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
-        children.props.children,
-        <DraggableCore
-          {...draggableOpts}
-          key="resizableHandle"
-          onStop={this.resizeHandler('onResizeStop')}
-          onStart={this.resizeHandler('onResizeStart')}
-          onDrag={this.resizeHandler('onResize')}
+        ...children.props.children,
+        ...resizeHandles.map((handleAxis) => (
+          <DraggableCore
+            {...draggableOpts}
+            key={`resizableHandle-${handleAxis}`}
+            onStop={this.resizeHandler('onResizeStop', handleAxis)}
+            onStart={this.resizeHandler('onResizeStart', handleAxis)}
+            onDrag={this.resizeHandler('onResize', handleAxis)}
           >
-          <span className="react-resizable-handle" />
-        </DraggableCore>
+            {this.renderResizeHandle(handleAxis)}
+          </DraggableCore>
+        ))
       ]
     });
   }

package/build/ResizableBox.js

@@ -1,118 +1,138 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-var _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; };
+var React = _interopRequireWildcard(require("react"));
 
-var _react = require('react');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = _interopRequireDefault(_react);
+var _Resizable = _interopRequireDefault(require("./Resizable"));
 
-var _propTypes = require('prop-types');
+var _propTypes2 = require("./propTypes");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _Resizable = require('./Resizable');
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _Resizable2 = _interopRequireDefault(_Resizable);
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-// An example use of Resizable.
-var ResizableBox = function (_React$Component) {
-  _inherits(ResizableBox, _React$Component);
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-  function ResizableBox() {
-    var _temp, _this, _ret;
+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; }
 
-    _classCallCheck(this, ResizableBox);
+var ResizableBox = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ResizableBox, _React$Component);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+  function ResizableBox() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       width: _this.props.width,
-      height: _this.props.height
-    }, _this.onResize = function (e, data) {
-      var size = data.size;
-      var width = size.width,
-          height = size.height;
+      height: _this.props.height,
+      propsWidth: _this.props.width,
+      propsHeight: _this.props.height
+    });
 
+    _defineProperty(_assertThisInitialized(_this), "onResize", function (e, data) {
+      var size = data.size;
 
       if (_this.props.onResize) {
         e.persist && e.persist();
+
         _this.setState(size, function () {
           return _this.props.onResize && _this.props.onResize(e, data);
         });
       } else {
         _this.setState(size);
       }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    return _this;
   }
 
-  ResizableBox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
+  ResizableBox.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    // If parent changes height/width, set that in our state.
+    if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
+      return {
+        width: props.width,
+        height: props.height,
+        propsWidth: props.width,
+        propsHeight: props.height
+      };
     }
+
+    return null;
   };
 
-  ResizableBox.prototype.render = function render() {
+  var _proto = ResizableBox.prototype;
+
+  _proto.render = function render() {
     // 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.
-    var _props = this.props,
-        handleSize = _props.handleSize,
-        onResize = _props.onResize,
-        onResizeStart = _props.onResizeStart,
-        onResizeStop = _props.onResizeStop,
-        draggableOpts = _props.draggableOpts,
-        minConstraints = _props.minConstraints,
-        maxConstraints = _props.maxConstraints,
-        lockAspectRatio = _props.lockAspectRatio,
-        axis = _props.axis,
-        width = _props.width,
-        height = _props.height,
-        props = _objectWithoutProperties(_props, ['handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height']);
-
-    return _react2.default.createElement(
-      _Resizable2.default,
-      {
-        handleSize: handleSize,
-        width: this.state.width,
-        height: this.state.height,
-        onResizeStart: onResizeStart,
-        onResize: this.onResize,
-        onResizeStop: onResizeStop,
-        draggableOpts: draggableOpts,
-        minConstraints: minConstraints,
-        maxConstraints: maxConstraints,
-        lockAspectRatio: lockAspectRatio,
-        axis: axis
-      },
-      _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))
-    );
+    var _this$props = this.props,
+        handle = _this$props.handle,
+        handleSize = _this$props.handleSize,
+        onResize = _this$props.onResize,
+        onResizeStart = _this$props.onResizeStart,
+        onResizeStop = _this$props.onResizeStop,
+        draggableOpts = _this$props.draggableOpts,
+        minConstraints = _this$props.minConstraints,
+        maxConstraints = _this$props.maxConstraints,
+        lockAspectRatio = _this$props.lockAspectRatio,
+        axis = _this$props.axis,
+        width = _this$props.width,
+        height = _this$props.height,
+        resizeHandles = _this$props.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 /*#__PURE__*/React.createElement(_Resizable.default, {
+      axis: axis,
+      draggableOpts: draggableOpts,
+      handle: handle,
+      handleSize: handleSize,
+      height: this.state.height,
+      lockAspectRatio: lockAspectRatio,
+      maxConstraints: maxConstraints,
+      minConstraints: minConstraints,
+      onResizeStart: onResizeStart,
+      onResize: this.onResize,
+      onResizeStop: onResizeStop,
+      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'
+      })
+    })));
   };
 
   return ResizableBox;
-}(_react2.default.Component);
-
-ResizableBox.propTypes = {
-  height: _propTypes2.default.number,
-  width: _propTypes2.default.number
-};
-ResizableBox.defaultProps = {
-  handleSize: [20, 20]
-};
-exports.default = ResizableBox;
+}(React.Component);
+
+exports.default = ResizableBox;
+
+_defineProperty(ResizableBox, "propTypes", _objectSpread(_objectSpread({}, _propTypes2.resizableProps), {}, {
+  children: _propTypes.default.element
+}));