@pie-element/drawing-response 10.3.4-next.3 → 11.0.0-beta.1

package/configure/lib/image-container.js

@@ -1,396 +1,307 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ImageContainer = void 0;
-
+exports.default = exports.ImageContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _button = _interopRequireDefault(require("./button"));
-
-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 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) { (0, _defineProperty2["default"])(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var isImage = function isImage(file) {
-  var imageType = /image.*/;
+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); }
+const isImage = file => {
+  const imageType = /image.*/;
   return file.type.match(imageType);
 };
-
-var ImageContainer = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(ImageContainer, _Component);
-
-  var _super = _createSuper(ImageContainer);
-
-  function ImageContainer(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ImageContainer);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFileRead", function (file) {
-      var _this$props = _this.props,
-          onImageUpload = _this$props.onImageUpload,
-          insertImage = _this$props.insertImage;
-      var reader = new FileReader();
-
-      reader.onloadend = function () {
-        return onImageUpload(reader.result);
-      };
-
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(1)
+}));
+const Box = (0, _styles.styled)('div')(({
+  active
+}) => ({
+  border: active ? '1px solid #0032C2' : '1px solid #E0E1E6',
+  borderRadius: '5px'
+}));
+const CenteredDiv = (0, _styles.styled)('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+});
+const DrawableHeight = (0, _styles.styled)('div')({
+  minHeight: 350
+});
+const Image = (0, _styles.styled)('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const StyledImageContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  width: 'fit-content'
+});
+const ResizeHandle = (0, _styles.styled)('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px'
+});
+const HiddenInput = (0, _styles.styled)('input')({
+  display: 'none'
+});
+const Toolbar = (0, _styles.styled)('div')({
+  backgroundColor: '#ECEDF1',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  padding: '12px 8px'
+});
+class ImageContainer extends _react.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleFileRead", file => {
+      const {
+        onImageUpload,
+        insertImage
+      } = this.props;
+      const reader = new FileReader();
+      reader.onloadend = () => onImageUpload(reader.result);
       reader.readAsDataURL(file);
-
       if (insertImage) {
-        insertImage(_objectSpread(_objectSpread({}, _this.fakeImageHandler), {}, {
-          getChosenFile: function getChosenFile() {
-            return file;
-          },
+        insertImage({
+          ...this.fakeImageHandler,
+          getChosenFile: () => file,
           isPasted: true
-        }));
+        });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadImage", function (e) {
+    (0, _defineProperty2.default)(this, "handleUploadImage", e => {
       e.preventDefault();
-      var file = e.target.files[0];
-
-      _this.handleFileRead(file);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "makeDropzoneActive", function () {
-      return _this.setState({
-        dropzoneActive: true
-      });
+      const file = e.target.files[0];
+      this.handleFileRead(file);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "makeDropzoneInactive", function () {
-      return _this.setState({
-        dropzoneActive: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
+    (0, _defineProperty2.default)(this, "makeDropzoneActive", () => this.setState({
+      dropzoneActive: true
+    }));
+    (0, _defineProperty2.default)(this, "makeDropzoneInactive", () => this.setState({
+      dropzoneActive: false
+    }));
+    (0, _defineProperty2.default)(this, "handleOnDrop", e => {
       e.preventDefault();
-      var _e$dataTransfer = e.dataTransfer,
-          items = _e$dataTransfer.items,
-          files = _e$dataTransfer.files;
-
+      const {
+        items,
+        files
+      } = e.dataTransfer;
       if (items && items[0].kind === 'file') {
-        var file = items[0].getAsFile();
-
+        const file = items[0].getAsFile();
         if (isImage(file)) {
-          _this.handleFileRead(file);
+          this.handleFileRead(file);
         }
       } else if (isImage(files[0])) {
-        _this.handleFileRead(files[0]);
+        this.handleFileRead(files[0]);
       }
-
-      _this.makeDropzoneInactive();
+      this.makeDropzoneInactive();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragOver", function (e) {
+    (0, _defineProperty2.default)(this, "handleOnDragOver", e => {
       e.preventDefault();
-      var dropzoneActive = _this.state.dropzoneActive;
-
+      const {
+        dropzoneActive
+      } = this.state;
       if (!dropzoneActive) {
-        _this.makeDropzoneActive();
+        this.makeDropzoneActive();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragExit", function (e) {
+    (0, _defineProperty2.default)(this, "handleOnDragExit", e => {
       e.preventDefault();
-
-      _this.makeDropzoneInactive();
+      this.makeDropzoneInactive();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleEnableDrag", function () {
-      return _this.setState({
-        dragEnabled: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDisableDrag", function () {
-      return _this.setState({
-        dragEnabled: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputClick", function () {
-      var insertImage = _this.props.insertImage;
-
+    (0, _defineProperty2.default)(this, "handleEnableDrag", () => this.setState({
+      dragEnabled: true
+    }));
+    (0, _defineProperty2.default)(this, "handleDisableDrag", () => this.setState({
+      dragEnabled: false
+    }));
+    (0, _defineProperty2.default)(this, "handleInputClick", () => {
+      const {
+        insertImage
+      } = this.props;
       if (insertImage) {
-        insertImage(_this.fakeImageHandler);
+        insertImage(this.fakeImageHandler);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnImageLoad", function (_ref) {
-      var _ref$target = _ref.target,
-          offsetHeight = _ref$target.offsetHeight,
-          offsetWidth = _ref$target.offsetWidth,
-          naturalHeight = _ref$target.naturalHeight,
-          naturalWidth = _ref$target.naturalWidth;
-      var _this$props2 = _this.props,
-          onUpdateImageDimension = _this$props2.onUpdateImageDimension,
-          imageDimensions = _this$props2.imageDimensions;
-      var resizeHandle = _this.resize;
-      var dimensions = {
+    (0, _defineProperty2.default)(this, "handleOnImageLoad", ({
+      target: {
+        offsetHeight,
+        offsetWidth,
+        naturalHeight,
+        naturalWidth
+      }
+    }) => {
+      const {
+        onUpdateImageDimension,
+        imageDimensions
+      } = this.props;
+      const resizeHandle = this.resize;
+      const dimensions = {
         height: imageDimensions && imageDimensions.height || offsetHeight || naturalHeight,
         width: imageDimensions && imageDimensions.width || offsetWidth || naturalWidth
-      }; // check if aspect ratio is not respected on replacing image
-
-      var imageAspectRatio = naturalWidth / naturalHeight;
+      };
 
+      // check if aspect ratio is not respected on replacing image
+      const imageAspectRatio = naturalWidth / naturalHeight;
       if (dimensions.width !== dimensions.height * imageAspectRatio) {
         dimensions.width = dimensions.height * imageAspectRatio;
       }
-
-      _this.setState({
-        dimensions: dimensions
+      this.setState({
+        dimensions
       });
-
       onUpdateImageDimension(dimensions);
-      resizeHandle.addEventListener('mousedown', _this.initialiseResize, false);
+      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initialiseResize", function () {
-      window.addEventListener('mousemove', _this.startResizing, false);
-      window.addEventListener('mouseup', _this.stopResizing, false);
+    (0, _defineProperty2.default)(this, "initialiseResize", () => {
+      window.addEventListener('mousemove', this.startResizing, false);
+      window.addEventListener('mouseup', this.stopResizing, false);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      var onUpdateImageDimension = _this.props.onUpdateImageDimension;
-      var dimensions = _this.state.dimensions;
-
-      _this.handleEnableDrag();
-
+    (0, _defineProperty2.default)(this, "stopResizing", () => {
+      const {
+        onUpdateImageDimension
+      } = this.props;
+      const {
+        dimensions
+      } = this.state;
+      this.handleEnableDrag();
       onUpdateImageDimension(dimensions);
-      window.removeEventListener('mousemove', _this.startResizing, false);
-      window.removeEventListener('mouseup', _this.stopResizing, false);
+      window.removeEventListener('mousemove', this.startResizing, false);
+      window.removeEventListener('mouseup', this.stopResizing, false);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
-      var box = _this.image;
-      var _this$state = _this.state,
-          maxImageWidth = _this$state.maxImageWidth,
-          maxImageHeight = _this$state.maxImageHeight,
-          dimensions = _this$state.dimensions;
-      var bounds = e.target.getBoundingClientRect();
-      var x = e.clientX - bounds.left;
-      var y = e.clientY - bounds.top;
-      var imageAspectRatio = dimensions.width / dimensions.height;
-      var fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
-      var hasMinimumWidth = x > 150 && y > 150;
-
+    (0, _defineProperty2.default)(this, "startResizing", e => {
+      const box = this.image;
+      const {
+        maxImageWidth,
+        maxImageHeight,
+        dimensions
+      } = this.state;
+      const bounds = e.target.getBoundingClientRect();
+      const x = e.clientX - bounds.left;
+      const y = e.clientY - bounds.top;
+      const imageAspectRatio = dimensions.width / dimensions.height;
+      const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
+      const hasMinimumWidth = x > 150 && y > 150;
       if (fitsContainer && hasMinimumWidth && box) {
-        box.style.width = "".concat(x, "px");
-        box.style.height = "".concat(x / imageAspectRatio, "px");
-
-        _this.setState({
+        box.style.width = `${x}px`;
+        box.style.height = `${x / imageAspectRatio}px`;
+        this.setState({
           dimensions: {
             width: x,
             height: x / imageAspectRatio
           }
         });
       }
-
-      _this.handleDisableDrag();
+      this.handleDisableDrag();
     });
-    _this.state = {
+    this.state = {
       maxImageWidth: '100%',
       maxImageHeight: 'auto',
       dragEnabled: true,
       dropzoneActive: false
     };
-    _this.fakeImageHandler = {
-      cancel: function cancel() {},
-      done: function done(a, url) {
-        return _this.props.onImageUpload(url);
-      },
-      fileChosen: function fileChosen() {},
-      progress: function progress() {}
+    this.fakeImageHandler = {
+      cancel: () => {},
+      done: (a, url) => this.props.onImageUpload(url),
+      fileChosen: () => {},
+      progress: () => {}
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(ImageContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.imageSection) {
-        var positionInfo = this.imageSection.getBoundingClientRect();
-        var height = positionInfo.height,
-            width = positionInfo.width;
-        this.setState({
-          maxImageWidth: width,
-          maxImageHeight: height
-        });
-      }
-    }
-  }, {
-    key: "renderUploadControl",
-    value: function renderUploadControl(label) {
-      var _this2 = this;
-
-      var classes = this.props.classes;
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        label: label,
-        onClick: this.handleInputClick
-      }), /*#__PURE__*/_react["default"].createElement("input", {
-        accept: "image/*",
-        className: classes.input,
-        onChange: this.handleUploadImage,
-        ref: function ref(_ref2) {
-          _this2.input = _ref2;
-        },
-        type: "file"
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          imageUrl = _this$props3.imageUrl,
-          imageDimensions = _this$props3.imageDimensions;
-      var _this$state2 = this.state,
-          dropzoneActive = _this$state2.dropzoneActive,
-          dragEnabled = _this$state2.dragEnabled,
-          maxImageHeight = _this$state2.maxImageHeight,
-          maxImageWidth = _this$state2.maxImageWidth;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base
-      }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-        className: "".concat(classes.box, " ").concat(dropzoneActive ? classes.boxActive : '')
-      }, dragEnabled ? {
-        onDragExit: this.handleOnDragExit,
-        onDragLeave: this.handleOnDragExit,
-        onDragOver: this.handleOnDragOver,
-        onDrop: this.handleOnDrop
-      } : {}), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.toolbar
-      }, this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')), /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref5) {
-          _this3.imageSection = _ref5;
-        },
-        className: classes.drawableHeight
-      }, imageUrl ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.imageContainer
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        className: classes.image,
-        height: "auto",
-        onLoad: this.handleOnImageLoad,
-        ref: function ref(_ref3) {
-          _this3.image = _ref3;
-        },
-        src: imageUrl,
-        style: {
-          width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
-          maxWidth: maxImageWidth,
-          maxHeight: maxImageHeight
-        },
-        alt: ""
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref4) {
-          _this3.resize = _ref4;
-        },
-        className: classes.resize
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.drawableHeight, " ").concat(classes.centered)
-      }, /*#__PURE__*/_react["default"].createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react["default"].createElement("br", null), this.renderUploadControl('Upload Image')))));
+  componentDidMount() {
+    if (this.imageSection) {
+      const positionInfo = this.imageSection.getBoundingClientRect();
+      const {
+        height,
+        width
+      } = positionInfo;
+      this.setState({
+        maxImageWidth: width,
+        maxImageHeight: height
+      });
     }
-  }]);
-  return ImageContainer;
-}(_react.Component);
-
+  }
+  renderUploadControl(label) {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_button.default, {
+      label: label,
+      onClick: this.handleInputClick
+    }), /*#__PURE__*/_react.default.createElement(HiddenInput, {
+      accept: "image/*",
+      onChange: this.handleUploadImage,
+      ref: ref => {
+        this.input = ref;
+      },
+      type: "file"
+    }));
+  }
+  render() {
+    const {
+      imageUrl,
+      imageDimensions
+    } = this.props;
+    const {
+      dropzoneActive,
+      dragEnabled,
+      maxImageHeight,
+      maxImageWidth
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement(Box, (0, _extends2.default)({
+      active: dropzoneActive
+    }, dragEnabled ? {
+      onDragExit: this.handleOnDragExit,
+      onDragLeave: this.handleOnDragExit,
+      onDragOver: this.handleOnDragOver,
+      onDrop: this.handleOnDrop
+    } : {}), /*#__PURE__*/_react.default.createElement(Toolbar, null, this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')), /*#__PURE__*/_react.default.createElement(DrawableHeight, {
+      ref: ref => {
+        this.imageSection = ref;
+      }
+    }, imageUrl ? /*#__PURE__*/_react.default.createElement(StyledImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
+      height: "auto",
+      onLoad: this.handleOnImageLoad,
+      ref: ref => {
+        this.image = ref;
+      },
+      src: imageUrl,
+      style: {
+        width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
+        maxWidth: maxImageWidth,
+        maxHeight: maxImageHeight
+      },
+      alt: ""
+    }), /*#__PURE__*/_react.default.createElement(ResizeHandle, {
+      ref: ref => {
+        this.resize = ref;
+      }
+    })) : /*#__PURE__*/_react.default.createElement(DrawableHeight, {
+      as: CenteredDiv
+    }, /*#__PURE__*/_react.default.createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react.default.createElement("br", null), this.renderUploadControl('Upload Image')))));
+  }
+}
 exports.ImageContainer = ImageContainer;
-(0, _defineProperty2["default"])(ImageContainer, "propTypes", {
-  imageDimensions: _propTypes["default"].object
+(0, _defineProperty2.default)(ImageContainer, "propTypes", {
+  imageDimensions: _propTypes.default.object
 });
-(0, _defineProperty2["default"])(ImageContainer, "defaultProps", {});
-
-var styles = function styles(theme) {
-  return {
-    base: {
-      marginTop: theme.spacing.unit
-    },
-    box: {
-      border: '1px solid #E0E1E6',
-      borderRadius: '5px'
-    },
-    boxActive: {
-      border: '1px solid #0032C2'
-    },
-    centered: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center'
-    },
-    drawableHeight: {
-      minHeight: 350
-    },
-    image: {
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'center'
-    },
-    imageContainer: {
-      position: 'relative',
-      width: 'fit-content'
-    },
-    resize: {
-      borderBottom: '1px solid #727272',
-      borderRight: '1px solid #727272',
-      bottom: '-10px',
-      cursor: 'se-resize',
-      height: '10px',
-      position: 'absolute',
-      right: '-10px',
-      width: '10px'
-    },
-    input: {
-      display: 'none'
-    },
-    toolbar: {
-      backgroundColor: '#ECEDF1',
-      borderBottom: '1px solid #E0E1E6',
-      borderTopLeftRadius: '5px',
-      borderTopRightRadius: '5px',
-      display: 'flex',
-      padding: '12px 8px'
-    }
-  };
-};
-
+(0, _defineProperty2.default)(ImageContainer, "defaultProps", {});
 ImageContainer.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired,
-  onImageUpload: _propTypes["default"].func.isRequired,
-  onUpdateImageDimension: _propTypes["default"].func.isRequired,
-  insertImage: _propTypes["default"].func
+  imageUrl: _propTypes.default.string.isRequired,
+  onImageUpload: _propTypes.default.func.isRequired,
+  onUpdateImageDimension: _propTypes.default.func.isRequired,
+  insertImage: _propTypes.default.func
 };
-
-var _default = (0, _styles.withStyles)(styles)(ImageContainer);
-
-exports["default"] = _default;
+var _default = exports.default = ImageContainer;
 //# sourceMappingURL=image-container.js.map