@webiny/ui 5.23.1 → 5.25.0-beta.0

package/ImageEditor/toolbar/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["rotate.tsx"],"names":["React","ReactComponent","RotateRight","Slider","Tooltip","IconButton","Cropper","cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"mappings":"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","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 icon={<RotateRight />} onClick={() => activateTool(\"rotate\")} />\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"]}

package/ImageEditor/toolbar/types.d.ts

@@ -1,22 +1,32 @@
-import * as React from "react";
+import React from "react";
+export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
 interface RenderFormParams {
-    canvas: any;
-    renderApplyCancel: Function;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image: HTMLImageElement;
+    renderApplyCancel?: Function;
     options?: {
         [key: string]: any;
     };
 }
+interface OnActivateParams {
+    options: any;
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+interface IconParams {
+    activateTool: (tool: ToolbarTool) => void;
+}
+interface ApplyParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+interface CancelParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
 export interface ImageEditorTool {
     name: string;
-    apply?: Function;
-    cancel?: Function;
-    onActivate?: ({ options, canvas }: {
-        options: any;
-        canvas: any;
-    }) => void;
-    icon: ({ activateTool: Function }: {
-        activateTool: any;
-    }) => React.ReactElement<any>;
+    apply?: (params: ApplyParams) => void;
+    cancel?: (params: CancelParams) => void;
+    onActivate?: (params: OnActivateParams) => void;
+    icon: (params: IconParams) => React.ReactElement<any>;
     renderForm?: (params: RenderFormParams) => React.ReactNode;
 }
 export {};

package/ImageEditor/toolbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/ImageUpload/Image.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-declare type Props = {
-    uploadImage: Function;
-    removeImage?: Function;
+import React from "react";
+interface ImageProps {
+    uploadImage: () => void;
+    removeImage?: (value: string | null) => void;
     editImage?: Function;
     value?: any;
     disabled?: boolean;
@@ -11,8 +11,8 @@ declare type Props = {
     renderImagePreview?: (props: any) => React.ReactElement<any>;
     round?: boolean;
     containerStyle?: React.CSSProperties;
-};
-declare class Image extends React.Component<Props> {
+}
+declare class Image extends React.Component<ImageProps> {
     static defaultProps: {
         placeholder: string;
         containerStyle: {

package/ImageUpload/Image.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 import { ReactComponent as AddImageIcon } from "./icons/round-add_photo_alternate-24px.svg";
 import { ReactComponent as RemoveImageIcon } from "./icons/round-close-24px.svg";

package/ImageUpload/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Image.tsx"],"names":["React","classNames","ReactComponent","AddImageIcon","RemoveImageIcon","EditImageIcon","Typography","CircularProgress","AddImageIconWrapper","AddImageWrapper","AddImageWrapperRound","EditImage","ImagePreviewWrapper","RemoveImage","Image","props","uploadImage","round","ImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","loading","renderImg","renderBlank","Component"],"mappings":"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","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>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)}>\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"]}

package/ImageUpload/ImageEditorDialog.d.ts

@@ -1,18 +1,23 @@
-import * as React from "react";
+import React from "react";
 import { ImageEditor } from "../ImageEditor";
 import { DialogOnClose } from "../Dialog";
-declare type Props = {
+interface ImageEditorDialogProps {
     dialogZIndex?: number;
     onClose?: DialogOnClose;
     open?: boolean;
-    options?: Object;
+    /**
+     * We would need to drill down a lot to give correct options.
+     * TODO: figure out some other way.
+     */
+    options?: any;
     src?: string;
     onAccept: (src: string) => void;
     "data-testid"?: string;
-};
-declare class ImageEditorDialog extends React.Component<Props, {
+}
+interface ImageEditorDialogState {
     imageProcessing: boolean;
-}> {
+}
+declare class ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {
     imageEditor: React.RefObject<ImageEditor>;
     render(): JSX.Element;
 }

package/ImageUpload/ImageEditorDialog.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
-import * as React from "react";
+import React from "react";
 import { ImageEditor } from "../ImageEditor";
 import { Tooltip } from "../Tooltip";
 import { css } from "emotion";
@@ -81,7 +81,12 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
           disabled: true
         }, "Save")) : /*#__PURE__*/React.createElement(DialogAccept, {
           onClick: function onClick() {
-            return onAccept(_this2.imageEditor.current.getCanvasDataUrl());
+            var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
+            /**
+             * We are certain that ref exists.
+             */
+
+            onAccept(url);
           }
         }, "Save")));
       }));

package/ImageUpload/ImageEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageEditorDialog.tsx"],"names":["React","ImageEditor","Tooltip","css","Dialog","DialogAccept","DialogCancel","DialogActions","DialogContent","imageEditorDialog","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,WAAT;AACA,SAASC,OAAT;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SACIC,MADJ,EAEIC,YAFJ,EAGIC,YAHJ,EAIIC,aAJJ,EAKIC,aALJ;AA6BA,IAAMC,iBAAiB,gBAAGN,GAAG,CAAC;AAC1BO,EAAAA,KAAK,EAAE,OADmB;AAE1BC,EAAAA,MAAM,EAAE,OAFkB;AAG1B,0BAAwB;AACpBC,IAAAA,QAAQ,EAAE,iBADU;AAEpBC,IAAAA,SAAS,EAAE,iBAFS;AAGpB,kCAA8B;AAC1BD,MAAAA,QAAQ,EAAE,iBADgB;AAE1BC,MAAAA,SAAS,EAAE,iBAFe;AAG1BH,MAAAA,KAAK,EAAE,OAHmB;AAI1BC,MAAAA,MAAM,EAAE,OAJkB;AAK1BG,MAAAA,UAAU,EAAE;AALc;AAHV;AAHE,CAAD,6BAA7B;;IAgBMC,iB;;;;;;;;;;;;;;;;+EACmBf,KAAK,CAACgB,SAAN,E;;;;;;;WAErB,kBAAyB;AAAA;;AACrB,wBAAuE,KAAKC,KAA5E;AAAA,UAAQC,GAAR,eAAQA,GAAR;AAAA,UAAaC,OAAb,eAAaA,OAAb;AAAA,UAAsBC,QAAtB,eAAsBA,QAAtB;AAAA,UAAgCC,IAAhC,eAAgCA,IAAhC;AAAA,UAAsCC,YAAtC,eAAsCA,YAAtC;AAAA,UAAuDC,WAAvD;;AAEA,0BACI,oBAAC,MAAD;AACI,QAAA,SAAS,EAAEd,iBADf;AAEI,QAAA,KAAK,EAAE;AAAEe,UAAAA,MAAM,EAAEF;AAAV,SAFX;AAGI,QAAA,IAAI,EAAED;AAHV,SAIQE,WAJR,GAMKF,IAAI,iBACD,oBAAC,WAAD;AAAa,QAAA,GAAG,EAAE,KAAKI,WAAvB;AAAoC,QAAA,GAAG,EAAEP,GAAzC;AAA8C,QAAA,OAAO,EAAEC;AAAvD,SACK;AAAA,YAAGO,MAAH,QAAGA,MAAH;AAAA,YAAWC,UAAX,QAAWA,UAAX;AAAA,4BACG,uDACI,oBAAC,aAAD,QAAgBD,MAAM,EAAtB,CADJ,eAEI,oBAAC,aAAD,qBACI,oBAAC,YAAD,iBADJ,EAEKC,UAAU,gBACP,oBAAC,OAAD;AACI,UAAA,OAAO,EAAE,qCADb;AAEI,UAAA,SAAS,EAAE;AAFf,wBAII,oBAAC,YAAD;AAAc,UAAA,QAAQ;AAAtB,kBAJJ,CADO,gBAQP,oBAAC,YAAD;AACI,UAAA,OAAO,EAAE,mBAAM;AACX,gBAAMC,GAAG,GAAG,MAAI,CAACH,WAAL,CAAiBI,OAAjB,GACN,MAAI,CAACJ,WAAL,CAAiBI,OAAjB,CAAyBC,gBAAzB,EADM,GAEN,EAFN;AAGA;AAChD;AACA;;AACgDV,YAAAA,QAAQ,CAACQ,GAAD,CAAR;AACH;AATL,kBAVR,CAFJ,CADH;AAAA,OADL,CAPR,CADJ;AA2CH;;;;EAjD2B5B,KAAK,CAAC+B,S;;AAmDtC,eAAehB,iBAAf","sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport {\n    Dialog,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogContent,\n    DialogOnClose\n} from \"../Dialog\";\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                                            <DialogAccept disabled>Save</DialogAccept>\n                                        </Tooltip>\n                                    ) : (\n                                        <DialogAccept\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                                        </DialogAccept>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"]}

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

@@ -8,7 +8,7 @@ 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 React from "react";
 import BrowseFiles from "react-butterfiles";
 import { css } from "emotion";
 import classNames from "classnames";
@@ -55,13 +55,13 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      errors: null,
+      errors: undefined,
       selectedImages: {},
       loading: false,
       imageEditor: {
         open: false,
         image: null,
-        index: null
+        index: undefined
       }
     });
 
@@ -119,7 +119,7 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
                 selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
 
                 _this.setState({
-                  errors: null,
+                  errors: undefined,
                   loading: true
                 }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
                   var selectedImages, i, image;
@@ -232,12 +232,27 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
           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);
       }
 
+      var _ref5 = validation || {},
+          validationIsValid = _ref5.isValid,
+          validationMessage = _ref5.message;
+      /**
+       * accept can safely be cast because we have default value
+       */
+
+
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(imagesStyle, className)
       }, label && /*#__PURE__*/React.createElement("div", {
@@ -275,7 +290,7 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
                         imageEditor: {
                           image: null,
                           open: false,
-                          index: null
+                          index: undefined
                         }
                       });
 
@@ -299,9 +314,9 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         onError: function onError(errors) {
           return _this2.handleErrors(errors);
         }
-      }, function (_ref6) {
-        var browseFiles = _ref6.browseFiles,
-            getDropZoneProps = _ref6.getDropZoneProps;
+      }, function (_ref7) {
+        var browseFiles = _ref7.browseFiles,
+            getDropZoneProps = _ref7.getDropZoneProps;
         var images = Array.isArray(value) ? _toConsumableArray(value) : [];
         return /*#__PURE__*/React.createElement("div", getDropZoneProps({
           className: classNames({
@@ -351,14 +366,20 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
             });
           }
         }))));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/React.createElement(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.createElement(FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/React.createElement(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) {
+        /**
+         * 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.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);
+          key: errorFileName + index
+        }, index + 1, ". ", /*#__PURE__*/React.createElement("strong", null, errorFileName), " -\xA0", message || _this2.props.errorMessages.default);
       }))));
     }
   }]);
@@ -367,9 +388,6 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(MultiImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
   maxSize: "5mb",
   imageEditor: {},

package/ImageUpload/MultiImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MultiImageUpload.tsx"],"names":["React","BrowseFiles","css","classNames","FormElementMessage","Image","ImageEditorDialog","imagesStyle","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","props","onChange","validate","images","selectedIndex","setState","i","length","newValue","Array","isArray","convertedImages","push","src","base64","name","size","type","splice","indexOf","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","validationIsValid","isValid","validationMessage","message","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","Component","maxSizeExceeded","unsupportedFileType"],"mappings":"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","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"]}

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MultiImageUpload.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","MultiImageUpload","story","module","addDecorator","images","id","name","src","type","size","add","disabled","Bind","aspectRatio","JSON","stringify","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,gBAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,wBAAD,EAA2BY,MAA3B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEA,IAAMQ,MAAM,GAAG,CACX;AACIC,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CADW,EAQX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CARW,EAeX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CAfW,EAsBX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CAtBW,EA6BX;AACIJ,EAAAA,EAAE,EAAE,CADR;AAEIC,EAAAA,IAAI,EAAE,eAFV;AAGIC,EAAAA,GAAG,EAAE,iCAHT;AAIIC,EAAAA,IAAI,EAAE,YAJV;AAKIC,EAAAA,IAAI,EAAE;AALV,CA7BW,CAAf;AAsCAR,KAAK,CAACS,GAAN,CACI,oBADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGd,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEM,MAAAA,MAAM,EAANA;AAAF;AAAZ,KACK;AAAA,QAAGQ,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,gBAAD;AACI,MAAA,KAAK,EAAC,kCADV;AAEI,MAAA,QAAQ,EAAED,QAFd;AAGI,MAAA,WAAW,EAAC,6CAHhB;AAII,MAAA,OAAO,EAAE;AACLE,QAAAA,WAAW,EAAE;AADR;AAJb,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAiBI,oBAAC,gBAAD,wDAEkBC,IAAI,CAACC,SAAL,CAAe;AAAEX,IAAAA,MAAM,EAAEA;AAAV,GAAf,CAFlB,okBAjBJ,CAFJ,CADJ;AAsCH,CA3CL,EA4CI;AAAEY,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACjB,gBAAD;AAAd;AAAR,CA5CJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"]}

package/ImageUpload/SingleImageUpload.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 import { SelectedFile, FileError } from "react-butterfiles";
-declare type Props = FormComponentProps & {
+interface SingleImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
@@ -18,45 +18,24 @@ declare type Props = FormComponentProps & {
         multipleNotAllowed: string;
         multipleMaxSizeExceeded: string;
     };
-};
-declare type State = {
+}
+interface StateImage {
+    name: string;
+    type: string;
+    size: number;
+    src?: string;
+}
+interface State {
     loading: boolean;
-    error?: FileError;
+    error: FileError | null;
     imageEditor: {
-        image?: {
-            name: string;
-            type: string;
-            size: number;
-            src?: string;
-        };
+        image: StateImage | null;
         open: boolean;
     };
-};
-export declare class SingleImageUpload extends React.Component<Props, State> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        maxSize: string;
-        imageEditor: {};
-        accept: string[];
-        showRemoveImageButton: boolean;
-        errorMessages: {
-            maxSizeExceeded: string;
-            multipleMaxSizeExceeded: string;
-            multipleNotAllowed: string;
-            unsupportedFileType: string;
-            default: string;
-        };
-    };
-    state: {
-        loading: boolean;
-        error: any;
-        imageEditor: {
-            open: boolean;
-            image: any;
-        };
-    };
+}
+export declare class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {
+    static defaultProps: Partial<SingleImageUploadProps>;
+    state: State;
     handleFiles: (images: SelectedFile[]) => void;
     handleErrors: (errors: FileError[]) => void;
     render(): JSX.Element;

package/ImageUpload/SingleImageUpload.js

@@ -8,7 +8,7 @@ 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 React from "react";
 import BrowseFiles from "react-butterfiles";
 import { FormElementMessage } from "../FormElementMessage";
 import styled from "@emotion/styled";
@@ -119,11 +119,22 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
           renderImagePreview = _this$props2.renderImagePreview;
       var imageEditorImageSrc = "";
 
-      if (this.state.imageEditor.image) {
+      if (this.state.imageEditor.image && this.state.imageEditor.image.src) {
         imageEditorImageSrc = this.state.imageEditor.image.src;
       }
 
       var src = value ? value.src : null;
+      var errorType = this.state.error ? this.state.error.type : null;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+      /**
+       * accept can be safely cast because of default value
+       * errorType as keyof Props["errorMessages"] can be safely
+       */
+
+
       return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
         className: classNames(className)
       }, label && !src && /*#__PURE__*/React.createElement("div", {
@@ -184,22 +195,22 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         convertToBase64: true,
         onSuccess: this.handleFiles,
         onError: this.handleErrors
-      }, function (_ref2) {
-        var browseFiles = _ref2.browseFiles,
-            getDropZoneProps = _ref2.getDropZoneProps;
+      }, function (_ref3) {
+        var browseFiles = _ref3.browseFiles,
+            getDropZoneProps = _ref3.getDropZoneProps;
         return /*#__PURE__*/React.createElement("div", getDropZoneProps(), /*#__PURE__*/React.createElement(Image, {
           renderImagePreview: renderImagePreview,
           loading: _this2.state.loading,
           value: value,
-          removeImage: showRemoveImageButton ? onChange : null,
+          removeImage: showRemoveImageButton ? onChange : undefined,
           uploadImage: browseFiles,
           editImage: browseFiles
         }));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), this.state.error && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), this.state.error && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, this.props.errorMessages[this.state.error.type] || this.props.errorMessages.default));
+      }, this.props.errorMessages[errorType] || this.props.errorMessages.default));
     }
   }]);
 
@@ -207,9 +218,6 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(SingleImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
   maxSize: "10mb",
   imageEditor: {},
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],

package/ImageUpload/SingleImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SingleImageUpload.tsx"],"names":["React","BrowseFiles","FormElementMessage","styled","classNames","Image","ImageEditorDialog","ImageUploadWrapper","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","loading","error","imageEditor","open","image","images","props","onChange","name","type","size","src","base64","setState","includes","errors","className","value","validation","label","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","validationIsValid","isValid","validationMessage","message","setTimeout","handleFiles","handleErrors","browseFiles","getDropZoneProps","undefined","errorMessages","default","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface SingleImageUploadProps 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 \"10mb\").\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    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\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        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\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                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\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                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"]}