@webiny/ui 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/ImageEditor/toolbar/rotate.js

@@ -1,70 +1,45 @@
 "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) {
   (0, _inherits2.default)(RenderForm, _React$Component);
-
   var _super = (0, _createSuper2.default)(RenderForm);
-
   function RenderForm() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       rangeInput: 0
     });
     return _this;
   }
-
   (0, _createClass2.default)(RenderForm, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: "500px",
@@ -83,17 +58,14 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
             rangeInput: value
           }, /*#__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:
-                    if (cropper) {
-                      cropper.rotateTo(parseInt(value, 10));
-                    }
-
-                  case 1:
-                  case "end":
-                    return _context.stop();
-                }
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  if (cropper) {
+                    cropper.rotateTo(parseInt(value, 10));
+                  }
+                case 1:
+                case "end":
+                  return _context.stop();
               }
             }, _callee);
           })));
@@ -103,7 +75,6 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
   }]);
   return RenderForm;
 }(_react.default.Component);
-
 var tool = {
   name: "rotate",
   icon: function icon(_ref2) {
@@ -124,7 +95,6 @@ var tool = {
   },
   onActivate: function onActivate(_ref3) {
     var canvas = _ref3.canvas;
-
     /**
      * We can safely cast canvas.current as HTMLCanvasElement
      */
@@ -147,25 +117,20 @@ 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;
           current.height = image.height;
           ctx.drawImage(image, 0, 0);
         };
-
         image.src = src;
         resolve();
       }
-
       cropper.destroy();
     });
   }

package/ImageEditor/toolbar/rotate.js.map

@@ -1 +1 @@
-{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\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    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\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    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageUpload/Image.js

@@ -1,54 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 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 _classnames = _interopRequireDefault(require("classnames"));
-
 var _roundAdd_photo_alternate24px = require("./icons/round-add_photo_alternate-24px.svg");
-
 var _roundClose24px = require("./icons/round-close-24px.svg");
-
 var _roundEdit24px = require("./icons/round-edit-24px.svg");
-
 var _Typography = require("../Typography");
-
 var _Progress = require("../Progress");
-
 var _styled = require("./styled");
-
 var Image = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Image, _React$Component);
-
   var _super = (0, _createSuper2.default)(Image);
-
   function Image() {
     (0, _classCallCheck2.default)(this, Image);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(Image, [{
     key: "renderBlank",
     value: function renderBlank() {
       var _this$props = this.props,
-          uploadImage = _this$props.uploadImage,
-          round = _this$props.round;
+        uploadImage = _this$props.uploadImage,
+        round = _this$props.round;
       var ImageWrapper = round ? _styled.AddImageWrapperRound : _styled.AddImageWrapper;
       return /*#__PURE__*/_react.default.createElement(ImageWrapper, {
         "data-role": "select-image",
@@ -63,11 +45,11 @@ var Image = /*#__PURE__*/function (_React$Component) {
     key: "renderImg",
     value: function renderImg() {
       var _this$props2 = this.props,
-          removeImage = _this$props2.removeImage,
-          editImage = _this$props2.editImage,
-          uploadImage = _this$props2.uploadImage,
-          value = _this$props2.value,
-          renderImagePreview = _this$props2.renderImagePreview;
+        removeImage = _this$props2.removeImage,
+        editImage = _this$props2.editImage,
+        uploadImage = _this$props2.uploadImage,
+        value = _this$props2.value,
+        renderImagePreview = _this$props2.renderImagePreview;
       var imagePreviewProps = {
         src: value ? value.src : null,
         style: this.props.style ? this.props.style : null,
@@ -75,24 +57,19 @@ var Image = /*#__PURE__*/function (_React$Component) {
           return uploadImage();
         }
       };
-
       if (!imagePreviewProps.style) {
         imagePreviewProps.style = {};
       }
-
       if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {
         imagePreviewProps.style.width = "100%";
         imagePreviewProps.style.height = "100%";
       }
-
       var imagePreview = null;
-
       if (typeof renderImagePreview === "function") {
         imagePreview = renderImagePreview(imagePreviewProps);
       } else {
         imagePreview = /*#__PURE__*/_react.default.createElement("img", imagePreviewProps);
       }
-
       return /*#__PURE__*/_react.default.createElement(_styled.ImagePreviewWrapper, {
         "data-testid": "image-preview"
       }, imagePreview, typeof removeImage === "function" && /*#__PURE__*/_react.default.createElement(_styled.RemoveImage, {
@@ -117,9 +94,9 @@ var Image = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props3 = this.props,
-          value = _this$props3.value,
-          disabled = _this$props3.disabled,
-          containerStyle = _this$props3.containerStyle;
+        value = _this$props3.value,
+        disabled = _this$props3.disabled,
+        containerStyle = _this$props3.containerStyle;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)({
           disabled: disabled
@@ -130,7 +107,6 @@ var Image = /*#__PURE__*/function (_React$Component) {
   }]);
   return Image;
 }(_react.default.Component);
-
 (0, _defineProperty2.default)(Image, "defaultProps", {
   placeholder: "Select an image",
   containerStyle: {

package/ImageUpload/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","classNames","loading","renderImg","renderBlank","React","Component"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"names":["Image","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","classNames","loading","renderImg","renderBlank","React","Component"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}

package/ImageUpload/ImageEditorDialog.js

@@ -1,36 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 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 _ImageEditor = require("../ImageEditor");
-
 var _Tooltip = require("../Tooltip");
-
 var _emotion = require("emotion");
-
 var _Dialog = require("../Dialog");
-
+var _Button = require("../Button");
 var _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
 var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
   width: "100vw",
@@ -47,38 +34,30 @@ var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
     }
   }
 }, "label:imageEditorDialog;");
-
 var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ImageEditorDialog, _React$Component);
-
   var _super = (0, _createSuper2.default)(ImageEditorDialog);
-
   function ImageEditorDialog() {
     var _this;
-
     (0, _classCallCheck2.default)(this, ImageEditorDialog);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "imageEditor", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
-
   (0, _createClass2.default)(ImageEditorDialog, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          src = _this$props.src,
-          options = _this$props.options,
-          onAccept = _this$props.onAccept,
-          open = _this$props.open,
-          dialogZIndex = _this$props.dialogZIndex,
-          dialogProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+        src = _this$props.src,
+        options = _this$props.options,
+        onAccept = _this$props.onAccept,
+        open = _this$props.open,
+        dialogZIndex = _this$props.dialogZIndex,
+        dialogProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, Object.assign({
         className: imageEditorDialog,
         style: {
@@ -91,19 +70,19 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
         options: options
       }, function (_ref) {
         var render = _ref.render,
-            activeTool = _ref.activeTool;
+          activeTool = _ref.activeTool;
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, render()), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, null, "Cancel"), activeTool ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
           content: "Please close currently active tool.",
           placement: "top"
-        }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+        }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
           disabled: true
-        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+          "data-testid": "dialog-accept",
           onClick: function onClick() {
             var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
             /**
              * We are certain that ref exists.
              */
-
             onAccept(url);
           }
         }, "Save")));
@@ -112,6 +91,5 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
   }]);
   return ImageEditorDialog;
 }(_react.default.Component);
-
 var _default = ImageEditorDialog;
 exports.default = _default;

package/ImageUpload/ImageEditorDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport {\n    Dialog,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogContent,\n    DialogOnClose\n} from \"../Dialog\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <DialogAccept disabled>Save</DialogAccept>\n                                        </Tooltip>\n                                    ) : (\n                                        <DialogAccept\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </DialogAccept>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;AA6BA,IAAMA,iBAAiB,gBAAG,IAAAC,YAAA,EAAI;EAC1BC,KAAK,EAAE,OADmB;EAE1BC,MAAM,EAAE,OAFkB;EAG1B,wBAAwB;IACpBC,QAAQ,EAAE,iBADU;IAEpBC,SAAS,EAAE,iBAFS;IAGpB,8BAA8B;MAC1BD,QAAQ,EAAE,iBADgB;MAE1BC,SAAS,EAAE,iBAFe;MAG1BH,KAAK,EAAE,OAHmB;MAI1BC,MAAM,EAAE,OAJkB;MAK1BG,UAAU,EAAE;IALc;EAHV;AAHE,CAAJ,6BAA1B;;IAgBMC,iB;;;;;;;;;;;;;;;2GACmBC,cAAA,CAAMC,SAAN,E;;;;;;WAErB,kBAAyB;MAAA;;MACrB,kBAAuE,KAAKC,KAA5E;MAAA,IAAQC,GAAR,eAAQA,GAAR;MAAA,IAAaC,OAAb,eAAaA,OAAb;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,IAAhC,eAAgCA,IAAhC;MAAA,IAAsCC,YAAtC,eAAsCA,YAAtC;MAAA,IAAuDC,WAAvD;MAEA,oBACI,6BAAC,cAAD;QACI,SAAS,EAAEhB,iBADf;QAEI,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAV,CAFX;QAGI,IAAI,EAAED;MAHV,GAIQE,WAJR,GAMKF,IAAI,iBACD,6BAAC,wBAAD;QAAa,GAAG,EAAE,KAAKI,WAAvB;QAAoC,GAAG,EAAEP,GAAzC;QAA8C,OAAO,EAAEC;MAAvD,GACK;QAAA,IAAGO,MAAH,QAAGA,MAAH;QAAA,IAAWC,UAAX,QAAWA,UAAX;QAAA,oBACG,yEACI,6BAAC,qBAAD,QAAgBD,MAAM,EAAtB,CADJ,eAEI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD,iBADJ,EAEKC,UAAU,gBACP,6BAAC,gBAAD;UACI,OAAO,EAAE,qCADb;UAEI,SAAS,EAAE;QAFf,gBAII,6BAAC,oBAAD;UAAc,QAAQ;QAAtB,UAJJ,CADO,gBAQP,6BAAC,oBAAD;UACI,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAL,CAAiBI,OAAjB,GACN,MAAI,CAACJ,WAAL,CAAiBI,OAAjB,CAAyBC,gBAAzB,EADM,GAEN,EAFN;YAGA;AAChD;AACA;;YACgDV,QAAQ,CAACQ,GAAD,CAAR;UACH;QATL,UAVR,CAFJ,CADH;MAAA,CADL,CAPR,CADJ;IA2CH;;;EAjD2Bb,cAAA,CAAMgB,S;;eAmDvBjB,iB"}
+{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from \"../Dialog\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <ButtonPrimary disabled>Save</ButtonPrimary>\n                                        </Tooltip>\n                                    ) : (\n                                        <ButtonPrimary\n                                            data-testid=\"dialog-accept\"\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </ButtonPrimary>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyC;AAsBzC,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,sBAAsB,EAAE;IACpBC,QAAQ,EAAE,iBAAiB;IAC3BC,SAAS,EAAE,iBAAiB;IAC5B,4BAA4B,EAAE;MAC1BD,QAAQ,EAAE,iBAAiB;MAC3BC,SAAS,EAAE,iBAAiB;MAC5BH,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,OAAO;MACfG,UAAU,EAAE;IAChB;EACJ;AACJ,CAAC,6BAAC;AAAC,IAEGC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uGACEC,cAAK,CAACC,SAAS,EAAe;IAAA;EAAA;EAAA;IAAA;IAAA,OAEnD,kBAAyB;MAAA;MACrB,kBAAuE,IAAI,CAACC,KAAK;QAAzEC,GAAG,eAAHA,GAAG;QAAEC,OAAO,eAAPA,OAAO;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,IAAI,eAAJA,IAAI;QAAEC,YAAY,eAAZA,YAAY;QAAKC,WAAW;MAElE,oBACI,6BAAC,cAAM;QACH,SAAS,EAAEhB,iBAAkB;QAC7B,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAa,CAAE;QAChC,IAAI,EAAED;MAAK,GACPE,WAAW,GAEdF,IAAI,iBACD,6BAAC,wBAAW;QAAC,GAAG,EAAE,IAAI,CAACI,WAAY;QAAC,GAAG,EAAEP,GAAI;QAAC,OAAO,EAAEC;MAAQ,GAC1D;QAAA,IAAGO,MAAM,QAANA,MAAM;UAAEC,UAAU,QAAVA,UAAU;QAAA,oBAClB,yEACI,6BAAC,qBAAa,QAAED,MAAM,EAAE,CAAiB,eACzC,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAC,QAAM,CAAe,EAClCC,UAAU,gBACP,6BAAC,gBAAO;UACJ,OAAO,EAAE,qCAAsC;UAC/C,SAAS,EAAE;QAAM,gBAEjB,6BAAC,qBAAa;UAAC,QAAQ;QAAA,GAAC,MAAI,CAAgB,CACtC,gBAEV,6BAAC,qBAAa;UACV,eAAY,eAAe;UAC3B,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAW,CAACI,OAAO,GAC9B,MAAI,CAACJ,WAAW,CAACI,OAAO,CAACC,gBAAgB,EAAE,GAC3C,EAAE;YACR;AAChD;AACA;YACgDV,QAAQ,CAACQ,GAAG,CAAC;UACjB;QAAE,GACL,MAED,CACH,CACW,CACjB;MAAA,CACN,CAER,CACI;IAEjB;EAAC;EAAA;AAAA,EAlD2Bb,cAAK,CAACgB,SAAS;AAAA,eAoDhCjB,iBAAiB;AAAA"}