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

package/ImageUpload/MultiImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","props","onChange","validate","images","selectedIndex","setState","i","length","newValue","Array","isArray","convertedImages","push","src","base64","name","size","type","splice","indexOf","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","validationIsValid","isValid","validationMessage","message","classNames","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","React","Component","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-ignore\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":"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"}

package/ImageUpload/MultiImageUpload.stories.js

@@ -1,12 +1,15 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { MultiImageUpload } from "./MultiImageUpload";
-var story = storiesOf("Components/ImageUpload", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _addonKnobs = require("@storybook/addon-knobs");
+var _README = _interopRequireDefault(require("./README.md"));
+var _form = require("@webiny/form");
+var _MultiImageUpload = require("./MultiImageUpload");
+var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
+story.addDecorator(_addonKnobs.withKnobs);
 var images = [{
   id: 1,
   name: "1st_image.jpg",
@@ -39,16 +42,16 @@ var images = [{
   size: 905615
 }];
 story.add("Multi Image Upload", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Form, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       images: images
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "images"
-    }, /*#__PURE__*/React.createElement(MultiImageUpload, {
+    }, /*#__PURE__*/_react.default.createElement(_MultiImageUpload.MultiImageUpload, {
       label: "Your previously uploaded images:",
       disabled: disabled,
       description: "This list will not be shown to other users.",
@@ -56,11 +59,11 @@ story.add("Multi Image Upload", function () {
         aspectRatio: 1
       }
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
     images: images
   }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
 }, {
   info: {
-    propTables: [MultiImageUpload]
+    propTables: [_MultiImageUpload.MultiImageUpload]
   }
 });

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","images","id","name","src","type","size","add","disabled","boolean","readme","Bind","aspectRatio","JSON","stringify","info","propTables","MultiImageUpload"],"sources":["MultiImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,CACJ;AAEDV,KAAK,CAACW,GAAG,CACL,oBAAoB,EACpB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAET,MAAM,EAANA;IAAO;EAAE,GAClB;IAAA,IAAGU,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAQ,gBACf,6BAAC,kCAAgB;MACb,KAAK,EAAC,kCAAkC;MACxC,QAAQ,EAAEH,QAAS;MACnB,WAAW,EAAC,6CAA6C;MACzD,OAAO,EAAE;QACLI,WAAW,EAAE;MACjB;IAAE,EACJ,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,wDAECC,IAAI,CAACC,SAAS,CAAC;IAAEb,MAAM,EAAEA;EAAO,CAAC,CAAC,okBAYjC,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kCAAgB;EAAE;AAAE,CAAC,CAC/C"}

package/ImageUpload/SingleImageUpload.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 import { SelectedFile, FileError } from "react-butterfiles";
-declare type Props = FormComponentProps & {
+interface SingleImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
@@ -18,45 +18,24 @@ declare type Props = FormComponentProps & {
         multipleNotAllowed: string;
         multipleMaxSizeExceeded: string;
     };
-};
-declare type State = {
+}
+interface StateImage {
+    name: string;
+    type: string;
+    size: number;
+    src?: string;
+}
+interface State {
     loading: boolean;
-    error?: FileError;
+    error: FileError | null;
     imageEditor: {
-        image?: {
-            name: string;
-            type: string;
-            size: number;
-            src?: string;
-        };
+        image: StateImage | null;
         open: boolean;
     };
-};
-export declare class SingleImageUpload extends React.Component<Props, State> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        maxSize: string;
-        imageEditor: {};
-        accept: string[];
-        showRemoveImageButton: boolean;
-        errorMessages: {
-            maxSizeExceeded: string;
-            multipleMaxSizeExceeded: string;
-            multipleNotAllowed: string;
-            unsupportedFileType: string;
-            default: string;
-        };
-    };
-    state: {
-        loading: boolean;
-        error: any;
-        imageEditor: {
-            open: boolean;
-            image: any;
-        };
-    };
+}
+export declare class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {
+    static defaultProps: Partial<SingleImageUploadProps>;
+    state: State;
     handleFiles: (images: SelectedFile[]) => void;
     handleErrors: (errors: FileError[]) => void;
     render(): JSX.Element;

package/ImageUpload/SingleImageUpload.js

@@ -1,21 +1,28 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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 * as React from "react";
-import BrowseFiles from "react-butterfiles";
-import { FormElementMessage } from "../FormElementMessage";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import Image from "./Image";
-import ImageEditorDialog from "./ImageEditorDialog";
-var ImageUploadWrapper = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleImageUpload = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
+var _FormElementMessage = require("../FormElementMessage");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Image = _interopRequireDefault(require("./Image"));
+var _ImageEditorDialog = _interopRequireDefault(require("./ImageEditorDialog"));
+var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e96x95k0",
   label: "ImageUploadWrapper"
 })({
@@ -36,23 +43,17 @@ var ImageUploadWrapper = /*#__PURE__*/styled("div", {
 });
 // Do not apply editing for following image types.
 var noImageEditingTypes = ["image/svg+xml", "image/gif"];
-export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  _inherits(SingleImageUpload, _React$Component);
-
-  var _super = _createSuper(SingleImageUpload);
-
+var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(SingleImageUpload, _React$Component);
+  var _super = (0, _createSuper2.default)(SingleImageUpload);
   function SingleImageUpload() {
     var _this;
-
-    _classCallCheck(this, SingleImageUpload);
-
+    (0, _classCallCheck2.default)(this, SingleImageUpload);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       loading: false,
       error: null,
       imageEditor: {
@@ -60,18 +61,16 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         image: null
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFiles", function (images) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFiles", function (images) {
       var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          imageEditor = _this$props.imageEditor;
+        onChange = _this$props.onChange,
+        imageEditor = _this$props.imageEditor;
       var image = {
         name: images[0].name,
         type: images[0].type,
         size: images[0].size,
         src: images[0].src.base64
       };
-
       _this.setState({
         error: null
       }, function () {
@@ -87,48 +86,49 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function (errors) {
-      var _errors = _slicedToArray(errors, 1),
-          error = _errors[0];
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleErrors", function (errors) {
+      var _errors = (0, _slicedToArray2.default)(errors, 1),
+        error = _errors[0];
       _this.setState({
         error: error
       });
     });
-
     return _this;
   }
-
-  _createClass(SingleImageUpload, [{
+  (0, _createClass2.default)(SingleImageUpload, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props2 = this.props,
-          className = _this$props2.className,
-          value = _this$props2.value,
-          validation = _this$props2.validation,
-          label = _this$props2.label,
-          description = _this$props2.description,
-          accept = _this$props2.accept,
-          maxSize = _this$props2.maxSize,
-          onChange = _this$props2.onChange,
-          imageEditor = _this$props2.imageEditor,
-          showRemoveImageButton = _this$props2.showRemoveImageButton,
-          renderImagePreview = _this$props2.renderImagePreview;
+        className = _this$props2.className,
+        value = _this$props2.value,
+        validation = _this$props2.validation,
+        label = _this$props2.label,
+        description = _this$props2.description,
+        accept = _this$props2.accept,
+        maxSize = _this$props2.maxSize,
+        onChange = _this$props2.onChange,
+        imageEditor = _this$props2.imageEditor,
+        showRemoveImageButton = _this$props2.showRemoveImageButton,
+        renderImagePreview = _this$props2.renderImagePreview;
       var imageEditorImageSrc = "";
-
-      if (this.state.imageEditor.image) {
+      if (this.state.imageEditor.image && this.state.imageEditor.image.src) {
         imageEditorImageSrc = this.state.imageEditor.image.src;
       }
-
       var src = value ? value.src : null;
-      return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-        className: classNames(className)
-      }, label && !src && /*#__PURE__*/React.createElement("div", {
+      var errorType = this.state.error ? this.state.error.type : null;
+      var _ref = validation || {},
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
+      /**
+       * accept can be safely cast because of default value
+       * errorType as keyof Props["errorMessages"] can be safely
+       */
+      return /*#__PURE__*/_react.default.createElement(ImageUploadWrapper, {
+        className: (0, _classnames.default)(className)
+      }, label && !src && /*#__PURE__*/_react.default.createElement("div", {
         className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/React.createElement(ImageEditorDialog, {
+      }, label), /*#__PURE__*/_react.default.createElement(_ImageEditorDialog.default, {
         options: imageEditor,
         open: this.state.imageEditor.open,
         src: imageEditorImageSrc,
@@ -143,73 +143,63 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
           setTimeout(function () {
             _this2.setState({
               loading: true
-            }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) {
-                  switch (_context.prev = _context.next) {
-                    case 0:
-                      _context.t0 = onChange;
-
-                      if (!_context.t0) {
-                        _context.next = 4;
-                        break;
-                      }
-
+            }, /*#__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:
+                    _context.t0 = onChange;
+                    if (!_context.t0) {
                       _context.next = 4;
-                      return onChange(_objectSpread(_objectSpread({}, _this2.state.imageEditor.image), {}, {
-                        src: src
-                      }));
-
-                    case 4:
-                      _this2.setState({
-                        loading: false,
-                        imageEditor: {
-                          image: null,
-                          open: false
-                        }
-                      });
-
-                    case 5:
-                    case "end":
-                      return _context.stop();
-                  }
+                      break;
+                    }
+                    _context.next = 4;
+                    return onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
+                      src: src
+                    }));
+                  case 4:
+                    _this2.setState({
+                      loading: false,
+                      imageEditor: {
+                        image: null,
+                        open: false
+                      }
+                    });
+                  case 5:
+                  case "end":
+                    return _context.stop();
                 }
               }, _callee);
             })));
           });
         }
-      }), /*#__PURE__*/React.createElement(BrowseFiles, {
+      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
         accept: accept,
         maxSize: maxSize,
         convertToBase64: true,
         onSuccess: this.handleFiles,
         onError: this.handleErrors
-      }, function (_ref2) {
-        var browseFiles = _ref2.browseFiles,
-            getDropZoneProps = _ref2.getDropZoneProps;
-        return /*#__PURE__*/React.createElement("div", getDropZoneProps(), /*#__PURE__*/React.createElement(Image, {
+      }, function (_ref3) {
+        var browseFiles = _ref3.browseFiles,
+          getDropZoneProps = _ref3.getDropZoneProps;
+        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps(), /*#__PURE__*/_react.default.createElement(_Image.default, {
           renderImagePreview: renderImagePreview,
           loading: _this2.state.loading,
           value: value,
-          removeImage: showRemoveImageButton ? onChange : null,
+          removeImage: showRemoveImageButton ? onChange : undefined,
           uploadImage: browseFiles,
           editImage: browseFiles
         }));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), this.state.error && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), this.state.error && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, this.props.errorMessages[this.state.error.type] || this.props.errorMessages.default));
+      }, this.props.errorMessages[errorType] || this.props.errorMessages.default));
     }
   }]);
-
   return SingleImageUpload;
-}(React.Component);
-
-_defineProperty(SingleImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
+}(_react.default.Component);
+exports.SingleImageUpload = SingleImageUpload;
+(0, _defineProperty2.default)(SingleImageUpload, "defaultProps", {
   maxSize: "10mb",
   imageEditor: {},
   accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],

package/ImageUpload/SingleImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","loading","error","imageEditor","open","image","images","props","onChange","name","type","size","src","base64","setState","includes","errors","className","value","validation","label","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","validationIsValid","isValid","validationMessage","message","classNames","setTimeout","handleFiles","handleErrors","browseFiles","getDropZoneProps","undefined","errorMessages","default","React","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"],"mappings":"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"}

package/ImageUpload/SingleImageUpload.stories.js

@@ -1,12 +1,15 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { SingleImageUpload } from "./SingleImageUpload";
-var story = storiesOf("Components/ImageUpload", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _addonKnobs = require("@storybook/addon-knobs");
+var _README = _interopRequireDefault(require("./README.md"));
+var _form = require("@webiny/form");
+var _SingleImageUpload = require("./SingleImageUpload");
+var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
+story.addDecorator(_addonKnobs.withKnobs);
 var image = {
   id: 1,
   name: "1st_image.jpg",
@@ -15,29 +18,29 @@ var image = {
   size: 901611
 };
 story.add("Single Image Upload", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement("div", {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: 200
     }
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       image: image
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "image"
-    }, /*#__PURE__*/React.createElement(SingleImageUpload, {
+    }, /*#__PURE__*/_react.default.createElement(_SingleImageUpload.SingleImageUpload, {
       label: "Your previously uploaded image:",
       disabled: disabled,
       description: "Image will be publicly visible."
     }));
-  }))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
+  }))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
     image: image
   }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
 }, {
   info: {
-    propTables: [SingleImageUpload]
+    propTables: [_SingleImageUpload.SingleImageUpload]
   }
 });

package/ImageUpload/SingleImageUpload.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","image","id","name","src","type","size","add","disabled","boolean","readme","maxWidth","Bind","JSON","stringify","info","propTables","SingleImageUpload"],"sources":["SingleImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { SingleImageUpload } from \"./SingleImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst image = {\n    id: 1,\n    name: \"1st_image.jpg\",\n    src: \"http://i.pravatar.cc/150?img=49\",\n    type: \"image/jpeg\",\n    size: 901611\n};\n\nstory.add(\n    \"Single Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <div style={{ maxWidth: 200 }}>\n                            <Form data={{ image }}>\n                                {({ Bind }) => (\n                                    <Bind name=\"image\">\n                                        <SingleImageUpload\n                                            label=\"Your previously uploaded image:\"\n                                            disabled={disabled}\n                                            description=\"Image will be publicly visible.\"\n                                        />\n                                    </Bind>\n                                )}\n                            </Form>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ image: image })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [SingleImageUpload] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,KAAK,GAAG;EACVC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC;AAEDV,KAAK,CAACW,GAAG,CACL,qBAAqB,EACrB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAC1B,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEV,KAAK,EAALA;IAAM;EAAE,GACjB;IAAA,IAAGW,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAO,gBACd,6BAAC,oCAAiB;MACd,KAAK,EAAC,iCAAiC;MACvC,QAAQ,EAAEJ,QAAS;MACnB,WAAW,EAAC;IAAiC,EAC/C,CACC;EAAA,CACV,CACE,CACL,CACY,eACtB,6BAAC,uBAAgB,wDAECK,IAAI,CAACC,SAAS,CAAC;IAAEb,KAAK,EAAEA;EAAM,CAAC,CAAC,mkBAY/B,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oCAAiB;EAAE;AAAE,CAAC,CAChD"}