@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/ImageEditor/toolbar/filter.js

@@ -1,18 +1,30 @@
-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"
 })({
@@ -71,50 +83,44 @@ var sliders = [{
   key: "sharpen",
   label: "Sharpen"
 }];
-
 var RenderForm = /*#__PURE__*/function (_React$Component) {
-  _inherits(RenderForm, _React$Component);
-
-  var _super = _createSuper(RenderForm);
-
+  (0, _inherits2.default)(RenderForm, _React$Component);
+  var _super = (0, _createSuper2.default)(RenderForm);
   function RenderForm() {
     var _this;
-
-    _classCallCheck(this, RenderForm);
-
+    (0, _classCallCheck2.default)(this, RenderForm);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       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 values = _this.state.values;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      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 +129,9 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
         return state;
       });
     });
-
     return _this;
   }
-
-  _createClass(RenderForm, [{
+  (0, _createClass2.default)(RenderForm, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.resetFiltersValues();
@@ -136,40 +140,36 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
     key: "render",
     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
           }, function () {
             _this3.resetFiltersValues();
-
             _this3.applyFilters();
-
             _this3.setState({
               processing: false
             });
@@ -178,32 +178,36 @@ 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 () {
+      // @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,51 +1,57 @@
-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;
       }
-
       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;
       }
-
       flipped.y = flipped.y === 1 ? -1 : 1;
       cropper.scaleY(flipped.y);
     }
   }, "FlipY"));
 };
-
 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 +60,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,
@@ -70,14 +76,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;
@@ -85,12 +88,11 @@ var tool = {
           ctx.drawImage(image, 0, 0);
           resolve();
         };
-
         image.src = src;
       }
-
       cropper.destroy();
     });
   }
 };
-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,61 @@
-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,34 @@
-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"}