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

package/ImageEditor/ImageEditor.js

@@ -1,18 +1,36 @@
-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 * as React from "react";
-import * as toolbar from "./toolbar";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import { ButtonSecondary, ButtonPrimary } from "../Button";
-import loadScript from "load-script";
-var Toolbar = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditor = 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 _toolbar = require("./toolbar");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = require("../Button");
+var _loadScript = _interopRequireDefault(require("load-script"));
+/**
+ * Package load-script does not have types.
+ */
+// @ts-ignore
+
+var toolbar = {
+  flip: _toolbar.flip,
+  filter: _toolbar.filter,
+  crop: _toolbar.crop,
+  rotate: _toolbar.rotate
+};
+var Toolbar = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq22gs70",
   label: "Toolbar"
 })({
@@ -31,7 +49,7 @@ var Toolbar = /*#__PURE__*/styled("div", {
     pointerEvents: "none"
   }
 });
-var ToolOptions = /*#__PURE__*/styled("div", {
+var ToolOptions = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq22gs71",
   label: "ToolOptions"
 })({
@@ -41,54 +59,41 @@ var ToolOptions = /*#__PURE__*/styled("div", {
   backgroundColor: "var(--mdc-theme-background)",
   borderTop: "1px solid var(--mdc-theme-on-background)"
 });
-var ApplyCancelActions = /*#__PURE__*/styled("div", {
+var ApplyCancelActions = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq22gs72",
   label: "ApplyCancelActions"
 })({
   textAlign: "center"
 });
-
 var initScripts = function initScripts() {
   return new Promise(function (resolve) {
     // @ts-ignore
     if (window.Caman) {
       return resolve();
     }
-
-    return loadScript("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
+    return (0, _loadScript.default)("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
   });
 };
-
 var ImageEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageEditor, _React$Component);
-
-  var _super = _createSuper(ImageEditor);
-
+  (0, _inherits2.default)(ImageEditor, _React$Component);
+  var _super = (0, _createSuper2.default)(ImageEditor);
   function ImageEditor() {
     var _this;
-
-    _classCallCheck(this, ImageEditor);
-
+    (0, _classCallCheck2.default)(this, ImageEditor);
     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", {
       tool: null,
       src: ""
     });
-
-    _defineProperty(_assertThisInitialized(_this), "canvas", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "image", null);
-
-    _defineProperty(_assertThisInitialized(_this), "updateCanvas", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canvas", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "image", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCanvas", function () {
       var src = _this.props.src;
       _this.image = new window.Image();
       var canvas = _this.canvas.current;
-
       if (canvas) {
         _this.image.onload = function () {
           if (_this.image) {
@@ -98,16 +103,13 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
             ctx.drawImage(_this.image, 0, 0);
           }
         };
-
         _this.image.src = src;
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "activateTool", function (tool) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activateTool", function (tool) {
       if (typeof tool === "string") {
         tool = toolbar[tool];
       }
-
       _this.setState({
         tool: tool
       }, function () {
@@ -118,138 +120,104 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         });
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "deactivateTool", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "deactivateTool", function () {
       _this.setState({
         tool: null
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getCanvasDataUrl", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCanvasDataUrl", function () {
       var canvas = _this.canvas.current;
-
       if (canvas) {
         var src = _this.props.src;
-
         if (src.startsWith("data:image/jpeg;")) {
           return canvas.toDataURL("image/jpeg", 1.0);
         }
-
         return canvas.toDataURL();
       }
-
       return "";
     });
-
-    _defineProperty(_assertThisInitialized(_this), "applyActiveTool", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var tool;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              tool = _this.state.tool;
-
-              if (tool) {
-                _context.next = 3;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 3:
-              _context.t0 = tool.apply;
-
-              if (!_context.t0) {
-                _context.next = 7;
-                break;
-              }
-
-              _context.next = 7;
-              return tool.apply({
-                canvas: _this.canvas
-              });
-
-            case 7:
-              _this.deactivateTool();
-
-            case 8:
-            case "end":
-              return _context.stop();
-          }
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            tool = _this.state.tool;
+            if (tool) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            if (!tool.apply) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 6;
+            return tool.apply({
+              canvas: _this.canvas
+            });
+          case 6:
+            _this.deactivateTool();
+          case 7:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     })));
-
-    _defineProperty(_assertThisInitialized(_this), "cancelActiveTool", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
       var tool;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              tool = _this.state.tool;
-
-              if (tool) {
-                _context2.next = 3;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 3:
-              _context2.t0 = tool.cancel;
-
-              if (!_context2.t0) {
-                _context2.next = 7;
-                break;
-              }
-
-              _context2.next = 7;
-              return tool.cancel({
-                canvas: _this.canvas
-              });
-
-            case 7:
-              _this.deactivateTool();
-
-            case 8:
-            case "end":
-              return _context2.stop();
-          }
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            tool = _this.state.tool;
+            if (tool) {
+              _context2.next = 3;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 3:
+            if (!tool.cancel) {
+              _context2.next = 6;
+              break;
+            }
+            _context2.next = 6;
+            return tool.cancel({
+              canvas: _this.canvas
+            });
+          case 6:
+            _this.deactivateTool();
+          case 7:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
     })));
-
-    _defineProperty(_assertThisInitialized(_this), "getToolOptions", function (tool) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getToolOptions", function (tool) {
       var options = _this.props.options;
-
       if (!options || typeof options !== "object") {
         return {};
       }
-
       return options[tool.name] || {};
     });
-
     return _this;
   }
-
-  _createClass(ImageEditor, [{
+  (0, _createClass2.default)(ImageEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       initScripts().then(function () {
         _this2.updateCanvas();
-
         setTimeout(function () {
           var options = _this2.props.options;
-
-          if (typeof options === "object" && options) {
-            for (var _key2 in options) {
-              if (options[_key2].autoEnable === true) {
-                var tool = toolbar[_key2];
-                tool && _this2.activateTool(tool);
-                break;
-              }
+          if (!options || typeof options !== "object") {
+            return;
+          }
+          for (var key in options) {
+            var option = options[key];
+            if (option.autoEnable === true) {
+              var tool = toolbar[key];
+              tool && _this2.activateTool(tool);
+              break;
             }
           }
         }, 250);
@@ -259,22 +227,19 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       var _this$props = this.props,
-          src = _this$props.src,
-          tools = _this$props.tools,
-          children = _this$props.children;
+        src = _this$props.src,
+        tools = _this$props.tools,
+        children = _this$props.children;
       var tool = this.state.tool;
-      var editor = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Toolbar, null, tools.map(function (key) {
+      var editor = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Toolbar, null, tools.map(function (key) {
         var tool = toolbar[key];
-
         if (!tool) {
           return null;
         }
-
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/_react.default.createElement("div", {
           key: key,
-          className: classNames({
+          className: (0, _classnames.default)({
             disabled: _this3.state.tool
           })
         }, tool.icon({
@@ -282,24 +247,30 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
             return _this3.activateTool(tool);
           }
         }));
-      })), /*#__PURE__*/React.createElement(ToolOptions, null, tool ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
+      })), /*#__PURE__*/_react.default.createElement(ToolOptions, null, tool ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
         options: this.getToolOptions(tool),
         image: this.image,
         canvas: this.canvas
-      }), /*#__PURE__*/React.createElement(ApplyCancelActions, null, /*#__PURE__*/React.createElement(ButtonSecondary, {
-        onClick: this.cancelActiveTool
-      }, "Cancel"), "\xA0", /*#__PURE__*/React.createElement(ButtonPrimary, {
-        onClick: this.applyActiveTool
-      }, "Apply"))) : /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/_react.default.createElement(ApplyCancelActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+        "data-testid": "button-cancel",
+        onClick: function onClick() {
+          _this3.cancelActiveTool();
+        }
+      }, "Cancel"), "\xA0", /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+        "data-testid": "button-apply",
+        onClick: function onClick() {
+          _this3.applyActiveTool();
+        }
+      }, "Apply"))) : /*#__PURE__*/_react.default.createElement("div", {
         style: {
           textAlign: "center"
         }
-      }, "Select a tool to start working on your image.")), /*#__PURE__*/React.createElement("div", {
+      }, "Select a tool to start working on your image.")), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           margin: "0 auto",
           textAlign: "center"
         }
-      }, /*#__PURE__*/React.createElement("canvas", {
+      }, /*#__PURE__*/_react.default.createElement("canvas", {
         key: src,
         id: "canvas",
         style: {
@@ -307,7 +278,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         },
         ref: this.canvas
       })));
-
       if (typeof children === "function") {
         return children({
           render: function render() {
@@ -320,16 +290,12 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
           cancelActiveTool: this.cancelActiveTool
         });
       }
-
       return editor;
     }
   }]);
-
   return ImageEditor;
-}(React.Component);
-
-_defineProperty(ImageEditor, "defaultProps", {
+}(_react.default.Component);
+exports.ImageEditor = ImageEditor;
+(0, _defineProperty2.default)(ImageEditor, "defaultProps", {
   tools: ["crop", "flip", "rotate", "filter"]
-});
-
-export { ImageEditor };
+});

package/ImageEditor/ImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toolbar","flip","filter","crop","rotate","Toolbar","styled","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","tool","src","React","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","name","then","updateCanvas","setTimeout","key","option","autoEnable","activateTool","tools","children","editor","map","classNames","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-ignore\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-ignore\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: Function;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: Function;\n    onToolDeactivate?: Function;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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"}

package/ImageEditor/index.js

@@ -1 +1,16 @@
-export * from "./ImageEditor";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ImageEditor = require("./ImageEditor");
+Object.keys(_ImageEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ImageEditor[key];
+    }
+  });
+});

package/ImageEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/ImageEditor/toolbar/crop.js

@@ -1,36 +1,44 @@
-import React from "react";
-import { ReactComponent as CropIcon } from "@svgr/webpack!./icons/crop.svg";
-import { IconButton } from "../../Button";
-import { Tooltip } from "../../Tooltip";
-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 _react = _interopRequireDefault(require("react"));
+var _crop = require("./icons/crop.svg");
+var _Button = require("../../Button");
+var _Tooltip = require("../../Tooltip");
+var _cropperjs = _interopRequireDefault(require("cropperjs"));
+require("cropperjs/dist/cropper.css");
+var cropper = undefined;
 var renderForm = function renderForm() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       textAlign: "center"
     }
   }, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
 };
-
 var tool = {
   name: "crop",
   icon: function icon(_ref) {
     var activateTool = _ref.activateTool;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       placement: "bottom",
       content: "Crop"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(CropIcon, null),
-      onClick: activateTool
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_crop.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("crop");
+      },
+      "data-testid": "crop-item"
     }));
   },
   renderForm: renderForm,
   onActivate: function onActivate(_ref2) {
     var canvas = _ref2.canvas,
-        options = _ref2.options;
-    cropper = new Cropper(canvas.current, options);
+      options = _ref2.options;
+    cropper = new _cropperjs.default(canvas.current, options);
   },
   cancel: function cancel() {
     return cropper && cropper.destroy();
@@ -42,14 +50,11 @@ 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;
@@ -57,13 +62,12 @@ var tool = {
           ctx.drawImage(image, 0, 0);
           resolve();
         };
-
         image.src = src;
       }
-
       cropper.destroy();
-      cropper = null;
+      cropper = undefined;
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/crop.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","Cropper","current","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["crop.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as CropIcon } from \"./icons/crop.svg\";\nimport { IconButton } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper | undefined = undefined;\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"crop\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Crop\"}>\n                <IconButton\n                    icon={<CropIcon />}\n                    onClick={() => activateTool(\"crop\")}\n                    data-testid={\"crop-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    onActivate: ({ canvas, options }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, options);\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                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n            cropper = undefined;\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA,IAAIA,OAA4B,GAAGC,SAAS;AAE5C,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;EACrB,oBACI;IAAK,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAS;EAAE,GAAC,oFAErC,CAAM;AAEd,CAAC;AAED,IAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,MAAM;EACZC,IAAI,sBAAmB;IAAA,IAAhBC,YAAY,QAAZA,YAAY;IACf,oBACI,6BAAC,gBAAO;MAAC,SAAS,EAAE,QAAS;MAAC,OAAO,EAAE;IAAO,gBAC1C,6BAAC,kBAAU;MACP,IAAI,eAAE,6BAAC,oBAAQ,OAAI;MACnB,OAAO,EAAE;QAAA,OAAMA,YAAY,CAAC,MAAM,CAAC;MAAA,CAAC;MACpC,eAAa;IAAY,EAC3B,CACI;EAElB,CAAC;EACDL,UAAU,EAAVA,UAAU;EACVM,UAAU,EAAE,2BAAyB;IAAA,IAAtBC,MAAM,SAANA,MAAM;MAAEC,OAAO,SAAPA,OAAO;IAC1BV,OAAO,GAAG,IAAIW,kBAAO,CAACF,MAAM,CAACG,OAAO,EAAuBF,OAAO,CAAC;EACvE,CAAC;EACDG,MAAM,EAAE;IAAA,OAAMb,OAAO,IAAIA,OAAO,CAACc,OAAO,EAAE;EAAA;EAC1CC,KAAK,EAAE,sBAAgB;IAAA,IAAbN,MAAM,SAANA,MAAM;IACZ,OAAO,IAAIO,OAAO,CAAC,UAACC,OAAY,EAAK;MACjC,IAAI,CAACjB,OAAO,EAAE;QACViB,OAAO,EAAE;QACT;MACJ;MAEA,IAAML,OAAO,GAAGH,MAAM,CAACG,OAAO;MAC9B,IAAMM,GAAG,GAAGlB,OAAO,CAACmB,gBAAgB,EAAE,CAACC,SAAS,EAAE;MAClD,IAAIR,OAAO,EAAE;QACT,IAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAK,EAAE;QAChC,IAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAU,CAAC,IAAI,CAA6B;QAChEJ,KAAK,CAACK,MAAM,GAAG,YAAM;UACjBF,GAAG,CAACG,SAAS,CAACN,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;UAC1BT,OAAO,CAACgB,KAAK,GAAGP,KAAK,CAACO,KAAK;UAC3BhB,OAAO,CAACiB,MAAM,GAAGR,KAAK,CAACQ,MAAM;UAE7BL,GAAG,CAACG,SAAS,CAACN,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;UAC1BJ,OAAO,EAAE;QACb,CAAC;QACDI,KAAK,CAACH,GAAG,GAAGA,GAAG;MACnB;MAEAlB,OAAO,CAACc,OAAO,EAAE;MACjBd,OAAO,GAAGC,SAAS;IACvB,CAAC,CAAC;EACN;AACJ,CAAC;AAAC,eAEaG,IAAI;AAAA"}