react-resizable 3.0.5 → 3.1.1

package/build/ResizableBox.js

@@ -6,47 +6,44 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Resizable = _interopRequireDefault(require("./Resizable"));
 var _propTypes2 = require("./propTypes");
-var _excluded = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? Object.assign.bind() : 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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-var ResizableBox = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ResizableBox, _React$Component);
-  function ResizableBox() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
-      width: _this.props.width,
-      height: _this.props.height,
-      propsWidth: _this.props.width,
-      propsHeight: _this.props.height
+const _excluded = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+// 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.
+
+class ResizableBox extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      width: this.props.width,
+      height: this.props.height,
+      propsWidth: this.props.width,
+      propsHeight: this.props.height
     };
-    _this.onResize = function (e, data) {
-      var size = data.size;
-      if (_this.props.onResize) {
-        e.persist == null ? void 0 : e.persist();
-        _this.setState(size, function () {
-          return _this.props.onResize && _this.props.onResize(e, data);
-        });
+    this.onResize = (e, data) => {
+      const {
+        size
+      } = data;
+      if (this.props.onResize) {
+        e.persist?.();
+        this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
       } else {
-        _this.setState(size);
+        this.setState(size);
       }
     };
-    return _this;
   }
-  ResizableBox.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props, state) {
     // If parent changes height/width, set that in our state.
     if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
       return {
@@ -57,29 +54,30 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
       };
     }
     return null;
-  };
-  var _proto = ResizableBox.prototype;
-  _proto.render = function render() {
+  }
+  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 _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, _excluded);
+    const _this$props = this.props,
+      {
+        handle,
+        handleSize,
+        onResize,
+        onResizeStart,
+        onResizeStop,
+        draggableOpts,
+        minConstraints,
+        maxConstraints,
+        lockAspectRatio,
+        axis,
+        width,
+        height,
+        resizeHandles,
+        style,
+        transformScale
+      } = _this$props,
+      props = _objectWithoutProperties(_this$props, _excluded);
     return /*#__PURE__*/React.createElement(_Resizable.default, {
       axis: axis,
       draggableOpts: draggableOpts,
@@ -101,9 +99,8 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
         height: this.state.height + 'px'
       })
     })));
-  };
-  return ResizableBox;
-}(React.Component);
+  }
+}
 exports.default = ResizableBox;
 // PropTypes are identical to <Resizable>, except that children are not strictly required to be present.
 ResizableBox.propTypes = _objectSpread(_objectSpread({}, _propTypes2.resizableProps), {}, {

package/build/propTypes.js

@@ -4,8 +4,10 @@ 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 = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* global Element */
+// <Resizable>
+const resizableProps = exports.resizableProps = {
   /*
   * Restricts resizing to a particular axis (default: 'both')
   * 'both' - allows resizing by width or height
@@ -28,7 +30,7 @@ var resizableProps = {
     children: _propTypes.default.node,
     disabled: _propTypes.default.bool,
     enableUserSelectHack: _propTypes.default.bool,
-    offsetParent: _propTypes.default.node,
+    offsetParent: _propTypes.default.instanceOf(Element),
     grid: _propTypes.default.arrayOf(_propTypes.default.number),
     handle: _propTypes.default.string,
     nodeRef: _propTypes.default.object,
@@ -41,17 +43,16 @@ var resizableProps = {
   /*
   * Initial height
   * */
-  height: function height() {
+  height: function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    var props = args[0];
+    const [props] = args;
     // Required if resizing height or both
     if (props.axis === 'both' || props.axis === 'y') {
-      var _PropTypes$number;
-      return (_PropTypes$number = _propTypes.default.number).isRequired.apply(_PropTypes$number, args);
+      return _propTypes.default.number.isRequired(...args);
     }
-    return _propTypes.default.number.apply(_propTypes.default, args);
+    return _propTypes.default.number(...args);
   },
   /*
   * Customize cursor resize handle
@@ -101,17 +102,15 @@ var resizableProps = {
   /*
    * Initial width
    */
-  width: function width() {
+  width: function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    var props = args[0];
+    const [props] = args;
     // Required if resizing width or both
     if (props.axis === 'both' || props.axis === 'x') {
-      var _PropTypes$number2;
-      return (_PropTypes$number2 = _propTypes.default.number).isRequired.apply(_PropTypes$number2, args);
+      return _propTypes.default.number.isRequired(...args);
     }
-    return _propTypes.default.number.apply(_propTypes.default, args);
+    return _propTypes.default.number(...args);
   }
-};
-exports.resizableProps = resizableProps;
+};

package/build/propTypes.js.flow

@@ -1,4 +1,5 @@
 // @flow
+/* global Element */
 import PropTypes from 'prop-types';
 import {DraggableCore} from "react-draggable";
 import type {Element as ReactElement, ElementConfig} from 'react';
@@ -75,7 +76,7 @@ export const resizableProps: Object = {
     children: PropTypes.node,
     disabled: PropTypes.bool,
     enableUserSelectHack: PropTypes.bool,
-    offsetParent: PropTypes.node,
+    offsetParent: PropTypes.instanceOf(Element),
     grid: PropTypes.arrayOf(PropTypes.number),
     handle: PropTypes.string,
     nodeRef: PropTypes.object,

package/build/utils.js

@@ -3,19 +3,19 @@
 exports.__esModule = true;
 exports.cloneElement = cloneElement;
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // React.addons.cloneWithProps look-alike that merges style & className.
 function cloneElement(element, props) {
   if (props.style && element.props.style) {
     props.style = _objectSpread(_objectSpread({}, element.props.style), props.style);
   }
   if (props.className && element.props.className) {
-    props.className = element.props.className + " " + props.className;
+    props.className = `${element.props.className} ${props.className}`;
   }
   return /*#__PURE__*/_react.default.cloneElement(element, props);
 }