@webiny/ui 5.34.8 → 5.35.0-beta.1

package/ImageUpload/MultiImageUpload.js

@@ -1,46 +1,27 @@
 "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,
@@ -61,23 +42,19 @@ var imagesStyle = /*#__PURE__*/(0, _emotion.css)({
       }
     }
   }
-}, "label:imagesStyle;"); // Do not apply editping for following image types.
-// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
+}, "label:imagesStyle;");
 
+// Do not apply editping for following image types.
+// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
 var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MultiImageUpload, _React$Component);
-
   var _super = (0, _createSuper2.default)(MultiImageUpload);
-
   function MultiImageUpload() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       errors: undefined,
@@ -92,41 +69,31 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
         var _this$props, onChange, validate;
-
         return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = _this.props, onChange = _this$props.onChange, validate = _this$props.validate;
-                _context.t0 = onChange;
-
-                if (!_context.t0) {
-                  _context.next = 5;
-                  break;
-                }
-
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, onChange = _this$props.onChange, validate = _this$props.validate;
+              _context.t0 = onChange;
+              if (!_context.t0) {
                 _context.next = 5;
-                return onChange(value);
-
-              case 5:
-                _context.t1 = validate;
-
-                if (!_context.t1) {
-                  _context.next = 9;
-                  break;
-                }
-
+                break;
+              }
+              _context.next = 5;
+              return onChange(value);
+            case 5:
+              _context.t1 = validate;
+              if (!_context.t1) {
                 _context.next = 9;
-                return validate();
-
-              case 9:
-              case "end":
-                return _context.stop();
-            }
+                break;
+              }
+              _context.next = 9;
+              return validate();
+            case 9:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
-
       return function (_x) {
         return _ref.apply(this, arguments);
       };
@@ -134,84 +101,67 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
     (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;
+          _args4 = arguments;
         return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
-
-                _this.setState({
-                  errors: undefined,
-                  loading: true
-                }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
-                  var selectedImages, i, image;
-                  return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
-                    while (1) {
-                      switch (_context3.prev = _context3.next) {
-                        case 0:
-                          selectedImages = {};
-
-                          for (i = 0; i < images.length; i++) {
-                            image = images[i];
-                            selectedImages[selectedIndex + i] = (0, _objectSpread2.default)({}, image);
-                          }
-
-                          _this.setState({
-                            selectedImages: selectedImages
-                          }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
-                            var newValue, convertedImages, _i, _image;
-
-                            return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-                              while (1) {
-                                switch (_context2.prev = _context2.next) {
-                                  case 0:
-                                    newValue = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
-                                    convertedImages = [];
-
-                                    for (_i = 0; _i < images.length; _i++) {
-                                      _image = images[_i];
-                                      convertedImages.push({
-                                        src: _image.src.base64,
-                                        name: _image.name,
-                                        size: _image.size,
-                                        type: _image.type
-                                      });
-                                    }
-
-                                    newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
-                                    _context2.next = 6;
-                                    return _this.onChange(newValue);
-
-                                  case 6:
-                                    _this.setState({
-                                      loading: false
-                                    });
-
-                                  case 7:
-                                  case "end":
-                                    return _context2.stop();
-                                }
-                              }
-                            }, _callee2);
-                          })));
-
-                        case 3:
-                        case "end":
-                          return _context3.stop();
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
+              _this.setState({
+                errors: undefined,
+                loading: true
+              }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
+                var selectedImages, i, image;
+                return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+                  while (1) switch (_context3.prev = _context3.next) {
+                    case 0:
+                      selectedImages = {};
+                      for (i = 0; i < images.length; i++) {
+                        image = images[i];
+                        selectedImages[selectedIndex + i] = (0, _objectSpread2.default)({}, image);
                       }
-                    }
-                  }, _callee3);
-                })));
-
-              case 2:
-              case "end":
-                return _context4.stop();
-            }
+                      _this.setState({
+                        selectedImages: selectedImages
+                      }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+                        var newValue, convertedImages, _i, _image;
+                        return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+                          while (1) switch (_context2.prev = _context2.next) {
+                            case 0:
+                              newValue = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
+                              convertedImages = [];
+                              for (_i = 0; _i < images.length; _i++) {
+                                _image = images[_i];
+                                convertedImages.push({
+                                  src: _image.src.base64,
+                                  name: _image.name,
+                                  size: _image.size,
+                                  type: _image.type
+                                });
+                              }
+                              newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
+                              _context2.next = 6;
+                              return _this.onChange(newValue);
+                            case 6:
+                              _this.setState({
+                                loading: false
+                              });
+                            case 7:
+                            case "end":
+                              return _context2.stop();
+                          }
+                        }, _callee2);
+                      })));
+                    case 3:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }, _callee3);
+              })));
+            case 2:
+            case "end":
+              return _context4.stop();
           }
         }, _callee4);
       }));
-
       return function (_x2) {
         return _ref2.apply(this, arguments);
       };
@@ -223,56 +173,47 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeImage", function (image) {
       var _this$props2 = _this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange;
-
+        value = _this$props2.value,
+        onChange = _this$props2.onChange;
       if (!onChange) {
         return;
       }
-
       var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
       images.splice(images.indexOf(image), 1);
       onChange(images);
     });
     return _this;
   }
-
   (0, _createClass2.default)(MultiImageUpload, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props3 = this.props,
-          value = _this$props3.value,
-          validation = _this$props3.validation,
-          label = _this$props3.label,
-          description = _this$props3.description,
-          disabled = _this$props3.disabled,
-          imageEditor = _this$props3.imageEditor,
-          accept = _this$props3.accept,
-          maxSize = _this$props3.maxSize,
-          className = _this$props3.className;
+        value = _this$props3.value,
+        validation = _this$props3.validation,
+        label = _this$props3.label,
+        description = _this$props3.description,
+        disabled = _this$props3.disabled,
+        imageEditor = _this$props3.imageEditor,
+        accept = _this$props3.accept,
+        maxSize = _this$props3.maxSize,
+        className = _this$props3.className;
       /**
        * TODO: figure out the correct type
        */
-
       var imageEditorImageSrc = "";
-
       if (this.state.imageEditor.image) {
         // @ts-ignore
         imageEditorImageSrc = this.state.imageEditor.image.src;
         console.warn("Figure out correct type if this.state.imageEditor.image.src");
         console.log(this.state.imageEditor.image.src);
       }
-
       var _ref5 = validation || {},
-          validationIsValid = _ref5.isValid,
-          validationMessage = _ref5.message;
+        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", {
@@ -295,29 +236,25 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
             }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
               var newValue, imageEditorImageIndex;
               return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
-                while (1) {
-                  switch (_context5.prev = _context5.next) {
-                    case 0:
-                      newValue = Array.isArray(_this2.props.value) ? (0, _toConsumableArray2.default)(_this2.props.value) : [];
-                      imageEditorImageIndex = _this2.state.imageEditor.index;
-                      newValue[imageEditorImageIndex].src = src;
-                      _context5.next = 5;
-                      return _this2.onChange(newValue);
-
-                    case 5:
-                      _this2.setState({
-                        loading: false,
-                        imageEditor: {
-                          image: null,
-                          open: false,
-                          index: undefined
-                        }
-                      });
-
-                    case 6:
-                    case "end":
-                      return _context5.stop();
-                  }
+                while (1) switch (_context5.prev = _context5.next) {
+                  case 0:
+                    newValue = Array.isArray(_this2.props.value) ? (0, _toConsumableArray2.default)(_this2.props.value) : [];
+                    imageEditorImageIndex = _this2.state.imageEditor.index;
+                    newValue[imageEditorImageIndex].src = src;
+                    _context5.next = 5;
+                    return _this2.onChange(newValue);
+                  case 5:
+                    _this2.setState({
+                      loading: false,
+                      imageEditor: {
+                        image: null,
+                        open: false,
+                        index: undefined
+                      }
+                    });
+                  case 6:
+                  case "end":
+                    return _context5.stop();
                 }
               }, _callee5);
             })));
@@ -336,7 +273,7 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
         }
       }, function (_ref7) {
         var browseFiles = _ref7.browseFiles,
-            getDropZoneProps = _ref7.getDropZoneProps;
+          getDropZoneProps = _ref7.getDropZoneProps;
         var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
         return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps({
           className: (0, _classnames.default)({
@@ -405,7 +342,6 @@ var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
   }]);
   return MultiImageUpload;
 }(_react.default.Component);
-
 exports.MultiImageUpload = MultiImageUpload;
 (0, _defineProperty2.default)(MultiImageUpload, "defaultProps", {
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],

package/ImageUpload/MultiImageUpload.js.map

@@ -1 +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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"}
+{"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,21 +1,13 @@
 "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 = [{

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -1 +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"}
+{"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,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,CACJ;AAEDV,KAAK,CAACW,GAAG,CACL,oBAAoB,EACpB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAET,MAAM,EAANA;IAAO;EAAE,GAClB;IAAA,IAAGU,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAQ,gBACf,6BAAC,kCAAgB;MACb,KAAK,EAAC,kCAAkC;MACxC,QAAQ,EAAEH,QAAS;MACnB,WAAW,EAAC,6CAA6C;MACzD,OAAO,EAAE;QACLI,WAAW,EAAE;MACjB;IAAE,EACJ,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,wDAECC,IAAI,CAACC,SAAS,CAAC;IAAEb,MAAM,EAAEA;EAAO,CAAC,CAAC,okBAYjC,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kCAAgB;EAAE;AAAE,CAAC,CAC/C"}