@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb

package/ImageEditor/toolbar/filter.js

@@ -1,18 +1,45 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-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 _debounce from "lodash/debounce";
-import React from "react";
-import { ReactComponent as FilterIcon } from "@svgr/webpack!./icons/filter.svg";
-import { Slider } from "../../Slider";
-import { IconButton, ButtonDefault } from "../../Button";
-import { Tooltip } from "../../Tooltip";
-import styled from "@emotion/styled";
-var Wrapper = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _filter = require("./icons/filter.svg");
+
+var _Slider = require("../../Slider");
+
+var _Button = require("../../Button");
+
+var _Tooltip = require("../../Tooltip");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+/**
+ * When using Caman, we added @ts-ignore because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.
+ * TODO: use some other library to edit images
+ */
+var Wrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1cnct9n0",
   label: "Wrapper"
 })({
@@ -73,48 +100,47 @@ var sliders = [{
 }];
 
 var RenderForm = /*#__PURE__*/function (_React$Component) {
-  _inherits(RenderForm, _React$Component);
+  (0, _inherits2.default)(RenderForm, _React$Component);
 
-  var _super = _createSuper(RenderForm);
+  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", {
       processing: false,
       values: {}
     });
-
-    _defineProperty(_assertThisInitialized(_this), "applyFilters", _debounce(function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyFilters", (0, _debounce2.default)(function () {
       var canvas = _this.props.canvas;
       var values = _this.state.values; // eslint-disable-next-line @typescript-eslint/no-this-alias
 
-      var component = _assertThisInitialized(_this); // @ts-ignore
-
+      var component = (0, _assertThisInitialized2.default)(_this); // @ts-ignore
 
       Caman(canvas.current, function () {
         var _this2 = this;
 
+        // @ts-ignore
         this.revert(false);
-        Object.keys(values).forEach(function (key) {
+        Object.keys(values).forEach( // @ts-ignore
+        function (key) {
           return values[key] !== 0 && _this2[key] && _this2[key](values[key]);
-        });
+        }); // @ts-ignore
+
         this.render();
         component.setState({
           processing: false
         });
       });
     }, 200));
-
-    _defineProperty(_assertThisInitialized(_this), "resetFiltersValues", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resetFiltersValues", function () {
       _this.setState(function (state) {
         sliders.reduce(function (output, current) {
           state.values[current.key] = 0;
@@ -123,11 +149,10 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
         return state;
       });
     });
-
     return _this;
   }
 
-  _createClass(RenderForm, [{
+  (0, _createClass2.default)(RenderForm, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.resetFiltersValues();
@@ -137,31 +162,30 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this3 = this;
 
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("ul", null, sliders.map(function (props) {
-        return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("ul", null, sliders.map(function (props) {
+        return /*#__PURE__*/_react.default.createElement("li", {
           key: props.key
-        }, /*#__PURE__*/React.createElement(Slider, Object.assign({
+        }, /*#__PURE__*/_react.default.createElement(_Slider.Slider, Object.assign({
           value: _this3.state.values[props.key],
           min: 0,
           max: 100,
           disabled: _this3.state.processing,
           onInput: function onInput(value) {
             _this3.setState(function (state) {
-              var values = _objectSpread({}, state.values);
-
+              var values = (0, _objectSpread2.default)({}, state.values);
               values[props.key] = value;
-              return _objectSpread(_objectSpread({}, state), {}, {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
                 processing: true,
                 values: values
               });
             }, _this3.applyFilters);
           }
         }, props)));
-      })), /*#__PURE__*/React.createElement("div", {
+      })), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           textAlign: "center"
         }
-      }, /*#__PURE__*/React.createElement(ButtonDefault, {
+      }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
         onClick: function onClick() {
           _this3.setState({
             processing: true
@@ -178,32 +202,37 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
       }, "Reset filters")));
     }
   }]);
-
   return RenderForm;
-}(React.Component);
+}(_react.default.Component);
 
 var tool = {
   name: "filter",
   icon: function icon(_ref) {
     var activateTool = _ref.activateTool;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       placement: "bottom",
       content: "Filter"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
-      onClick: activateTool
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_filter.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("filter");
+      },
+      "data-testid": "filter-item"
     }));
   },
   renderForm: function renderForm(props) {
-    return /*#__PURE__*/React.createElement(RenderForm, props);
+    return /*#__PURE__*/_react.default.createElement(RenderForm, props);
   },
   cancel: function cancel(_ref2) {
     var canvas = _ref2.canvas;
     // @ts-ignore
     Caman(canvas.current, function () {
-      this.revert(false);
+      // @ts-ignore
+      this.revert(false); // @ts-ignore
+
       this.render();
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Wrapper","styled","ul","textAlign","li","display","width","padding","sliders","key","label","min","RenderForm","processing","values","canvas","props","state","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","resetFiltersValues","map","value","applyFilters","React","Component","tool","name","icon","activateTool","renderForm","cancel"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-ignore because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.\n * TODO: use some other library to edit images\n */\nimport React from \"react\";\nimport { ReactComponent as FilterIcon } from \"./icons/filter.svg\";\nimport { Slider } from \"~/Slider\";\nimport { ImageEditorTool } from \"./types\";\nimport { IconButton, ButtonDefault } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { debounce } from \"lodash\";\nimport styled from \"@emotion/styled\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: Function;\n}\n\nconst Wrapper = styled(\"div\")({\n    ul: {\n        textAlign: \"center\",\n        li: {\n            display: \"inline-block\",\n            width: 180,\n            padding: 10\n        }\n    },\n    \".buttons\": {\n        textAlign: \"center\"\n    }\n});\n\nconst sliders = [\n    {\n        key: \"brightness\",\n        label: \"Brightness\",\n        min: -100\n    },\n    {\n        key: \"vibrance\",\n        label: \"Vibrance\",\n        min: -100\n    },\n    {\n        key: \"hue\",\n        label: \"Hue\",\n        min: -100\n    },\n    {\n        key: \"gamma\",\n        label: \"Gamma\"\n    },\n    {\n        key: \"clip\",\n        label: \"Clip\"\n    },\n    {\n        key: \"stackBlur\",\n        label: \"Blur\"\n    },\n    {\n        key: \"contrast\",\n        label: \"Contrast\",\n        min: -100\n    },\n    {\n        key: \"saturation\",\n        label: \"Saturation\",\n        min: -100\n    },\n    {\n        key: \"exposure\",\n        label: \"Exposure\",\n        min: -100\n    },\n    {\n        key: \"sepia\",\n        label: \"Sepia\"\n    },\n    {\n        key: \"noise\",\n        label: \"Noise\"\n    },\n    {\n        key: \"sharpen\",\n        label: \"Sharpen\"\n    }\n];\n\nclass RenderForm extends React.Component<RenderFormProps, RenderFormState> {\n    public override state: RenderFormState = {\n        processing: false,\n        values: {}\n    };\n\n    public override componentDidMount() {\n        this.resetFiltersValues();\n    }\n\n    private readonly applyFilters = debounce(() => {\n        const { canvas } = this.props;\n        const { values } = this.state;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-ignore\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-ignore\n            this.render();\n            component.setState({ processing: false });\n        });\n    }, 200);\n\n    private readonly resetFiltersValues = () => {\n        this.setState(state => {\n            sliders.reduce((output, current) => {\n                state.values[current.key] = 0;\n                return output;\n            }, {});\n\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Wrapper>\n                <ul>\n                    {sliders.map(props => (\n                        <li key={props.key}>\n                            <Slider\n                                value={this.state.values[props.key]}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onInput={(value: string) => {\n                                    this.setState(state => {\n                                        const values = { ...state.values };\n                                        values[props.key] = value;\n\n                                        return { ...state, processing: true, values };\n                                    }, this.applyFilters);\n                                }}\n                                {...props}\n                            />\n                        </li>\n                    ))}\n                </ul>\n\n                <div style={{ textAlign: \"center\" }}>\n                    <ButtonDefault\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    >\n                        Reset filters\n                    </ButtonDefault>\n                </div>\n            </Wrapper>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Filter\"}>\n                <IconButton\n                    icon={<FilterIcon />}\n                    onClick={() => activateTool(\"filter\")}\n                    data-testid={\"filter-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            // @ts-ignore\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/flip.js

@@ -1,21 +1,36 @@
-import React from "react";
-import { ReactComponent as FlipIcon } from "@svgr/webpack!./icons/flip.svg";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-import { IconButton, ButtonDefault } from "../../Button";
-import { Tooltip } from "../../Tooltip";
-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 _flip = require("./icons/flip.svg");
+
+var _cropperjs = _interopRequireDefault(require("cropperjs"));
+
+require("cropperjs/dist/cropper.css");
+
+var _Button = require("../../Button");
+
+var _Tooltip = require("../../Tooltip");
+
+var cropper;
 var flipped = {
   x: 1,
   y: 1
 };
 
 var renderForm = function renderForm() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       textAlign: "center"
     }
-  }, /*#__PURE__*/React.createElement(ButtonDefault, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
     onClick: function onClick() {
       if (!cropper) {
         return;
@@ -24,7 +39,7 @@ var renderForm = function renderForm() {
       flipped.x = flipped.x === 1 ? -1 : 1;
       cropper.scaleX(flipped.x);
     }
-  }, "FlipX"), /*#__PURE__*/React.createElement(ButtonDefault, {
+  }, "FlipX"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
     onClick: function onClick() {
       if (!cropper) {
         return;
@@ -40,12 +55,15 @@ var tool = {
   name: "flip",
   icon: function icon(_ref) {
     var activateTool = _ref.activateTool;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       placement: "bottom",
       content: "Flip"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(FlipIcon, null),
-      onClick: activateTool
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_flip.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("flip");
+      },
+      "data-testid": "flip-item"
     }));
   },
   renderForm: renderForm,
@@ -54,7 +72,7 @@ var tool = {
   },
   onActivate: function onActivate(_ref2) {
     var canvas = _ref2.canvas;
-    cropper = new Cropper(canvas.current, {
+    cropper = new _cropperjs.default(canvas.current, {
       background: false,
       modal: false,
       guides: false,
@@ -93,4 +111,5 @@ var tool = {
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/flip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton\n                    icon={<FlipIcon />}\n                    onClick={() => activateTool(\"flip\")}\n                    data-testid={\"flip-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\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    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        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/icons/index.js

@@ -1,8 +1,69 @@
-export { ReactComponent as CropIcon } from "./crop.svg";
-export { ReactComponent as DrawIcon } from "./draw.svg";
-export { ReactComponent as FilterIcon } from "./filter.svg";
-export { ReactComponent as FlipIcon } from "./flip.svg";
-export { ReactComponent as RedoIcon } from "./redo.svg";
-export { ReactComponent as RotateLeftIcon } from "./rotateLeft.svg";
-export { ReactComponent as RotateRightIcon } from "./rotateRight.svg";
-export { ReactComponent as UndoIcon } from "./undo.svg";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CropIcon", {
+  enumerable: true,
+  get: function get() {
+    return _crop.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "DrawIcon", {
+  enumerable: true,
+  get: function get() {
+    return _draw.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "FilterIcon", {
+  enumerable: true,
+  get: function get() {
+    return _filter.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "FlipIcon", {
+  enumerable: true,
+  get: function get() {
+    return _flip.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "RedoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _redo.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "RotateLeftIcon", {
+  enumerable: true,
+  get: function get() {
+    return _rotateLeft.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "RotateRightIcon", {
+  enumerable: true,
+  get: function get() {
+    return _rotateRight.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "UndoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _undo.ReactComponent;
+  }
+});
+
+var _crop = require("./crop.svg");
+
+var _draw = require("./draw.svg");
+
+var _filter = require("./filter.svg");
+
+var _flip = require("./flip.svg");
+
+var _redo = require("./redo.svg");
+
+var _rotateLeft = require("./rotateLeft.svg");
+
+var _rotateRight = require("./rotateRight.svg");
+
+var _undo = require("./undo.svg");

package/ImageEditor/toolbar/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}

package/ImageEditor/toolbar/index.js

@@ -1,4 +1,39 @@
-export { default as crop } from "./crop";
-export { default as flip } from "./flip";
-export { default as filter } from "./filter";
-export { default as rotate } from "./rotate";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "crop", {
+  enumerable: true,
+  get: function get() {
+    return _crop.default;
+  }
+});
+Object.defineProperty(exports, "filter", {
+  enumerable: true,
+  get: function get() {
+    return _filter.default;
+  }
+});
+Object.defineProperty(exports, "flip", {
+  enumerable: true,
+  get: function get() {
+    return _flip.default;
+  }
+});
+Object.defineProperty(exports, "rotate", {
+  enumerable: true,
+  get: function get() {
+    return _rotate.default;
+  }
+});
+
+var _crop = _interopRequireDefault(require("./crop"));
+
+var _flip = _interopRequireDefault(require("./flip"));
+
+var _filter = _interopRequireDefault(require("./filter"));
+
+var _rotate = _interopRequireDefault(require("./rotate"));

package/ImageEditor/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}

package/ImageEditor/toolbar/rotate.js

@@ -1,54 +1,76 @@
-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);
+  (0, _inherits2.default)(RenderForm, _React$Component);
 
-  var _super = _createSuper(RenderForm);
+  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,8 +81,8 @@ 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) {
+          }, /*#__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:
@@ -79,28 +101,34 @@ 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,
@@ -142,4 +170,5 @@ var tool = {
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;