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

package/CHANGELOG.md

@@ -158,7 +158,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
-* add a different property in the config, forceEnabled, to force a value ([300c664](https://github.com/pie-framework/pie-elements/commit/300c664618f46177137deef3bced2d096cdb8126))
+* add a different property in the config,  to force a value ([300c664](https://github.com/pie-framework/pie-elements/commit/300c664618f46177137deef3bced2d096cdb8126))
 
 
 

package/LICENSE.md

@@ -0,0 +1,5 @@
+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/CHANGELOG.md

@@ -147,7 +147,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
-* add a different property in the config, forceEnabled, to force a value ([300c664](https://github.com/pie-framework/pie-elements/commit/300c664618f46177137deef3bced2d096cdb8126))
+* add a different property in the config,  to force a value ([300c664](https://github.com/pie-framework/pie-elements/commit/300c664618f46177137deef3bced2d096cdb8126))
 
 
 

package/configure/lib/button.js

@@ -0,0 +1,61 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,56 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,364 @@
+"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

package/configure/lib/image-container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-container.jsx"],"names":["isImage","file","imageType","type","match","ImageContainer","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","target","files","handleFileRead","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","offsetHeight","offsetWidth","naturalHeight","naturalWidth","onUpdateImageDimension","imageDimensions","resizeHandle","resize","dimensions","height","width","imageAspectRatio","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","maxImageHeight","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","undefined","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: '100%',\n      maxImageHeight: 'auto',\n      dragEnabled: true,\n      dropzoneActive: false,\n    };\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height,\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive = () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {\n    const { onUpdateImageDimension, imageDimensions } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,\n      width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,\n    };\n\n    // check if aspect ratio is not respected on replacing image\n    const imageAspectRatio = naturalWidth / naturalHeight;\n\n    if (dimensions.width !== dimensions.height * imageAspectRatio) {\n      dimensions.width = dimensions.height * imageAspectRatio;\n    }\n\n    this.setState({ dimensions });\n    onUpdateImageDimension(dimensions);\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  stopResizing = () => {\n    const { onUpdateImageDimension } = this.props;\n    const { dimensions } = this.state;\n\n    this.handleEnableDrag();\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  startResizing = (e) => {\n    const box = this.image;\n    const { maxImageWidth, maxImageHeight, dimensions } = this.state;\n\n    const bounds = e.target.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n\n    const imageAspectRatio = dimensions.width / dimensions.height;\n    const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth && box) {\n      box.style.width = `${x}px`;\n      box.style.height = `${x / imageAspectRatio}px`;\n\n      this.setState({\n        dimensions: {\n          width: x,\n          height: x / imageAspectRatio,\n        },\n      });\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button label={label} onClick={this.handleInputClick} />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={(ref) => {\n            this.input = ref;\n          }}\n          type=\"file\"\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const { classes, imageUrl, imageDimensions } = this.props;\n    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={(ref) => {\n                    this.image = ref;\n                  }}\n                  src={imageUrl}\n                  style={{\n                    width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,\n                    maxWidth: maxImageWidth,\n                    maxHeight: maxImageHeight,\n                  }}\n                  alt=\"\"\n                />\n                <div\n                  ref={(ref) => {\n                    this.resize = ref;\n                  }}\n                  className={classes.resize}\n                />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  input: {\n    display: 'none',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px',\n  },\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}