@m4l/components 0.0.0 → 0.0.3

package/dist/react-resizable.js

@@ -0,0 +1,594 @@
+import require$$0 from "react";
+import { c as cjs } from "./react-draggable.js";
+import require$$1 from "prop-types";
+var reactResizable = { exports: {} };
+var Resizable$1 = {};
+var utils = {};
+utils.__esModule = true;
+utils.cloneElement = cloneElement;
+var _react = _interopRequireDefault$2(require$$0);
+function _interopRequireDefault$2(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+function ownKeys$2(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$2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys$2(Object(source), true).forEach(function(key) {
+        _defineProperty$2(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$2(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function _defineProperty$2(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function cloneElement(element, props) {
+  if (props.style && element.props.style) {
+    props.style = _objectSpread$2(_objectSpread$2({}, element.props.style), props.style);
+  }
+  if (props.className && element.props.className) {
+    props.className = element.props.className + " " + props.className;
+  }
+  return /* @__PURE__ */ _react.default.cloneElement(element, props);
+}
+var propTypes = {};
+propTypes.__esModule = true;
+propTypes.resizableProps = void 0;
+var _propTypes$2 = _interopRequireDefault$1(require$$1);
+function _interopRequireDefault$1(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var resizableProps = {
+  axis: _propTypes$2.default.oneOf(["both", "x", "y", "none"]),
+  className: _propTypes$2.default.string,
+  children: _propTypes$2.default.element.isRequired,
+  draggableOpts: _propTypes$2.default.shape({
+    allowAnyClick: _propTypes$2.default.bool,
+    cancel: _propTypes$2.default.string,
+    children: _propTypes$2.default.node,
+    disabled: _propTypes$2.default.bool,
+    enableUserSelectHack: _propTypes$2.default.bool,
+    offsetParent: _propTypes$2.default.node,
+    grid: _propTypes$2.default.arrayOf(_propTypes$2.default.number),
+    handle: _propTypes$2.default.string,
+    nodeRef: _propTypes$2.default.object,
+    onStart: _propTypes$2.default.func,
+    onDrag: _propTypes$2.default.func,
+    onStop: _propTypes$2.default.func,
+    onMouseDown: _propTypes$2.default.func,
+    scale: _propTypes$2.default.number
+  }),
+  height: _propTypes$2.default.number.isRequired,
+  handle: _propTypes$2.default.oneOfType([_propTypes$2.default.node, _propTypes$2.default.func]),
+  handleSize: _propTypes$2.default.arrayOf(_propTypes$2.default.number),
+  lockAspectRatio: _propTypes$2.default.bool,
+  maxConstraints: _propTypes$2.default.arrayOf(_propTypes$2.default.number),
+  minConstraints: _propTypes$2.default.arrayOf(_propTypes$2.default.number),
+  onResizeStop: _propTypes$2.default.func,
+  onResizeStart: _propTypes$2.default.func,
+  onResize: _propTypes$2.default.func,
+  resizeHandles: _propTypes$2.default.arrayOf(_propTypes$2.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])),
+  transformScale: _propTypes$2.default.number,
+  width: _propTypes$2.default.number.isRequired
+};
+propTypes.resizableProps = resizableProps;
+Resizable$1.__esModule = true;
+Resizable$1.default = void 0;
+var React$1 = _interopRequireWildcard$1(require$$0);
+var _reactDraggable = cjs.exports;
+var _utils = utils;
+var _propTypes$1 = propTypes;
+var _excluded$1 = ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"];
+function _getRequireWildcardCache$1(nodeInterop) {
+  if (typeof WeakMap !== "function")
+    return null;
+  var cacheBabelInterop = /* @__PURE__ */ new WeakMap();
+  var cacheNodeInterop = /* @__PURE__ */ new WeakMap();
+  return (_getRequireWildcardCache$1 = function _getRequireWildcardCache2(nodeInterop2) {
+    return nodeInterop2 ? cacheNodeInterop : cacheBabelInterop;
+  })(nodeInterop);
+}
+function _interopRequireWildcard$1(obj, nodeInterop) {
+  if (!nodeInterop && obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache$1(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$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$1(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 ownKeys$1(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$1(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys$1(Object(source), true).forEach(function(key) {
+        _defineProperty$1(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$1(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function _defineProperty$1(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _inheritsLoose$1(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf$1(subClass, superClass);
+}
+function _setPrototypeOf$1(o, p) {
+  _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf2(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _setPrototypeOf$1(o, p);
+}
+var Resizable = /* @__PURE__ */ function(_React$Component) {
+  _inheritsLoose$1(Resizable2, _React$Component);
+  function Resizable2() {
+    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.handleRefs = {};
+    _this.lastHandleRect = null;
+    _this.slack = null;
+    return _this;
+  }
+  var _proto = Resizable2.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.resetData();
+  };
+  _proto.resetData = function resetData() {
+    this.lastHandleRect = this.slack = null;
+  };
+  _proto.runConstraints = function runConstraints(width, height) {
+    var _this$props = this.props, minConstraints = _this$props.minConstraints, maxConstraints = _this$props.maxConstraints, lockAspectRatio = _this$props.lockAspectRatio;
+    if (!minConstraints && !maxConstraints && !lockAspectRatio)
+      return [width, height];
+    if (lockAspectRatio) {
+      var ratio = this.props.width / this.props.height;
+      var deltaW = width - this.props.width;
+      var deltaH = height - this.props.height;
+      if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
+        height = width / ratio;
+      } else {
+        width = height * ratio;
+      }
+    }
+    var oldW = width, oldH = height;
+    var _ref = this.slack || [0, 0], slackW = _ref[0], slackH = _ref[1];
+    width += slackW;
+    height += slackH;
+    if (minConstraints) {
+      width = Math.max(minConstraints[0], width);
+      height = Math.max(minConstraints[1], height);
+    }
+    if (maxConstraints) {
+      width = Math.min(maxConstraints[0], width);
+      height = Math.min(maxConstraints[1], height);
+    }
+    this.slack = [slackW + (oldW - width), slackH + (oldH - height)];
+    return [width, height];
+  };
+  _proto.resizeHandler = function resizeHandler(handlerName, axis) {
+    var _this2 = this;
+    return function(e, _ref2) {
+      var node = _ref2.node, deltaX = _ref2.deltaX, deltaY = _ref2.deltaY;
+      if (handlerName === "onResizeStart")
+        _this2.resetData();
+      var canDragX = (_this2.props.axis === "both" || _this2.props.axis === "x") && axis !== "n" && axis !== "s";
+      var canDragY = (_this2.props.axis === "both" || _this2.props.axis === "y") && axis !== "e" && axis !== "w";
+      if (!canDragX && !canDragY)
+        return;
+      var axisV = axis[0];
+      var axisH = axis[axis.length - 1];
+      var handleRect = node.getBoundingClientRect();
+      if (_this2.lastHandleRect != null) {
+        if (axisH === "w") {
+          var deltaLeftSinceLast = handleRect.left - _this2.lastHandleRect.left;
+          deltaX += deltaLeftSinceLast;
+        }
+        if (axisV === "n") {
+          var deltaTopSinceLast = handleRect.top - _this2.lastHandleRect.top;
+          deltaY += deltaTopSinceLast;
+        }
+      }
+      _this2.lastHandleRect = handleRect;
+      if (axisH === "w")
+        deltaX = -deltaX;
+      if (axisV === "n")
+        deltaY = -deltaY;
+      var width = _this2.props.width + (canDragX ? deltaX / _this2.props.transformScale : 0);
+      var height = _this2.props.height + (canDragY ? deltaY / _this2.props.transformScale : 0);
+      var _this2$runConstraints = _this2.runConstraints(width, height);
+      width = _this2$runConstraints[0];
+      height = _this2$runConstraints[1];
+      var dimensionsChanged = width !== _this2.props.width || height !== _this2.props.height;
+      var cb = typeof _this2.props[handlerName] === "function" ? _this2.props[handlerName] : null;
+      var shouldSkipCb = handlerName === "onResize" && !dimensionsChanged;
+      if (cb && !shouldSkipCb) {
+        e.persist == null ? void 0 : e.persist();
+        cb(e, {
+          node,
+          size: {
+            width,
+            height
+          },
+          handle: axis
+        });
+      }
+      if (handlerName === "onResizeStop")
+        _this2.resetData();
+    };
+  };
+  _proto.renderResizeHandle = function renderResizeHandle(handleAxis, ref) {
+    var handle = this.props.handle;
+    if (!handle) {
+      return /* @__PURE__ */ React$1.createElement("span", {
+        className: "react-resizable-handle react-resizable-handle-" + handleAxis,
+        ref
+      });
+    }
+    if (typeof handle === "function") {
+      return handle(handleAxis, ref);
+    }
+    var isDOMElement = typeof handle.type === "string";
+    var props = _objectSpread$1({
+      ref
+    }, isDOMElement ? {} : {
+      handleAxis
+    });
+    return /* @__PURE__ */ React$1.cloneElement(handle, props);
+  };
+  _proto.render = function render() {
+    var _this3 = this;
+    var _this$props2 = this.props, children = _this$props2.children, className = _this$props2.className, draggableOpts = _this$props2.draggableOpts;
+    _this$props2.width;
+    _this$props2.height;
+    _this$props2.handle;
+    _this$props2.handleSize;
+    _this$props2.lockAspectRatio;
+    _this$props2.axis;
+    _this$props2.minConstraints;
+    _this$props2.maxConstraints;
+    _this$props2.onResize;
+    _this$props2.onResizeStop;
+    _this$props2.onResizeStart;
+    var resizeHandles = _this$props2.resizeHandles;
+    _this$props2.transformScale;
+    var p = _objectWithoutPropertiesLoose$1(_this$props2, _excluded$1);
+    return (0, _utils.cloneElement)(children, _objectSpread$1(_objectSpread$1({}, p), {}, {
+      className: (className ? className + " " : "") + "react-resizable",
+      children: [].concat(children.props.children, resizeHandles.map(function(handleAxis) {
+        var _this3$handleRefs$han;
+        var ref = (_this3$handleRefs$han = _this3.handleRefs[handleAxis]) != null ? _this3$handleRefs$han : _this3.handleRefs[handleAxis] = /* @__PURE__ */ React$1.createRef();
+        return /* @__PURE__ */ React$1.createElement(_reactDraggable.DraggableCore, _extends$1({}, draggableOpts, {
+          nodeRef: ref,
+          key: "resizableHandle-" + handleAxis,
+          onStop: _this3.resizeHandler("onResizeStop", handleAxis),
+          onStart: _this3.resizeHandler("onResizeStart", handleAxis),
+          onDrag: _this3.resizeHandler("onResize", handleAxis)
+        }), _this3.renderResizeHandle(handleAxis, ref));
+      }))
+    }));
+  };
+  return Resizable2;
+}(React$1.Component);
+Resizable$1.default = Resizable;
+Resizable.propTypes = _propTypes$1.resizableProps;
+Resizable.defaultProps = {
+  axis: "both",
+  handleSize: [20, 20],
+  lockAspectRatio: false,
+  minConstraints: [20, 20],
+  maxConstraints: [Infinity, Infinity],
+  resizeHandles: ["se"],
+  transformScale: 1
+};
+var ResizableBox$2 = {};
+ResizableBox$2.__esModule = true;
+ResizableBox$2.default = void 0;
+var React = _interopRequireWildcard(require$$0);
+var _propTypes = _interopRequireDefault(require$$1);
+var _Resizable = _interopRequireDefault(Resizable$1);
+var _propTypes2 = 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 = /* @__PURE__ */ new WeakMap();
+  var cacheNodeInterop = /* @__PURE__ */ new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache2(nodeInterop2) {
+    return nodeInterop2 ? 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 || 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 _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+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 || function _setPrototypeOf2(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _setPrototypeOf(o, p);
+}
+var ResizableBox$1 = /* @__PURE__ */ function(_React$Component) {
+  _inheritsLoose(ResizableBox2, _React$Component);
+  function ResizableBox2() {
+    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
+    };
+    _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);
+        });
+      } else {
+        _this.setState(size);
+      }
+    };
+    return _this;
+  }
+  ResizableBox2.getDerivedStateFromProps = function getDerivedStateFromProps(props, 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;
+  };
+  var _proto = ResizableBox2.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props, handle = _this$props.handle, handleSize = _this$props.handleSize;
+    _this$props.onResize;
+    var 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;
+    _this$props.width;
+    _this$props.height;
+    var resizeHandles = _this$props.resizeHandles, style = _this$props.style, transformScale = _this$props.transformScale, props = _objectWithoutPropertiesLoose(_this$props, _excluded);
+    return /* @__PURE__ */ React.createElement(_Resizable.default, {
+      axis,
+      draggableOpts,
+      handle,
+      handleSize,
+      height: this.state.height,
+      lockAspectRatio,
+      maxConstraints,
+      minConstraints,
+      onResizeStart,
+      onResize: this.onResize,
+      onResizeStop,
+      resizeHandles,
+      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 ResizableBox2;
+}(React.Component);
+ResizableBox$2.default = ResizableBox$1;
+ResizableBox$1.propTypes = _objectSpread(_objectSpread({}, _propTypes2.resizableProps), {}, {
+  children: _propTypes.default.element
+});
+reactResizable.exports = function() {
+  throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable");
+};
+reactResizable.exports.Resizable = Resizable$1.default;
+var ResizableBox = reactResizable.exports.ResizableBox = ResizableBox$2.default;
+export { ResizableBox as R };