@webiny/ui 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/ImageUpload/SingleImageUpload.js

@@ -1,46 +1,27 @@
 "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"
@@ -62,21 +43,15 @@ var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
 });
 // Do not apply editing for following image types.
 var noImageEditingTypes = ["image/svg+xml", "image/gif"];
-
 var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(SingleImageUpload, _React$Component);
-
   var _super = (0, _createSuper2.default)(SingleImageUpload);
-
   function SingleImageUpload() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       loading: false,
@@ -88,15 +63,14 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
     });
     (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 () {
@@ -114,50 +88,42 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleErrors", function (errors) {
       var _errors = (0, _slicedToArray2.default)(errors, 1),
-          error = _errors[0];
-
+        error = _errors[0];
       _this.setState({
         error: error
       });
     });
     return _this;
   }
-
   (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 && this.state.imageEditor.image.src) {
         imageEditorImageSrc = this.state.imageEditor.image.src;
       }
-
       var src = value ? value.src : null;
       var errorType = this.state.error ? this.state.error.type : null;
-
       var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
+        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", {
@@ -179,34 +145,28 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
               loading: true
             }, /*#__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;
-                        break;
-                      }
-
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.t0 = onChange;
+                    if (!_context.t0) {
                       _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();
-                  }
+                      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);
             })));
@@ -220,7 +180,7 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
         onError: this.handleErrors
       }, function (_ref3) {
         var browseFiles = _ref3.browseFiles,
-            getDropZoneProps = _ref3.getDropZoneProps;
+          getDropZoneProps = _ref3.getDropZoneProps;
         return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps(), /*#__PURE__*/_react.default.createElement(_Image.default, {
           renderImagePreview: renderImagePreview,
           loading: _this2.state.loading,
@@ -238,7 +198,6 @@ var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
   }]);
   return SingleImageUpload;
 }(_react.default.Component);
-
 exports.SingleImageUpload = SingleImageUpload;
 (0, _defineProperty2.default)(SingleImageUpload, "defaultProps", {
   maxSize: "10mb",

package/ImageUpload/SingleImageUpload.js.map

@@ -1 +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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"}
+{"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,21 +1,13 @@
 "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 = {

package/ImageUpload/SingleImageUpload.stories.js.map

@@ -1 +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"}
+{"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"}

package/ImageUpload/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,11 +28,7 @@ Object.defineProperty(exports, "SingleImageUpload", {
     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

@@ -1 +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"}
+{"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"}

package/ImageUpload/styled.d.ts

@@ -1,21 +1,31 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const AddImageIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapperRound: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
+/// <reference types="web" />
+export declare const AddImageIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddImageWrapperRound: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
 } & {
-    children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
-export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const EditImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const ImagePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const RemoveImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EditImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImagePreviewWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ImageUpload/styled.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RemoveImage = exports.ImagePreviewWrapper = exports.EditImage = exports.AddImageWrapperRound = exports.AddImageWrapper = exports.AddImageIconWrapper = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _styled2 = _interopRequireDefault(require("@emotion/styled"));
-
 var _hover, _styled;
-
 var AddImageIconWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq0",
   label: "AddImageIconWrapper"

package/ImageUpload/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["AddImageIconWrapper","styled","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}
+{"version":3,"names":["AddImageIconWrapper","styled","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}

package/Input/Input.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { TextFieldProps } from "@rmwc/textfield";
 import { FormComponentProps } from "../types";
 import { ReactElement } from "react";
-export declare type InputProps = FormComponentProps & TextFieldProps & {
+export declare type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
     autoComplete?: string;
     rawOnChange?: boolean;
     autoFocus?: boolean;
@@ -17,14 +17,4 @@ export declare type InputProps = FormComponentProps & TextFieldProps & {
     className?: string;
     "data-testid"?: string;
 };
-/**
- * Use Input component to store short string values, like first name, last name, e-mail etc.
- * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
- */
-export declare class Input extends React.Component<InputProps> {
-    static defaultProps: InputProps;
-    static rmwcProps: string[];
-    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
-    onBlur: (e: React.SyntheticEvent<HTMLInputElement>) => Promise<void>;
-    render(): JSX.Element;
-}
+export declare const Input: React.FC<InputProps>;