@webiny/ui 5.34.8 → 5.35.0-beta.1

package/ImageUpload/Image.js

@@ -1,54 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 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 _classnames = _interopRequireDefault(require("classnames"));
-
 var _roundAdd_photo_alternate24px = require("./icons/round-add_photo_alternate-24px.svg");
-
 var _roundClose24px = require("./icons/round-close-24px.svg");
-
 var _roundEdit24px = require("./icons/round-edit-24px.svg");
-
 var _Typography = require("../Typography");
-
 var _Progress = require("../Progress");
-
 var _styled = require("./styled");
-
 var Image = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Image, _React$Component);
-
   var _super = (0, _createSuper2.default)(Image);
-
   function Image() {
     (0, _classCallCheck2.default)(this, Image);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(Image, [{
     key: "renderBlank",
     value: function renderBlank() {
       var _this$props = this.props,
-          uploadImage = _this$props.uploadImage,
-          round = _this$props.round;
+        uploadImage = _this$props.uploadImage,
+        round = _this$props.round;
       var ImageWrapper = round ? _styled.AddImageWrapperRound : _styled.AddImageWrapper;
       return /*#__PURE__*/_react.default.createElement(ImageWrapper, {
         "data-role": "select-image",
@@ -63,11 +45,11 @@ var Image = /*#__PURE__*/function (_React$Component) {
     key: "renderImg",
     value: function renderImg() {
       var _this$props2 = this.props,
-          removeImage = _this$props2.removeImage,
-          editImage = _this$props2.editImage,
-          uploadImage = _this$props2.uploadImage,
-          value = _this$props2.value,
-          renderImagePreview = _this$props2.renderImagePreview;
+        removeImage = _this$props2.removeImage,
+        editImage = _this$props2.editImage,
+        uploadImage = _this$props2.uploadImage,
+        value = _this$props2.value,
+        renderImagePreview = _this$props2.renderImagePreview;
       var imagePreviewProps = {
         src: value ? value.src : null,
         style: this.props.style ? this.props.style : null,
@@ -75,24 +57,19 @@ var Image = /*#__PURE__*/function (_React$Component) {
           return uploadImage();
         }
       };
-
       if (!imagePreviewProps.style) {
         imagePreviewProps.style = {};
       }
-
       if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {
         imagePreviewProps.style.width = "100%";
         imagePreviewProps.style.height = "100%";
       }
-
       var imagePreview = null;
-
       if (typeof renderImagePreview === "function") {
         imagePreview = renderImagePreview(imagePreviewProps);
       } else {
         imagePreview = /*#__PURE__*/_react.default.createElement("img", imagePreviewProps);
       }
-
       return /*#__PURE__*/_react.default.createElement(_styled.ImagePreviewWrapper, {
         "data-testid": "image-preview"
       }, imagePreview, typeof removeImage === "function" && /*#__PURE__*/_react.default.createElement(_styled.RemoveImage, {
@@ -117,9 +94,9 @@ var Image = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props3 = this.props,
-          value = _this$props3.value,
-          disabled = _this$props3.disabled,
-          containerStyle = _this$props3.containerStyle;
+        value = _this$props3.value,
+        disabled = _this$props3.disabled,
+        containerStyle = _this$props3.containerStyle;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)({
           disabled: disabled
@@ -130,7 +107,6 @@ var Image = /*#__PURE__*/function (_React$Component) {
   }]);
   return Image;
 }(_react.default.Component);
-
 (0, _defineProperty2.default)(Image, "defaultProps", {
   placeholder: "Select an image",
   containerStyle: {

package/ImageUpload/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","classNames","loading","renderImg","renderBlank","React","Component"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"names":["Image","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","classNames","loading","renderImg","renderBlank","React","Component"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}

package/ImageUpload/ImageEditorDialog.js

@@ -1,36 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 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 _ImageEditor = require("../ImageEditor");
-
 var _Tooltip = require("../Tooltip");
-
 var _emotion = require("emotion");
-
 var _Dialog = require("../Dialog");
-
+var _Button = require("../Button");
 var _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
 var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
   width: "100vw",
@@ -47,38 +34,30 @@ var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
     }
   }
 }, "label:imageEditorDialog;");
-
 var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ImageEditorDialog, _React$Component);
-
   var _super = (0, _createSuper2.default)(ImageEditorDialog);
-
   function ImageEditorDialog() {
     var _this;
-
     (0, _classCallCheck2.default)(this, ImageEditorDialog);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "imageEditor", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
-
   (0, _createClass2.default)(ImageEditorDialog, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          src = _this$props.src,
-          options = _this$props.options,
-          onAccept = _this$props.onAccept,
-          open = _this$props.open,
-          dialogZIndex = _this$props.dialogZIndex,
-          dialogProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+        src = _this$props.src,
+        options = _this$props.options,
+        onAccept = _this$props.onAccept,
+        open = _this$props.open,
+        dialogZIndex = _this$props.dialogZIndex,
+        dialogProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, Object.assign({
         className: imageEditorDialog,
         style: {
@@ -91,19 +70,19 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
         options: options
       }, function (_ref) {
         var render = _ref.render,
-            activeTool = _ref.activeTool;
+          activeTool = _ref.activeTool;
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, render()), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, null, "Cancel"), activeTool ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
           content: "Please close currently active tool.",
           placement: "top"
-        }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+        }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
           disabled: true
-        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+          "data-testid": "dialog-accept",
           onClick: function onClick() {
             var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
             /**
              * We are certain that ref exists.
              */
-
             onAccept(url);
           }
         }, "Save")));
@@ -112,6 +91,5 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
   }]);
   return ImageEditorDialog;
 }(_react.default.Component);
-
 var _default = ImageEditorDialog;
 exports.default = _default;

package/ImageUpload/ImageEditorDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport {\n    Dialog,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogContent,\n    DialogOnClose\n} from \"../Dialog\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <DialogAccept disabled>Save</DialogAccept>\n                                        </Tooltip>\n                                    ) : (\n                                        <DialogAccept\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </DialogAccept>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;AA6BA,IAAMA,iBAAiB,gBAAG,IAAAC,YAAA,EAAI;EAC1BC,KAAK,EAAE,OADmB;EAE1BC,MAAM,EAAE,OAFkB;EAG1B,wBAAwB;IACpBC,QAAQ,EAAE,iBADU;IAEpBC,SAAS,EAAE,iBAFS;IAGpB,8BAA8B;MAC1BD,QAAQ,EAAE,iBADgB;MAE1BC,SAAS,EAAE,iBAFe;MAG1BH,KAAK,EAAE,OAHmB;MAI1BC,MAAM,EAAE,OAJkB;MAK1BG,UAAU,EAAE;IALc;EAHV;AAHE,CAAJ,6BAA1B;;IAgBMC,iB;;;;;;;;;;;;;;;2GACmBC,cAAA,CAAMC,SAAN,E;;;;;;WAErB,kBAAyB;MAAA;;MACrB,kBAAuE,KAAKC,KAA5E;MAAA,IAAQC,GAAR,eAAQA,GAAR;MAAA,IAAaC,OAAb,eAAaA,OAAb;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,IAAhC,eAAgCA,IAAhC;MAAA,IAAsCC,YAAtC,eAAsCA,YAAtC;MAAA,IAAuDC,WAAvD;MAEA,oBACI,6BAAC,cAAD;QACI,SAAS,EAAEhB,iBADf;QAEI,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAV,CAFX;QAGI,IAAI,EAAED;MAHV,GAIQE,WAJR,GAMKF,IAAI,iBACD,6BAAC,wBAAD;QAAa,GAAG,EAAE,KAAKI,WAAvB;QAAoC,GAAG,EAAEP,GAAzC;QAA8C,OAAO,EAAEC;MAAvD,GACK;QAAA,IAAGO,MAAH,QAAGA,MAAH;QAAA,IAAWC,UAAX,QAAWA,UAAX;QAAA,oBACG,yEACI,6BAAC,qBAAD,QAAgBD,MAAM,EAAtB,CADJ,eAEI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD,QAAc,QAAd,CADJ,EAEKC,UAAU,gBACP,6BAAC,gBAAD;UACI,OAAO,EAAE,qCADb;UAEI,SAAS,EAAE;QAFf,gBAII,6BAAC,oBAAD;UAAc,QAAQ;QAAtB,GAAuB,MAAvB,CAJJ,CADO,gBAQP,6BAAC,oBAAD;UACI,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAL,CAAiBI,OAAjB,GACN,MAAI,CAACJ,WAAL,CAAiBI,OAAjB,CAAyBC,gBAAzB,EADM,GAEN,EAFN;YAGA;AAChD;AACA;;YACgDV,QAAQ,CAACQ,GAAD,CAAR;UACH;QATL,GAUC,MAVD,CAVR,CAFJ,CADH;MAAA,CADL,CAPR,CADJ;IA2CH;;;EAjD2Bb,cAAA,CAAMgB,S;;eAmDvBjB,iB"}
+{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from \"../Dialog\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <ButtonPrimary disabled>Save</ButtonPrimary>\n                                        </Tooltip>\n                                    ) : (\n                                        <ButtonPrimary\n                                            data-testid=\"dialog-accept\"\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </ButtonPrimary>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyC;AAsBzC,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,sBAAsB,EAAE;IACpBC,QAAQ,EAAE,iBAAiB;IAC3BC,SAAS,EAAE,iBAAiB;IAC5B,4BAA4B,EAAE;MAC1BD,QAAQ,EAAE,iBAAiB;MAC3BC,SAAS,EAAE,iBAAiB;MAC5BH,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,OAAO;MACfG,UAAU,EAAE;IAChB;EACJ;AACJ,CAAC,6BAAC;AAAC,IAEGC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uGACEC,cAAK,CAACC,SAAS,EAAe;IAAA;EAAA;EAAA;IAAA;IAAA,OAEnD,kBAAyB;MAAA;MACrB,kBAAuE,IAAI,CAACC,KAAK;QAAzEC,GAAG,eAAHA,GAAG;QAAEC,OAAO,eAAPA,OAAO;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,IAAI,eAAJA,IAAI;QAAEC,YAAY,eAAZA,YAAY;QAAKC,WAAW;MAElE,oBACI,6BAAC,cAAM;QACH,SAAS,EAAEhB,iBAAkB;QAC7B,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAa,CAAE;QAChC,IAAI,EAAED;MAAK,GACPE,WAAW,GAEdF,IAAI,iBACD,6BAAC,wBAAW;QAAC,GAAG,EAAE,IAAI,CAACI,WAAY;QAAC,GAAG,EAAEP,GAAI;QAAC,OAAO,EAAEC;MAAQ,GAC1D;QAAA,IAAGO,MAAM,QAANA,MAAM;UAAEC,UAAU,QAAVA,UAAU;QAAA,oBAClB,yEACI,6BAAC,qBAAa,QAAED,MAAM,EAAE,CAAiB,eACzC,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAC,QAAM,CAAe,EAClCC,UAAU,gBACP,6BAAC,gBAAO;UACJ,OAAO,EAAE,qCAAsC;UAC/C,SAAS,EAAE;QAAM,gBAEjB,6BAAC,qBAAa;UAAC,QAAQ;QAAA,GAAC,MAAI,CAAgB,CACtC,gBAEV,6BAAC,qBAAa;UACV,eAAY,eAAe;UAC3B,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAW,CAACI,OAAO,GAC9B,MAAI,CAACJ,WAAW,CAACI,OAAO,CAACC,gBAAgB,EAAE,GAC3C,EAAE;YACR;AAChD;AACA;YACgDV,QAAQ,CAACQ,GAAG,CAAC;UACjB;QAAE,GACL,MAED,CACH,CACW,CACjB;MAAA,CACN,CAER,CACI;IAEjB;EAAC;EAAA;AAAA,EAlD2Bb,cAAK,CAACgB,SAAS;AAAA,eAoDhCjB,iBAAiB;AAAA"}