@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/ImageUpload/ImageEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from \"../Dialog\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <ButtonPrimary disabled>Save</ButtonPrimary>\n                                        </Tooltip>\n                                    ) : (\n                                        <ButtonPrimary\n                                            data-testid=\"dialog-accept\"\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </ButtonPrimary>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyC;AAsBzC,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,sBAAsB,EAAE;IACpBC,QAAQ,EAAE,iBAAiB;IAC3BC,SAAS,EAAE,iBAAiB;IAC5B,4BAA4B,EAAE;MAC1BD,QAAQ,EAAE,iBAAiB;MAC3BC,SAAS,EAAE,iBAAiB;MAC5BH,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,OAAO;MACfG,UAAU,EAAE;IAChB;EACJ;AACJ,CAAC,6BAAC;AAAC,IAEGC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uGACEC,cAAK,CAACC,SAAS,EAAe;IAAA;EAAA;EAAA;IAAA;IAAA,OAEnD,kBAAyB;MAAA;MACrB,kBAAuE,IAAI,CAACC,KAAK;QAAzEC,GAAG,eAAHA,GAAG;QAAEC,OAAO,eAAPA,OAAO;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,IAAI,eAAJA,IAAI;QAAEC,YAAY,eAAZA,YAAY;QAAKC,WAAW;MAElE,oBACI,6BAAC,cAAM;QACH,SAAS,EAAEhB,iBAAkB;QAC7B,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAa,CAAE;QAChC,IAAI,EAAED;MAAK,GACPE,WAAW,GAEdF,IAAI,iBACD,6BAAC,wBAAW;QAAC,GAAG,EAAE,IAAI,CAACI,WAAY;QAAC,GAAG,EAAEP,GAAI;QAAC,OAAO,EAAEC;MAAQ,GAC1D;QAAA,IAAGO,MAAM,QAANA,MAAM;UAAEC,UAAU,QAAVA,UAAU;QAAA,oBAClB,yEACI,6BAAC,qBAAa,QAAED,MAAM,EAAE,CAAiB,eACzC,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAC,QAAM,CAAe,EAClCC,UAAU,gBACP,6BAAC,gBAAO;UACJ,OAAO,EAAE,qCAAsC;UAC/C,SAAS,EAAE;QAAM,gBAEjB,6BAAC,qBAAa;UAAC,QAAQ;QAAA,GAAC,MAAI,CAAgB,CACtC,gBAEV,6BAAC,qBAAa;UACV,eAAY,eAAe;UAC3B,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAW,CAACI,OAAO,GAC9B,MAAI,CAACJ,WAAW,CAACI,OAAO,CAACC,gBAAgB,EAAE,GAC3C,EAAE;YACR;AAChD;AACA;YACgDV,QAAQ,CAACQ,GAAG,CAAC;UACjB;QAAE,GACL,MAED,CACH,CACW,CACjB;MAAA,CACN,CAER,CACI;IAEjB;EAAC;EAAA;AAAA,EAlD2Bb,cAAK,CAACgB,SAAS;AAAA,eAoDhCjB,iBAAiB;AAAA"}

package/ImageUpload/MultiImageUpload.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { SelectedFile, FileError } from "react-butterfiles";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+interface MultiImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
@@ -17,41 +17,20 @@ declare type Props = FormComponentProps & {
     cropper?: {
         [key: string]: any;
     };
-};
-declare type State = {
+}
+interface State {
     errors?: FileError[];
-    selectedImages: Object;
+    selectedImages: Record<string, any>;
     loading: boolean;
     imageEditor: {
-        image?: SelectedFile;
+        image: SelectedFile | null;
         open: boolean;
         index?: number;
     };
-};
-declare class MultiImageUpload extends React.Component<Props, State> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        accept: string[];
-        maxSize: string;
-        imageEditor: {};
-        errorMessages: {
-            maxSizeExceeded: string;
-            unsupportedFileType: string;
-            default: string;
-        };
-    };
-    state: {
-        errors: any;
-        selectedImages: {};
-        loading: boolean;
-        imageEditor: {
-            open: boolean;
-            image: any;
-            index: any;
-        };
-    };
+}
+declare class MultiImageUpload extends React.Component<MultiImageUploadProps, State> {
+    static defaultProps: Partial<MultiImageUploadProps>;
+    state: State;
     onChange: (value: any) => Promise<void>;
     handleSelectedImages: (images: Array<SelectedFile>, selectedIndex?: number) => Promise<void>;
     handleErrors: (errors: Array<FileError>) => void;

package/ImageUpload/MultiImageUpload.js

@@ -1,21 +1,28 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import BrowseFiles from "react-butterfiles";
-import { css } from "emotion";
-import classNames from "classnames";
-import { FormElementMessage } from "../FormElementMessage";
-import Image from "./Image";
-import ImageEditorDialog from "./ImageEditorDialog";
-var imagesStyle = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiImageUpload = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
+var _emotion = require("emotion");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FormElementMessage = require("../FormElementMessage");
+var _Image = _interopRequireDefault(require("./Image"));
+var _ImageEditorDialog = _interopRequireDefault(require("./ImageEditorDialog"));
+var imagesStyle = /*#__PURE__*/(0, _emotion.css)({
   ".disabled": {
     opacity: 0.75,
     pointerEvents: "none"
@@ -35,214 +42,183 @@ var imagesStyle = /*#__PURE__*/css({
       }
     }
   }
-}, "label:imagesStyle;"); // Do not apply editping for following image types.
-// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
+}, "label:imagesStyle;");
 
+// Do not apply editping for following image types.
+// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
 var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
-  _inherits(MultiImageUpload, _React$Component);
-
-  var _super = _createSuper(MultiImageUpload);
-
+  (0, _inherits2.default)(MultiImageUpload, _React$Component);
+  var _super = (0, _createSuper2.default)(MultiImageUpload);
   function MultiImageUpload() {
     var _this;
-
-    _classCallCheck(this, MultiImageUpload);
-
+    (0, _classCallCheck2.default)(this, MultiImageUpload);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      errors: null,
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      errors: undefined,
       selectedImages: {},
       loading: false,
       imageEditor: {
         open: false,
         image: null,
-        index: null
+        index: undefined
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
         var _this$props, onChange, validate;
-
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = _this.props, onChange = _this$props.onChange, validate = _this$props.validate;
-                _context.t0 = onChange;
-
-                if (!_context.t0) {
-                  _context.next = 5;
-                  break;
-                }
-
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, onChange = _this$props.onChange, validate = _this$props.validate;
+              _context.t0 = onChange;
+              if (!_context.t0) {
                 _context.next = 5;
-                return onChange(value);
-
-              case 5:
-                _context.t1 = validate;
-
-                if (!_context.t1) {
-                  _context.next = 9;
-                  break;
-                }
-
+                break;
+              }
+              _context.next = 5;
+              return onChange(value);
+            case 5:
+              _context.t1 = validate;
+              if (!_context.t1) {
                 _context.next = 9;
-                return validate();
-
-              case 9:
-              case "end":
-                return _context.stop();
-            }
+                break;
+              }
+              _context.next = 9;
+              return validate();
+            case 9:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
-
       return function (_x) {
         return _ref.apply(this, arguments);
       };
     }());
-
-    _defineProperty(_assertThisInitialized(_this), "handleSelectedImages", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(images) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedImages", /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4(images) {
         var selectedIndex,
-            _args4 = arguments;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
-
-                _this.setState({
-                  errors: null,
-                  loading: true
-                }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-                  var selectedImages, i, image;
-                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                    while (1) {
-                      switch (_context3.prev = _context3.next) {
-                        case 0:
-                          selectedImages = {};
-
-                          for (i = 0; i < images.length; i++) {
-                            image = images[i];
-                            selectedImages[selectedIndex + i] = _objectSpread({}, image);
-                          }
-
-                          _this.setState({
-                            selectedImages: selectedImages
-                          }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-                            var newValue, convertedImages, _i, _image;
-
-                            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                              while (1) {
-                                switch (_context2.prev = _context2.next) {
-                                  case 0:
-                                    newValue = Array.isArray(_this.props.value) ? _toConsumableArray(_this.props.value) : [];
-                                    convertedImages = [];
-
-                                    for (_i = 0; _i < images.length; _i++) {
-                                      _image = images[_i];
-                                      convertedImages.push({
-                                        src: _image.src.base64,
-                                        name: _image.name,
-                                        size: _image.size,
-                                        type: _image.type
-                                      });
-                                    }
-
-                                    newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
-                                    _context2.next = 6;
-                                    return _this.onChange(newValue);
-
-                                  case 6:
-                                    _this.setState({
-                                      loading: false
-                                    });
-
-                                  case 7:
-                                  case "end":
-                                    return _context2.stop();
-                                }
-                              }
-                            }, _callee2);
-                          })));
-
-                        case 3:
-                        case "end":
-                          return _context3.stop();
+          _args4 = arguments;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
+              _this.setState({
+                errors: undefined,
+                loading: true
+              }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
+                var selectedImages, i, image;
+                return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+                  while (1) switch (_context3.prev = _context3.next) {
+                    case 0:
+                      selectedImages = {};
+                      for (i = 0; i < images.length; i++) {
+                        image = images[i];
+                        selectedImages[selectedIndex + i] = (0, _objectSpread2.default)({}, image);
                       }
-                    }
-                  }, _callee3);
-                })));
-
-              case 2:
-              case "end":
-                return _context4.stop();
-            }
+                      _this.setState({
+                        selectedImages: selectedImages
+                      }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+                        var newValue, convertedImages, _i, _image;
+                        return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+                          while (1) switch (_context2.prev = _context2.next) {
+                            case 0:
+                              newValue = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
+                              convertedImages = [];
+                              for (_i = 0; _i < images.length; _i++) {
+                                _image = images[_i];
+                                convertedImages.push({
+                                  src: _image.src.base64,
+                                  name: _image.name,
+                                  size: _image.size,
+                                  type: _image.type
+                                });
+                              }
+                              newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
+                              _context2.next = 6;
+                              return _this.onChange(newValue);
+                            case 6:
+                              _this.setState({
+                                loading: false
+                              });
+                            case 7:
+                            case "end":
+                              return _context2.stop();
+                          }
+                        }, _callee2);
+                      })));
+                    case 3:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }, _callee3);
+              })));
+            case 2:
+            case "end":
+              return _context4.stop();
           }
         }, _callee4);
       }));
-
       return function (_x2) {
         return _ref2.apply(this, arguments);
       };
     }());
-
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function (errors) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleErrors", function (errors) {
       _this.setState({
         errors: errors
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "removeImage", function (image) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeImage", function (image) {
       var _this$props2 = _this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange;
-
+        value = _this$props2.value,
+        onChange = _this$props2.onChange;
       if (!onChange) {
         return;
       }
-
-      var images = Array.isArray(value) ? _toConsumableArray(value) : [];
+      var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
       images.splice(images.indexOf(image), 1);
       onChange(images);
     });
-
     return _this;
   }
-
-  _createClass(MultiImageUpload, [{
+  (0, _createClass2.default)(MultiImageUpload, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props3 = this.props,
-          value = _this$props3.value,
-          validation = _this$props3.validation,
-          label = _this$props3.label,
-          description = _this$props3.description,
-          disabled = _this$props3.disabled,
-          imageEditor = _this$props3.imageEditor,
-          accept = _this$props3.accept,
-          maxSize = _this$props3.maxSize,
-          className = _this$props3.className;
+        value = _this$props3.value,
+        validation = _this$props3.validation,
+        label = _this$props3.label,
+        description = _this$props3.description,
+        disabled = _this$props3.disabled,
+        imageEditor = _this$props3.imageEditor,
+        accept = _this$props3.accept,
+        maxSize = _this$props3.maxSize,
+        className = _this$props3.className;
+      /**
+       * TODO: figure out the correct type
+       */
       var imageEditorImageSrc = "";
-
       if (this.state.imageEditor.image) {
+        // @ts-ignore
         imageEditorImageSrc = this.state.imageEditor.image.src;
+        console.warn("Figure out correct type if this.state.imageEditor.image.src");
+        console.log(this.state.imageEditor.image.src);
       }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(imagesStyle, className)
-      }, label && /*#__PURE__*/React.createElement("div", {
+      var _ref5 = validation || {},
+        validationIsValid = _ref5.isValid,
+        validationMessage = _ref5.message;
+      /**
+       * accept can safely be cast because we have default value
+       */
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(imagesStyle, className)
+      }, label && /*#__PURE__*/_react.default.createElement("div", {
         className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/React.createElement(ImageEditorDialog, {
+      }, label), /*#__PURE__*/_react.default.createElement(_ImageEditorDialog.default, {
         options: imageEditor,
         open: this.state.imageEditor.open,
         src: imageEditorImageSrc,
@@ -257,38 +233,34 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
           setTimeout(function () {
             _this2.setState({
               loading: true
-            }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+            }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
               var newValue, imageEditorImageIndex;
-              return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-                while (1) {
-                  switch (_context5.prev = _context5.next) {
-                    case 0:
-                      newValue = Array.isArray(_this2.props.value) ? _toConsumableArray(_this2.props.value) : [];
-                      imageEditorImageIndex = _this2.state.imageEditor.index;
-                      newValue[imageEditorImageIndex].src = src;
-                      _context5.next = 5;
-                      return _this2.onChange(newValue);
-
-                    case 5:
-                      _this2.setState({
-                        loading: false,
-                        imageEditor: {
-                          image: null,
-                          open: false,
-                          index: null
-                        }
-                      });
-
-                    case 6:
-                    case "end":
-                      return _context5.stop();
-                  }
+              return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
+                while (1) switch (_context5.prev = _context5.next) {
+                  case 0:
+                    newValue = Array.isArray(_this2.props.value) ? (0, _toConsumableArray2.default)(_this2.props.value) : [];
+                    imageEditorImageIndex = _this2.state.imageEditor.index;
+                    newValue[imageEditorImageIndex].src = src;
+                    _context5.next = 5;
+                    return _this2.onChange(newValue);
+                  case 5:
+                    _this2.setState({
+                      loading: false,
+                      imageEditor: {
+                        image: null,
+                        open: false,
+                        index: undefined
+                      }
+                    });
+                  case 6:
+                  case "end":
+                    return _context5.stop();
                 }
               }, _callee5);
             })));
           });
         }
-      }), /*#__PURE__*/React.createElement(BrowseFiles, {
+      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
         accept: accept,
         maxSize: maxSize,
         multiple: true,
@@ -299,20 +271,20 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         onError: function onError(errors) {
           return _this2.handleErrors(errors);
         }
-      }, function (_ref6) {
-        var browseFiles = _ref6.browseFiles,
-            getDropZoneProps = _ref6.getDropZoneProps;
-        var images = Array.isArray(value) ? _toConsumableArray(value) : [];
-        return /*#__PURE__*/React.createElement("div", getDropZoneProps({
-          className: classNames({
+      }, function (_ref7) {
+        var browseFiles = _ref7.browseFiles,
+          getDropZoneProps = _ref7.getDropZoneProps;
+        var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps({
+          className: (0, _classnames.default)({
             disabled: disabled
           })
-        }), /*#__PURE__*/React.createElement("ul", {
+        }), /*#__PURE__*/_react.default.createElement("ul", {
           className: "images"
         }, images.map(function (image, index) {
-          return /*#__PURE__*/React.createElement("li", {
+          return /*#__PURE__*/_react.default.createElement("li", {
             key: index
-          }, /*#__PURE__*/React.createElement(Image, {
+          }, /*#__PURE__*/_react.default.createElement(_Image.default, {
             loading: _this2.state.selectedImages[index] && _this2.state.loading,
             value: image.file || image,
             removeImage: function removeImage() {
@@ -338,7 +310,7 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
               });
             }
           }));
-        }), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Image, {
+        }), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Image.default, {
           disabled: _this2.state.loading,
           uploadImage: function uploadImage() {
             browseFiles({
@@ -351,25 +323,27 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
             });
           }
         }))));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, "Your selection of images failed because of the following images:", /*#__PURE__*/React.createElement("ul", null, this.state.errors.map(function (error, index) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: error.file.name + index
-        }, index + 1, ". ", /*#__PURE__*/React.createElement("strong", null, error.file.name), " -\xA0", _this2.props.errorMessages[error.type] || _this2.props.errorMessages.default);
+      }, "Your selection of images failed because of the following images:", /*#__PURE__*/_react.default.createElement("ul", null, this.state.errors.map(function (error, index) {
+        /**
+         * We need to cast as existing keys in errorMessages, otherwise TS throws an error
+         */
+        var errorType = error.type;
+        var message = _this2.props.errorMessages[errorType];
+        var errorFileName = error.file ? error.file.name : "";
+        return /*#__PURE__*/_react.default.createElement("li", {
+          key: errorFileName + index
+        }, index + 1, ". ", /*#__PURE__*/_react.default.createElement("strong", null, errorFileName), " -\xA0", message || _this2.props.errorMessages.default);
       }))));
     }
   }]);
-
   return MultiImageUpload;
-}(React.Component);
-
-_defineProperty(MultiImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
+}(_react.default.Component);
+exports.MultiImageUpload = MultiImageUpload;
+(0, _defineProperty2.default)(MultiImageUpload, "defaultProps", {
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
   maxSize: "5mb",
   imageEditor: {},
@@ -378,6 +352,4 @@ _defineProperty(MultiImageUpload, "defaultProps", {
     unsupportedFileType: "Unsupported file type.",
     default: "An error occurred."
   }
-});
-
-export { MultiImageUpload };
+});