@webiny/ui 5.39.0-beta.0 → 5.39.0-beta.2

package/ImageEditor/toolbar/rotate.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_rotateRight","_Slider","_Tooltip","_Button","_cropperjs","cropper","RenderForm","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","rangeInput","_createClass2","key","value","render","_this2","createElement","style","width","margin","Slider","label","state","min","max","step","discrete","displayMarkers","onInput","setState","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","wrap","_callee$","_context","prev","next","rotateTo","parseInt","stop","React","Component","tool","name","icon","_ref2","activateTool","Tooltip","placement","content","IconButton","ReactComponent","onClick","renderForm","props","onActivate","_ref3","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","_ref4","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height","_default","exports"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_rotateRight","_Slider","_Tooltip","_Button","_cropperjs","cropper","RenderForm","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","rangeInput","_createClass2","key","value","render","_this2","createElement","style","width","margin","Slider","label","state","min","max","step","discrete","displayMarkers","onInput","setState","rotateTo","parseInt","React","Component","tool","name","icon","_ref","activateTool","Tooltip","placement","content","IconButton","ReactComponent","onClick","renderForm","props","onActivate","_ref2","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","_ref3","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height","_default","exports"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/types.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="web" />
 import React from "react";
 export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
 interface RenderFormParams {
     canvas: React.RefObject<HTMLCanvasElement>;
     image: HTMLImageElement;
-    renderApplyCancel?: Function;
+    renderApplyCancel?: () => void;
     options?: {
         [key: string]: any;
     };

package/ImageEditor/toolbar/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from \"react\";\n\nexport type ToolbarTool = \"crop\" | \"flip\" | \"rotate\" | \"filter\";\n\ninterface RenderFormParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n    image: HTMLImageElement;\n    renderApplyCancel?: Function;\n    options?: { [key: string]: any };\n}\n\ninterface OnActivateParams {\n    options: any;\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface IconParams {\n    activateTool: (tool: ToolbarTool) => void;\n}\n\ninterface ApplyParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface CancelParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\nexport interface ImageEditorTool {\n    name: string;\n    apply?: (params: ApplyParams) => void;\n    cancel?: (params: CancelParams) => void;\n    onActivate?: (params: OnActivateParams) => void;\n    icon: (params: IconParams) => React.ReactElement<any>;\n    renderForm?: (params: RenderFormParams) => React.ReactNode;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from \"react\";\n\nexport type ToolbarTool = \"crop\" | \"flip\" | \"rotate\" | \"filter\";\n\ninterface RenderFormParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n    image: HTMLImageElement;\n    renderApplyCancel?: () => void;\n    options?: { [key: string]: any };\n}\n\ninterface OnActivateParams {\n    options: any;\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface IconParams {\n    activateTool: (tool: ToolbarTool) => void;\n}\n\ninterface ApplyParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface CancelParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\nexport interface ImageEditorTool {\n    name: string;\n    apply?: (params: ApplyParams) => void;\n    cancel?: (params: CancelParams) => void;\n    onActivate?: (params: OnActivateParams) => void;\n    icon: (params: IconParams) => React.ReactElement<any>;\n    renderForm?: (params: RenderFormParams) => React.ReactNode;\n}\n"],"mappings":""}

package/ImageUpload/Image.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
+import { BrowseFilesParams } from "react-butterfiles";
 interface ImageProps {
     uploadImage: () => void;
     removeImage?: (value: string | null) => void;
-    editImage?: Function;
+    editImage?: (value: BrowseFilesParams | undefined) => void;
     value?: any;
     disabled?: boolean;
     loading?: boolean;

package/ImageUpload/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_classnames","_roundAdd_photo_alternate24px","_roundClose24px","_roundEdit24px","_Typography","_Progress","_styled","Image","_React$Component","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","renderBlank","_this$props","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","createElement","onClick","AddImageIconWrapper","ReactComponent","Typography","use","placeholder","renderImg","_this$props2","removeImage","editImage","renderImagePreview","imagePreviewProps","src","style","width","height","imagePreview","ImagePreviewWrapper","RemoveImage","EditImage","render","_this$props3","disabled","containerStyle","className","classNames","loading","CircularProgress","React","Component","_defineProperty2","_default","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_classnames","_roundAdd_photo_alternate24px","_roundClose24px","_roundEdit24px","_Typography","_Progress","_styled","Image","_React$Component","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","renderBlank","_this$props","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","createElement","onClick","AddImageIconWrapper","ReactComponent","Typography","use","placeholder","renderImg","_this$props2","removeImage","editImage","renderImagePreview","imagePreviewProps","src","style","width","height","imagePreview","ImagePreviewWrapper","RemoveImage","EditImage","render","_this$props3","disabled","containerStyle","className","classNames","loading","CircularProgress","React","Component","_defineProperty2","_default","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\nimport { BrowseFilesParams } from \"react-butterfiles\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: (value: BrowseFilesParams | undefined) => void;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}

package/ImageUpload/MultiImageUpload.d.ts

@@ -6,9 +6,11 @@ interface MultiImageUploadProps extends FormComponentProps {
     disabled?: boolean;
     description?: string;
     className?: string;
-    accept?: Array<string>;
+    accept?: string[];
     maxSize: string;
-    imageEditor?: Object;
+    imageEditor?: {
+        [key: string]: any;
+    };
     errorMessages: {
         maxSizeExceeded: string;
         unsupportedFileType: string;

package/ImageUpload/MultiImageUpload.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 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"));
@@ -66,106 +64,46 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         index: undefined
       }
     });
-    (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 (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;
-                break;
-              }
-              _context.next = 5;
-              return onChange(value);
-            case 5:
-              _context.t1 = validate;
-              if (!_context.t1) {
-                _context.next = 9;
-                break;
-              }
-              _context.next = 9;
-              return validate();
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-    (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 (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);
-                      }
-                      _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();
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", async function (value) {
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        validate = _this$props.validate;
+      onChange && (await onChange(value));
+      validate && (await validate());
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedImages", async function (images) {
+      var selectedIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      _this.setState({
+        errors: undefined,
+        loading: true
+      }, async function () {
+        var selectedImages = {};
+        for (var i = 0; i < images.length; i++) {
+          var image = images[i];
+          selectedImages[selectedIndex + i] = (0, _objectSpread2.default)({}, image);
+        }
+        _this.setState({
+          selectedImages: selectedImages
+        }, async function () {
+          var newValue = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
+          var convertedImages = [];
+          for (var _i = 0; _i < images.length; _i++) {
+            var _image = images[_i];
+            convertedImages.push({
+              src: _image.src.base64,
+              name: _image.name,
+              size: _image.size,
+              type: _image.type
+            });
           }
-        }, _callee4);
-      }));
-      return function (_x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
+          newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
+          await _this.onChange(newValue);
+          _this.setState({
+            loading: false
+          });
+        });
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleErrors", function (errors) {
       _this.setState({
         errors: errors
@@ -203,14 +141,14 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
        */
       var imageEditorImageSrc = "";
       if (this.state.imageEditor.image) {
-        // @ts-ignore
+        // @ts-expect-error
         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);
       }
-      var _ref5 = validation || {},
-        validationIsValid = _ref5.isValid,
-        validationMessage = _ref5.message;
+      var _ref = validation || {},
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
       /**
        * accept can safely be cast because we have default value
        */
@@ -233,31 +171,20 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
           setTimeout(function () {
             _this2.setState({
               loading: true
-            }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
-              var newValue, imageEditorImageIndex;
-              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();
+            }, async function () {
+              var newValue = Array.isArray(_this2.props.value) ? (0, _toConsumableArray2.default)(_this2.props.value) : [];
+              var imageEditorImageIndex = _this2.state.imageEditor.index;
+              newValue[imageEditorImageIndex].src = src;
+              await _this2.onChange(newValue);
+              _this2.setState({
+                loading: false,
+                imageEditor: {
+                  image: null,
+                  open: false,
+                  index: undefined
                 }
-              }, _callee5);
-            })));
+              });
+            });
           });
         }
       }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
@@ -271,9 +198,9 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         onError: function onError(errors) {
           return _this2.handleErrors(errors);
         }
-      }, function (_ref7) {
-        var browseFiles = _ref7.browseFiles,
-          getDropZoneProps = _ref7.getDropZoneProps;
+      }, function (_ref2) {
+        var browseFiles = _ref2.browseFiles,
+          getDropZoneProps = _ref2.getDropZoneProps;
         var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
         return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps({
           className: (0, _classnames.default)({

package/ImageUpload/MultiImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_emotion","_classnames","_FormElementMessage","_Image","_ImageEditorDialog","imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","errors","undefined","selectedImages","loading","imageEditor","open","image","index","_ref","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","value","_this$props","onChange","validate","wrap","_callee$","_context","prev","next","props","t0","t1","stop","_x","_ref2","_callee4","images","selectedIndex","_args4","_callee4$","_context4","setState","_callee3","i","_callee3$","_context3","_objectSpread2","_callee2","newValue","convertedImages","_i","_image","_callee2$","_context2","isArray","_toConsumableArray2","push","src","base64","name","size","type","splice","_x2","_this$props2","indexOf","_createClass2","key","render","_this2","_this$props3","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","_ref5","validationIsValid","isValid","validationMessage","message","createElement","classNames","options","onClose","onAccept","setTimeout","_callee5","imageEditorImageIndex","_callee5$","_context5","multiple","convertToBase64","onSuccess","files","handleSelectedImages","onError","handleErrors","_ref7","browseFiles","getDropZoneProps","map","file","removeImage","editImage","uploadImage","FormElementMessage","error","errorType","errorMessages","errorFileName","React","Component","exports","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-ignore\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_emotion","_classnames","_FormElementMessage","_Image","_ImageEditorDialog","imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","_this$props","props","onChange","validate","images","selectedIndex","setState","i","_objectSpread2","newValue","isArray","_toConsumableArray2","convertedImages","push","src","base64","name","size","type","splice","_this$props2","indexOf","_createClass2","key","render","_this2","_this$props3","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","options","onClose","onAccept","setTimeout","imageEditorImageIndex","multiple","convertToBase64","onSuccess","files","handleSelectedImages","onError","handleErrors","_ref2","browseFiles","getDropZoneProps","map","file","removeImage","editImage","uploadImage","FormElementMessage","error","errorType","errorMessages","errorFileName","React","Component","exports","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-expect-error\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":"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"}

package/ImageUpload/SingleImageUpload.d.ts

@@ -6,9 +6,11 @@ interface SingleImageUploadProps extends FormComponentProps {
     disabled?: boolean;
     description?: string;
     className?: string;
-    accept?: Array<string>;
+    accept?: string[];
     maxSize: string;
-    imageEditor?: Object;
+    imageEditor?: {
+        [key: string]: any;
+    };
     renderImagePreview?: () => React.ReactElement<any>;
     showRemoveImageButton?: boolean;
     errorMessages: {

package/ImageUpload/SingleImageUpload.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleImageUpload = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -143,33 +141,18 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
           setTimeout(function () {
             _this2.setState({
               loading: true
-            }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-              return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.t0 = onChange;
-                    if (!_context.t0) {
-                      _context.next = 4;
-                      break;
-                    }
-                    _context.next = 4;
-                    return onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
-                      src: src
-                    }));
-                  case 4:
-                    _this2.setState({
-                      loading: false,
-                      imageEditor: {
-                        image: null,
-                        open: false
-                      }
-                    });
-                  case 5:
-                  case "end":
-                    return _context.stop();
+            }, async function () {
+              onChange && (await onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
+                src: src
+              })));
+              _this2.setState({
+                loading: false,
+                imageEditor: {
+                  image: null,
+                  open: false
                 }
-              }, _callee);
-            })));
+              });
+            });
           });
         }
       }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
@@ -178,9 +161,9 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         convertToBase64: true,
         onSuccess: this.handleFiles,
         onError: this.handleErrors
-      }, function (_ref3) {
-        var browseFiles = _ref3.browseFiles,
-          getDropZoneProps = _ref3.getDropZoneProps;
+      }, function (_ref2) {
+        var browseFiles = _ref2.browseFiles,
+          getDropZoneProps = _ref2.getDropZoneProps;
         return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps(), /*#__PURE__*/_react.default.createElement(_Image.default, {
           renderImagePreview: renderImagePreview,
           loading: _this2.state.loading,