@pie-element/drawing-response 5.0.1-next.4 → 6.0.1-cr.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@5.0.0...@pie-element/drawing-response@6.0.0) (2023-02-22)
+
+
+### Bug Fixes
+
+* **drawing-response, extended-text-entry:** imports ([795a39b](https://github.com/pie-framework/pie-elements/commit/795a39b2fa89301393c4075da2d6c64eb9220065))
+* **drawing-response, extended-text-entry:** remove verifyRubric method. remove enabled logic ([bcd498d](https://github.com/pie-framework/pie-elements/commit/bcd498df3712a24643199103df7a72316c667a00))
+* change withRubric type for extended-text-entry and drawing-response. docs update from different pr for multi-trait-rubric ([7bf77ad](https://github.com/pie-framework/pie-elements/commit/7bf77ada1a09bc56a053341bce9a0eaf02955672))
+
+
+### BREAKING CHANGES
+
+* **drawing-response, extended-text-entry:** create new versions to avoid issues
+
+
+
+
+
 # [5.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@4.7.0...@pie-element/drawing-response@5.0.0) (2023-02-14)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@5.0.0...@pie-element/drawing-response-configure@6.0.0) (2023-02-22)
+
+
+### Bug Fixes
+
+* **drawing-response, extended-text-entry:** imports ([795a39b](https://github.com/pie-framework/pie-elements/commit/795a39b2fa89301393c4075da2d6c64eb9220065))
+* **drawing-response, extended-text-entry:** remove verifyRubric method. remove enabled logic ([bcd498d](https://github.com/pie-framework/pie-elements/commit/bcd498df3712a24643199103df7a72316c667a00))
+
+
+### BREAKING CHANGES
+
+* **drawing-response, extended-text-entry:** create new versions to avoid issues
+
+
+
+
+
 # [5.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.6.0...@pie-element/drawing-response-configure@5.0.0) (2023-02-14)
 
 

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/drawing-response-configure",
   "private": true,
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",

package/configure/src/__tests__/index.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
 
 jest.mock('@pie-lib/config-ui', () => ({
   choiceUtils: {

package/configure/src/index.js

@@ -16,28 +16,40 @@ import sensibleDefaults from './defaults';
 const log = debug('hotspot:configure');
 
 export default class DrawableResponseConfigure extends HTMLElement {
-  static createDefaultModel = (model = {}) => {
-    return {
+  static createDefaultModel = (model = {}, config) => {
+    const defaultModel = {
       ...sensibleDefaults.model,
       ...model,
     };
+
+    if (config?.withRubric?.forceEnabled && !defaultModel.rubricEnabled) {
+      defaultModel.rubricEnabled = true;
+    }
+
+    return defaultModel;
   };
 
   constructor() {
     super();
     this._configuration = sensibleDefaults.configuration;
-    this._model = DrawableResponseConfigure.createDefaultModel({});
+    this._model = DrawableResponseConfigure.createDefaultModel({}, this._configuration);
     this.onModelChanged = this.onModelChanged.bind(this);
   }
 
   set model(s) {
-    this._model = DrawableResponseConfigure.createDefaultModel(s);
+    this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
     this._render();
   }
 
   set configuration(c) {
     this._configuration = c;
 
+    const { withRubric = {} } = c || {};
+
+    if (withRubric?.forceEnabled && !this._model.rubricEnabled) {
+      this._model.rubricEnabled = true;
+    }
+
     this._render();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "5.0.1-next.4+660136116",
+  "version": "6.0.1-cr.1",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "660136116e3b565c5fbd41c9d5f9d40294057733",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/configure/lib/button.js

@@ -1,61 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var RawButton = function RawButton(_ref) {
-  var classes = _ref.classes,
-      className = _ref.className,
-      label = _ref.label,
-      onClick = _ref.onClick,
-      disabled = _ref.disabled;
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    onClick: onClick,
-    disabled: disabled,
-    className: (0, _classnames["default"])(classes.addButton, className),
-    size: "small",
-    variant: "contained",
-    color: "default"
-  }, label);
-};
-
-RawButton.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  label: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
-};
-RawButton.defaultProps = {
-  className: '',
-  disabled: false,
-  label: 'Add',
-  onClick: function onClick() {}
-};
-
-var styles = function styles() {
-  return {
-    addButton: {
-      marginLeft: 8
-    }
-  };
-};
-
-var ButtonStyled = (0, _styles.withStyles)(styles)(RawButton);
-var _default = ButtonStyled;
-exports["default"] = _default;
-//# sourceMappingURL=button.js.map

package/configure/lib/button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","addButton","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","marginLeft","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACK,SAAnB,EAA8BJ,SAA9B,CAHb;AAIE,IAAA,IAAI,EAAC,OAJP;AAKE,IAAA,OAAO,EAAC,WALV;AAME,IAAA,KAAK,EAAC;AANR,KAQGC,KARH,CADgB;AAAA,CAAlB;;AAaAH,SAAS,CAACO,SAAV,GAAsB;AACpBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADN;AAEpBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFD;AAGpBN,EAAAA,QAAQ,EAAEG,sBAAUI,IAHA;AAIpBT,EAAAA,KAAK,EAAEK,sBAAUG,MAJG;AAKpBP,EAAAA,OAAO,EAAEI,sBAAUK;AALC,CAAtB;AAQAb,SAAS,CAACc,YAAV,GAAyB;AACvBZ,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE;AAJM,CAAzB;;AAOA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,SAAS,EAAE;AACTU,MAAAA,UAAU,EAAE;AADH;AADS,GAAP;AAAA,CAAf;;AAMA,IAAMC,YAAY,GAAG,wBAAWF,MAAX,EAAmBf,SAAnB,CAArB;eAEeiB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled }) => (\n  <Button\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n};\n\nconst styles = () => ({\n  addButton: {\n    marginLeft: 8,\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}

package/configure/lib/defaults.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = {
-  model: {
-    prompt: 'This is the question prompt',
-    imageUrl: '',
-    imageDimensions: {
-      height: 0,
-      width: 0
-    },
-    promptEnabled: true,
-    teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true,
-    backgroundImageEnabled: true,
-    spellCheckEnabled: true,
-    toolbarEditorPosition: 'bottom'
-  },
-  configuration: {
-    spellCheck: {
-      label: 'Spellcheck',
-      settings: false,
-      enabled: true
-    },
-    backgroundImage: {
-      settings: true,
-      label: 'Background Image'
-    },
-    prompt: {
-      settings: true,
-      label: 'Prompt'
-    },
-    settingsPanelDisabled: false,
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions'
-    },
-    maxImageWidth: {
-      teacherInstructions: 300,
-      prompt: 300
-    },
-    maxImageHeight: {
-      teacherInstructions: 300,
-      prompt: 300
-    },
-    withRubric: {
-      settings: false,
-      label: 'Add Rubric'
-    }
-  }
-};
-exports["default"] = _default;
-//# sourceMappingURL=defaults.js.map

package/configure/lib/defaults.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","spellCheckEnabled","toolbarEditorPosition","configuration","spellCheck","label","settings","enabled","backgroundImage","settingsPanelDisabled","teacherInstructions","maxImageWidth","maxImageHeight","withRubric"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,sBAAsB,EAAE,IAVnB;AAWLC,IAAAA,iBAAiB,EAAE,IAXd;AAYLC,IAAAA,qBAAqB,EAAE;AAZlB,GADM;AAebC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAE,KAFA;AAGVC,MAAAA,OAAO,EAAE;AAHC,KADC;AAMbC,IAAAA,eAAe,EAAE;AACfF,MAAAA,QAAQ,EAAE,IADK;AAEfD,MAAAA,KAAK,EAAE;AAFQ,KANJ;AAUbb,IAAAA,MAAM,EAAE;AACNc,MAAAA,QAAQ,EAAE,IADJ;AAEND,MAAAA,KAAK,EAAE;AAFD,KAVK;AAcbI,IAAAA,qBAAqB,EAAE,KAdV;AAebC,IAAAA,mBAAmB,EAAE;AACnBJ,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY,KAfR;AAmBbM,IAAAA,aAAa,EAAE;AACbD,MAAAA,mBAAmB,EAAE,GADR;AAEblB,MAAAA,MAAM,EAAE;AAFK,KAnBF;AAuBboB,IAAAA,cAAc,EAAE;AACdF,MAAAA,mBAAmB,EAAE,GADP;AAEdlB,MAAAA,MAAM,EAAE;AAFM,KAvBH;AA2BbqB,IAAAA,UAAU,EAAE;AACVP,MAAAA,QAAQ,EAAE,KADA;AAEVD,MAAAA,KAAK,EAAE;AAFG;AA3BC;AAfF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0,\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    backgroundImageEnabled: true,\n    spellCheckEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    settingsPanelDisabled: false,\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n  },\n};\n"],"file":"defaults.js"}

package/configure/lib/image-container.js

@@ -1,364 +0,0 @@
-"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;
-
-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 _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 _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.*/;
-  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 onImageUpload = _this.props.onImageUpload;
-      var reader = new FileReader();
-
-      reader.onloadend = function () {
-        onImageUpload(reader.result);
-      };
-
-      reader.readAsDataURL(file);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadImage", function (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
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "makeDropzoneInactive", function () {
-      return _this.setState({
-        dropzoneActive: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
-      e.preventDefault();
-      var _e$dataTransfer = e.dataTransfer,
-          items = _e$dataTransfer.items,
-          files = _e$dataTransfer.files;
-
-      if (items && items[0].kind === 'file') {
-        var file = items[0].getAsFile();
-
-        if (isImage(file)) {
-          _this.handleFileRead(file);
-        }
-      } else if (isImage(files[0])) {
-        _this.handleFileRead(files[0]);
-      }
-
-      _this.makeDropzoneInactive();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragOver", function (e) {
-      e.preventDefault();
-      var dropzoneActive = _this.state.dropzoneActive;
-
-      if (!dropzoneActive) {
-        _this.makeDropzoneActive();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragExit", function (e) {
-      e.preventDefault();
-
-      _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 () {
-      return _this.input.click();
-    });
-    (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$props = _this.props,
-          onUpdateImageDimension = _this$props.onUpdateImageDimension,
-          imageDimensions = _this$props.imageDimensions;
-      var resizeHandle = _this.resize;
-      var 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;
-
-      if (dimensions.width !== dimensions.height * imageAspectRatio) {
-        dimensions.width = dimensions.height * imageAspectRatio;
-      }
-
-      _this.setState({
-        dimensions: dimensions
-      });
-
-      onUpdateImageDimension(dimensions);
-      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"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      var onUpdateImageDimension = _this.props.onUpdateImageDimension;
-      var dimensions = _this.state.dimensions;
-
-      _this.handleEnableDrag();
-
-      onUpdateImageDimension(dimensions);
-      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;
-
-      if (fitsContainer && hasMinimumWidth && box) {
-        box.style.width = "".concat(x, "px");
-        box.style.height = "".concat(x / imageAspectRatio, "px");
-
-        _this.setState({
-          dimensions: {
-            width: x,
-            height: x / imageAspectRatio
-          }
-        });
-      }
-
-      _this.handleDisableDrag();
-    });
-    _this.state = {
-      maxImageWidth: '100%',
-      maxImageHeight: 'auto',
-      dragEnabled: true,
-      dropzoneActive: false
-    };
-    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$props2 = this.props,
-          classes = _this$props2.classes,
-          imageUrl = _this$props2.imageUrl,
-          imageDimensions = _this$props2.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')))));
-    }
-  }]);
-  return ImageContainer;
-}(_react.Component);
-
-exports.ImageContainer = ImageContainer;
-
-var styles = function styles(theme) {
-  return {
-    base: {
-      marginTop: theme.spacing.unit * 2
-    },
-    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'
-    }
-  };
-};
-
-ImageContainer.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired,
-  onImageUpload: _propTypes["default"].func.isRequired,
-  onUpdateImageDimension: _propTypes["default"].func.isRequired
-};
-
-var _default = (0, _styles.withStyles)(styles)(ImageContainer);
-
-exports["default"] = _default;
-//# sourceMappingURL=image-container.js.map