@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/ImageUpload/MultiImageUpload.js

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

package/ImageUpload/MultiImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imagesStyle","css","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","classNames","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","React","Component","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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"}

package/ImageUpload/MultiImageUpload.stories.js

@@ -1,12 +1,23 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { MultiImageUpload } from "./MultiImageUpload";
-var story = storiesOf("Components/ImageUpload", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _MultiImageUpload = require("./MultiImageUpload");
+
+var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
+story.addDecorator(_addonKnobs.withKnobs);
 var images = [{
   id: 1,
   name: "1st_image.jpg",
@@ -39,16 +50,16 @@ var images = [{
   size: 905615
 }];
 story.add("Multi Image Upload", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Form, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       images: images
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "images"
-    }, /*#__PURE__*/React.createElement(MultiImageUpload, {
+    }, /*#__PURE__*/_react.default.createElement(_MultiImageUpload.MultiImageUpload, {
       label: "Your previously uploaded images:",
       disabled: disabled,
       description: "This list will not be shown to other users.",
@@ -56,11 +67,11 @@ story.add("Multi Image Upload", function () {
         aspectRatio: 1
       }
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(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                    "))));
 }, {
   info: {
-    propTables: [MultiImageUpload]
+    propTables: [_MultiImageUpload.MultiImageUpload]
   }
 });

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","images","id","name","src","type","size","add","disabled","boolean","readme","Bind","aspectRatio","JSON","stringify","info","propTables","MultiImageUpload"],"sources":["MultiImageUpload.stories.tsx"],"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"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,wBAAV,EAAoCC,MAApC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEA,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CADW,EAQX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CARW,EAeX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CAfW,EAsBX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CAtBW,EA6BX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CA7BW,CAAf;AAsCAV,KAAK,CAACW,GAAN,CACI,oBADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAET,MAAM,EAANA;IAAF;EAAZ,GACK;IAAA,IAAGU,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,kCAAD;MACI,KAAK,EAAC,kCADV;MAEI,QAAQ,EAAEH,QAFd;MAGI,WAAW,EAAC,6CAHhB;MAII,OAAO,EAAE;QACLI,WAAW,EAAE;MADR;IAJb,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAiBI,6BAAC,uBAAD,wDAEkBC,IAAI,CAACC,SAAL,CAAe;IAAEb,MAAM,EAAEA;EAAV,CAAf,CAFlB,okBAjBJ,CAFJ,CADJ;AAsCH,CA3CL,EA4CI;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kCAAD;EAAd;AAAR,CA5CJ"}

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;