@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/ImageEditor/toolbar/index.js

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

package/ImageEditor/toolbar/index.js.map

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

package/ImageEditor/toolbar/rotate.d.ts

@@ -0,0 +1,4 @@
+import { ImageEditorTool } from "./types";
+import "cropperjs/dist/cropper.css";
+declare const tool: ImageEditorTool;
+export default tool;

package/ImageEditor/toolbar/rotate.js

@@ -0,0 +1,174 @@
+"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",
+          margin: "0 auto"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Slider.Slider, {
+        label: "Range Input",
+        value: this.state.rangeInput,
+        min: 0,
+        max: 360,
+        step: 10,
+        discrete: true,
+        displayMarkers: true,
+        onInput: function onInput(value) {
+          _this2.setState({
+            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();
+                }
+              }
+            }, _callee);
+          })));
+        }
+      }));
+    }
+  }]);
+  return RenderForm;
+}(_react.default.Component);
+
+var tool = {
+  name: "rotate",
+  icon: function icon(_ref2) {
+    var activateTool = _ref2.activateTool;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      placement: "bottom",
+      content: "Rotate"
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_rotateRight.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("rotate");
+      },
+      "data-testid": "rotate-item"
+    }));
+  },
+  renderForm: function renderForm(props) {
+    return /*#__PURE__*/_react.default.createElement(RenderForm, props);
+  },
+  onActivate: function onActivate(_ref3) {
+    var canvas = _ref3.canvas;
+
+    /**
+     * We can safely cast canvas.current as HTMLCanvasElement
+     */
+    cropper = new _cropperjs.default(canvas.current, {
+      background: false,
+      modal: false,
+      guides: false,
+      dragMode: "none",
+      highlight: false,
+      autoCrop: false
+    });
+  },
+  cancel: function cancel() {
+    return cropper && cropper.destroy();
+  },
+  apply: function apply(_ref4) {
+    var canvas = _ref4.canvas;
+    return new Promise(function (resolve) {
+      if (!cropper) {
+        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();
+    });
+  }
+};
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/rotate.js.map

@@ -0,0 +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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"}

package/ImageEditor/toolbar/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="web" />
+import React from "react";
+export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
+interface RenderFormParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image: HTMLImageElement;
+    renderApplyCancel?: Function;
+    options?: {
+        [key: string]: any;
+    };
+}
+interface OnActivateParams {
+    options: any;
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+interface IconParams {
+    activateTool: (tool: ToolbarTool) => void;
+}
+interface ApplyParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+interface CancelParams {
+    canvas: React.RefObject<HTMLCanvasElement>;
+}
+export interface ImageEditorTool {
+    name: string;
+    apply?: (params: ApplyParams) => void;
+    cancel?: (params: CancelParams) => void;
+    onActivate?: (params: OnActivateParams) => void;
+    icon: (params: IconParams) => React.ReactElement<any>;
+    renderForm?: (params: RenderFormParams) => React.ReactNode;
+}
+export {};

package/ImageEditor/toolbar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ImageEditor/toolbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from \"react\";\n\nexport type ToolbarTool = \"crop\" | \"flip\" | \"rotate\" | \"filter\";\n\ninterface RenderFormParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n    image: HTMLImageElement;\n    renderApplyCancel?: Function;\n    options?: { [key: string]: any };\n}\n\ninterface OnActivateParams {\n    options: any;\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface IconParams {\n    activateTool: (tool: ToolbarTool) => void;\n}\n\ninterface ApplyParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface CancelParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\nexport interface ImageEditorTool {\n    name: string;\n    apply?: (params: ApplyParams) => void;\n    cancel?: (params: CancelParams) => void;\n    onActivate?: (params: OnActivateParams) => void;\n    icon: (params: IconParams) => React.ReactElement<any>;\n    renderForm?: (params: RenderFormParams) => React.ReactNode;\n}\n"],"mappings":""}

package/ImageUpload/Image.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+interface ImageProps {
+    uploadImage: () => void;
+    removeImage?: (value: string | null) => void;
+    editImage?: Function;
+    value?: any;
+    disabled?: boolean;
+    loading?: boolean;
+    placeholder: string;
+    style?: React.CSSProperties;
+    renderImagePreview?: (props: any) => React.ReactElement<any>;
+    round?: boolean;
+    containerStyle?: React.CSSProperties;
+}
+declare class Image extends React.Component<ImageProps> {
+    static defaultProps: {
+        placeholder: string;
+        containerStyle: {
+            height: string;
+        };
+    };
+    renderBlank(): JSX.Element;
+    renderImg(): JSX.Element;
+    render(): JSX.Element;
+}
+export default Image;

package/ImageUpload/Image.js

@@ -0,0 +1,141 @@
+"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;
+      var ImageWrapper = round ? _styled.AddImageWrapperRound : _styled.AddImageWrapper;
+      return /*#__PURE__*/_react.default.createElement(ImageWrapper, {
+        "data-role": "select-image",
+        onClick: function onClick() {
+          uploadImage();
+        }
+      }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_roundAdd_photo_alternate24px.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "caption"
+      }, this.props.placeholder)));
+    }
+  }, {
+    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;
+      var imagePreviewProps = {
+        src: value ? value.src : null,
+        style: this.props.style ? this.props.style : null,
+        onClick: function onClick() {
+          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, {
+        onClick: function onClick() {
+          return removeImage(null);
+        },
+        "data-testid": "remove-image"
+      }, /*#__PURE__*/_react.default.createElement(_roundClose24px.ReactComponent, null)), typeof editImage === "function" && /*#__PURE__*/_react.default.createElement(_styled.EditImage, {
+        onClick: function onClick() {
+          return editImage(value);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_roundEdit24px.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.AddImageWrapper, {
+        "data-role": "select-image",
+        onClick: function onClick() {
+          uploadImage();
+        }
+      }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_roundAdd_photo_alternate24px.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "caption"
+      }, this.props.placeholder))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          value = _this$props3.value,
+          disabled = _this$props3.disabled,
+          containerStyle = _this$props3.containerStyle;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)({
+          disabled: disabled
+        }),
+        style: containerStyle
+      }, this.props.loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null), value && value.src ? this.renderImg() : this.renderBlank());
+    }
+  }]);
+  return Image;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(Image, "defaultProps", {
+  placeholder: "Select an image",
+  containerStyle: {
+    height: "100%"
+  }
+});
+var _default = Image;
+exports.default = _default;

package/ImageUpload/Image.js.map

@@ -0,0 +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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"}

package/ImageUpload/ImageEditorDialog.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ImageEditor } from "../ImageEditor";
+import { DialogOnClose } from "../Dialog";
+interface ImageEditorDialogProps {
+    dialogZIndex?: number;
+    onClose?: DialogOnClose;
+    open?: boolean;
+    /**
+     * We would need to drill down a lot to give correct options.
+     * TODO: figure out some other way.
+     */
+    options?: any;
+    src?: string;
+    onAccept: (src: string) => void;
+    "data-testid"?: string;
+}
+interface ImageEditorDialogState {
+    imageProcessing: boolean;
+}
+declare class ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {
+    imageEditor: React.RefObject<ImageEditor>;
+    render(): JSX.Element;
+}
+export default ImageEditorDialog;

package/ImageUpload/ImageEditorDialog.js

@@ -0,0 +1,117 @@
+"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 _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
+var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
+  width: "100vw",
+  height: "100vh",
+  ".mdc-dialog__surface": {
+    maxWidth: "100% !important",
+    maxHeight: "100% !important",
+    ".webiny-ui-dialog__content": {
+      maxWidth: "100% !important",
+      maxHeight: "100% !important",
+      width: "100vw",
+      height: "100vh",
+      paddingTop: "0 !important"
+    }
+  }
+}, "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);
+      return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, Object.assign({
+        className: imageEditorDialog,
+        style: {
+          zIndex: dialogZIndex
+        },
+        open: open
+      }, dialogProps), open && /*#__PURE__*/_react.default.createElement(_ImageEditor.ImageEditor, {
+        ref: this.imageEditor,
+        src: src,
+        options: options
+      }, function (_ref) {
+        var render = _ref.render,
+            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, {
+          disabled: true
+        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+          onClick: function onClick() {
+            var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
+            /**
+             * We are certain that ref exists.
+             */
+
+            onAccept(url);
+          }
+        }, "Save")));
+      }));
+    }
+  }]);
+  return ImageEditorDialog;
+}(_react.default.Component);
+
+var _default = ImageEditorDialog;
+exports.default = _default;

package/ImageUpload/ImageEditorDialog.js.map

@@ -0,0 +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"}

package/ImageUpload/MultiImageUpload.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { SelectedFile, FileError } from "react-butterfiles";
+import { FormComponentProps } from "../types";
+interface MultiImageUploadProps extends FormComponentProps {
+    label?: string;
+    disabled?: boolean;
+    description?: string;
+    className?: string;
+    accept?: Array<string>;
+    maxSize: string;
+    imageEditor?: Object;
+    errorMessages: {
+        maxSizeExceeded: string;
+        unsupportedFileType: string;
+        default: string;
+    };
+    cropper?: {
+        [key: string]: any;
+    };
+}
+interface State {
+    errors?: FileError[];
+    selectedImages: Record<string, any>;
+    loading: boolean;
+    imageEditor: {
+        image: SelectedFile | null;
+        open: boolean;
+        index?: number;
+    };
+}
+declare class MultiImageUpload extends React.Component<MultiImageUploadProps, State> {
+    static defaultProps: Partial<MultiImageUploadProps>;
+    state: State;
+    onChange: (value: any) => Promise<void>;
+    handleSelectedImages: (images: Array<SelectedFile>, selectedIndex?: number) => Promise<void>;
+    handleErrors: (errors: Array<FileError>) => void;
+    removeImage: (image: SelectedFile) => void;
+    render(): JSX.Element;
+}
+export { MultiImageUpload };