@webiny/ui 5.34.8 → 5.35.0-beta.0

package/Icon/Icon.stories.js

@@ -1,25 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../Icon/README.md"));
-
 var _baselineAutorenew24px = require("./svg/baseline-autorenew-24px.svg");
-
 var _baselineCloud_done24px = require("./svg/baseline-cloud_done-24px.svg");
-
 var _baselineDelete24px = require("./svg/baseline-delete-24px.svg");
-
 var _baselineDone24px = require("./svg/baseline-done-24px.svg");
-
 var _Icon = require("./Icon");
-
 var story = (0, _react2.storiesOf)("Components/Icon", module);
 story.add("usage", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {

package/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple icon\"}>\n                    <div>\n                        <Icon icon={<AutoRenewIcon />} />\n                        &nbsp;\n                        <Icon icon={<CloudDoneIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDeleteIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDoneIcon />} />\n                        &nbsp;\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Icon] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,EACqC,MADrC,eAGI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EAHJ,EAGqC,MAHrC,eAKI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EALJ,EAK0C,MAL1C,eAOI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EAPJ,EAOwC,MAPxC,CADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CArBJ"}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple icon\"}>\n                    <div>\n                        <Icon icon={<AutoRenewIcon />} />\n                        &nbsp;\n                        <Icon icon={<CloudDoneIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDeleteIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDoneIcon />} />\n                        &nbsp;\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Icon] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAElDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAgB,gBACjC,uDACI,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,qCAAa;EAAI,EAAG,QAEjC,4CAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,sCAAa;EAAI,EAAG,QAEjC,4CAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,kCAAkB;EAAI,EAAG,QAEtC,4CAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,gCAAgB;EAAI,EAAG,QAExC,CAAM,CACK,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAI;EAAE;AAAE,CAAC,CACnC"}

package/Icon/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Icon = require("./Icon");
-
 Object.keys(_Icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Icon[key]) return;

package/Icon/index.js.map

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

package/Image/Image.js

@@ -1,30 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Image = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var Image = function Image(_ref) {
   var rest = Object.assign({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
   var finalProps = (0, _objectSpread2.default)({}, rest);
   var srcSet = finalProps.srcSet;
-
   if (srcSet && typeof srcSet === "object") {
     finalProps.srcSet = Object.keys(srcSet).map(function (key) {
       return "".concat(srcSet[key], " ").concat(key);
     }).join(", ");
   }
-
   return /*#__PURE__*/_react.default.createElement("img", finalProps);
 };
-
 exports.Image = Image;

package/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface Props\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image: React.FC<Props> = ({ ...rest }) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;EAAA,IAAXC,IAAW;EAC5C,IAAMC,UAAU,mCAAQD,IAAR,CAAhB;EACA,IAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;EACA,IAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;IACtCD,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;IAAA,CADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;EAGH;;EAED,oBAAO,oCAASN,UAAT,CAAP;AACH,CAVD"}
+{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface Props\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image: React.FC<Props> = ({ ...rest }) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image };\n"],"mappings":";;;;;;;;;AAAA;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAsB,OAAoB;EAAA,IAAXC,IAAI;EACrC,IAAMC,UAAU,mCAAQD,IAAI,CAAE;EAC9B,IAAME,MAAM,GAAGD,UAAU,CAACC,MAAM;EAChC,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IACtCD,UAAU,CAACC,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACF,MAAM,CAAC,CAClCG,GAAG,CAAC,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAG,CAAC,cAAIA,GAAG;IAAA,CAAE,CAAC,CACnCC,IAAI,CAAC,IAAI,CAAC;EACnB;EAEA,oBAAO,oCAASN,UAAU,CAAI;AAClC,CAAC;AAAC"}

package/Image/Image.stories.js

@@ -1,19 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../Image/README.md"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _Image = require("./Image");
-
 var story = (0, _react2.storiesOf)("Components/Image", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {

package/Image/Image.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Image"],"sources":["Image.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\n\nimport readme from \"./../Image/README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { Image } from \"./Image\";\n\nconst story = storiesOf(\"Components/Image\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Image] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAQA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,YAAD;IAAO,GAAG,EAAC,iCAAX;IAA6C,GAAG,EAAC;EAAjD,EADJ,CADJ,eAII,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,GAAG,EAAC,iCAAX;IAA6C,GAAG,EAAC;EAAjD,EADJ,CAJJ,CAFJ,CADJ;AAaH,CAhBL,EAiBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAD;EAAd;AAAR,CAjBJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Image"],"sources":["Image.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\n\nimport readme from \"./../Image/README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { Image } from \"./Image\";\n\nconst story = storiesOf(\"Components/Image\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Image] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAQA;AACA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AACnDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,YAAK;IAAC,GAAG,EAAC,iCAAiC;IAAC,GAAG,EAAC;EAAa,EAAG,CAC/C,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,GAAG,EAAC,iCAAiC;IAAC,GAAG,EAAC;EAAa,EAAG,CAClD,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAK;EAAE;AAAE,CAAC,CACpC"}

package/Image/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Image = require("./Image");
-
 Object.keys(_Image).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Image[key]) return;

package/Image/index.js.map

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

package/ImageEditor/ImageEditor.js

@@ -1,44 +1,29 @@
 "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,
@@ -80,32 +65,24 @@ var ApplyCancelActions = /*#__PURE__*/(0, _styled.default)("div", {
 })({
   textAlign: "center"
 });
-
 var initScripts = function initScripts() {
   return new Promise(function (resolve) {
     // @ts-ignore
     if (window.Caman) {
       return 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) {
   (0, _inherits2.default)(ImageEditor, _React$Component);
-
   var _super = (0, _createSuper2.default)(ImageEditor);
-
   function ImageEditor() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       tool: null,
@@ -117,7 +94,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
       var src = _this.props.src;
       _this.image = new window.Image();
       var canvas = _this.canvas.current;
-
       if (canvas) {
         _this.image.onload = function () {
           if (_this.image) {
@@ -127,7 +103,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
             ctx.drawImage(_this.image, 0, 0);
           }
         };
-
         _this.image.src = src;
       }
     });
@@ -135,7 +110,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
       if (typeof tool === "string") {
         tool = toolbar[tool];
       }
-
       _this.setState({
         tool: tool
       }, function () {
@@ -153,121 +127,93 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
     });
     (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 "";
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var tool;
       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;
-              }
-
+        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;
-              return tool.apply({
-                canvas: _this.canvas
-              });
-
-            case 6:
-              _this.deactivateTool();
-
-            case 7:
-            case "end":
-              return _context.stop();
-          }
+              break;
+            }
+            _context.next = 6;
+            return tool.apply({
+              canvas: _this.canvas
+            });
+          case 6:
+            _this.deactivateTool();
+          case 7:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     })));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
       var tool;
       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;
-              }
-
+        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;
-              return tool.cancel({
-                canvas: _this.canvas
-              });
-
-            case 6:
-              _this.deactivateTool();
-
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
+              break;
+            }
+            _context2.next = 6;
+            return tool.cancel({
+              canvas: _this.canvas
+            });
+          case 6:
+            _this.deactivateTool();
+          case 7:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
     })));
     (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;
   }
-
   (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 (!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);
@@ -281,20 +227,16 @@ 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.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.default.createElement("div", {
           key: key,
           className: (0, _classnames.default)({
@@ -336,7 +278,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         },
         ref: this.canvas
       })));
-
       if (typeof children === "function") {
         return children({
           render: function render() {
@@ -349,13 +290,11 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
           cancelActiveTool: this.cancelActiveTool
         });
       }
-
       return editor;
     }
   }]);
   return ImageEditor;
 }(_react.default.Component);
-
 exports.ImageEditor = ImageEditor;
 (0, _defineProperty2.default)(ImageEditor, "defaultProps", {
   tools: ["crop", "flip", "rotate", "filter"]

package/ImageEditor/ImageEditor.js.map

@@ -1 +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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"}
+{"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

@@ -3,9 +3,7 @@
 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;

package/ImageEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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,26 +1,17 @@
 "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.default.createElement("div", {
     style: {
@@ -28,7 +19,6 @@ var renderForm = function renderForm() {
     }
   }, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
 };
-
 var tool = {
   name: "crop",
   icon: function icon(_ref) {
@@ -47,7 +37,7 @@ var tool = {
   renderForm: renderForm,
   onActivate: function onActivate(_ref2) {
     var canvas = _ref2.canvas,
-        options = _ref2.options;
+      options = _ref2.options;
     cropper = new _cropperjs.default(canvas.current, options);
   },
   cancel: function cancel() {
@@ -60,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;
@@ -75,10 +62,8 @@ var tool = {
           ctx.drawImage(image, 0, 0);
           resolve();
         };
-
         image.src = src;
       }
-
       cropper.destroy();
       cropper = undefined;
     });