@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb

package/ImageUpload/SingleImageUpload.js

@@ -1,21 +1,47 @@
-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 +62,23 @@ 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,8 +86,7 @@ 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;
@@ -87,20 +112,18 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function (errors) {
-      var _errors = _slicedToArray(errors, 1),
+    (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;
@@ -119,16 +142,27 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
           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,8 +177,8 @@ 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) {
+            }, /*#__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:
@@ -156,7 +190,7 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
                       }
 
                       _context.next = 4;
-                      return onChange(_objectSpread(_objectSpread({}, _this2.state.imageEditor.image), {}, {
+                      return onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
                         src: src
                       }));
 
@@ -178,38 +212,35 @@ export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
             })));
           });
         }
-      }), /*#__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);
+}(_react.default.Component);
 
-_defineProperty(SingleImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
+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,23 @@
-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 +26,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,iBAAA,EAAU,wBAAV,EAAoCC,MAApC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEA,IAAMC,KAAK,GAAG;EACVC,EAAE,EAAE,CADM;EAEVC,IAAI,EAAE,eAFI;EAGVC,GAAG,EAAE,iCAHK;EAIVC,IAAI,EAAE,YAJI;EAKVC,IAAI,EAAE;AALI,CAAd;AAQAV,KAAK,CAACW,GAAN,CACI,qBADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAZ;EAAZ,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEV,KAAK,EAALA;IAAF;EAAZ,GACK;IAAA,IAAGW,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,oCAAD;MACI,KAAK,EAAC,iCADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,WAAW,EAAC;IAHhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,CADJ,eAgBI,6BAAC,uBAAD,wDAEkBK,IAAI,CAACC,SAAL,CAAe;IAAEb,KAAK,EAAEA;EAAT,CAAf,CAFlB,mkBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oCAAD;EAAd;AAAR,CA3CJ"}

package/ImageUpload/index.js

@@ -1,4 +1,39 @@
-export { SingleImageUpload } from "./SingleImageUpload";
-export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
-export { default as ImageEditorDialog } from "./ImageEditorDialog";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function get() {
+    return _Image.default;
+  }
+});
+Object.defineProperty(exports, "ImageEditorDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ImageEditorDialog.default;
+  }
+});
+Object.defineProperty(exports, "MultiImageUpload", {
+  enumerable: true,
+  get: function get() {
+    return _MultiImageUpload.MultiImageUpload;
+  }
+});
+Object.defineProperty(exports, "SingleImageUpload", {
+  enumerable: true,
+  get: function get() {
+    return _SingleImageUpload.SingleImageUpload;
+  }
+});
+
+var _SingleImageUpload = require("./SingleImageUpload");
+
+var _MultiImageUpload = require("./MultiImageUpload");
+
+var _Image = _interopRequireDefault(require("./Image"));
+
+var _ImageEditorDialog = _interopRequireDefault(require("./ImageEditorDialog"));

package/ImageUpload/index.js.map

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