@webiny/ui 5.27.0 → 5.29.0-beta.0

package/ImageEditor/toolbar/filter.js

@@ -1,23 +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";
+"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
  */
-import React from "react";
-import { ReactComponent as FilterIcon } from "./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", {
+var Wrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1cnct9n0",
   label: "Wrapper"
 })({
@@ -78,32 +100,29 @@ 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;
@@ -121,8 +140,7 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
         });
       });
     }, 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;
@@ -131,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();
@@ -145,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
@@ -186,26 +202,26 @@ 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),
+    }, /*#__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;
@@ -218,4 +234,5 @@ var tool = {
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/filter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["filter.tsx"],"names":["React","ReactComponent","FilterIcon","Slider","IconButton","ButtonDefault","Tooltip","styled","Wrapper","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","Component","tool","name","icon","activateTool","renderForm","cancel"],"mappings":"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","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 icon={<FilterIcon />} onClick={() => activateTool(\"filter\")} />\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"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AAXA;AACA;AACA;AACA;AAoBA,IAAMA,OAAO,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC1BC,EAAE,EAAE;IACAC,SAAS,EAAE,QADX;IAEAC,EAAE,EAAE;MACAC,OAAO,EAAE,cADT;MAEAC,KAAK,EAAE,GAFP;MAGAC,OAAO,EAAE;IAHT;EAFJ,CADsB;EAS1B,YAAY;IACRJ,SAAS,EAAE;EADH;AATc,CAAjB,CAAb;AAcA,IAAMK,OAAO,GAAG,CACZ;EACIC,GAAG,EAAE,YADT;EAEIC,KAAK,EAAE,YAFX;EAGIC,GAAG,EAAE,CAAC;AAHV,CADY,EAMZ;EACIF,GAAG,EAAE,UADT;EAEIC,KAAK,EAAE,UAFX;EAGIC,GAAG,EAAE,CAAC;AAHV,CANY,EAWZ;EACIF,GAAG,EAAE,KADT;EAEIC,KAAK,EAAE,KAFX;EAGIC,GAAG,EAAE,CAAC;AAHV,CAXY,EAgBZ;EACIF,GAAG,EAAE,OADT;EAEIC,KAAK,EAAE;AAFX,CAhBY,EAoBZ;EACID,GAAG,EAAE,MADT;EAEIC,KAAK,EAAE;AAFX,CApBY,EAwBZ;EACID,GAAG,EAAE,WADT;EAEIC,KAAK,EAAE;AAFX,CAxBY,EA4BZ;EACID,GAAG,EAAE,UADT;EAEIC,KAAK,EAAE,UAFX;EAGIC,GAAG,EAAE,CAAC;AAHV,CA5BY,EAiCZ;EACIF,GAAG,EAAE,YADT;EAEIC,KAAK,EAAE,YAFX;EAGIC,GAAG,EAAE,CAAC;AAHV,CAjCY,EAsCZ;EACIF,GAAG,EAAE,UADT;EAEIC,KAAK,EAAE,UAFX;EAGIC,GAAG,EAAE,CAAC;AAHV,CAtCY,EA2CZ;EACIF,GAAG,EAAE,OADT;EAEIC,KAAK,EAAE;AAFX,CA3CY,EA+CZ;EACID,GAAG,EAAE,OADT;EAEIC,KAAK,EAAE;AAFX,CA/CY,EAmDZ;EACID,GAAG,EAAE,SADT;EAEIC,KAAK,EAAE;AAFX,CAnDY,CAAhB;;IAyDME,U;;;;;;;;;;;;;;;wFACuC;MACrCC,UAAU,EAAE,KADyB;MAErCC,MAAM,EAAE;IAF6B,C;+FAST,wBAAS,YAAM;MAC3C,IAAQC,MAAR,GAAmB,MAAKC,KAAxB,CAAQD,MAAR;MACA,IAAQD,MAAR,GAAmB,MAAKG,KAAxB,CAAQH,MAAR,CAF2C,CAG3C;;MACA,IAAMI,SAAS,8CAAf,CAJ2C,CAM3C;;MACAC,KAAK,CAACJ,MAAM,CAACK,OAAR,EAAiB,YAAY;QAAA;;QAC9B;QACA,KAAKC,MAAL,CAAY,KAAZ;QACAC,MAAM,CAACC,IAAP,CAAYT,MAAZ,EAAoBU,OAApB,EACI;QACA,UAAAf,GAAG;UAAA,OAAIK,MAAM,CAACL,GAAD,CAAN,KAAgB,CAAhB,IAAqB,MAAI,CAACA,GAAD,CAAzB,IAAkC,MAAI,CAACA,GAAD,CAAJ,CAAUK,MAAM,CAACL,GAAD,CAAhB,CAAtC;QAAA,CAFP,EAH8B,CAO9B;;QACA,KAAKgB,MAAL;QACAP,SAAS,CAACQ,QAAV,CAAmB;UAAEb,UAAU,EAAE;QAAd,CAAnB;MACH,CAVI,CAAL;IAWH,CAlB+B,EAkB7B,GAlB6B,C;qGAoBM,YAAM;MACxC,MAAKa,QAAL,CAAc,UAAAT,KAAK,EAAI;QACnBT,OAAO,CAACmB,MAAR,CAAe,UAACC,MAAD,EAASR,OAAT,EAAqB;UAChCH,KAAK,CAACH,MAAN,CAAaM,OAAO,CAACX,GAArB,IAA4B,CAA5B;UACA,OAAOmB,MAAP;QACH,CAHD,EAGG,EAHH;QAKA,OAAOX,KAAP;MACH,CAPD;IAQH,C;;;;;;WAjCD,6BAAoC;MAChC,KAAKY,kBAAL;IACH;;;WAiCD,kBAAyB;MAAA;;MACrB,oBACI,6BAAC,OAAD,qBACI,yCACKrB,OAAO,CAACsB,GAAR,CAAY,UAAAd,KAAK;QAAA,oBACd;UAAI,GAAG,EAAEA,KAAK,CAACP;QAAf,gBACI,6BAAC,cAAD;UACI,KAAK,EAAE,MAAI,CAACQ,KAAL,CAAWH,MAAX,CAAkBE,KAAK,CAACP,GAAxB,CADX;UAEI,GAAG,EAAE,CAFT;UAGI,GAAG,EAAE,GAHT;UAII,QAAQ,EAAE,MAAI,CAACQ,KAAL,CAAWJ,UAJzB;UAKI,OAAO,EAAE,iBAACkB,KAAD,EAAmB;YACxB,MAAI,CAACL,QAAL,CAAc,UAAAT,KAAK,EAAI;cACnB,IAAMH,MAAM,mCAAQG,KAAK,CAACH,MAAd,CAAZ;cACAA,MAAM,CAACE,KAAK,CAACP,GAAP,CAAN,GAAoBsB,KAApB;cAEA,mEAAYd,KAAZ;gBAAmBJ,UAAU,EAAE,IAA/B;gBAAqCC,MAAM,EAANA;cAArC;YACH,CALD,EAKG,MAAI,CAACkB,YALR;UAMH;QAZL,GAaQhB,KAbR,EADJ,CADc;MAAA,CAAjB,CADL,CADJ,eAuBI;QAAK,KAAK,EAAE;UAAEb,SAAS,EAAE;QAAb;MAAZ,gBACI,6BAAC,qBAAD;QACI,OAAO,EAAE,mBAAM;UACX,MAAI,CAACuB,QAAL,CAAc;YAAEb,UAAU,EAAE;UAAd,CAAd,EAAoC,YAAM;YACtC,MAAI,CAACgB,kBAAL;;YACA,MAAI,CAACG,YAAL;;YACA,MAAI,CAACN,QAAL,CAAc;cAAEb,UAAU,EAAE;YAAd,CAAd;UACH,CAJD;QAKH;MAPL,mBADJ,CAvBJ,CADJ;IAuCH;;;EAjFoBoB,cAAA,CAAMC,S;;AAoF/B,IAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,QADoB;EAE1BC,IAF0B,sBAEH;IAAA,IAAhBC,YAAgB,QAAhBA,YAAgB;IACnB,oBACI,6BAAC,gBAAD;MAAS,SAAS,EAAE,QAApB;MAA8B,OAAO,EAAE;IAAvC,gBACI,6BAAC,kBAAD;MACI,IAAI,eAAE,6BAAC,sBAAD,OADV;MAEI,OAAO,EAAE;QAAA,OAAMA,YAAY,CAAC,QAAD,CAAlB;MAAA,CAFb;MAGI,eAAa;IAHjB,EADJ,CADJ;EASH,CAZyB;EAa1BC,UAb0B,sBAafvB,KAbe,EAaR;IACd,oBAAO,6BAAC,UAAD,EAAgBA,KAAhB,CAAP;EACH,CAfyB;EAgB1BwB,MAAM,EAAE,uBAAgB;IAAA,IAAbzB,MAAa,SAAbA,MAAa;IACpB;IACAI,KAAK,CAACJ,MAAM,CAACK,OAAR,EAAiB,YAAY;MAC9B;MACA,KAAKC,MAAL,CAAY,KAAZ,EAF8B,CAG9B;;MACA,KAAKI,MAAL;IACH,CALI,CAAL;EAMH;AAxByB,CAA9B;eA2BeU,I"}

package/ImageEditor/toolbar/flip.js

@@ -1,9 +1,24 @@
-import React from "react";
-import { ReactComponent as FlipIcon } from "./icons/flip.svg";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-import { IconButton, ButtonDefault } from "../../Button";
-import { Tooltip } from "../../Tooltip";
+"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,
@@ -11,11 +26,11 @@ var flipped = {
 };
 
 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,14 +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),
+    }, /*#__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,
@@ -56,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,
@@ -95,4 +111,5 @@ var tool = {
     });
   }
 };
-export default tool;
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/flip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["flip.tsx"],"names":["React","ReactComponent","FlipIcon","Cropper","IconButton","ButtonDefault","Tooltip","cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"mappings":"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","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 icon={<FlipIcon />} onClick={() => activateTool(\"flip\")} />\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"]}
+{"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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["ReactComponent","CropIcon","DrawIcon","FilterIcon","FlipIcon","RedoIcon","RotateLeftIcon","RotateRightIcon","UndoIcon"],"mappings":"AAAA,SAASA,cAAc,IAAIC,QAA3B;AACA,SAASD,cAAc,IAAIE,QAA3B;AACA,SAASF,cAAc,IAAIG,UAA3B;AACA,SAASH,cAAc,IAAII,QAA3B;AACA,SAASJ,cAAc,IAAIK,QAA3B;AACA,SAASL,cAAc,IAAIM,cAA3B;AACA,SAASN,cAAc,IAAIO,eAA3B;AACA,SAASP,cAAc,IAAIQ,QAA3B","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"]}
+{"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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","crop","flip","filter","rotate"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB;AACA,SAASD,OAAO,IAAIE,IAApB;AACA,SAASF,OAAO,IAAIG,MAApB;AACA,SAASH,OAAO,IAAII,MAApB","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"]}
+{"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"}