@webiny/ui 5.43.2 → 6.0.0-alpha.0

package/ImageEditor/ImageEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_toolbar","_classnames","_Button","_loadScript","_EMOTION_STRINGIFIED_CSS_ERROR__","toolbar","flip","filter","crop","rotate","Toolbar","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","ToolOptions","ApplyCancelActions","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","tool","src","React","createRef","props","image","Image","canvas","current","onload","width","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","_inherits2","_createClass2","key","value","componentDidMount","_this2","then","updateCanvas","setTimeout","option","autoEnable","activateTool","render","_this3","_this$props","tools","children","editor","createElement","Fragment","className","classNames","disabled","icon","renderForm","ButtonSecondary","onClick","cancelActiveTool","ButtonPrimary","applyActiveTool","style","textAlign","margin","id","maxWidth","ref","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-expect-error\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-expect-error\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: () => React.ReactNode;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: () => void;\n    onToolDeactivate?: () => void;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Alert","ImageEditor","createElement","type","variant"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface RenderPropArgs {\n    render: () => React.ReactNode;\n    getCanvasDataUrl: () => string;\n    activeTool: any;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: any[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: () => void;\n    onToolDeactivate?: () => void;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `ImageEditor` component inside the `@webiny/app-file-manager` package instead.\n */\nexport const ImageEditor = ({}: ImageEditorProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/app-file-manager` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,kBAAkB;AA4BxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGA,CAAC,CAAmB,CAAC,KAAK;EACjD,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,+FAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageEditor/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ImageEditor = require("./ImageEditor");
-Object.keys(_ImageEditor).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ImageEditor[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ImageEditor[key];
-    }
-  });
-});
+export * from "./ImageEditor";
 
 //# sourceMappingURL=index.js.map

package/ImageEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ImageEditor","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor\";\n"],"mappings":";;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,YAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor\";\n"],"mappings":"AAAA","ignoreList":[]}

package/ImageUpload/Image.d.ts

@@ -1,27 +1,20 @@
 import React from "react";
-import { BrowseFilesParams } from "react-butterfiles";
 interface ImageProps {
     uploadImage: () => void;
     removeImage?: (value: string | null) => void;
-    editImage?: (value: BrowseFilesParams | undefined) => void;
+    editImage?: (value: any | undefined) => void;
     value?: any;
     disabled?: boolean;
     loading?: boolean;
-    placeholder: string;
+    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(): React.JSX.Element;
-    renderImg(): React.JSX.Element;
-    render(): React.JSX.Element;
-}
-export default Image;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `FilePicker` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const Image: ({}: ImageProps) => React.JSX.Element;
+export {};

package/ImageUpload/Image.js

@@ -1,116 +1,14 @@
-"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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-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) {
-  function Image() {
-    (0, _classCallCheck2.default)(this, Image);
-    return (0, _callSuper2.default)(this, Image, arguments);
-  }
-  (0, _inherits2.default)(Image, _React$Component);
-  return (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());
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(Image, "defaultProps", {
-  placeholder: "Select an image",
-  containerStyle: {
-    height: "100%"
-  }
-});
-var _default = exports.default = Image;
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `FilePicker` component from the `@webiny/admin-ui` package instead.
+ */
+export const Image = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/admin-ui` package.");
+};
 
 //# sourceMappingURL=Image.js.map

package/ImageUpload/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_classnames","_roundAdd_photo_alternate24px","_roundClose24px","_roundEdit24px","_Typography","_Progress","_styled","Image","_React$Component","_classCallCheck2","default","_callSuper2","arguments","_inherits2","_createClass2","key","value","renderBlank","_this$props","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","createElement","onClick","AddImageIconWrapper","ReactComponent","Typography","use","placeholder","renderImg","_this$props2","removeImage","editImage","renderImagePreview","imagePreviewProps","src","style","width","height","imagePreview","ImagePreviewWrapper","RemoveImage","EditImage","render","_this$props3","disabled","containerStyle","className","classNames","loading","CircularProgress","React","Component","_defineProperty2","_default","exports"],"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\";\nimport { BrowseFilesParams } from \"react-butterfiles\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: (value: BrowseFilesParams | undefined) => void;\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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","ignoreList":[]}
+{"version":3,"names":["React","Alert","Image","createElement","type","variant"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: (value: any | undefined) => void;\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\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `FilePicker` component from the `@webiny/admin-ui` package instead.\n */\nexport const Image = ({}: ImageProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/admin-ui` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,kBAAkB;AAgBxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGA,CAAC,CAAa,CAAC,KAAK;EACrC,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,uFAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/ImageEditorDialog.d.ts

@@ -13,5 +13,9 @@ interface ImageEditorDialogProps {
     onAccept: (src: string) => void;
     "data-testid"?: string;
 }
-export declare const ImageEditorDialog: (props: ImageEditorDialogProps) => React.JSX.Element;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `ImageEditorDialog` component inside the `@webiny/app-file-manager` package instead.
+ */
+export declare const ImageEditorDialog: ({}: ImageEditorDialogProps) => React.JSX.Element;
 export {};

package/ImageUpload/ImageEditorDialog.js

@@ -1,82 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageEditorDialog = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(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 = (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"
-    }
-  }
-});
-var ImageEditorDialog = exports.ImageEditorDialog = function ImageEditorDialog(props) {
-  var src = props.src,
-    options = props.options,
-    onAccept = props.onAccept,
-    open = props.open,
-    dialogZIndex = props.dialogZIndex,
-    dialogProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var imageEditor = /*#__PURE__*/_react.default.createRef();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isSaving = _useState2[0],
-    setIsSaving = _useState2[1];
-  var onSave = async function onSave() {
-    try {
-      setIsSaving(true);
-      var url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : "";
-      await onAccept(url);
-    } catch (e) {
-      console.log(e);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-  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: 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(_Button.ButtonPrimary, {
-      disabled: true
-    }, "Save")) : /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      "data-testid": "dialog-accept",
-      onClick: onSave,
-      disabled: isSaving
-    }, isSaving ? "Saving..." : "Save")));
-  }));
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `ImageEditorDialog` component inside the `@webiny/app-file-manager` package instead.
+ */
+export const ImageEditorDialog = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/app-file-manager` package.");
 };
 
 //# sourceMappingURL=ImageEditorDialog.js.map

package/ImageUpload/ImageEditorDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_ImageEditor","_Tooltip","_emotion","_Dialog","_Button","_excluded","imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","exports","props","src","options","onAccept","open","dialogZIndex","dialogProps","_objectWithoutProperties2","default","imageEditor","React","createRef","_useState","useState","_useState2","_slicedToArray2","isSaving","setIsSaving","onSave","url","current","getCanvasDataUrl","e","console","log","createElement","Dialog","Object","assign","className","style","zIndex","ImageEditor","ref","_ref","render","activeTool","Fragment","DialogContent","DialogActions","DialogCancel","Tooltip","content","placement","ButtonPrimary","disabled","onClick"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React, { useState } 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    \"data-testid\"?: string;\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\nexport const ImageEditorDialog = (props: ImageEditorDialogProps) => {\n    const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = props;\n    const imageEditor = React.createRef<ImageEditor>();\n    const [isSaving, setIsSaving] = useState(false);\n\n    const onSave = async () => {\n        try {\n            setIsSaving(true);\n            const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : \"\";\n            await onAccept(url);\n        } catch (e) {\n            console.log(e);\n        } finally {\n            setIsSaving(false);\n        }\n    };\n\n    return (\n        <Dialog\n            className={imageEditorDialog}\n            style={{ zIndex: dialogZIndex }}\n            open={open}\n            {...dialogProps}\n        >\n            {open && (\n                <ImageEditor ref={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={onSave}\n                                        disabled={isSaving}\n                                    >\n                                        {isSaving ? \"Saving...\" : \"Save\"}\n                                    </ButtonPrimary>\n                                )}\n                            </DialogActions>\n                        </>\n                    )}\n                </ImageEditor>\n            )}\n        </Dialog>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Alert","ImageEditorDialog","createElement","type","variant"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { DialogOnClose } from \"../Dialog\";\nimport { Alert } from \"@webiny/admin-ui\";\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    \"data-testid\"?: string;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `ImageEditorDialog` component inside the `@webiny/app-file-manager` package instead.\n */\nexport const ImageEditorDialog = ({}: ImageEditorDialogProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/app-file-manager` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AAgBxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAC,CAAyB,CAAC,KAAK;EAC7D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,+FAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/MultiImageUpload.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { SelectedFile, FileError } from "react-butterfiles";
 import { FormComponentProps } from "../types";
 interface MultiImageUploadProps extends FormComponentProps {
     label?: string;
@@ -20,23 +19,9 @@ interface MultiImageUploadProps extends FormComponentProps {
         [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(): React.JSX.Element;
-}
-export { MultiImageUpload };
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export declare const MultiImageUpload: ({}: MultiImageUploadProps) => React.JSX.Element;
+export {};