@webiny/ui 0.0.0-mt-1

package/ImageEditor/toolbar/flip.js

@@ -0,0 +1,96 @@
+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;
+var flipped = {
+  x: 1,
+  y: 1
+};
+
+var renderForm = function renderForm() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement(ButtonDefault, {
+    onClick: function onClick() {
+      if (!cropper) {
+        return;
+      }
+
+      flipped.x = flipped.x === 1 ? -1 : 1;
+      cropper.scaleX(flipped.x);
+    }
+  }, "FlipX"), /*#__PURE__*/React.createElement(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, {
+      placement: "bottom",
+      content: "Flip"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(FlipIcon, null),
+      onClick: activateTool
+    }));
+  },
+  renderForm: renderForm,
+  cancel: function cancel() {
+    return cropper && cropper.destroy();
+  },
+  onActivate: function onActivate(_ref2) {
+    var canvas = _ref2.canvas;
+    cropper = new Cropper(canvas.current, {
+      background: false,
+      modal: false,
+      guides: false,
+      dragMode: "none",
+      highlight: false,
+      autoCrop: false
+    });
+  },
+  apply: function apply(_ref3) {
+    var canvas = _ref3.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);
+          resolve();
+        };
+
+        image.src = src;
+      }
+
+      cropper.destroy();
+    });
+  }
+};
+export default tool;

package/ImageEditor/toolbar/icons/crop.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/>
+</svg>

package/ImageEditor/toolbar/icons/draw.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/ImageEditor/toolbar/icons/filter.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
+</svg>

package/ImageEditor/toolbar/icons/flip.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/>
+</svg>

package/ImageEditor/toolbar/icons/index.d.ts

@@ -0,0 +1,8 @@
+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";

package/ImageEditor/toolbar/icons/index.js

@@ -0,0 +1,8 @@
+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";

package/ImageEditor/toolbar/icons/redo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
+</svg>

package/ImageEditor/toolbar/icons/rotateLeft.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
+</svg>

package/ImageEditor/toolbar/icons/rotateRight.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
+</svg>

package/ImageEditor/toolbar/icons/undo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
+</svg>

package/ImageEditor/toolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as crop } from "./crop";
+export { default as flip } from "./flip";
+export { default as filter } from "./filter";
+export { default as rotate } from "./rotate";

package/ImageEditor/toolbar/index.js

@@ -0,0 +1,4 @@
+export { default as crop } from "./crop";
+export { default as flip } from "./flip";
+export { default as filter } from "./filter";
+export { default as rotate } from "./rotate";

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,145 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from "react";
+import { ReactComponent as RotateRight } from "@svgr/webpack!./icons/rotateRight.svg";
+import { Slider } from "../../Slider";
+import { Tooltip } from "../../Tooltip";
+import { IconButton } from "../../Button";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+var cropper = null;
+
+var RenderForm = /*#__PURE__*/function (_React$Component) {
+  _inherits(RenderForm, _React$Component);
+
+  var _super = _createSuper(RenderForm);
+
+  function RenderForm() {
+    var _this;
+
+    _classCallCheck(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", {
+      rangeInput: 0
+    });
+
+    return _this;
+  }
+
+  _createClass(RenderForm, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: "500px",
+          margin: "0 auto"
+        }
+      }, /*#__PURE__*/React.createElement(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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.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.Component);
+
+var tool = {
+  name: "rotate",
+  icon: function icon(_ref2) {
+    var activateTool = _ref2.activateTool;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "bottom",
+      content: "Rotate"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(RotateRight, null),
+      onClick: activateTool
+    }));
+  },
+  renderForm: function renderForm(props) {
+    return /*#__PURE__*/React.createElement(RenderForm, props);
+  },
+  onActivate: function onActivate(_ref3) {
+    var canvas = _ref3.canvas;
+    cropper = new Cropper(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();
+    });
+  }
+};
+export default tool;

package/ImageEditor/toolbar/types.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+interface RenderFormParams {
+    canvas: any;
+    renderApplyCancel: Function;
+    options?: {
+        [key: string]: any;
+    };
+}
+export interface ImageEditorTool {
+    name: string;
+    apply?: Function;
+    cancel?: Function;
+    onActivate?: ({ options, canvas }: {
+        options: any;
+        canvas: any;
+    }) => void;
+    icon: ({ activateTool: Function }: {
+        activateTool: any;
+    }) => React.ReactElement<any>;
+    renderForm?: (params: RenderFormParams) => React.ReactNode;
+}
+export {};

package/ImageEditor/toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/ImageUpload/Image.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+declare type Props = {
+    uploadImage: Function;
+    removeImage?: Function;
+    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<Props> {
+    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,119 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import classNames from "classnames";
+import { ReactComponent as AddImageIcon } from "@svgr/webpack!./icons/round-add_photo_alternate-24px.svg";
+import { ReactComponent as RemoveImageIcon } from "@svgr/webpack!./icons/round-close-24px.svg";
+import { ReactComponent as EditImageIcon } from "@svgr/webpack!./icons/round-edit-24px.svg";
+import { Typography } from "../Typography";
+import { CircularProgress } from "../Progress";
+import { AddImageIconWrapper, AddImageWrapper, AddImageWrapperRound, EditImage, ImagePreviewWrapper, RemoveImage } from "./styled";
+
+var Image = /*#__PURE__*/function (_React$Component) {
+  _inherits(Image, _React$Component);
+
+  var _super = _createSuper(Image);
+
+  function Image() {
+    _classCallCheck(this, Image);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Image, [{
+    key: "renderBlank",
+    value: function renderBlank() {
+      var _this$props = this.props,
+          uploadImage = _this$props.uploadImage,
+          round = _this$props.round;
+      var ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;
+      return /*#__PURE__*/React.createElement(ImageWrapper, {
+        "data-role": "select-image",
+        onClick: function onClick() {
+          uploadImage();
+        }
+      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddImageIcon, null), /*#__PURE__*/React.createElement(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.createElement("img", imagePreviewProps);
+      }
+
+      return /*#__PURE__*/React.createElement(ImagePreviewWrapper, null, imagePreview, typeof removeImage === "function" && /*#__PURE__*/React.createElement(RemoveImage, {
+        onClick: function onClick() {
+          return removeImage(null);
+        }
+      }, /*#__PURE__*/React.createElement(RemoveImageIcon, null)), typeof editImage === "function" && /*#__PURE__*/React.createElement(EditImage, {
+        onClick: function onClick() {
+          return editImage(value);
+        }
+      }, /*#__PURE__*/React.createElement(EditImageIcon, null)), /*#__PURE__*/React.createElement(AddImageWrapper, {
+        "data-role": "select-image",
+        onClick: function onClick() {
+          uploadImage();
+        }
+      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddImageIcon, null), /*#__PURE__*/React.createElement(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.createElement("div", {
+        className: classNames({
+          disabled: disabled
+        }),
+        style: containerStyle
+      }, this.props.loading && /*#__PURE__*/React.createElement(CircularProgress, null), value && value.src ? this.renderImg() : this.renderBlank());
+    }
+  }]);
+
+  return Image;
+}(React.Component);
+
+_defineProperty(Image, "defaultProps", {
+  placeholder: "Select an image",
+  containerStyle: {
+    height: "100%"
+  }
+});
+
+export default Image;

package/ImageUpload/ImageEditorDialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { ImageEditor } from "../ImageEditor";
+import { DialogOnClose } from "../Dialog";
+declare type Props = {
+    dialogZIndex?: number;
+    onClose?: DialogOnClose;
+    open?: boolean;
+    options?: Object;
+    src?: string;
+    onAccept: (src: string) => void;
+    "data-testid"?: string;
+};
+declare class ImageEditorDialog extends React.Component<Props, {
+    imageProcessing: boolean;
+}> {
+    imageEditor: React.RefObject<ImageEditor>;
+    render(): JSX.Element;
+}
+export default ImageEditorDialog;

package/ImageUpload/ImageEditorDialog.js

@@ -0,0 +1,94 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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";
+var _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
+import * as React from "react";
+import { ImageEditor } from "../ImageEditor";
+import { Tooltip } from "../Tooltip";
+import { css } from "emotion";
+import { Dialog, DialogAccept, DialogCancel, DialogActions, DialogContent } from "../Dialog";
+var imageEditorDialog = /*#__PURE__*/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) {
+  _inherits(ImageEditorDialog, _React$Component);
+
+  var _super = _createSuper(ImageEditorDialog);
+
+  function ImageEditorDialog() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "imageEditor", /*#__PURE__*/React.createRef());
+
+    return _this;
+  }
+
+  _createClass(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 = _objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+        className: imageEditorDialog,
+        style: {
+          zIndex: dialogZIndex
+        },
+        open: open
+      }, dialogProps), open && /*#__PURE__*/React.createElement(ImageEditor, {
+        ref: this.imageEditor,
+        src: src,
+        options: options
+      }, function (_ref) {
+        var render = _ref.render,
+            activeTool = _ref.activeTool;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContent, null, render()), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, null, "Cancel"), activeTool ? /*#__PURE__*/React.createElement(Tooltip, {
+          content: "Please close currently active tool.",
+          placement: "top"
+        }, /*#__PURE__*/React.createElement(DialogAccept, {
+          disabled: true
+        }, "Save")) : /*#__PURE__*/React.createElement(DialogAccept, {
+          onClick: function onClick() {
+            return onAccept(_this2.imageEditor.current.getCanvasDataUrl());
+          }
+        }, "Save")));
+      }));
+    }
+  }]);
+
+  return ImageEditorDialog;
+}(React.Component);
+
+export default ImageEditorDialog;

package/ImageUpload/MultiImageUpload.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { SelectedFile, FileError } from "react-butterfiles";
+import { FormComponentProps } from "../types";
+declare type Props = 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;
+    };
+};
+declare type State = {
+    errors?: FileError[];
+    selectedImages: Object;
+    loading: boolean;
+    imageEditor: {
+        image?: SelectedFile;
+        open: boolean;
+        index?: number;
+    };
+};
+declare class MultiImageUpload extends React.Component<Props, State> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+        accept: string[];
+        maxSize: string;
+        imageEditor: {};
+        errorMessages: {
+            maxSizeExceeded: string;
+            unsupportedFileType: string;
+            default: string;
+        };
+    };
+    state: {
+        errors: any;
+        selectedImages: {};
+        loading: boolean;
+        imageEditor: {
+            open: boolean;
+            image: any;
+            index: any;
+        };
+    };
+    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 };