@pie-element/drawing-response 3.9.12 → 3.9.15-touch

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.9.15](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.14...@pie-element/drawing-response@3.9.15) (2022-03-28)
+
+**Note:** Version bump only for package @pie-element/drawing-response
+
+
+
+
+
+## [3.9.14](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.13...@pie-element/drawing-response@3.9.14) (2022-03-22)
+
+**Note:** Version bump only for package @pie-element/drawing-response
+
+
+
+
+
+## [3.9.13](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.12...@pie-element/drawing-response@3.9.13) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/drawing-response
+
+
+
+
+
 ## [3.9.12](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.11...@pie-element/drawing-response@3.9.12) (2022-03-08)
 
 **Note:** Version bump only for package @pie-element/drawing-response

package/configure/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.19](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.18...@pie-element/drawing-response-configure@3.2.19) (2022-03-28)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.18](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.17...@pie-element/drawing-response-configure@3.2.18) (2022-03-22)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.17](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.16...@pie-element/drawing-response-configure@3.2.17) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
 ## [3.2.16](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.15...@pie-element/drawing-response-configure@3.2.16) (2022-03-08)
 
 **Note:** Version bump only for package @pie-element/drawing-response-configure

package/configure/lib/__tests__/image-container.test.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _imageContainer = require("../image-container");
+
+jest.mock('@pie-lib/config-ui', function () {
+  return {
+    settings: {
+      Panel: function Panel(props) {
+        return /*#__PURE__*/_react["default"].createElement("div", props);
+      },
+      toggle: jest.fn(),
+      radio: jest.fn(),
+      dropdown: jest.fn()
+    },
+    layout: {
+      ConfigLayout: function ConfigLayout(props) {
+        return /*#__PURE__*/_react["default"].createElement("div", null, props.children);
+      }
+    }
+  };
+});
+describe('ImageContainer', function () {
+  var onUpdateImageDimension = jest.fn();
+  var onImageUpload = jest.fn();
+  var wrapper;
+  beforeEach(function () {
+    var props = {
+      classes: {},
+      imageUrl: 'url',
+      onUpdateImageDimension: onUpdateImageDimension,
+      onImageUpload: onImageUpload
+    };
+
+    wrapper = function wrapper() {
+      return (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_imageContainer.ImageContainer, props));
+    };
+  });
+  describe('snapshot', function () {
+    it('renders', function () {
+      expect(wrapper()).toMatchSnapshot();
+    });
+  });
+  describe('logic', function () {
+    var w;
+    var oldFileReader;
+    beforeAll(function () {
+      var dummyFileReader = {};
+      w = wrapper();
+      w.instance().resize = {
+        addEventListener: jest.fn()
+      };
+      oldFileReader = window.FileReader;
+
+      dummyFileReader.readAsDataURL = function (result) {
+        dummyFileReader.result = result;
+        dummyFileReader.onloadend();
+      };
+
+      window.FileReader = jest.fn(function () {
+        return dummyFileReader;
+      });
+    });
+    it('handleFileRead calls onImageUpload', function () {
+      w.instance().handleFileRead('file');
+      expect(onImageUpload).toBeCalled();
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
+    });
+    it('handleUploadImage calls handleFileRead which calls onImageUpload', function () {
+      w.instance().handleUploadImage({
+        target: {
+          files: ['file']
+        },
+        preventDefault: jest.fn()
+      });
+      expect(onImageUpload).toBeCalled();
+      expect(onImageUpload).toHaveBeenCalledTimes(2);
+    });
+    it('handleOnDrop calls handleFileRead which calls onImageUpload if item is file and image', function () {
+      w.instance().handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [{
+            kind: 'file',
+            getAsFile: jest.fn().mockReturnValue({
+              type: 'image',
+              key: 'item'
+            })
+          }],
+          files: []
+        }
+      });
+      expect(onImageUpload).toBeCalledWith({
+        type: 'image',
+        key: 'item'
+      });
+      expect(onImageUpload).toHaveBeenCalledTimes(3);
+    });
+    it('handleOnDrop calls handleFileRead which doesn\'t call onImageUpload if item is file but not image', function () {
+      w.instance().handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [{
+            kind: 'file',
+            getAsFile: jest.fn().mockReturnValue({
+              type: 'jpg'
+            })
+          }],
+          files: []
+        }
+      }); // same times number as in previous test, meaning that is was not called again
+
+      expect(onImageUpload).toHaveBeenCalledTimes(3);
+    });
+    it('handleOnDrop calls handleFileRead which calls onImageUpload if item is not file, but file is image', function () {
+      w.instance().handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [{
+            kind: 'something else',
+            getAsFile: jest.fn().mockReturnValue({
+              type: 'image'
+            })
+          }],
+          files: [{
+            type: 'image',
+            key: 'file'
+          }]
+        }
+      });
+      expect(onImageUpload).toBeCalledWith({
+        type: 'image',
+        key: 'file'
+      });
+      expect(onImageUpload).toHaveBeenCalledTimes(4);
+    });
+    it('handleOnDrop calls handleFileRead which doesn\'t call onImageUpload if item is not file and file is not image', function () {
+      w.instance().handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [{
+            kind: 'something else',
+            getAsFile: jest.fn().mockReturnValue({
+              type: 'image'
+            })
+          }],
+          files: [{
+            type: 'something else',
+            key: 'file'
+          }]
+        }
+      }); // same times number as in previous test, meaning that is was not called again
+
+      expect(onImageUpload).toHaveBeenCalledTimes(4);
+    });
+    it('handleOnImageLoad calls onUpdateImageDimension', function () {
+      w.instance().handleOnImageLoad({
+        target: {
+          offsetHeight: 50,
+          offsetWidth: 50
+        }
+      });
+      expect(onUpdateImageDimension).toHaveBeenCalledWith({
+        height: 50,
+        width: 50
+      });
+    });
+    it('stopResizing calls onUpdateImageDimension', function () {
+      w.instance().handleOnImageLoad({
+        target: {
+          offsetHeight: 50,
+          offsetWidth: 50
+        }
+      });
+      expect(onUpdateImageDimension).toHaveBeenCalledWith(w.instance().state.dimensions);
+    });
+    afterAll(function () {
+      window.FileReader = oldFileReader;
+    });
+  });
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9fX3Rlc3RzX18vaW1hZ2UtY29udGFpbmVyLnRlc3QuanN4Il0sIm5hbWVzIjpbImplc3QiLCJtb2NrIiwic2V0dGluZ3MiLCJQYW5lbCIsInByb3BzIiwidG9nZ2xlIiwiZm4iLCJyYWRpbyIsImRyb3Bkb3duIiwibGF5b3V0IiwiQ29uZmlnTGF5b3V0IiwiY2hpbGRyZW4iLCJkZXNjcmliZSIsIm9uVXBkYXRlSW1hZ2VEaW1lbnNpb24iLCJvbkltYWdlVXBsb2FkIiwid3JhcHBlciIsImJlZm9yZUVhY2giLCJjbGFzc2VzIiwiaW1hZ2VVcmwiLCJpdCIsImV4cGVjdCIsInRvTWF0Y2hTbmFwc2hvdCIsInciLCJvbGRGaWxlUmVhZGVyIiwiYmVmb3JlQWxsIiwiZHVtbXlGaWxlUmVhZGVyIiwiaW5zdGFuY2UiLCJyZXNpemUiLCJhZGRFdmVudExpc3RlbmVyIiwid2luZG93IiwiRmlsZVJlYWRlciIsInJlYWRBc0RhdGFVUkwiLCJyZXN1bHQiLCJvbmxvYWRlbmQiLCJoYW5kbGVGaWxlUmVhZCIsInRvQmVDYWxsZWQiLCJ0b0hhdmVCZWVuQ2FsbGVkVGltZXMiLCJoYW5kbGVVcGxvYWRJbWFnZSIsInRhcmdldCIsImZpbGVzIiwicHJldmVudERlZmF1bHQiLCJoYW5kbGVPbkRyb3AiLCJkYXRhVHJhbnNmZXIiLCJpdGVtcyIsImtpbmQiLCJnZXRBc0ZpbGUiLCJtb2NrUmV0dXJuVmFsdWUiLCJ0eXBlIiwia2V5IiwidG9CZUNhbGxlZFdpdGgiLCJoYW5kbGVPbkltYWdlTG9hZCIsIm9mZnNldEhlaWdodCIsIm9mZnNldFdpZHRoIiwidG9IYXZlQmVlbkNhbGxlZFdpdGgiLCJoZWlnaHQiLCJ3aWR0aCIsInN0YXRlIiwiZGltZW5zaW9ucyIsImFmdGVyQWxsIl0sIm1hcHBpbmdzIjoiOzs7O0FBQUE7O0FBQ0E7O0FBRUE7O0FBRUFBLElBQUksQ0FBQ0MsSUFBTCxDQUFVLG9CQUFWLEVBQWdDO0FBQUEsU0FBTztBQUNyQ0MsSUFBQUEsUUFB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Q0FBQ0ksUUFBRixHQUFhd0IsaUJBQWIsQ0FBK0I7QUFBRVosUUFBQUEsTUFBTSxFQUFFO0FBQUVhLFVBQUFBLFlBQVksRUFBRSxFQUFoQjtBQUFvQkMsVUFBQUEsV0FBVyxFQUFFO0FBQWpDO0FBQVYsT0FBL0I7QUFFQWhDLE1BQUFBLE1BQU0sQ0FBQ1Asc0JBQUQsQ0FBTixDQUErQndDLG9CQUEvQixDQUFvRC9CLENBQUMsQ0FBQ0ksUUFBRixHQUFhOEIsS0FBYixDQUFtQkMsVUFBdkU7QUFDRCxLQUpDLENBQUY7QUFNQUMsSUFBQUEsUUFBUSxDQUFDLFlBQU07QUFDYjdCLE1BQUFBLE1BQU0sQ0FBQ0MsVUFBUCxHQUFvQlAsYUFBcEI7QUFDRCxLQUZPLENBQVI7QUFHRCxHQXZITyxDQUFSO0FBd0hELENBN0lPLENBQVIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzaGFsbG93IH0gZnJvbSAnZW56eW1lJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEltYWdlQ29udGFpbmVyIH0gZnJvbSAnLi4vaW1hZ2UtY29udGFpbmVyJztcblxuamVzdC5tb2NrKCdAcGllLWxpYi9jb25maWctdWknLCAoKSA9PiAoe1xuICBzZXR0aW5nczoge1xuICAgIFBhbmVsOiBwcm9wcyA9PiA8ZGl2IHsuLi5wcm9wc30gLz4sXG4gICAgdG9nZ2xlOiBqZXN0LmZuKCksXG4gICAgcmFkaW86IGplc3QuZm4oKSxcbiAgICBkcm9wZG93bjogamVzdC5mbigpXG4gIH0sXG4gIGxheW91dDoge1xuICAgIENvbmZpZ0xheW91dDogcHJvcHMgPT4gPGRpdj57cHJvcHMuY2hpbGRyZW59PC9kaXY+XG4gIH1cbn0pKTtcblxuZGVzY3JpYmUoJ0ltYWdlQ29udGFpbmVyJywgKCkgPT4ge1xuICBjb25zdCBvblVwZGF0ZUltYWdlRGltZW5zaW9uID0gamVzdC5mbigpO1xuICBjb25zdCBvbkltYWdlVXBsb2FkID0gamVzdC5mbigpO1xuICBsZXQgd3JhcHBlcjtcblxuICBiZWZvcmVFYWNoKCgpID0+IHtcbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgIGNsYXNzZXM6IHt9LFxuICAgICAgaW1hZ2VVcmw6ICd1cmwnLFxuICAgICAgb25VcGRhdGVJbWFnZURpbWVuc2lvbixcbiAgICAgIG9uSW1hZ2VVcGxvYWRcbiAgICB9O1xuICAgIHdyYXBwZXIgPSAoKSA9PiBzaGFsbG93KDxJbWFnZUNvbnRhaW5lciB7Li4ucHJvcHN9IC8+KTtcbiAgfSk7XG5cbiAgZGVzY3JpYmUoJ3NuYXBzaG90JywgKCkgPT4ge1xuICAgIGl0KCdyZW5kZXJzJywgKCkgPT4ge1xuICAgICAgZXhwZWN0KHdyYXBwZXIoKSkudG9NYXRjaFNuYXBzaG90KCk7XG4gICAgfSk7XG4gIH0pO1xuXG4gIGRlc2NyaWJlKCdsb2dpYycsICgpID0+IHtcbiAgICBsZXQgdztcbiAgICBsZXQgb2xkRmlsZVJlYWRlcjtcblxuICAgIGJlZm9yZUFsbCgoKSA9PiB7XG4gICAgICBjb25zdCBkdW1teUZpbGVSZWFkZXIgPSB7fTtcblxuICAgICAgdyA9IHdyYXBwZXIoKTtcbiAgICAgIHcuaW5zdGFuY2UoKS5yZXNpemUgPSB7IGFkZEV2ZW50TGlzdGVuZXI6IGplc3QuZm4oKSB9O1xuXG4gICAgICBvbGRGaWxlUmVhZGVyID0gd2luZG93LkZpbGVSZWFkZXI7XG5cbiAgICAgIGR1bW15RmlsZVJlYWRlci5yZWFkQXNEYXRhVVJMID0gKHJlc3VsdCkgPT4ge1xuICAgICAgICBkdW1teUZpbGVSZWFkZXIucmVzdWx0ID0gcmVzdWx0O1xuICAgICAgICBkdW1teUZpbGVSZWFkZXIub25sb2FkZW5kKCk7XG4gICAgICB9O1xuICAgICAgd2luZG93LkZpbGVSZWFkZXIgPSBqZXN0LmZuKCgpID0+IGR1bW15RmlsZVJlYWRlcik7XG4gICAgfSk7XG5cbiAgICBpdCgnaGFuZGxlRmlsZVJlYWQgY2FsbHMgb25JbWFnZVVwbG9hZCcsICgpID0+IHtcbiAgICAgIHcuaW5zdGFuY2UoKS5oYW5kbGVGaWxlUmVhZCgnZmlsZScpO1xuXG4gICAgICBleHBlY3Qob25JbWFnZVVwbG9hZCkudG9CZUNhbGxlZCgpO1xuICAgICAgZXhwZWN0KG9uSW1hZ2VVcGxvYWQpLnRvSGF2ZUJlZW5DYWxsZWRUaW1lcygxKTtcbiAgICB9KTtcblxuICAgIGl0KCdoYW5kbGVVcGxvYWRJbWFnZSBjYWxscyBoYW5kbGVGaWxlUmVhZCB3aGljaCBjYWxscyBvbkltYWdlVXBsb2FkJywgKCkgPT4ge1xuICAgICAgdy5pbnN0YW5jZSgpLmhhbmRsZVVwbG9hZEltYWdlKHsgdGFyZ2V0OiB7IGZpbGVzOiBbJ2ZpbGUnXSB9LCBwcmV2ZW50RGVmYXVsdDogamVzdC5mbigpIH0pO1xuXG4gICAgICBleHBlY3Qob25JbWFnZVVwbG9hZCkudG9CZUNhbGxlZCgpO1xuICAgICAgZXhwZWN0KG9uSW1hZ2VVcGxvYWQpLnRvSGF2ZUJlZW5DYWxsZWRUaW1lcygyKTtcbiAgICB9KTtcblxuICAgIGl0KCdoYW5kbGVPbkRyb3AgY2FsbHMgaGFuZGxlRmlsZVJlYWQgd2hpY2ggY2FsbHMgb25JbWFnZVVwbG9hZCBpZiBpdGVtIGlzIGZpbGUgYW5kIGltYWdlJywgKCkgPT4ge1xuICAgICAgdy5pbnN0YW5jZSgpLmhhbmRsZU9uRHJvcCh7XG4gICAgICAgIHByZXZlbnREZWZhdWx0OiBqZXN0LmZuKCksXG4gICAgICAgIGRhdGFUcmFuc2Zlcjoge1xuICAgICAgICAgIGl0ZW1zOiBbe1xuICAgICAgICAgICAga2luZDogJ2ZpbGUnLFxuICAgICAgICAgICAgZ2V0QXNGaWxlOiBqZXN0LmZuKCkubW9ja1JldHVyblZhbHVlKHsgdHlwZTogJ2ltYWdlJywga2V5OiAnaXRlbScgfSlcbiAgICAgICAgICB9XG4gICAgICAgICAgXSxcbiAgICAgICAgICBmaWxlczogW11cbiAgICAgICAgfVxuICAgICAgfSk7XG5cbiAgICAgIGV4cGVjdChvbkltYWdlVXBsb2FkKS50b0JlQ2FsbGVkV2l0aCh7IHR5cGU6ICdpbWFnZScsIGtleTogJ2l0ZW0nIH0pO1xuICAgICAgZXhwZWN0KG9uSW1hZ2VVcGxvYWQpLnRvSGF2ZUJlZW5DYWxsZWRUaW1lcygzKTtcbiAgICB9KTtcblxuICAgIGl0KCdoYW5kbGVPbkRyb3AgY2FsbHMgaGFuZGxlRmlsZVJlYWQgd2hpY2ggZG9lc25cXCd0IGNhbGwgb25JbWFnZVVwbG9hZCBpZiBpdGVtIGlzIGZpbGUgYnV0IG5vdCBpbWFnZScsICgpID0+IHtcbiAgICAgIHcuaW5zdGFuY2UoKS5oYW5kbGVPbkRyb3Aoe1xuICAgICAgICBwcmV2ZW50RGVmYXVsdDogamVzdC5mbigpLFxuICAgICAgICBkYXRhVHJhbnNmZXI6IHtcbiAgICAgICAgICBpdGVtczogW3tcbiAgICAgICAgICAgIGtpbmQ6ICdmaWxlJyxcbiAgICAgICAgICAgIGdldEFzRmlsZTogamVzdC5mbigpLm1vY2tSZXR1cm5WYWx1ZSh7IHR5cGU6ICdqcGcnIH0pXG4gICAgICAgICAgfVxuICAgICAgICAgIF0sXG4gICAgICAgICAgZmlsZXM6IFtdXG4gICAgICAgIH1cbiAgICAgIH0pO1xuXG4gICAgICAvLyBzYW1lIHRpbWVzIG51bWJlciBhcyBpbiBwcmV2aW91cyB0ZXN0LCBtZWFuaW5nIHRoYXQgaXMgd2FzIG5vdCBjYWxsZWQgYWdhaW5cbiAgICAgIGV4cGVjdChvbkltYWdlVXBsb2FkKS50b0hhdmVCZWVuQ2FsbGVkVGltZXMoMyk7XG4gICAgfSk7XG5cbiAgICBpdCgnaGFuZGxlT25Ecm9wIGNhbGxzIGhhbmRsZUZpbGVSZWFkIHdoaWNoIGNhbGxzIG9uSW1hZ2VVcGxvYWQgaWYgaXRlbSBpcyBub3QgZmlsZSwgYnV0IGZpbGUgaXMgaW1hZ2UnLCAoKSA9PiB7XG4gICAgICB3Lmluc3RhbmNlKCkuaGFuZGxlT25Ecm9wKHtcbiAgICAgICAgcHJldmVudERlZmF1bHQ6IGplc3QuZm4oKSxcbiAgICAgICAgZGF0YVRyYW5zZmVyOiB7XG4gICAgICAgICAgaXRlbXM6IFt7XG4gICAgICAgICAgICBraW5kOiAnc29tZXRoaW5nIGVsc2UnLFxuICAgICAgICAgICAgZ2V0QXNGaWxlOiBqZXN0LmZuKCkubW9ja1JldHVyblZhbHVlKHsgdHlwZTogJ2ltYWdlJyB9KVxuICAgICAgICAgIH1cbiAgICAgICAgICBdLFxuICAgICAgICAgIGZpbGVzOiBbeyB0eXBlOiAnaW1hZ2UnLCBrZXk6ICdmaWxlJyB9XVxuICAgICAgICB9XG4gICAgICB9KTtcblxuICAgICAgZXhwZWN0KG9uSW1hZ2VVcGxvYWQpLnRvQmVDYWxsZWRXaXRoKHsgdHlwZTogJ2ltYWdlJywga2V5OiAnZmlsZScgfSk7XG4gICAgICBleHBlY3Qob25JbWFnZVVwbG9hZCkudG9IYXZlQmVlbkNhbGxlZFRpbWVzKDQpO1xuICAgIH0pO1xuXG4gICAgaXQoJ2hhbmRsZU9uRHJvcCBjYWxscyBoYW5kbGVGaWxlUmVhZCB3aGljaCBkb2VzblxcJ3QgY2FsbCBvbkltYWdlVXBsb2FkIGlmIGl0ZW0gaXMgbm90IGZpbGUgYW5kIGZpbGUgaXMgbm90IGltYWdlJywgKCkgPT4ge1xuICAgICAgdy5pbnN0YW5jZSgpLmhhbmRsZU9uRHJvcCh7XG4gICAgICAgIHByZXZlbnREZWZhdWx0OiBqZXN0LmZuKCksXG4gICAgICAgIGRhdGFUcmFuc2Zlcjoge1xuICAgICAgICAgIGl0ZW1zOiBbe1xuICAgICAgICAgICAga2luZDogJ3NvbWV0aGluZyBlbHNlJyxcbiAgICAgICAgICAgIGdldEFzRmlsZTogamVzdC5mbigpLm1vY2tSZXR1cm5WYWx1ZSh7IHR5cGU6ICdpbWFnZScgfSlcbiAgICAgICAgICB9XG4gICAgICAgICAgXSxcbiAgICAgICAgICBmaWxlczogW3sgdHlwZTogJ3NvbWV0aGluZyBlbHNlJywga2V5OiAnZmlsZScgfV1cbiAgICAgICAgfVxuICAgICAgfSk7XG5cbiAgICAgIC8vIHNhbWUgdGltZXMgbnVtYmVyIGFzIGluIHByZXZpb3VzIHRlc3QsIG1lYW5pbmcgdGhhdCBpcyB3YXMgbm90IGNhbGxlZCBhZ2FpblxuICAgICAgZXhwZWN0KG9uSW1hZ2VVcGxvYWQpLnRvSGF2ZUJlZW5DYWxsZWRUaW1lcyg0KTtcbiAgICB9KTtcblxuICAgIGl0KCdoYW5kbGVPbkltYWdlTG9hZCBjYWxscyBvblVwZGF0ZUltYWdlRGltZW5zaW9uJywgKCkgPT4ge1xuICAgICAgdy5pbnN0YW5jZSgpLmhhbmRsZU9uSW1hZ2VMb2FkKHsgdGFyZ2V0OiB7IG9mZnNldEhlaWdodDogNTAsIG9mZnNldFdpZHRoOiA1MCB9fSk7XG5cbiAgICAgIGV4cGVjdChvblVwZGF0ZUltYWdlRGltZW5zaW9uKS50b0hhdmVCZWVuQ2FsbGVkV2l0aCh7XG4gICAgICAgIGhlaWdodDogNTAsXG4gICAgICAgIHdpZHRoOiA1MFxuICAgICAgfSk7XG4gICAgfSk7XG5cbiAgICBpdCgnc3RvcFJlc2l6aW5nIGNhbGxzIG9uVXBkYXRlSW1hZ2VEaW1lbnNpb24nLCAoKSA9PiB7XG4gICAgICB3Lmluc3RhbmNlKCkuaGFuZGxlT25JbWFnZUxvYWQoeyB0YXJnZXQ6IHsgb2Zmc2V0SGVpZ2h0OiA1MCwgb2Zmc2V0V2lkdGg6IDUwIH19KTtcblxuICAgICAgZXhwZWN0KG9uVXBkYXRlSW1hZ2VEaW1lbnNpb24pLnRvSGF2ZUJlZW5DYWxsZWRXaXRoKHcuaW5zdGFuY2UoKS5zdGF0ZS5kaW1lbnNpb25zKTtcbiAgICB9KTtcblxuICAgIGFmdGVyQWxsKCgpID0+IHtcbiAgICAgIHdpbmRvdy5GaWxlUmVhZGVyID0gb2xkRmlsZVJlYWRlcjtcbiAgICB9KTtcbiAgfSk7XG59KTtcblxuIl19

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _enzyme = require("enzyme");
+
+jest.mock('@pie-lib/config-ui', function () {
+  return {
+    choiceUtils: {
+      firstAvailableIndex: jest.fn()
+    },
+    settings: {
+      Panel: function Panel(props) {
+        return /*#__PURE__*/_react["default"].createElement("div", props);
+      },
+      toggle: jest.fn(),
+      radio: jest.fn()
+    }
+  };
+});
+
+var model = function model() {
+  return {
+    promptEnabled: true,
+    prompt: 'This is the question prompt',
+    imageUrl: '',
+    imageDimensions: {
+      height: 0,
+      width: 0
+    }
+  };
+};
+
+jest.mock('react-dom', function () {
+  return {
+    render: jest.fn()
+  };
+});
+describe('index', function () {
+  var Def;
+  var el;
+  var onModelChanged = jest.fn();
+  var initialModel = model();
+  beforeAll(function () {
+    Def = require('../index')["default"];
+  });
+  beforeEach(function () {
+    el = new Def();
+    el.model = initialModel;
+    el.onModelChanged = onModelChanged;
+  });
+  describe('set model', function () {
+    it('calls ReactDOM.render', function () {
+      expect(_reactDom["default"].render).toHaveBeenCalled();
+    });
+  });
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9fX3Rlc3RzX18vaW5kZXgudGVzdC5qcyJdLCJuYW1lcyI6WyJqZXN0IiwibW9jayIsImNob2ljZVV0aWxzIiwiZmlyc3RBdmFpbGFibGVJbmRleCIsImZuIiwic2V0dGluZ3MiLCJQYW5lbCIsInByb3BzIiwidG9nZ2xlIiwicmFkaW8iLCJtb2RlbCIsInByb21wdEVuYWJsZWQiLCJwcm9tcHQiLCJpbWFnZVVybCIsImltYWdlRGltZW5zaW9ucyIsImhlaWdodCIsIndpZHRoIiwicmVuZGVyIiwiZGVzY3JpYmUiLCJEZWYiLCJlbCIsIm9uTW9kZWxDaGFuZ2VkIiwiaW5pdGlhbE1vZGVsIiwiYmVmb3JlQWxsIiwicmVxdWlyZSIsImJlZm9yZUVhY2giLCJpdCIsImV4cGVjdCIsIlJlYWN0RE9NIiwidG9IYXZlQmVlbkNhbGxlZCJdLCJtYXBwaW5ncyI6Ijs7OztBQUFBOztBQUNBOztBQUNBOztBQUVBQSxJQUFJLENBQUNDLElBQUwsQ0FBVSxvQkFBVixFQUFnQztBQUFBLFNBQU87QUFDckNDLElBQUFBLFdBQVcsRUFBRTtBQUNYQyxNQUFBQSxtQkFBbUIsRUFBRUgsSUFBSSxDQUFDSSxFQUFMO0FBRFYsS0FEd0I7QUFJckNDLElBQUFBLFFBQVEsRUFBRTtBQUNSQyxNQUFBQSxLQUFLLEVBQUUsZUFBQUMsS0FBSztBQUFBLDRCQUFJLHVDQUFTQSxLQUFULENBQUo7QUFBQSxPQURKO0FBRVJDLE1BQUFBLE1BQU0sRUFBRVIsSUFBSSxDQUFDSSxFQUFMLEVBRkE7QUFHUkssTUFBQUEsS0FBSyxFQUFFVCxJQUFJLENBQUNJLEVBQUw7QUFIQztBQUoyQixHQUFQO0FBQUEsQ0FBaEM7O0FBV0EsSUFBTU0sS0FBSyxHQUFHLFNBQVJBLEtBQVE7QUFBQSxTQUFPO0FBQ25CQyxJQUFBQSxhQUFhLEVBQUUsSUFESTtBQUVuQkMsSUFBQUEsTUFBTSxFQUFFLDZCQUZXO0FBR25CQyxJQUFBQSxRQUFRLEVBQUUsRUFIUztBQUluQkMsSUFBQUEsZUFBZSxFQUFFO0FBQ2ZDLE1BQUFBLE1BQU0sRUFBRSxDQURPO0FBRWZDLE1BQUFBLEtBQUssRUFBRTtBQUZRO0FBSkUsR0FBUDtBQUFBLENBQWQ7O0FBVUFoQixJQUFJLENBQUNDLElBQUwsQ0FBVSxXQUFWLEVBQXVCO0FBQUEsU0FBTztBQUM1QmdCLElBQUFBLE1BQU0sRUFBRWpCLElBQUksQ0FBQ0ksRUFBTDtBQURvQixHQUFQO0FBQUEsQ0FBdkI7QUFJQWMsUUFBUSxDQUFDLE9BQUQsRUFBVSxZQUFNO0FBQ3RCLE1BQUlDLEdBQUo7QUFDQSxNQUFJQyxFQUFKO0FBQ0EsTUFBSUMsY0FBYyxHQUFHckIsSUFBSSxDQUFDSSxFQUFMLEVBQXJCO0FBQ0EsTUFBSWtCLFlBQVksR0FBR1osS0FBSyxFQUF4QjtBQUVBYSxFQUFBQSxTQUFTLENBQUMsWUFBTTtBQUNkSixJQUFBQSxHQUFHLEdBQUdLLE9BQU8sQ0FBQyxVQUFELENBQVAsV0FBTjtBQUNELEdBRlEsQ0FBVDtBQUlBQyxFQUFBQSxVQUFVLENBQUMsWUFBTTtBQUNmTCxJQUFBQSxFQUFFLEdBQUcsSUFBSUQsR0FBSixFQUFMO0FBQ0FDLElBQUFBLEVBQUUsQ0FBQ1YsS0FBSCxHQUFXWSxZQUFYO0FBQ0FGLElBQUFBLEVBQUUsQ0FBQ0MsY0FBSCxHQUFvQkEsY0FBcEI7QUFDRCxHQUpTLENBQVY7QUFNQUgsRUFBQUEsUUFBUSxDQUFDLFdBQUQsRUFBYyxZQUFNO0FBQzFCUSxJQUFBQSxFQUFFLENBQUMsdUJBQUQsRUFBMEIsWUFBTTtBQUNoQ0MsTUFBQUEsTUFBTSxDQUFDQyxxQkFBU1gsTUFBVixDQUFOLENBQXdCWSxnQkFBeEI7QUFDRCxLQUZDLENBQUY7QUFHRCxHQUpPLENBQVI7QUFLRCxDQXJCTyxDQUFSIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nO1xuaW1wb3J0IHsgc2hhbGxvdyB9IGZyb20gJ2VuenltZSc7XG5cbmplc3QubW9jaygnQHBpZS1saWIvY29uZmlnLXVpJywgKCkgPT4gKHtcbiAgY2hvaWNlVXRpbHM6IHtcbiAgICBmaXJzdEF2YWlsYWJsZUluZGV4OiBqZXN0LmZuKClcbiAgfSxcbiAgc2V0dGluZ3M6IHtcbiAgICBQYW5lbDogcHJvcHMgPT4gPGRpdiB7Li4ucHJvcHN9IC8+LFxuICAgIHRvZ2dsZTogamVzdC5mbigpLFxuICAgIHJhZGlvOiBqZXN0LmZuKClcbiAgfVxufSkpO1xuXG5jb25zdCBtb2RlbCA9ICgpID0+ICh7XG4gIHByb21wdEVuYWJsZWQ6IHRydWUsXG4gIHByb21wdDogJ1RoaXMgaXMgdGhlIHF1ZXN0aW9uIHByb21wdCcsXG4gIGltYWdlVXJsOiAnJyxcbiAgaW1hZ2VEaW1lbnNpb25zOiB7XG4gICAgaGVpZ2h0OiAwLFxuICAgIHdpZHRoOiAwXG4gIH1cbn0pO1xuXG5qZXN0Lm1vY2soJ3JlYWN0LWRvbScsICgpID0+ICh7XG4gIHJlbmRlcjogamVzdC5mbigpXG59KSk7XG5cbmRlc2NyaWJlKCdpbmRleCcsICgpID0+IHtcbiAgbGV0IERlZjtcbiAgbGV0IGVsO1xuICBsZXQgb25Nb2RlbENoYW5nZWQgPSBqZXN0LmZuKCk7XG4gIGxldCBpbml0aWFsTW9kZWwgPSBtb2RlbCgpO1xuXG4gIGJlZm9yZUFsbCgoKSA9PiB7XG4gICAgRGVmID0gcmVxdWlyZSgnLi4vaW5kZXgnKS5kZWZhdWx0O1xuICB9KTtcblxuICBiZWZvcmVFYWNoKCgpID0+IHtcbiAgICBlbCA9IG5ldyBEZWYoKTtcbiAgICBlbC5tb2RlbCA9IGluaXRpYWxNb2RlbDtcbiAgICBlbC5vbk1vZGVsQ2hhbmdlZCA9IG9uTW9kZWxDaGFuZ2VkO1xuICB9KTtcblxuICBkZXNjcmliZSgnc2V0IG1vZGVsJywgKCkgPT4ge1xuICAgIGl0KCdjYWxscyBSZWFjdERPTS5yZW5kZXInLCAoKSA9PiB7XG4gICAgICBleHBlY3QoUmVhY3RET00ucmVuZGVyKS50b0hhdmVCZWVuQ2FsbGVkKCk7XG4gICAgfSk7XG4gIH0pO1xufSk7XG4iXX0=

package/configure/lib/__tests__/root.test.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _root = require("../root");
+
+var _defaults = _interopRequireDefault(require("../defaults"));
+
+jest.mock('@pie-lib/config-ui', function () {
+  return {
+    settings: {
+      Panel: function Panel(props) {
+        return /*#__PURE__*/_react["default"].createElement("div", props);
+      },
+      toggle: jest.fn(),
+      radio: jest.fn(),
+      dropdown: jest.fn()
+    },
+    layout: {
+      ConfigLayout: function ConfigLayout(props) {
+        return /*#__PURE__*/_react["default"].createElement("div", null, props.children);
+      }
+    }
+  };
+});
+var model = {
+  prompt: 'Test Prompt',
+  promptEnabled: true,
+  imageUrl: '',
+  imageDimensions: {
+    height: 100,
+    width: 100
+  }
+};
+describe('Root', function () {
+  var onConfigurationChanged = jest.fn();
+  var onModelChanged = jest.fn();
+  var wrapper;
+  beforeEach(function () {
+    var props = {
+      classes: {},
+      model: model,
+      configuration: _defaults["default"].configuration,
+      onConfigurationChanged: onConfigurationChanged,
+      onModelChanged: onModelChanged
+    };
+
+    wrapper = function wrapper() {
+      return (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_root.Root, props));
+    };
+  });
+  describe('snapshot', function () {
+    it('renders', function () {
+      expect(wrapper()).toMatchSnapshot();
+    });
+  });
+  describe('logic', function () {
+    var w;
+    beforeAll(function () {
+      w = wrapper();
+    });
+    it('onPromptChanged calls onModelChanged', function () {
+      w.instance().onPromptChanged('New Prompt');
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({
+        prompt: 'New Prompt'
+      }));
+    });
+    it('onTeacherInstructionsChanged calls onModelChanged', function () {
+      w.instance().onTeacherInstructionsChanged('New Teacher Instructions');
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({
+        teacherInstructions: 'New Teacher Instructions'
+      }));
+    });
+    it('onUpdateImageDimension calls onModelChanged', function () {
+      w.instance().onUpdateImageDimension({
+        height: 200,
+        width: 200
+      });
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({
+        imageDimensions: {
+          height: 200,
+          width: 200
+        }
+      }));
+    });
+    it('onImageUpload calls onModelChanged', function () {
+      w.instance().onImageUpload('url');
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({
+        imageUrl: 'url'
+      }));
+    });
+  });
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9fX3Rlc3RzX18vcm9vdC50ZXN0LmpzeCJdLCJuYW1lcyI6WyJqZXN0IiwibW9jayIsInNldHRpbmdzIiwiUGFuZWwiLCJwcm9wcyIsInRvZ2dsZSIsImZuIiwicmFkaW8iLCJkcm9wZG93biIsImxheW91dCIsIkNvbmZpZ0xheW91dCIsImNoaWxkcmVuIiwibW9kZWwiLCJwcm9tcHQiLCJwcm9tcHRFbmFibGVkIiwiaW1hZ2VVcmwiLCJpbWFnZURpbWVuc2lvbnMiLCJoZWlnaHQiLCJ3aWR0aCIsImRlc2NyaWJlIiwib25Db25maWd1cmF0aW9uQ2hhbmdlZCIsIm9uTW9kZWxDaGFuZ2VkIiwid3JhcHBlciIsImJlZm9yZUVhY2giLCJjbGFzc2VzIiwiY29uZmlndXJhdGlvbiIsImRlZmF1bHRzIiwiaXQiLCJleHBlY3QiLCJ0b01hdGNoU25hcHNob3QiLCJ3IiwiYmVmb3JlQWxsIiwiaW5zdGFuY2UiLCJvblByb21wdENoYW5nZWQiLCJ0b0hhdmVCZWVuQ2FsbGVkV2l0aCIsIm9iamVjdENvbnRhaW5pbmciLCJvblRlYWNoZXJJbnN0cnVjdGlvbnNDaGFuZ2VkIiwidGVhY2hlckluc3RydWN0aW9ucyIsIm9uVXBkYXRlSW1hZ2VEaW1lbnNpb24iLCJvbkltYWdlVXBsb2FkIl0sIm1hcHBpbmdzIjoiOzs7O0FBQUE7O0FBQ0E7O0FBRUE7O0FBQ0E7O0FBRUFBLElBQUksQ0FBQ0MsSUFBTCxDQUFVLG9CQUFWLEVBQWdDO0FBQUEsU0FBTztBQUNyQ0MsSUFBQUEsUUFBUSxFQUFFO0FBQ1JDLE1BQUFBLEtBQUssRUFBRSxlQUFBQyxLQUFLO0FBQUEsNEJBQUksdUNBQVNBLEtBQVQsQ0FBSjtBQUFBLE9BREo7QUFFUkMsTUFBQUEsTUFBTSxFQUFFTCxJQUFJLENBQUNNLEVBQUwsRUFGQTtBQUdSQyxNQUFBQSxLQUFLLEVBQUVQLElBQUksQ0FBQ00sRUFBTCxFQUhDO0FBSVJFLE1BQUFBLFFBQVEsRUFBRVIsSUFBSSxDQUFDTSxFQUFMO0FBSkYs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QUZnQztBQUFuQixPQUF4QixDQURKO0FBTUQsS0FaQyxDQUFGO0FBY0FTLElBQUFBLEVBQUUsQ0FBQyxvQ0FBRCxFQUF1QyxZQUFNO0FBQzdDRyxNQUFBQSxDQUFDLENBQUNFLFFBQUYsR0FBYU8sYUFBYixDQUEyQixLQUEzQjtBQUVBWCxNQUFBQSxNQUFNLENBQUNQLGNBQUQsQ0FBTixDQUF1QmEsb0JBQXZCLENBQ0lOLE1BQU0sQ0FBQ08sZ0JBQVAsQ0FBd0I7QUFBRXBCLFFBQUFBLFFBQVEsRUFBRTtBQUFaLE9BQXhCLENBREo7QUFFRCxLQUxDLENBQUY7QUFNRCxHQXpDTyxDQUFSO0FBMENELENBaEVPLENBQVIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzaGFsbG93IH0gZnJvbSAnZW56eW1lJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFJvb3QgfSBmcm9tICcuLi9yb290JztcbmltcG9ydCBkZWZhdWx0cyBmcm9tICcuLi9kZWZhdWx0cyc7XG5cbmplc3QubW9jaygnQHBpZS1saWIvY29uZmlnLXVpJywgKCkgPT4gKHtcbiAgc2V0dGluZ3M6IHtcbiAgICBQYW5lbDogcHJvcHMgPT4gPGRpdiB7Li4ucHJvcHN9IC8+LFxuICAgIHRvZ2dsZTogamVzdC5mbigpLFxuICAgIHJhZGlvOiBqZXN0LmZuKCksXG4gICAgZHJvcGRvd246IGplc3QuZm4oKVxuICB9LFxuICBsYXlvdXQ6IHtcbiAgICBDb25maWdMYXlvdXQ6IHByb3BzID0+IDxkaXY+e3Byb3BzLmNoaWxkcmVufTwvZGl2PlxuICB9XG59KSk7XG5cbmNvbnN0IG1vZGVsID0ge1xuICBwcm9tcHQ6ICdUZXN0IFByb21wdCcsXG4gIHByb21wdEVuYWJsZWQ6IHRydWUsXG4gIGltYWdlVXJsOiAnJyxcbiAgaW1hZ2VEaW1lbnNpb25zOiB7XG4gICAgaGVpZ2h0OiAxMDAsXG4gICAgd2lkdGg6IDEwMFxuICB9XG59O1xuXG5kZXNjcmliZSgnUm9vdCcsICgpID0+IHtcbiAgY29uc3Qgb25Db25maWd1cmF0aW9uQ2hhbmdlZCA9IGplc3QuZm4oKTtcbiAgY29uc3Qgb25Nb2RlbENoYW5nZWQgPSBqZXN0LmZuKCk7XG4gIGxldCB3cmFwcGVyO1xuXG4gIGJlZm9yZUVhY2goKCkgPT4ge1xuICAgIGNvbnN0IHByb3BzID0ge1xuICAgICAgY2xhc3Nlczoge30sXG4gICAgICBtb2RlbCxcbiAgICAgIGNvbmZpZ3VyYXRpb246IGRlZmF1bHRzLmNvbmZpZ3VyYXRpb24sXG4gICAgICBvbkNvbmZpZ3VyYXRpb25DaGFuZ2VkLFxuICAgICAgb25Nb2RlbENoYW5nZWQsXG4gICAgfTtcbiAgICB3cmFwcGVyID0gKCkgPT4gc2hhbGxvdyg8Um9vdCB7Li4ucHJvcHN9IC8+KTtcbiAgfSk7XG5cbiAgZGVzY3JpYmUoJ3NuYXBzaG90JywgKCkgPT4ge1xuICAgIGl0KCdyZW5kZXJzJywgKCkgPT4ge1xuICAgICAgZXhwZWN0KHdyYXBwZXIoKSkudG9NYXRjaFNuYXBzaG90KCk7XG4gICAgfSk7XG4gIH0pO1xuXG4gIGRlc2NyaWJlKCdsb2dpYycsICgpID0+IHtcbiAgICBsZXQgdztcblxuICAgIGJlZm9yZUFsbCgoKSA9PiB7XG4gICAgICB3ID0gd3JhcHBlcigpO1xuICAgIH0pO1xuXG4gICAgaXQoJ29uUHJvbXB0Q2hhbmdlZCBjYWxscyBvbk1vZGVsQ2hhbmdlZCcsICgpID0+IHtcbiAgICAgIHcuaW5zdGFuY2UoKS5vblByb21wdENoYW5nZWQoJ05ldyBQcm9tcHQnKTtcblxuICAgICAgZXhwZWN0KG9uTW9kZWxDaGFuZ2VkKS50b0hhdmVCZWVuQ2FsbGVkV2l0aChcbiAgICAgICAgICBleHBlY3Qub2JqZWN0Q29udGFpbmluZyh7IHByb21wdDogJ05ldyBQcm9tcHQnIH0pKVxuICAgIH0pO1xuXG4gICAgaXQoJ29uVGVhY2hlckluc3RydWN0aW9uc0NoYW5nZWQgY2FsbHMgb25Nb2RlbENoYW5nZWQnLCAoKSA9PiB7XG4gICAgICB3Lmluc3RhbmNlKCkub25UZWFjaGVySW5zdHJ1Y3Rpb25zQ2hhbmdlZCgnTmV3IFRlYWNoZXIgSW5zdHJ1Y3Rpb25zJyk7XG5cbiAgICAgIGV4cGVjdChvbk1vZGVsQ2hhbmdlZCkudG9IYXZlQmVlbkNhbGxlZFdpdGgoXG4gICAgICAgICAgZXhwZWN0Lm9iamVjdENvbnRhaW5pbmcoeyB0ZWFjaGVySW5zdHJ1Y3Rpb25zOiAnTmV3IFRlYWNoZXIgSW5zdHJ1Y3Rpb25zJyB9KSlcbiAgICB9KTtcblxuICAgIGl0KCdvblVwZGF0ZUltYWdlRGltZW5zaW9uIGNhbGxzIG9uTW9kZWxDaGFuZ2VkJywgKCkgPT4ge1xuICAgICAgdy5pbnN0YW5jZSgpLm9uVXBkYXRlSW1hZ2VEaW1lbnNpb24oe1xuICAgICAgICBoZWlnaHQ6IDIwMCxcbiAgICAgICAgd2lkdGg6IDIwMFxuICAgICAgfSk7XG5cbiAgICAgIGV4cGVjdChvbk1vZGVsQ2hhbmdlZCkudG9IYXZlQmVlbkNhbGxlZFdpdGgoXG4gICAgICAgICAgZXhwZWN0Lm9iamVjdENvbnRhaW5pbmcoeyBpbWFnZURpbWVuc2lvbnM6IHtcbiAgICAgICAgICAgICAgaGVpZ2h0OiAyMDAsXG4gICAgICAgICAgICAgIHdpZHRoOiAyMDBcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9KSlcbiAgICB9KTtcblxuICAgIGl0KCdvbkltYWdlVXBsb2FkIGNhbGxzIG9uTW9kZWxDaGFuZ2VkJywgKCkgPT4ge1xuICAgICAgdy5pbnN0YW5jZSgpLm9uSW1hZ2VVcGxvYWQoJ3VybCcpO1xuXG4gICAgICBleHBlY3Qob25Nb2RlbENoYW5nZWQpLnRvSGF2ZUJlZW5DYWxsZWRXaXRoKFxuICAgICAgICAgIGV4cGVjdC5vYmplY3RDb250YWluaW5nKHsgaW1hZ2VVcmw6ICd1cmwnIH0pKVxuICAgIH0pO1xuICB9KTtcbn0pO1xuXG4iXX0=

package/configure/lib/defaults.js

@@ -15,13 +15,19 @@ var _default = {
     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',
-      enabled: true
+      label: 'Background Image'
     },
     prompt: {
       settings: true,

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","toolbarEditorPosition","configuration","backgroundImage","settings","label","enabled","teacherInstructions"],"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,qBAAqB,EAAE;AAVlB,GADM;AAabC,EAAAA,aAAa,EAAE;AACbC,IAAAA,eAAe,EAAE;AACfC,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE,kBAFQ;AAGfC,MAAAA,OAAO,EAAE;AAHM,KADJ;AAMbb,IAAAA,MAAM,EAAE;AACNW,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KANK;AAUbE,IAAAA,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY;AAVR;AAbF,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    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image',\n      enabled: true\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    }\n  }\n};\n"],"file":"defaults.js"}
+{"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","teacherInstructions"],"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,EAAC,IAXb;AAYLC,IAAAA,qBAAqB,EAAE;AAZlB,GADM;AAebC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAC,KAFC;AAGVC,MAAAA,OAAO,EAAC;AAHE,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,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY;AAdR;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    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    }\n  }\n};\n"],"file":"defaults.js"}

package/configure/lib/image-container.js

@@ -160,20 +160,23 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
       var box = _this.image;
-      var maxImageWidth = _this.state.maxImageWidth;
+      var _this$state = _this.state,
+          maxImageWidth = _this$state.maxImageWidth,
+          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;
       var hasMinimumWidth = x > 150 && y > 150;
 
       if (fitsContainer && hasMinimumWidth) {
         box.style.width = "".concat(x, "px");
-        box.style.height = "".concat(y, "px");
+        box.style.height = "".concat(x / imageAspectRatio, "px");
 
         _this.setState({
           dimensions: {
-            height: y,
+            height: x / imageAspectRatio,
             width: x
           }
         });
@@ -182,8 +185,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       _this.handleDisableDrag();
     });
     _this.state = {
-      maxImageWidth: 0,
-      maxImageHeight: 0,
+      maxImageWidth: "100%",
+      maxImageHeight: "auto",
       dragEnabled: true,
       dropzoneActive: false
     };
@@ -230,11 +233,11 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           classes = _this$props.classes,
           imageUrl = _this$props.imageUrl;
-      var _this$state = this.state,
-          dropzoneActive = _this$state.dropzoneActive,
-          dragEnabled = _this$state.dragEnabled,
-          maxImageHeight = _this$state.maxImageHeight,
-          maxImageWidth = _this$state.maxImageWidth;
+      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"])({

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

@@ -1 +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","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","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: 0,\n      maxImageHeight: 0,\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 } }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: offsetHeight,\n      width: offsetWidth\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 } = 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 fitsContainer = x <= maxImageWidth + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth) {\n      box.style.width = `${x}px`;\n      box.style.height = `${y}px`;\n\n      this.setState({ dimensions: { height: y, width: x }});\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button\n          label={label}\n          onClick={this.handleInputClick}\n        />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={ref => { this.input = ref; }}\n          type=\"file\"\n        />\n      </div>\n    )\n  }\n\n  render() {\n    const {\n      classes,\n      imageUrl\n    } = this.props;\n    const {\n      dropzoneActive,\n      dragEnabled,\n      maxImageHeight,\n      maxImageWidth\n    } = this.state;\n\n    return (\n      <div className={classes.base} >\n        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n             {...dragEnabled ? {\n               onDragExit: this.handleOnDragExit,\n               onDragLeave: this.handleOnDragExit,\n               onDragOver: this.handleOnDragOver ,\n               onDrop: this.handleOnDrop\n             } : {}}\n        >\n          <div className={classes.toolbar}>\n            {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}\n          </div>\n\n          <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={ref => { this.image = ref; }}\n                  src={imageUrl}\n                  style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}\n                  alt=''\n                />\n                <div ref={ref => { this.resize = ref; }} className={classes.resize} />\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"}
+{"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","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","imageAspectRatio","fitsContainer","hasMinimumWidth","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","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 } }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: offsetHeight,\n      width: offsetWidth,\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, 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\n    const fitsContainer = x <= maxImageWidth + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth) {\n      box.style.width = `${x}px`;\n      box.style.height = `${x/imageAspectRatio}px`;\n\n      this.setState({\n        dimensions: {\n          height:x/imageAspectRatio,\n          width:x,\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 } = this.props;\n    const {\n      dropzoneActive,\n      dragEnabled,\n      maxImageHeight,\n      maxImageWidth\n    } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${\n            dropzoneActive ? classes.boxActive : ''\n          }`}\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}>\n            {this.renderUploadControl(\n              imageUrl ? 'Replace Image' : 'Upload Image'\n            )}\n          </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                    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"}