@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/ImageEditor/toolbar/rotate.js

@@ -1,54 +1,51 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-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 { ReactComponent as RotateRight } from "@svgr/webpack!./icons/rotateRight.svg";
-import { Slider } from "../../Slider";
-import { Tooltip } from "../../Tooltip";
-import { IconButton } from "../../Button";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-var cropper = null;
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _rotateRight = require("./icons/rotateRight.svg");
+var _Slider = require("../../Slider");
+var _Tooltip = require("../../Tooltip");
+var _Button = require("../../Button");
+var _cropperjs = _interopRequireDefault(require("cropperjs"));
+require("cropperjs/dist/cropper.css");
+var cropper;
 var RenderForm = /*#__PURE__*/function (_React$Component) {
-  _inherits(RenderForm, _React$Component);
-
-  var _super = _createSuper(RenderForm);
-
+  (0, _inherits2.default)(RenderForm, _React$Component);
+  var _super = (0, _createSuper2.default)(RenderForm);
   function RenderForm() {
     var _this;
-
-    _classCallCheck(this, RenderForm);
-
+    (0, _classCallCheck2.default)(this, RenderForm);
     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", {
       rangeInput: 0
     });
-
     return _this;
   }
-
-  _createClass(RenderForm, [{
+  (0, _createClass2.default)(RenderForm, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: "500px",
           margin: "0 auto"
         }
-      }, /*#__PURE__*/React.createElement(Slider, {
+      }, /*#__PURE__*/_react.default.createElement(_Slider.Slider, {
         label: "Range Input",
         value: this.state.rangeInput,
         min: 0,
@@ -59,19 +56,16 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
         onInput: function onInput(value) {
           _this2.setState({
             rangeInput: value
-          }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    if (cropper) {
-                      cropper.rotateTo(parseInt(value, 10));
-                    }
-
-                  case 1:
-                  case "end":
-                    return _context.stop();
-                }
+          }, /*#__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:
+                  if (cropper) {
+                    cropper.rotateTo(parseInt(value, 10));
+                  }
+                case 1:
+                case "end":
+                  return _context.stop();
               }
             }, _callee);
           })));
@@ -79,28 +73,32 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return RenderForm;
-}(React.Component);
-
+}(_react.default.Component);
 var tool = {
   name: "rotate",
   icon: function icon(_ref2) {
     var activateTool = _ref2.activateTool;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       placement: "bottom",
       content: "Rotate"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(RotateRight, null),
-      onClick: activateTool
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_rotateRight.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("rotate");
+      },
+      "data-testid": "rotate-item"
     }));
   },
   renderForm: function renderForm(props) {
-    return /*#__PURE__*/React.createElement(RenderForm, props);
+    return /*#__PURE__*/_react.default.createElement(RenderForm, props);
   },
   onActivate: function onActivate(_ref3) {
     var canvas = _ref3.canvas;
-    cropper = new Cropper(canvas.current, {
+    /**
+     * We can safely cast canvas.current as HTMLCanvasElement
+     */
+    cropper = new _cropperjs.default(canvas.current, {
       background: false,
       modal: false,
       guides: false,
@@ -119,27 +117,23 @@ var tool = {
         resolve();
         return;
       }
-
       var current = canvas.current;
       var src = cropper.getCroppedCanvas().toDataURL();
-
       if (current) {
         var image = new window.Image();
         var ctx = current.getContext("2d");
-
         image.onload = function () {
           ctx.drawImage(image, 0, 0);
           current.width = image.width;
           current.height = image.height;
           ctx.drawImage(image, 0, 0);
         };
-
         image.src = src;
         resolve();
       }
-
       cropper.destroy();
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;

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,43 @@
-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);
-
-  var _super = _createSuper(Image);
-
+  (0, _inherits2.default)(Image, _React$Component);
+  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, {
+        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",
         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)));
     }
@@ -43,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,
@@ -55,38 +57,36 @@ 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.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))));
     }
@@ -94,26 +94,24 @@ 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;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames({
+        value = _this$props3.value,
+        disabled = _this$props3.disabled,
+        containerStyle = _this$props3.containerStyle;
+      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);
-
-_defineProperty(Image, "defaultProps", {
+}(_react.default.Component);
+(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,25 @@
-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 _Button = require("../Button");
 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": {
@@ -26,69 +34,62 @@ var imageEditorDialog = /*#__PURE__*/css({
     }
   }
 }, "label:imageEditorDialog;");
-
 var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageEditorDialog, _React$Component);
-
-  var _super = _createSuper(ImageEditorDialog);
-
+  (0, _inherits2.default)(ImageEditorDialog, _React$Component);
+  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;
-
       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 = _objectWithoutProperties(_this$props, _excluded);
-
-      return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+        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: {
           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, {
+          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.createElement(DialogAccept, {
+        }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
           disabled: true
-        }, "Save")) : /*#__PURE__*/React.createElement(DialogAccept, {
+        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+          "data-testid": "dialog-accept",
           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);
-
-export default ImageEditorDialog;
+}(_react.default.Component);
+var _default = ImageEditorDialog;
+exports.default = _default;