@webiny/ui 5.43.3 → 6.0.0-alpha.1

package/ImageUpload/MultiImageUpload.js

@@ -1,280 +1,14 @@
-"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-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 = require("./ImageEditorDialog");
-var imagesStyle = (0, _emotion.css)({
-  ".disabled": {
-    opacity: 0.75,
-    pointerEvents: "none"
-  },
-  "ul.images": {
-    listStyle: "none",
-    li: {
-      verticalAlign: "top",
-      margin: 2,
-      display: "inline-block",
-      width: 150,
-      height: 150,
-      "&:last-child": {
-        border: "1px solid lightgray",
-        cursor: "pointer",
-        textAlign: "center"
-      }
-    }
-  }
-});
-
-// Do not apply editping for following image types.
-// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
-var MultiImageUpload = exports.MultiImageUpload = /*#__PURE__*/function (_React$Component) {
-  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 = (0, _callSuper2.default)(this, MultiImageUpload, [].concat(args));
-    (0, _defineProperty2.default)(_this, "state", {
-      errors: undefined,
-      selectedImages: {},
-      loading: false,
-      imageEditor: {
-        open: false,
-        image: null,
-        index: undefined
-      }
-    });
-    (0, _defineProperty2.default)(_this, "onChange", async function (value) {
-      var _this$props = _this.props,
-        onChange = _this$props.onChange,
-        validate = _this$props.validate;
-      onChange && (await onChange(value));
-      validate && (await validate());
-    });
-    (0, _defineProperty2.default)(_this, "handleSelectedImages", async function (images) {
-      var selectedIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      _this.setState({
-        errors: undefined,
-        loading: true
-      }, async function () {
-        var selectedImages = {};
-        for (var i = 0; i < images.length; i++) {
-          var image = images[i];
-          selectedImages[selectedIndex + i] = (0, _objectSpread2.default)({}, image);
-        }
-        _this.setState({
-          selectedImages: selectedImages
-        }, async function () {
-          var newValue = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
-          var convertedImages = [];
-          for (var _i = 0; _i < images.length; _i++) {
-            var _image = images[_i];
-            convertedImages.push({
-              src: _image.src.base64,
-              name: _image.name,
-              size: _image.size,
-              type: _image.type
-            });
-          }
-          newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
-          await _this.onChange(newValue);
-          _this.setState({
-            loading: false
-          });
-        });
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleErrors", function (errors) {
-      _this.setState({
-        errors: errors
-      });
-    });
-    (0, _defineProperty2.default)(_this, "removeImage", function (image) {
-      var _this$props2 = _this.props,
-        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, _inherits2.default)(MultiImageUpload, _React$Component);
-  return (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;
-      /**
-       * TODO: figure out the correct type
-       */
-      var imageEditorImageSrc = "";
-      if (this.state.imageEditor.image) {
-        // @ts-expect-error
-        imageEditorImageSrc = this.state.imageEditor.image.src;
-        console.warn("Figure out correct type if this.state.imageEditor.image.src");
-        console.log(this.state.imageEditor.image.src);
-      }
-      var _ref = validation || {},
-        validationIsValid = _ref.isValid,
-        validationMessage = _ref.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.default.createElement(_ImageEditorDialog.ImageEditorDialog, {
-        options: imageEditor,
-        open: this.state.imageEditor.open,
-        src: imageEditorImageSrc,
-        onClose: function onClose() {
-          _this2.setState(function (state) {
-            state.imageEditor.open = false;
-            return state;
-          });
-        },
-        onAccept: function onAccept(src) {
-          // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
-          setTimeout(function () {
-            _this2.setState({
-              loading: true
-            }, async function () {
-              var newValue = Array.isArray(_this2.props.value) ? (0, _toConsumableArray2.default)(_this2.props.value) : [];
-              var imageEditorImageIndex = _this2.state.imageEditor.index;
-              newValue[imageEditorImageIndex].src = src;
-              await _this2.onChange(newValue);
-              _this2.setState({
-                loading: false,
-                imageEditor: {
-                  image: null,
-                  open: false,
-                  index: undefined
-                }
-              });
-            });
-          });
-        }
-      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
-        accept: accept,
-        maxSize: maxSize,
-        multiple: true,
-        convertToBase64: true,
-        onSuccess: function onSuccess(files) {
-          _this2.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
-        },
-        onError: function onError(errors) {
-          return _this2.handleErrors(errors);
-        }
-      }, function (_ref2) {
-        var browseFiles = _ref2.browseFiles,
-          getDropZoneProps = _ref2.getDropZoneProps;
-        var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
-        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps({
-          className: (0, _classnames.default)({
-            disabled: disabled
-          })
-        }), /*#__PURE__*/_react.default.createElement("ul", {
-          className: "images"
-        }, images.map(function (image, index) {
-          return /*#__PURE__*/_react.default.createElement("li", {
-            key: index
-          }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-            loading: _this2.state.selectedImages[index] && _this2.state.loading,
-            value: image.file || image,
-            removeImage: function removeImage() {
-              return _this2.removeImage(image.file || image);
-            },
-            editImage: _this2.state.selectedImages[index] && function () {
-              _this2.setState({
-                imageEditor: {
-                  index: index,
-                  open: true,
-                  image: _this2.state.selectedImages[index]
-                }
-              });
-            },
-            uploadImage: function uploadImage() {
-              browseFiles({
-                onSuccess: function onSuccess(files) {
-                  _this2.handleSelectedImages(files, index + 1);
-                },
-                onError: function onError(errors) {
-                  return _this2.handleErrors(errors);
-                }
-              });
-            }
-          }));
-        }), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Image.default, {
-          disabled: _this2.state.loading,
-          uploadImage: function uploadImage() {
-            browseFiles({
-              onSuccess: function onSuccess(files) {
-                _this2.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
-              },
-              onError: function onError(errors) {
-                return _this2.handleErrors(errors);
-              }
-            });
-          }
-        }))));
-      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, 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.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);
-      }))));
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(MultiImageUpload, "defaultProps", {
-  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-  maxSize: "5mb",
-  imageEditor: {},
-  errorMessages: {
-    maxSizeExceeded: "Max size exceeded.",
-    unsupportedFileType: "Unsupported file type.",
-    default: "An error occurred."
-  }
-});
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const MultiImageUpload = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/admin-ui` package.");
+};
 
 //# sourceMappingURL=MultiImageUpload.js.map

package/ImageUpload/MultiImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_emotion","_classnames","_FormElementMessage","_Image","_ImageEditorDialog","imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","exports","_React$Component","_this","_classCallCheck2","default","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","_this$props","props","onChange","validate","images","selectedIndex","setState","i","_objectSpread2","newValue","isArray","_toConsumableArray2","convertedImages","push","src","base64","name","size","type","splice","apply","_this$props2","indexOf","_inherits2","_createClass2","key","render","_this2","_this$props3","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","ImageEditorDialog","options","onClose","onAccept","setTimeout","imageEditorImageIndex","multiple","convertToBase64","onSuccess","files","handleSelectedImages","onError","handleErrors","_ref2","browseFiles","getDropZoneProps","map","file","removeImage","editImage","uploadImage","FormElementMessage","error","errorType","errorMessages","errorFileName","React","Component","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport { ImageEditorDialog } from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-expect-error\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Alert","MultiImageUpload","createElement","type","variant"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FormComponentProps } from \"../types\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.\n */\nexport const MultiImageUpload = ({}: MultiImageUploadProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/admin-ui` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AAuCxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAC,CAAwB,CAAC,KAAK;EAC3D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,uFAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/SingleImageUpload.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { FormComponentProps } from "../types";
-import { SelectedFile, FileError } from "react-butterfiles";
+import type { FormComponentProps } from "../types";
 interface SingleImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
@@ -21,25 +20,9 @@ interface SingleImageUploadProps extends FormComponentProps {
         multipleMaxSizeExceeded: string;
     };
 }
-interface StateImage {
-    name: string;
-    type: string;
-    size: number;
-    src?: string;
-}
-interface State {
-    loading: boolean;
-    error: FileError | null;
-    imageEditor: {
-        image: StateImage | null;
-        open: boolean;
-    };
-}
-export declare class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {
-    static defaultProps: Partial<SingleImageUploadProps>;
-    state: State;
-    handleFiles: (images: SelectedFile[]) => void;
-    handleErrors: (errors: FileError[]) => void;
-    render(): React.JSX.Element;
-}
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export declare const SingleImageUpload: ({}: SingleImageUploadProps) => React.JSX.Element;
 export {};

package/ImageUpload/SingleImageUpload.js

@@ -1,191 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SingleImageUpload = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
-var _FormElementMessage = require("../FormElementMessage");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Image = _interopRequireDefault(require("./Image"));
-var _ImageEditorDialog = require("./ImageEditorDialog");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var ImageUploadWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e96x95k0"
-} : {
-  target: "e96x95k0",
-  label: "ImageUploadWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "rdeqjg",
-  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}"
-} : {
-  name: "rdeqjg",
-  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpbmdsZUltYWdlVXBsb2FkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMkIiLCJmaWxlIjoiU2luZ2xlSW1hZ2VVcGxvYWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRm9ybUNvbXBvbmVudFByb3BzIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCBCcm93c2VGaWxlcywgeyBTZWxlY3RlZEZpbGUsIEZpbGVFcnJvciB9IGZyb20gXCJyZWFjdC1idXR0ZXJmaWxlc1wiO1xuaW1wb3J0IHsgRm9ybUVsZW1lbnRNZXNzYWdlIH0gZnJvbSBcIn4vRm9ybUVsZW1lbnRNZXNzYWdlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gXCJjbGFzc25hbWVzXCI7XG5pbXBvcnQgSW1hZ2UgZnJvbSBcIi4vSW1hZ2VcIjtcbmltcG9ydCB7IEltYWdlRWRpdG9yRGlhbG9nIH0gZnJvbSBcIi4vSW1hZ2VFZGl0b3JEaWFsb2dcIjtcblxuY29uc3QgSW1hZ2VVcGxvYWRXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIFwiLmRpc2FibGVkXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC43NSxcbiAgICAgICAgcG9pbnRlckV2ZW50czogXCJub25lXCJcbiAgICB9LFxuICAgIFwiLm1kYy1mbG9hdGluZy1sYWJlbC0tZmxvYXQtYWJvdmVcIjoge1xuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMC43NSlcIixcbiAgICAgICAgdG9wOiAxMCxcbiAgICAgICAgbGVmdDogMTAsXG4gICAgICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfSxcbiAgICBcIi5tZGMtdGV4dC1maWVsZC1oZWxwZXItdGV4dFwiOiB7XG4gICAgICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfVxufSk7XG5cbmludGVyZmFjZSBTaW5nbGVJbWFnZVVwbG9hZFByb3BzIGV4dGVuZHMgRm9ybUNvbXBvbmVudFByb3BzIHtcbiAgICAvLyBDb21wb25lbnQgbGFiZWwuXG4gICAgbGFiZWw/OiBzdHJpbmc7XG5cbiAgICAvLyBJcyBjb21wb25lbnQgZGlzYWJsZWQ/XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuXG4gICAgLy8gRGVzY3JpcHRpb24gYmVuZWF0aCB0aGUgaW1hZ2UuXG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG5cbiAgICAvLyBBIGNsYXNzTmFtZSBmb3IgdGhlIHJvb3QgZWxlbWVudC5cbiAgICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgICAvLyBEZWZpbmUgYSBsaXN0IG9mIGFjY2VwdGVkIGltYWdlIHR5cGVzLlxuICAgIGFjY2VwdD86IHN0cmluZ1tdO1xuXG4gICAgLy8gRGVmaW5lIGZpbGUncyBtYXggYWxsb3dlZCBzaXplIChkZWZhdWx0IGlzIFwiMTBtYlwiKS5cbiAgICAvLyBVc2VzIFwiYnl0ZXNcIiAoaHR0cHM6Ly93d3cubnBtanMuY29tL3BhY2thZ2UvYnl0ZXMpIGxpYnJhcnkgdG8gY29udmVydCBzdHJpbmcgbm90YXRpb24gdG8gYWN0dWFsIG51bWJlci5cbiAgICBtYXhTaXplOiBzdHJpbmc7XG5cbiAgICAvLyBJbWFnZSBlZGl0b3Igb3B0aW9ucy5cbiAgICAvLyBQbGVhc2UgY2hlY2sgdGhlIGRvY3Mgb2YgSW1hZ2VFZGl0b3IgY29tcG9uZW50IGZvciB0aGUgbGlzdCBvZiBhbGwgYXZhaWxhYmxlIG9wdGlvbnMuXG4gICAgaW1hZ2VFZGl0b3I/OiB7XG4gICAgICAgIFtrZXk6IHN0cmluZ106IGFueTtcbiAgICB9O1xuXG4gICAgLy8gQ3VzdG9tIGltYWdlIHByZXZpZXcgcmVuZGVyZXIuIEJ5IGRlZmF1bHQgaW1hZ2VzIGFyZSByZW5kZXJlZCB2aWEgc2ltcGxlIDxpbWc+IGVsZW1lbnQuXG4gICAgcmVuZGVySW1hZ2VQcmV2aWV3PzogKCkgPT4gUmVhY3QuUmVhY3RFbGVtZW50PGFueT47XG5cbiAgICAvLyBTaG91bGQgcmVtb3ZlIGltYWdlIGJ1dHRvbiAodG9wIHJpZ2h0IOKclSkgYmUgc2hvd24/IERlZmF1bHQgaXMgc2V0IHRvIGB0cnVlYC5cbiAgICBzaG93UmVtb3ZlSW1hZ2VCdXR0b24/OiBib29sZWFuO1xuXG4gICAgLy8gVXNlIHRoZXNlIHRvIGN1c3RvbWl6ZSBlcnJvciBtZXNzYWdlcyAoZWcuIGlmIGkxOG4gc3VwcG9ydGVkIGlzIG5lZWRlZCkuXG4gICAgZXJyb3JNZXNzYWdlczoge1xuICAgICAgICBtYXhTaXplRXhjZWVkZWQ6IHN0cmluZztcbiAgICAgICAgdW5zdXBwb3J0ZWRGaWxlVHlwZTogc3RyaW5nO1xuICAgICAgICBkZWZhdWx0OiBzdHJpbmc7XG4gICAgICAgIG11bHRpcGxlTm90QWxsb3dlZDogc3RyaW5nO1xuICAgICAgICBtdWx0aXBsZU1heFNpemVFeGNlZWRlZDogc3RyaW5nO1xuICAgIH07XG59XG5cbmludGVyZmFjZSBTdGF0ZUltYWdlIHtcbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgdHlwZTogc3RyaW5nO1xuICAgIHNpemU6IG51bWJlcjtcbiAgICBzcmM/OiBzdHJpbmc7XG59XG5pbnRlcmZhY2UgU3RhdGUge1xuICAgIGxvYWRpbmc6IGJvb2xlYW47XG4gICAgZXJyb3I6IEZpbGVFcnJvciB8IG51bGw7XG4gICAgaW1hZ2VFZGl0b3I6IHtcbiAgICAgICAgaW1hZ2U6IFN0YXRlSW1hZ2UgfCBudWxsO1xuICAgICAgICBvcGVuOiBib29sZWFuO1xuICAgIH07XG59XG5cbi8vIERvIG5vdCBhcHBseSBlZGl0aW5nIGZvciBmb2xsb3dpbmcgaW1hZ2UgdHlwZXMuXG5jb25zdCBub0ltYWdlRWRpdGluZ1R5cGVzID0gW1wiaW1hZ2Uvc3ZnK3htbFwiLCBcImltYWdlL2dpZlwiXTtcblxudHlwZSBFcnJvclR5cGUgPVxuICAgIHwgXCJtYXhTaXplRXhjZWVkZWRcIlxuICAgIHwgXCJ1bnN1cHBvcnRlZEZpbGVUeXBlXCJcbiAgICB8IFwiZGVmYXVsdFwiXG4gICAgfCBcIm11bHRpcGxlTm90QWxsb3dlZFwiXG4gICAgfCBcIm11bHRpcGxlTWF4U2l6ZUV4Y2VlZGVkXCI7XG5cbmV4cG9ydCBjbGFzcyBTaW5nbGVJbWFnZVVwbG9hZCBleHRlbmRzIFJlYWN0LkNvbXBvbmVudDxTaW5nbGVJbWFnZVVwbG9hZFByb3BzLCBTdGF0ZT4ge1xuICAgIHN0YXRpYyBkZWZhdWx0UHJvcHM6IFBhcnRpYWw8U2luZ2xlSW1hZ2VVcGxvYWRQcm9wcz4gPSB7XG4gICAgICAgIG1heFNpemU6IFwiMTBtYlwiLFxuICAgICAgICBpbWFnZUVkaXRvcjoge30sXG4gICAgICAgIGFjY2VwdDogW1wiaW1hZ2UvanBlZ1wiLCBcImltYWdlL3BuZ1wiLCBcImltYWdlL2dpZlwiLCBcImltYWdlL3N2Zyt4bWxcIl0sXG4gICAgICAgIHNob3dSZW1vdmVJbWFnZUJ1dHRvbjogdHJ1ZSxcbiAgICAgICAgZXJyb3JNZXNzYWdlczoge1xuICAgICAgICAgICAgbWF4U2l6ZUV4Y2VlZGVkOiBcIk1heCBzaXplIGV4Y2VlZGVkLlwiLFxuICAgICAgICAgICAgbXVsdGlwbGVNYXhTaXplRXhjZWVkZWQ6IFwiU2VsZWN0ZWQgZmllbGRzIGV4Y2VlZCBtYXggZmlsZSBzaXplLlwiLFxuICAgICAgICAgICAgbXVsdGlwbGVOb3RBbGxvd2VkOiBcIk11bHRpcGxlIHNlbGVjdGlvbiBub3QgYWxsb3dlZC5cIixcbiAgICAgICAgICAgIHVuc3VwcG9ydGVkRmlsZVR5cGU6IFwiVW5zdXBwb3J0ZWQgZmlsZSB0eXBlLlwiLFxuICAgICAgICAgICAgZGVmYXVsdDogXCJBbiBlcnJvciBvY2N1cnJlZC5cIlxuICAgICAgICB9XG4gICAgfTtcblxuICAgIHB1YmxpYyBvdmVycmlkZSBzdGF0ZTogU3RhdGUgPSB7XG4gICAgICAgIGxvYWRpbmc6IGZhbHNlLFxuICAgICAgICBlcnJvcjogbnVsbCxcbiAgICAgICAgaW1hZ2VFZGl0b3I6IHtcbiAgICAgICAgICAgIG9wZW46IGZhbHNlLFxuICAgICAgICAgICAgaW1hZ2U6IG51bGxcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBoYW5kbGVGaWxlcyA9IChpbWFnZXM6IFNlbGVjdGVkRmlsZVtdKSA9PiB7XG4gICAgICAgIGNvbnN0IHsgb25DaGFuZ2UsIGltYWdlRWRpdG9yIH0gPSB0aGlzLnByb3BzO1xuICAgICAgICBjb25zdCBpbWFnZSA9IHtcbiAgICAgICAgICAgIG5hbWU6IGltYWdlc1swXS5uYW1lLFxuICAgICAgICAgICAgdHlwZTogaW1hZ2VzWzBdLnR5cGUsXG4gICAgICAgICAgICBzaXplOiBpbWFnZXNbMF0uc2l6ZSxcbiAgICAgICAgICAgIHNyYzogaW1hZ2VzWzBdLnNyYy5iYXNlNjRcbiAgICAgICAgfTtcblxuICAgICAgICB0aGlzLnNldFN0YXRlKHsgZXJyb3I6IG51bGwgfSwgKCkgPT4ge1xuICAgICAgICAgICAgaWYgKGltYWdlRWRpdG9yICYmICFub0ltYWdlRWRpdGluZ1R5cGVzLmluY2x1ZGVzKGltYWdlLnR5cGUpKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IGltYWdlRWRpdG9yOiB7IGltYWdlLCBvcGVuOiB0cnVlIH0gfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIG9uQ2hhbmdlICYmIG9uQ2hhbmdlKGltYWdlKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfTtcblxuICAgIGhhbmRsZUVycm9ycyA9IChlcnJvcnM6IEZpbGVFcnJvcltdKSA9PiB7XG4gICAgICAgIGNvbnN0IFtlcnJvcl0gPSBlcnJvcnM7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoeyBlcnJvciB9KTtcbiAgICB9O1xuXG4gICAgcHVibGljIG92ZXJyaWRlIHJlbmRlcigpIHtcbiAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICAgICAgdmFsdWUsXG4gICAgICAgICAgICB2YWxpZGF0aW9uLFxuICAgICAgICAgICAgbGFiZWwsXG4gICAgICAgICAgICBkZXNjcmlwdGlvbixcbiAgICAgICAgICAgIGFjY2VwdCxcbiAgICAgICAgICAgIG1heFNpemUsXG4gICAgICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgICAgIGltYWdlRWRpdG9yLFxuICAgICAgICAgICAgc2hvd1JlbW92ZUltYWdlQnV0dG9uLFxuICAgICAgICAgICAgcmVuZGVySW1hZ2VQcmV2aWV3XG4gICAgICAgIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgICAgIGxldCBpbWFnZUVkaXRvckltYWdlU3JjID0gXCJcIjtcbiAgICAgICAgaWYgKHRoaXMuc3RhdGUuaW1hZ2VFZGl0b3IuaW1hZ2UgJiYgdGhpcy5zdGF0ZS5pbWFnZUVkaXRvci5pbWFnZS5zcmMpIHtcbiAgICAgICAgICAgIGltYWdlRWRpdG9ySW1hZ2VTcmMgPSB0aGlzLnN0YXRlLmltYWdlRWRpdG9yLmltYWdlLnNyYztcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IHNyYyA9IHZhbHVlID8gdmFsdWUuc3JjIDogbnVsbDtcblxuICAgICAgICBjb25zdCBlcnJvclR5cGUgPSB0aGlzLnN0YXRlLmVycm9yID8gKHRoaXMuc3RhdGUuZXJyb3IudHlwZSBhcyBFcnJvclR5cGUpIDogbnVsbDtcblxuICAgICAgICBjb25zdCB7IGlzVmFsaWQ6IHZhbGlkYXRpb25Jc1ZhbGlkLCBtZXNzYWdlOiB2YWxpZGF0aW9uTWVzc2FnZSB9ID0gdmFsaWRhdGlvbiB8fCB7fTtcbiAgICAgICAgLyoqXG4gICAgICAgICAqIGFjY2VwdCBjYW4gYmUgc2FmZWx5IGNhc3QgYmVjYXVzZSBvZiBkZWZhdWx0IHZhbHVlXG4gICAgICAgICAqIGVycm9yVHlwZSBhcyBrZXlvZiBQcm9wc1tcImVycm9yTWVzc2FnZXNcIl0gY2FuIGJlIHNhZmVseVxuICAgICAgICAgKi9cbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxJbWFnZVVwbG9hZFdyYXBwZXIgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGNsYXNzTmFtZSl9PlxuICAgICAgICAgICAgICAgIHtsYWJlbCAmJiAhc3JjICYmIChcbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJtZGMtZmxvYXRpbmctbGFiZWwgbWRjLWZsb2F0aW5nLWxhYmVsLS1mbG9hdC1hYm92ZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAge2xhYmVsfVxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICApfVxuXG4gICAgICAgICAgICAgICAgPEltYWdlRWRpdG9yRGlhbG9nXG4gICAgICAgICAgICAgICAgICAgIG9wdGlvbnM9e2ltYWdlRWRpdG9yfVxuICAgICAgICAgICAgICAgICAgICBvcGVuPXt0aGlzLnN0YXRlLmltYWdlRWRpdG9yLm9wZW59XG4gICAgICAgICAgICAgICAgICAgIHNyYz17aW1hZ2VFZGl0b3JJbWFnZVNyY31cbiAgICAgICAgICAgICAgICAgICAgb25DbG9zZT17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZShzdGF0ZSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc3RhdGUuaW1hZ2VFZGl0b3Iub3BlbiA9IGZhbHNlO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBzdGF0ZTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICBvbkFjY2VwdD17c3JjID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIC8vIFdlIHdyYXBwZWQgZXZlcnl0aGluZyBpbnRvIHNldFRpbWVvdXQgLSBwcmV2ZW50cyBkaWFsb2cgZnJlZXplIHdoZW4gbGFyZ2VyIGltYWdlIGlzIHNlbGVjdGVkLlxuICAgICAgICAgICAgICAgICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IGxvYWRpbmc6IHRydWUgfSwgYXN5bmMgKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZSAmJlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKGF3YWl0IG9uQ2hhbmdlKHsgLi4udGhpcy5zdGF0ZS5pbWFnZUVkaXRvci5pbWFnZSwgc3JjIH0pKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsb2FkaW5nOiBmYWxzZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGltYWdlRWRpdG9yOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaW1hZ2U6IG51bGwsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb3BlbjogZmFsc2VcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDxCcm93c2VGaWxlc1xuICAgICAgICAgICAgICAgICAgICBhY2NlcHQ9e2FjY2VwdCBhcyBzdHJpbmdbXX1cbiAgICAgICAgICAgICAgICAgICAgbWF4U2l6ZT17bWF4U2l6ZX1cbiAgICAgICAgICAgICAgICAgICAgY29udmVydFRvQmFzZTY0XG4gICAgICAgICAgICAgICAgICAgIG9uU3VjY2Vzcz17dGhpcy5oYW5kbGVGaWxlc31cbiAgICAgICAgICAgICAgICAgICAgb25FcnJvcj17dGhpcy5oYW5kbGVFcnJvcnN9XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7KHsgYnJvd3NlRmlsZXMsIGdldERyb3Bab25lUHJvcHMgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiB7Li4uZ2V0RHJvcFpvbmVQcm9wcygpfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8SW1hZ2VcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVySW1hZ2VQcmV2aWV3PXtyZW5kZXJJbWFnZVByZXZpZXd9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxvYWRpbmc9e3RoaXMuc3RhdGUubG9hZGluZ31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZW1vdmVJbWFnZT17c2hvd1JlbW92ZUltYWdlQnV0dG9uID8gb25DaGFuZ2UgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHVwbG9hZEltYWdlPXticm93c2VGaWxlc31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWRpdEltYWdlPXticm93c2VGaWxlc31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgPC9Ccm93c2VGaWxlcz5cblxuICAgICAgICAgICAgICAgIHt2YWxpZGF0aW9uSXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8Rm9ybUVsZW1lbnRNZXNzYWdlIGVycm9yPnt2YWxpZGF0aW9uTWVzc2FnZX08L0Zvcm1FbGVtZW50TWVzc2FnZT5cbiAgICAgICAgICAgICAgICApfVxuXG4gICAgICAgICAgICAgICAge3ZhbGlkYXRpb25Jc1ZhbGlkICE9PSBmYWxzZSAmJiBkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2U+e2Rlc2NyaXB0aW9ufTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgICAgICl9XG5cbiAgICAgICAgICAgICAgICB7dGhpcy5zdGF0ZS5lcnJvciAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2UgZXJyb3I+XG4gICAgICAgICAgICAgICAgICAgICAgICB7dGhpcy5wcm9wcy5lcnJvck1lc3NhZ2VzW1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVycm9yVHlwZSBhcyBrZXlvZiBTaW5nbGVJbWFnZVVwbG9hZFByb3BzW1wiZXJyb3JNZXNzYWdlc1wiXVxuICAgICAgICAgICAgICAgICAgICAgICAgXSB8fCB0aGlzLnByb3BzLmVycm9yTWVzc2FnZXMuZGVmYXVsdH1cbiAgICAgICAgICAgICAgICAgICAgPC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvSW1hZ2VVcGxvYWRXcmFwcGVyPlxuICAgICAgICApO1xuICAgIH1cbn1cbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-// Do not apply editing for following image types.
-var noImageEditingTypes = ["image/svg+xml", "image/gif"];
-var SingleImageUpload = exports.SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  function SingleImageUpload() {
-    var _this;
-    (0, _classCallCheck2.default)(this, SingleImageUpload);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2.default)(this, SingleImageUpload, [].concat(args));
-    (0, _defineProperty2.default)(_this, "state", {
-      loading: false,
-      error: null,
-      imageEditor: {
-        open: false,
-        image: null
-      }
-    });
-    (0, _defineProperty2.default)(_this, "handleFiles", function (images) {
-      var _this$props = _this.props,
-        onChange = _this$props.onChange,
-        imageEditor = _this$props.imageEditor;
-      var image = {
-        name: images[0].name,
-        type: images[0].type,
-        size: images[0].size,
-        src: images[0].src.base64
-      };
-      _this.setState({
-        error: null
-      }, function () {
-        if (imageEditor && !noImageEditingTypes.includes(image.type)) {
-          _this.setState({
-            imageEditor: {
-              image: image,
-              open: true
-            }
-          });
-        } else {
-          onChange && onChange(image);
-        }
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleErrors", function (errors) {
-      var _errors = (0, _slicedToArray2.default)(errors, 1),
-        error = _errors[0];
-      _this.setState({
-        error: error
-      });
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(SingleImageUpload, _React$Component);
-  return (0, _createClass2.default)(SingleImageUpload, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        value = _this$props2.value,
-        validation = _this$props2.validation,
-        label = _this$props2.label,
-        description = _this$props2.description,
-        accept = _this$props2.accept,
-        maxSize = _this$props2.maxSize,
-        onChange = _this$props2.onChange,
-        imageEditor = _this$props2.imageEditor,
-        showRemoveImageButton = _this$props2.showRemoveImageButton,
-        renderImagePreview = _this$props2.renderImagePreview;
-      var imageEditorImageSrc = "";
-      if (this.state.imageEditor.image && this.state.imageEditor.image.src) {
-        imageEditorImageSrc = this.state.imageEditor.image.src;
-      }
-      var src = value ? value.src : null;
-      var errorType = this.state.error ? this.state.error.type : null;
-      var _ref = validation || {},
-        validationIsValid = _ref.isValid,
-        validationMessage = _ref.message;
-      /**
-       * accept can be safely cast because of default value
-       * errorType as keyof Props["errorMessages"] can be safely
-       */
-      return /*#__PURE__*/_react.default.createElement(ImageUploadWrapper, {
-        className: (0, _classnames.default)(className)
-      }, label && !src && /*#__PURE__*/_react.default.createElement("div", {
-        className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/_react.default.createElement(_ImageEditorDialog.ImageEditorDialog, {
-        options: imageEditor,
-        open: this.state.imageEditor.open,
-        src: imageEditorImageSrc,
-        onClose: function onClose() {
-          _this2.setState(function (state) {
-            state.imageEditor.open = false;
-            return state;
-          });
-        },
-        onAccept: function onAccept(src) {
-          // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
-          setTimeout(function () {
-            _this2.setState({
-              loading: true
-            }, async function () {
-              onChange && (await onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
-                src: src
-              })));
-              _this2.setState({
-                loading: false,
-                imageEditor: {
-                  image: null,
-                  open: false
-                }
-              });
-            });
-          });
-        }
-      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
-        accept: accept,
-        maxSize: maxSize,
-        convertToBase64: true,
-        onSuccess: this.handleFiles,
-        onError: this.handleErrors
-      }, function (_ref2) {
-        var browseFiles = _ref2.browseFiles,
-          getDropZoneProps = _ref2.getDropZoneProps;
-        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps(), /*#__PURE__*/_react.default.createElement(_Image.default, {
-          renderImagePreview: renderImagePreview,
-          loading: _this2.state.loading,
-          value: value,
-          removeImage: showRemoveImageButton ? onChange : undefined,
-          uploadImage: browseFiles,
-          editImage: browseFiles
-        }));
-      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), this.state.error && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, this.props.errorMessages[errorType] || this.props.errorMessages.default));
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(SingleImageUpload, "defaultProps", {
-  maxSize: "10mb",
-  imageEditor: {},
-  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-  showRemoveImageButton: true,
-  errorMessages: {
-    maxSizeExceeded: "Max size exceeded.",
-    multipleMaxSizeExceeded: "Selected fields exceed max file size.",
-    multipleNotAllowed: "Multiple selection not allowed.",
-    unsupportedFileType: "Unsupported file type.",
-    default: "An error occurred."
-  }
-});
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const SingleImageUpload = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/admin-ui` package.");
+};
 
 //# sourceMappingURL=SingleImageUpload.js.map