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

package/ImageEditor/toolbar/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/types.d.ts

@@ -1,22 +1,33 @@
-import * as React from "react";
+/// <reference types="web" />
+import React from "react";
+export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
 interface RenderFormParams {
-    canvas: any;
-    renderApplyCancel: Function;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image: HTMLImageElement;
+    renderApplyCancel?: Function;
     options?: {
         [key: string]: any;
     };
 }
+interface OnActivateParams {
+    options: any;
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+interface IconParams {
+    activateTool: (tool: ToolbarTool) => void;
+}
+interface ApplyParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+interface CancelParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
 export interface ImageEditorTool {
     name: string;
-    apply?: Function;
-    cancel?: Function;
-    onActivate?: ({ options, canvas }: {
-        options: any;
-        canvas: any;
-    }) => void;
-    icon: ({ activateTool: Function }: {
-        activateTool: any;
-    }) => React.ReactElement<any>;
+    apply?: (params: ApplyParams) => void;
+    cancel?: (params: CancelParams) => void;
+    onActivate?: (params: OnActivateParams) => void;
+    icon: (params: IconParams) => React.ReactElement<any>;
     renderForm?: (params: RenderFormParams) => React.ReactNode;
 }
 export {};

package/ImageEditor/toolbar/types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ImageEditor/toolbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from \"react\";\n\nexport type ToolbarTool = \"crop\" | \"flip\" | \"rotate\" | \"filter\";\n\ninterface RenderFormParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n    image: HTMLImageElement;\n    renderApplyCancel?: Function;\n    options?: { [key: string]: any };\n}\n\ninterface OnActivateParams {\n    options: any;\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface IconParams {\n    activateTool: (tool: ToolbarTool) => void;\n}\n\ninterface ApplyParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface CancelParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\nexport interface ImageEditorTool {\n    name: string;\n    apply?: (params: ApplyParams) => void;\n    cancel?: (params: CancelParams) => void;\n    onActivate?: (params: OnActivateParams) => void;\n    icon: (params: IconParams) => React.ReactElement<any>;\n    renderForm?: (params: RenderFormParams) => React.ReactNode;\n}\n"],"mappings":""}

package/ImageUpload/Image.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-declare type Props = {
-    uploadImage: Function;
-    removeImage?: Function;
+import React from "react";
+interface ImageProps {
+    uploadImage: () => void;
+    removeImage?: (value: string | null) => void;
     editImage?: Function;
     value?: any;
     disabled?: boolean;
@@ -11,8 +11,8 @@ declare type Props = {
     renderImagePreview?: (props: any) => React.ReactElement<any>;
     round?: boolean;
     containerStyle?: React.CSSProperties;
-};
-declare class Image extends React.Component<Props> {
+}
+declare class Image extends React.Component<ImageProps> {
     static defaultProps: {
         placeholder: string;
         containerStyle: {

package/ImageUpload/Image.js

@@ -1,41 +1,61 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
-import classNames from "classnames";
-import { ReactComponent as AddImageIcon } from "@svgr/webpack!./icons/round-add_photo_alternate-24px.svg";
-import { ReactComponent as RemoveImageIcon } from "@svgr/webpack!./icons/round-close-24px.svg";
-import { ReactComponent as EditImageIcon } from "@svgr/webpack!./icons/round-edit-24px.svg";
-import { Typography } from "../Typography";
-import { CircularProgress } from "../Progress";
-import { AddImageIconWrapper, AddImageWrapper, AddImageWrapperRound, EditImage, ImagePreviewWrapper, RemoveImage } from "./styled";
+"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) {
-  _inherits(Image, _React$Component);
+  (0, _inherits2.default)(Image, _React$Component);
 
-  var _super = _createSuper(Image);
+  var _super = (0, _createSuper2.default)(Image);
 
   function Image() {
-    _classCallCheck(this, Image);
-
+    (0, _classCallCheck2.default)(this, Image);
     return _super.apply(this, arguments);
   }
 
-  _createClass(Image, [{
+  (0, _createClass2.default)(Image, [{
     key: "renderBlank",
     value: function renderBlank() {
       var _this$props = this.props,
           uploadImage = _this$props.uploadImage,
           round = _this$props.round;
-      var ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;
-      return /*#__PURE__*/React.createElement(ImageWrapper, {
+      var ImageWrapper = round ? _styled.AddImageWrapperRound : _styled.AddImageWrapper;
+      return /*#__PURE__*/_react.default.createElement(ImageWrapper, {
         "data-role": "select-image",
         onClick: function onClick() {
           uploadImage();
         }
-      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddImageIcon, null), /*#__PURE__*/React.createElement(Typography, {
+      }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_roundAdd_photo_alternate24px.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
         use: "caption"
       }, this.props.placeholder)));
     }
@@ -70,23 +90,26 @@ var Image = /*#__PURE__*/function (_React$Component) {
       if (typeof renderImagePreview === "function") {
         imagePreview = renderImagePreview(imagePreviewProps);
       } else {
-        imagePreview = /*#__PURE__*/React.createElement("img", imagePreviewProps);
+        imagePreview = /*#__PURE__*/_react.default.createElement("img", imagePreviewProps);
       }
 
-      return /*#__PURE__*/React.createElement(ImagePreviewWrapper, null, imagePreview, typeof removeImage === "function" && /*#__PURE__*/React.createElement(RemoveImage, {
+      return /*#__PURE__*/_react.default.createElement(_styled.ImagePreviewWrapper, {
+        "data-testid": "image-preview"
+      }, imagePreview, typeof removeImage === "function" && /*#__PURE__*/_react.default.createElement(_styled.RemoveImage, {
         onClick: function onClick() {
           return removeImage(null);
-        }
-      }, /*#__PURE__*/React.createElement(RemoveImageIcon, null)), typeof editImage === "function" && /*#__PURE__*/React.createElement(EditImage, {
+        },
+        "data-testid": "remove-image"
+      }, /*#__PURE__*/_react.default.createElement(_roundClose24px.ReactComponent, null)), typeof editImage === "function" && /*#__PURE__*/_react.default.createElement(_styled.EditImage, {
         onClick: function onClick() {
           return editImage(value);
         }
-      }, /*#__PURE__*/React.createElement(EditImageIcon, null)), /*#__PURE__*/React.createElement(AddImageWrapper, {
+      }, /*#__PURE__*/_react.default.createElement(_roundEdit24px.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.AddImageWrapper, {
         "data-role": "select-image",
         onClick: function onClick() {
           uploadImage();
         }
-      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddImageIcon, null), /*#__PURE__*/React.createElement(Typography, {
+      }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_roundAdd_photo_alternate24px.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
         use: "caption"
       }, this.props.placeholder))));
     }
@@ -97,23 +120,22 @@ var Image = /*#__PURE__*/function (_React$Component) {
           value = _this$props3.value,
           disabled = _this$props3.disabled,
           containerStyle = _this$props3.containerStyle;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames({
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)({
           disabled: disabled
         }),
         style: containerStyle
-      }, this.props.loading && /*#__PURE__*/React.createElement(CircularProgress, null), value && value.src ? this.renderImg() : this.renderBlank());
+      }, this.props.loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null), value && value.src ? this.renderImg() : this.renderBlank());
     }
   }]);
-
   return Image;
-}(React.Component);
+}(_react.default.Component);
 
-_defineProperty(Image, "defaultProps", {
+(0, _defineProperty2.default)(Image, "defaultProps", {
   placeholder: "Select an image",
   containerStyle: {
     height: "100%"
   }
 });
-
-export default Image;
+var _default = Image;
+exports.default = _default;

package/ImageUpload/Image.js.map

@@ -0,0 +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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"}

package/ImageUpload/ImageEditorDialog.d.ts

@@ -1,18 +1,23 @@
-import * as React from "react";
+import React from "react";
 import { ImageEditor } from "../ImageEditor";
 import { DialogOnClose } from "../Dialog";
-declare type Props = {
+interface ImageEditorDialogProps {
     dialogZIndex?: number;
     onClose?: DialogOnClose;
     open?: boolean;
-    options?: Object;
+    /**
+     * We would need to drill down a lot to give correct options.
+     * TODO: figure out some other way.
+     */
+    options?: any;
     src?: string;
     onAccept: (src: string) => void;
     "data-testid"?: string;
-};
-declare class ImageEditorDialog extends React.Component<Props, {
+}
+interface ImageEditorDialogState {
     imageProcessing: boolean;
-}> {
+}
+declare class ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {
     imageEditor: React.RefObject<ImageEditor>;
     render(): JSX.Element;
 }

package/ImageUpload/ImageEditorDialog.js

@@ -1,17 +1,38 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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";
+"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 _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
-import * as React from "react";
-import { ImageEditor } from "../ImageEditor";
-import { Tooltip } from "../Tooltip";
-import { css } from "emotion";
-import { Dialog, DialogAccept, DialogCancel, DialogActions, DialogContent } from "../Dialog";
-var imageEditorDialog = /*#__PURE__*/css({
+var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
   width: "100vw",
   height: "100vh",
   ".mdc-dialog__surface": {
@@ -28,27 +49,25 @@ var imageEditorDialog = /*#__PURE__*/css({
 }, "label:imageEditorDialog;");
 
 var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageEditorDialog, _React$Component);
+  (0, _inherits2.default)(ImageEditorDialog, _React$Component);
 
-  var _super = _createSuper(ImageEditorDialog);
+  var _super = (0, _createSuper2.default)(ImageEditorDialog);
 
   function ImageEditorDialog() {
     var _this;
 
-    _classCallCheck(this, ImageEditorDialog);
+    (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));
-
-    _defineProperty(_assertThisInitialized(_this), "imageEditor", /*#__PURE__*/React.createRef());
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "imageEditor", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
 
-  _createClass(ImageEditorDialog, [{
+  (0, _createClass2.default)(ImageEditorDialog, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -59,36 +78,40 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
           onAccept = _this$props.onAccept,
           open = _this$props.open,
           dialogZIndex = _this$props.dialogZIndex,
-          dialogProps = _objectWithoutProperties(_this$props, _excluded);
-
-      return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+          dialogProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, Object.assign({
         className: imageEditorDialog,
         style: {
           zIndex: dialogZIndex
         },
         open: open
-      }, dialogProps), open && /*#__PURE__*/React.createElement(ImageEditor, {
+      }, dialogProps), open && /*#__PURE__*/_react.default.createElement(_ImageEditor.ImageEditor, {
         ref: this.imageEditor,
         src: src,
         options: options
       }, function (_ref) {
         var render = _ref.render,
             activeTool = _ref.activeTool;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContent, null, render()), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, null, "Cancel"), activeTool ? /*#__PURE__*/React.createElement(Tooltip, {
+        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.createElement(DialogAccept, {
+        }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
           disabled: true
-        }, "Save")) : /*#__PURE__*/React.createElement(DialogAccept, {
+        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
           onClick: function onClick() {
-            return onAccept(_this2.imageEditor.current.getCanvasDataUrl());
+            var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
+            /**
+             * We are certain that ref exists.
+             */
+
+            onAccept(url);
           }
         }, "Save")));
       }));
     }
   }]);
-
   return ImageEditorDialog;
-}(React.Component);
+}(_react.default.Component);
 
-export default ImageEditorDialog;
+var _default = ImageEditorDialog;
+exports.default = _default;

package/ImageUpload/ImageEditorDialog.js.map

@@ -0,0 +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,iBADJ,EAEKC,UAAU,gBACP,6BAAC,gBAAD;UACI,OAAO,EAAE,qCADb;UAEI,SAAS,EAAE;QAFf,gBAII,6BAAC,oBAAD;UAAc,QAAQ;QAAtB,UAJJ,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,UAVR,CAFJ,CADH;MAAA,CADL,CAPR,CADJ;IA2CH;;;EAjD2Bb,cAAA,CAAMgB,S;;eAmDvBjB,iB"}

package/ImageUpload/MultiImageUpload.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { SelectedFile, FileError } from "react-butterfiles";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+interface MultiImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
@@ -17,41 +17,20 @@ declare type Props = FormComponentProps & {
     cropper?: {
         [key: string]: any;
     };
-};
-declare type State = {
+}
+interface State {
     errors?: FileError[];
-    selectedImages: Object;
+    selectedImages: Record<string, any>;
     loading: boolean;
     imageEditor: {
-        image?: SelectedFile;
+        image: SelectedFile | null;
         open: boolean;
         index?: number;
     };
-};
-declare class MultiImageUpload extends React.Component<Props, State> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        accept: string[];
-        maxSize: string;
-        imageEditor: {};
-        errorMessages: {
-            maxSizeExceeded: string;
-            unsupportedFileType: string;
-            default: string;
-        };
-    };
-    state: {
-        errors: any;
-        selectedImages: {};
-        loading: boolean;
-        imageEditor: {
-            open: boolean;
-            image: any;
-            index: any;
-        };
-    };
+}
+declare class MultiImageUpload extends React.Component<MultiImageUploadProps, State> {
+    static defaultProps: Partial<MultiImageUploadProps>;
+    state: State;
     onChange: (value: any) => Promise<void>;
     handleSelectedImages: (images: Array<SelectedFile>, selectedIndex?: number) => Promise<void>;
     handleErrors: (errors: Array<FileError>) => void;