@webiny/ui 5.27.0 → 5.28.0-beta.0

package/ImageUpload/SingleImageUpload.js

@@ -1,21 +1,47 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React from "react";
-import BrowseFiles from "react-butterfiles";
-import { FormElementMessage } from "../FormElementMessage";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import Image from "./Image";
-import ImageEditorDialog from "./ImageEditorDialog";
-var ImageUploadWrapper = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleImageUpload = void 0;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _FormElementMessage = require("../FormElementMessage");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Image = _interopRequireDefault(require("./Image"));
+
+var _ImageEditorDialog = _interopRequireDefault(require("./ImageEditorDialog"));
+
+var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e96x95k0",
   label: "ImageUploadWrapper"
 })({
@@ -36,23 +62,23 @@ var ImageUploadWrapper = /*#__PURE__*/styled("div", {
 });
 // Do not apply editing for following image types.
 var noImageEditingTypes = ["image/svg+xml", "image/gif"];
-export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  _inherits(SingleImageUpload, _React$Component);
 
-  var _super = _createSuper(SingleImageUpload);
+var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(SingleImageUpload, _React$Component);
+
+  var _super = (0, _createSuper2.default)(SingleImageUpload);
 
   function SingleImageUpload() {
     var _this;
 
-    _classCallCheck(this, SingleImageUpload);
+    (0, _classCallCheck2.default)(this, SingleImageUpload);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       loading: false,
       error: null,
       imageEditor: {
@@ -60,8 +86,7 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         image: null
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFiles", function (images) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFiles", function (images) {
       var _this$props = _this.props,
           onChange = _this$props.onChange,
           imageEditor = _this$props.imageEditor;
@@ -87,20 +112,18 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function (errors) {
-      var _errors = _slicedToArray(errors, 1),
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleErrors", function (errors) {
+      var _errors = (0, _slicedToArray2.default)(errors, 1),
           error = _errors[0];
 
       _this.setState({
         error: error
       });
     });
-
     return _this;
   }
 
-  _createClass(SingleImageUpload, [{
+  (0, _createClass2.default)(SingleImageUpload, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -135,11 +158,11 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
        */
 
 
-      return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-        className: classNames(className)
-      }, label && !src && /*#__PURE__*/React.createElement("div", {
+      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.createElement(ImageEditorDialog, {
+      }, label), /*#__PURE__*/_react.default.createElement(_ImageEditorDialog.default, {
         options: imageEditor,
         open: this.state.imageEditor.open,
         src: imageEditorImageSrc,
@@ -154,8 +177,8 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
           setTimeout(function () {
             _this2.setState({
               loading: true
-            }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
+            }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+              return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
                 while (1) {
                   switch (_context.prev = _context.next) {
                     case 0:
@@ -167,7 +190,7 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
                       }
 
                       _context.next = 4;
-                      return onChange(_objectSpread(_objectSpread({}, _this2.state.imageEditor.image), {}, {
+                      return onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
                         src: src
                       }));
 
@@ -189,7 +212,7 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
             })));
           });
         }
-      }), /*#__PURE__*/React.createElement(BrowseFiles, {
+      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
         accept: accept,
         maxSize: maxSize,
         convertToBase64: true,
@@ -198,7 +221,7 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
       }, function (_ref3) {
         var browseFiles = _ref3.browseFiles,
             getDropZoneProps = _ref3.getDropZoneProps;
-        return /*#__PURE__*/React.createElement("div", getDropZoneProps(), /*#__PURE__*/React.createElement(Image, {
+        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps(), /*#__PURE__*/_react.default.createElement(_Image.default, {
           renderImagePreview: renderImagePreview,
           loading: _this2.state.loading,
           value: value,
@@ -206,18 +229,18 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
           uploadImage: browseFiles,
           editImage: browseFiles
         }));
-      }), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), this.state.error && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, 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));
     }
   }]);
-
   return SingleImageUpload;
-}(React.Component);
+}(_react.default.Component);
 
-_defineProperty(SingleImageUpload, "defaultProps", {
+exports.SingleImageUpload = SingleImageUpload;
+(0, _defineProperty2.default)(SingleImageUpload, "defaultProps", {
   maxSize: "10mb",
   imageEditor: {},
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],

package/ImageUpload/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SingleImageUpload.tsx"],"names":["React","BrowseFiles","FormElementMessage","styled","classNames","Image","ImageEditorDialog","ImageUploadWrapper","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","loading","error","imageEditor","open","image","images","props","onChange","name","type","size","src","base64","setState","includes","errors","className","value","validation","label","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","validationIsValid","isValid","validationMessage","message","setTimeout","handleFiles","handleErrors","browseFiles","getDropZoneProps","undefined","errorMessages","default","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,WAAP,MAAqD,mBAArD;AACA,SAASC,kBAAT;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP;AACA,OAAOC,iBAAP;AAEA,IAAMC,kBAAkB,gBAAGJ,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACrCK,EAAAA,QAAQ,EAAE,UAD2B;AAErC,eAAa;AACTC,IAAAA,OAAO,EAAE,IADA;AAETC,IAAAA,aAAa,EAAE;AAFN,GAFwB;AAMrC,sCAAoC;AAChCC,IAAAA,SAAS,EAAE,aADqB;AAEhCC,IAAAA,GAAG,EAAE,EAF2B;AAGhCC,IAAAA,IAAI,EAAE,EAH0B;AAIhCC,IAAAA,KAAK,EAAE;AAJyB,GANC;AAYrC,iCAA+B;AAC3BA,IAAAA,KAAK,EAAE;AADoB;AAZM,CAAjB,CAAxB;AAwEA;AACA,IAAMC,mBAAmB,GAAG,CAAC,eAAD,EAAkB,WAAlB,CAA5B;AASA,WAAaC,iBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA,4DAemC;AAC3BC,MAAAA,OAAO,EAAE,KADkB;AAE3BC,MAAAA,KAAK,EAAE,IAFoB;AAG3BC,MAAAA,WAAW,EAAE;AACTC,QAAAA,IAAI,EAAE,KADG;AAETC,QAAAA,KAAK,EAAE;AAFE;AAHc,KAfnC;;AAAA,kEAwBkB,UAACC,MAAD,EAA4B;AACtC,wBAAkC,MAAKC,KAAvC;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBL,WAAlB,eAAkBA,WAAlB;AACA,UAAME,KAAK,GAAG;AACVI,QAAAA,IAAI,EAAEH,MAAM,CAAC,CAAD,CAAN,CAAUG,IADN;AAEVC,QAAAA,IAAI,EAAEJ,MAAM,CAAC,CAAD,CAAN,CAAUI,IAFN;AAGVC,QAAAA,IAAI,EAAEL,MAAM,CAAC,CAAD,CAAN,CAAUK,IAHN;AAIVC,QAAAA,GAAG,EAAEN,MAAM,CAAC,CAAD,CAAN,CAAUM,GAAV,CAAcC;AAJT,OAAd;;AAOA,YAAKC,QAAL,CAAc;AAAEZ,QAAAA,KAAK,EAAE;AAAT,OAAd,EAA+B,YAAM;AACjC,YAAIC,WAAW,IAAI,CAACJ,mBAAmB,CAACgB,QAApB,CAA6BV,KAAK,CAACK,IAAnC,CAApB,EAA8D;AAC1D,gBAAKI,QAAL,CAAc;AAAEX,YAAAA,WAAW,EAAE;AAAEE,cAAAA,KAAK,EAALA,KAAF;AAASD,cAAAA,IAAI,EAAE;AAAf;AAAf,WAAd;AACH,SAFD,MAEO;AACHI,UAAAA,QAAQ,IAAIA,QAAQ,CAACH,KAAD,CAApB;AACH;AACJ,OAND;AAOH,KAxCL;;AAAA,mEA0CmB,UAACW,MAAD,EAAyB;AACpC,mCAAgBA,MAAhB;AAAA,UAAOd,KAAP;;AACA,YAAKY,QAAL,CAAc;AAAEZ,QAAAA,KAAK,EAALA;AAAF,OAAd;AACH,KA7CL;;AAAA;AAAA;;AAAA;AAAA;AAAA,WA+CI,kBAAyB;AAAA;;AACrB,yBAYI,KAAKK,KAZT;AAAA,UACIU,SADJ,gBACIA,SADJ;AAAA,UAEIC,KAFJ,gBAEIA,KAFJ;AAAA,UAGIC,UAHJ,gBAGIA,UAHJ;AAAA,UAIIC,KAJJ,gBAIIA,KAJJ;AAAA,UAKIC,WALJ,gBAKIA,WALJ;AAAA,UAMIC,MANJ,gBAMIA,MANJ;AAAA,UAOIC,OAPJ,gBAOIA,OAPJ;AAAA,UAQIf,QARJ,gBAQIA,QARJ;AAAA,UASIL,WATJ,gBASIA,WATJ;AAAA,UAUIqB,qBAVJ,gBAUIA,qBAVJ;AAAA,UAWIC,kBAXJ,gBAWIA,kBAXJ;AAcA,UAAIC,mBAAmB,GAAG,EAA1B;;AACA,UAAI,KAAKC,KAAL,CAAWxB,WAAX,CAAuBE,KAAvB,IAAgC,KAAKsB,KAAL,CAAWxB,WAAX,CAAuBE,KAAvB,CAA6BO,GAAjE,EAAsE;AAClEc,QAAAA,mBAAmB,GAAG,KAAKC,KAAL,CAAWxB,WAAX,CAAuBE,KAAvB,CAA6BO,GAAnD;AACH;;AAED,UAAMA,GAAG,GAAGM,KAAK,GAAGA,KAAK,CAACN,GAAT,GAAe,IAAhC;AAEA,UAAMgB,SAAS,GAAG,KAAKD,KAAL,CAAWzB,KAAX,GAAoB,KAAKyB,KAAL,CAAWzB,KAAX,CAAiBQ,IAArC,GAA0D,IAA5E;;AAEA,iBAAmES,UAAU,IAAI,EAAjF;AAAA,UAAiBU,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;AACA;AACR;AACA;AACA;;;AACQ,0BACI,oBAAC,kBAAD;AAAoB,QAAA,SAAS,EAAE5C,UAAU,CAAC6B,SAAD;AAAzC,SACKG,KAAK,IAAI,CAACR,GAAV,iBACG;AAAK,QAAA,SAAS,EAAC;AAAf,SACKQ,KADL,CAFR,eAOI,oBAAC,iBAAD;AACI,QAAA,OAAO,EAAEjB,WADb;AAEI,QAAA,IAAI,EAAE,KAAKwB,KAAL,CAAWxB,WAAX,CAAuBC,IAFjC;AAGI,QAAA,GAAG,EAAEsB,mBAHT;AAII,QAAA,OAAO,EAAE,mBAAM;AACX,UAAA,MAAI,CAACZ,QAAL,CAAc,UAAAa,KAAK,EAAI;AACnBA,YAAAA,KAAK,CAACxB,WAAN,CAAkBC,IAAlB,GAAyB,KAAzB;AACA,mBAAOuB,KAAP;AACH,WAHD;AAIH,SATL;AAUI,QAAA,QAAQ,EAAE,kBAAAf,GAAG,EAAI;AACb;AACAqB,UAAAA,UAAU,CAAC,YAAM;AACb,YAAA,MAAI,CAACnB,QAAL,CAAc;AAAEb,cAAAA,OAAO,EAAE;AAAX,aAAd,wEAAiC;AAAA;AAAA;AAAA;AAAA;AAAA,oCAC7BO,QAD6B;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,6BAElBA,QAAQ,iCAAM,MAAI,CAACmB,KAAL,CAAWxB,WAAX,CAAuBE,KAA7B;AAAoCO,wBAAAA,GAAG,EAAHA;AAApC,yBAFU;;AAAA;AAG7B,sBAAA,MAAI,CAACE,QAAL,CAAc;AACVb,wBAAAA,OAAO,EAAE,KADC;AAEVE,wBAAAA,WAAW,EAAE;AACTE,0BAAAA,KAAK,EAAE,IADE;AAETD,0BAAAA,IAAI,EAAE;AAFG;AAFH,uBAAd;;AAH6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAjC;AAWH,WAZS,CAAV;AAaH;AAzBL,QAPJ,eAkCI,oBAAC,WAAD;AACI,QAAA,MAAM,EAAEkB,MADZ;AAEI,QAAA,OAAO,EAAEC,OAFb;AAGI,QAAA,eAAe,MAHnB;AAII,QAAA,SAAS,EAAE,KAAKW,WAJpB;AAKI,QAAA,OAAO,EAAE,KAAKC;AALlB,SAOK;AAAA,YAAGC,WAAH,SAAGA,WAAH;AAAA,YAAgBC,gBAAhB,SAAgBA,gBAAhB;AAAA,4BACG,2BAASA,gBAAgB,EAAzB,eACI,oBAAC,KAAD;AACI,UAAA,kBAAkB,EAAEZ,kBADxB;AAEI,UAAA,OAAO,EAAE,MAAI,CAACE,KAAL,CAAW1B,OAFxB;AAGI,UAAA,KAAK,EAAEiB,KAHX;AAII,UAAA,WAAW,EAAEM,qBAAqB,GAAGhB,QAAH,GAAc8B,SAJpD;AAKI,UAAA,WAAW,EAAEF,WALjB;AAMI,UAAA,SAAS,EAAEA;AANf,UADJ,CADH;AAAA,OAPL,CAlCJ,EAuDKP,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CAxDR,EA2DKF,iBAAiB,KAAK,KAAtB,IAA+BR,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CA5DR,EA+DK,KAAKM,KAAL,CAAWzB,KAAX,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SACK,KAAKK,KAAL,CAAWgC,aAAX,CACGX,SADH,KAEI,KAAKrB,KAAL,CAAWgC,aAAX,CAAyBC,OAHlC,CAhER,CADJ;AAyEH;AArJL;;AAAA;AAAA,EAAuCxD,KAAK,CAACyD,SAA7C;;gBAAazC,iB,kBAC8C;AACnDuB,EAAAA,OAAO,EAAE,MAD0C;AAEnDpB,EAAAA,WAAW,EAAE,EAFsC;AAGnDmB,EAAAA,MAAM,EAAE,CAAC,YAAD,EAAe,WAAf,EAA4B,WAA5B,EAAyC,eAAzC,CAH2C;AAInDE,EAAAA,qBAAqB,EAAE,IAJ4B;AAKnDe,EAAAA,aAAa,EAAE;AACXG,IAAAA,eAAe,EAAE,oBADN;AAEXC,IAAAA,uBAAuB,EAAE,uCAFd;AAGXC,IAAAA,kBAAkB,EAAE,iCAHT;AAIXC,IAAAA,mBAAmB,EAAE,wBAJV;AAKXL,IAAAA,OAAO,EAAE;AALE;AALoC,C","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"]}
+{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","loading","error","imageEditor","open","image","images","props","onChange","name","type","size","src","base64","setState","includes","errors","className","value","validation","label","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","validationIsValid","isValid","validationMessage","message","classNames","setTimeout","handleFiles","handleErrors","browseFiles","getDropZoneProps","undefined","errorMessages","default","React","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"],"mappings":"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"}

package/ImageUpload/SingleImageUpload.stories.js

@@ -1,12 +1,23 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { SingleImageUpload } from "./SingleImageUpload";
-var story = storiesOf("Components/ImageUpload", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _SingleImageUpload = require("./SingleImageUpload");
+
+var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
+story.addDecorator(_addonKnobs.withKnobs);
 var image = {
   id: 1,
   name: "1st_image.jpg",
@@ -15,29 +26,29 @@ var image = {
   size: 901611
 };
 story.add("Single Image Upload", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement("div", {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: 200
     }
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       image: image
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "image"
-    }, /*#__PURE__*/React.createElement(SingleImageUpload, {
+    }, /*#__PURE__*/_react.default.createElement(_SingleImageUpload.SingleImageUpload, {
       label: "Your previously uploaded image:",
       disabled: disabled,
       description: "Image will be publicly visible."
     }));
-  }))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
+  }))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
     image: image
   }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
 }, {
   info: {
-    propTables: [SingleImageUpload]
+    propTables: [_SingleImageUpload.SingleImageUpload]
   }
 });

package/ImageUpload/SingleImageUpload.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SingleImageUpload.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","SingleImageUpload","story","module","addDecorator","image","id","name","src","type","size","add","disabled","maxWidth","Bind","JSON","stringify","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,iBAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,wBAAD,EAA2BY,MAA3B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEA,IAAMQ,KAAK,GAAG;AACVC,EAAAA,EAAE,EAAE,CADM;AAEVC,EAAAA,IAAI,EAAE,eAFI;AAGVC,EAAAA,GAAG,EAAE,iCAHK;AAIVC,EAAAA,IAAI,EAAE,YAJI;AAKVC,EAAAA,IAAI,EAAE;AALI,CAAd;AAQAR,KAAK,CAACS,GAAN,CACI,qBADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGd,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI;AAAK,IAAA,KAAK,EAAE;AAAEc,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAER,MAAAA,KAAK,EAALA;AAAF;AAAZ,KACK;AAAA,QAAGS,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,iBAAD;AACI,MAAA,KAAK,EAAC,iCADV;AAEI,MAAA,QAAQ,EAAEF,QAFd;AAGI,MAAA,WAAW,EAAC;AAHhB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,CADJ,eAgBI,oBAAC,gBAAD,wDAEkBG,IAAI,CAACC,SAAL,CAAe;AAAEX,IAAAA,KAAK,EAAEA;AAAT,GAAf,CAFlB,mkBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;AAAEY,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACjB,iBAAD;AAAd;AAAR,CA3CJ","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\";\nimport { Form } from \"@webiny/form\";\nimport { SingleImageUpload } from \"./SingleImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst image = {\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\nstory.add(\n    \"Single Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <div style={{ maxWidth: 200 }}>\n                            <Form data={{ image }}>\n                                {({ Bind }) => (\n                                    <Bind name=\"image\">\n                                        <SingleImageUpload\n                                            label=\"Your previously uploaded image:\"\n                                            disabled={disabled}\n                                            description=\"Image will be publicly visible.\"\n                                        />\n                                    </Bind>\n                                )}\n                            </Form>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ image: image })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\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: [SingleImageUpload] } }\n);\n"]}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","image","id","name","src","type","size","add","disabled","boolean","readme","maxWidth","Bind","JSON","stringify","info","propTables","SingleImageUpload"],"sources":["SingleImageUpload.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\";\nimport { Form } from \"@webiny/form\";\nimport { SingleImageUpload } from \"./SingleImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst image = {\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\nstory.add(\n    \"Single Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <div style={{ maxWidth: 200 }}>\n                            <Form data={{ image }}>\n                                {({ Bind }) => (\n                                    <Bind name=\"image\">\n                                        <SingleImageUpload\n                                            label=\"Your previously uploaded image:\"\n                                            disabled={disabled}\n                                            description=\"Image will be publicly visible.\"\n                                        />\n                                    </Bind>\n                                )}\n                            </Form>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ image: image })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\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: [SingleImageUpload] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,wBAAV,EAAoCC,MAApC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEA,IAAMC,KAAK,GAAG;EACVC,EAAE,EAAE,CADM;EAEVC,IAAI,EAAE,eAFI;EAGVC,GAAG,EAAE,iCAHK;EAIVC,IAAI,EAAE,YAJI;EAKVC,IAAI,EAAE;AALI,CAAd;AAQAV,KAAK,CAACW,GAAN,CACI,qBADJ,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;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAZ;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEV,KAAK,EAALA;IAAF;EAAZ,GACK;IAAA,IAAGW,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,oCAAD;MACI,KAAK,EAAC,iCADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,WAAW,EAAC;IAHhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,CADJ,eAgBI,6BAAC,uBAAD,wDAEkBK,IAAI,CAACC,SAAL,CAAe;IAAEb,KAAK,EAAEA;EAAT,CAAf,CAFlB,mkBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oCAAD;EAAd;AAAR,CA3CJ"}

package/ImageUpload/index.js

@@ -1,4 +1,39 @@
-export { SingleImageUpload } from "./SingleImageUpload";
-export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
-export { default as ImageEditorDialog } from "./ImageEditorDialog";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function get() {
+    return _Image.default;
+  }
+});
+Object.defineProperty(exports, "ImageEditorDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ImageEditorDialog.default;
+  }
+});
+Object.defineProperty(exports, "MultiImageUpload", {
+  enumerable: true,
+  get: function get() {
+    return _MultiImageUpload.MultiImageUpload;
+  }
+});
+Object.defineProperty(exports, "SingleImageUpload", {
+  enumerable: true,
+  get: function get() {
+    return _SingleImageUpload.SingleImageUpload;
+  }
+});
+
+var _SingleImageUpload = require("./SingleImageUpload");
+
+var _MultiImageUpload = require("./MultiImageUpload");
+
+var _Image = _interopRequireDefault(require("./Image"));
+
+var _ImageEditorDialog = _interopRequireDefault(require("./ImageEditorDialog"));

package/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["SingleImageUpload","MultiImageUpload","default","Image","ImageEditorDialog"],"mappings":"AAAA,SAASA,iBAAT;AACA,SAASC,gBAAT;AACA,SAASC,OAAO,IAAIC,KAApB;AACA,SAASD,OAAO,IAAIE,iBAApB","sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { default as Image } from \"./Image\";\nexport { default as ImageEditorDialog } from \"./ImageEditorDialog\";\n"]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { default as Image } from \"./Image\";\nexport { default as ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}

package/ImageUpload/styled.d.ts

@@ -4,13 +4,13 @@ export declare const AddImageWrapperRound: import("@emotion/styled-base").Styled
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "theme" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "theme" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/ImageUpload/styled.js

@@ -1,11 +1,19 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RemoveImage = exports.ImagePreviewWrapper = exports.EditImage = exports.AddImageWrapperRound = exports.AddImageWrapper = exports.AddImageIconWrapper = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _styled2 = _interopRequireDefault(require("@emotion/styled"));
 
 var _hover, _styled;
 
-// TODO remove
-// @ts-nocheck
-import styled from "@emotion/styled";
-export var AddImageIconWrapper = /*#__PURE__*/styled("div", {
+var AddImageIconWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq0",
   label: "AddImageIconWrapper"
 })({
@@ -20,7 +28,8 @@ export var AddImageIconWrapper = /*#__PURE__*/styled("div", {
     margin: "0 auto"
   }
 });
-export var AddImageWrapper = /*#__PURE__*/styled("div", {
+exports.AddImageIconWrapper = AddImageIconWrapper;
+var AddImageWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq1",
   label: "AddImageWrapper"
 })({
@@ -45,7 +54,8 @@ export var AddImageWrapper = /*#__PURE__*/styled("div", {
     borderBottom: "1px solid var(--mdc-theme-on-surface)"
   }
 });
-export var AddImageWrapperRound = /*#__PURE__*/styled(AddImageWrapper, {
+exports.AddImageWrapper = AddImageWrapper;
+var AddImageWrapperRound = /*#__PURE__*/(0, _styled2.default)(AddImageWrapper, {
   target: "e1engwcq2",
   label: "AddImageWrapperRound"
 })({
@@ -54,7 +64,8 @@ export var AddImageWrapperRound = /*#__PURE__*/styled(AddImageWrapper, {
   height: "150px",
   borderRadius: "50%"
 });
-export var RemoveImage = /*#__PURE__*/styled("div", {
+exports.AddImageWrapperRound = AddImageWrapperRound;
+var RemoveImage = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq3",
   label: "RemoveImage"
 })({
@@ -69,7 +80,8 @@ export var RemoveImage = /*#__PURE__*/styled("div", {
     opacity: 0.75
   }
 });
-export var EditImage = /*#__PURE__*/styled("div", {
+exports.RemoveImage = RemoveImage;
+var EditImage = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq4",
   label: "EditImage"
 })({
@@ -84,7 +96,8 @@ export var EditImage = /*#__PURE__*/styled("div", {
     opacity: 0.75
   }
 });
-export var ImagePreviewWrapper = /*#__PURE__*/styled("div", {
+exports.EditImage = EditImage;
+var ImagePreviewWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq5",
   label: "ImagePreviewWrapper"
 })((_styled = {
@@ -98,7 +111,7 @@ export var ImagePreviewWrapper = /*#__PURE__*/styled("div", {
   flexDirection: "column",
   boxSizing: "border-box",
   position: "relative"
-}, _defineProperty(_styled, AddImageWrapper, _defineProperty({
+}, (0, _defineProperty2.default)(_styled, AddImageWrapper, (0, _defineProperty2.default)({
   position: "absolute",
   display: "none",
   top: 0,
@@ -111,12 +124,13 @@ export var ImagePreviewWrapper = /*#__PURE__*/styled("div", {
   transform: "translateY(-50%) translateX(-50%)",
   position: "absolute",
   color: "white"
-})), _defineProperty(_styled, "&:hover", (_hover = {}, _defineProperty(_hover, AddImageWrapper, {
+})), (0, _defineProperty2.default)(_styled, "&:hover", (_hover = {}, (0, _defineProperty2.default)(_hover, AddImageWrapper, {
   display: "block"
-}), _defineProperty(_hover, RemoveImage, {
+}), (0, _defineProperty2.default)(_hover, RemoveImage, {
   display: "block",
   zIndex: 2
-}), _defineProperty(_hover, EditImage, {
+}), (0, _defineProperty2.default)(_hover, EditImage, {
   display: "block",
   zIndex: 2
-}), _hover)), _styled));
+}), _hover)), _styled));
+exports.ImagePreviewWrapper = ImagePreviewWrapper;

package/ImageUpload/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["styled.ts"],"names":["styled","AddImageIconWrapper","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","zIndex","transform"],"mappings":"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","sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"]}
+{"version":3,"names":["AddImageIconWrapper","styled","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}