@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/ImageUpload/SingleImageUpload.js

@@ -0,0 +1,255 @@
+"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"
+})({
+  position: "relative",
+  ".disabled": {
+    opacity: 0.75,
+    pointerEvents: "none"
+  },
+  ".mdc-floating-label--float-above": {
+    transform: "scale(0.75)",
+    top: 10,
+    left: 10,
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  },
+  ".mdc-text-field-helper-text": {
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  }
+});
+// 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,
+      error: null,
+      imageEditor: {
+        open: false,
+        image: null
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFiles", function (images) {
+      var _this$props = _this.props,
+          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 () {
+        if (imageEditor && !noImageEditingTypes.includes(image.type)) {
+          _this.setState({
+            imageEditor: {
+              image: image,
+              open: true
+            }
+          });
+        } else {
+          onChange && onChange(image);
+        }
+      });
+    });
+    (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;
+  }
+
+  (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;
+      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;
+      /**
+       * 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.default.createElement(_ImageEditorDialog.default, {
+        options: imageEditor,
+        open: this.state.imageEditor.open,
+        src: imageEditorImageSrc,
+        onClose: function onClose() {
+          _this2.setState(function (state) {
+            state.imageEditor.open = false;
+            return state;
+          });
+        },
+        onAccept: function onAccept(src) {
+          // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
+          setTimeout(function () {
+            _this2.setState({
+              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;
+                      }
+
+                      _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.default.createElement(_reactButterfiles.default, {
+        accept: accept,
+        maxSize: maxSize,
+        convertToBase64: true,
+        onSuccess: this.handleFiles,
+        onError: this.handleErrors
+      }, 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 : undefined,
+          uploadImage: browseFiles,
+          editImage: browseFiles
+        }));
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+        error: true
+      }, 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[errorType] || this.props.errorMessages.default));
+    }
+  }]);
+  return SingleImageUpload;
+}(_react.default.Component);
+
+exports.SingleImageUpload = SingleImageUpload;
+(0, _defineProperty2.default)(SingleImageUpload, "defaultProps", {
+  maxSize: "10mb",
+  imageEditor: {},
+  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
+  showRemoveImageButton: true,
+  errorMessages: {
+    maxSizeExceeded: "Max size exceeded.",
+    multipleMaxSizeExceeded: "Selected fields exceed max file size.",
+    multipleNotAllowed: "Multiple selection not allowed.",
+    unsupportedFileType: "Unsupported file type.",
+    default: "An error occurred."
+  }
+});

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.d.ts

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

package/ImageUpload/SingleImageUpload.stories.js

@@ -0,0 +1,54 @@
+"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",
+  src: "http://i.pravatar.cc/150?img=49",
+  type: "image/jpeg",
+  size: 901611
+};
+story.add("Single Image Upload", function () {
+  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.default.createElement(_form.Form, {
+    data: {
+      image: image
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "image"
+    }, /*#__PURE__*/_react.default.createElement(_SingleImageUpload.SingleImageUpload, {
+      label: "Your previously uploaded image:",
+      disabled: disabled,
+      description: "Image will be publicly visible."
+    }));
+  }))), /*#__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.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/icons/round-add_photo_alternate-24px.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_7">
+	</g>
+	<g>
+		<path fill="currentColor" d="M21.02,5H19V2.98C19,2.44,18.56,2,18.02,2h-0.03C17.44,2,17,2.44,17,2.98V5h-2.01C14.45,5,14.01,5.44,14,5.98
+			c0,0.01,0,0.02,0,0.03C14,6.56,14.44,7,14.99,7H17v2.01c0,0.54,0.44,0.99,0.99,0.98c0.01,0,0.02,0,0.03,0
+			c0.54,0,0.98-0.44,0.98-0.98V7h2.02C21.56,7,22,6.56,22,6.02V5.98C22,5.44,21.56,5,21.02,5z"/>
+		<path fill="currentColor" d="M16,9.01V8h-1.01c-0.53,0-1.03-0.21-1.41-0.58C13.21,7.04,13,6.54,13,5.98c0-0.36,0.1-0.69,0.27-0.98H5C3.9,5,3,5.9,3,7
+			v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-8.28c-0.3,0.17-0.64,0.28-1.02,0.28C16.89,10.99,16,10.1,16,9.01z M15.96,19H6
+			c-0.41,0-0.65-0.47-0.4-0.8l1.98-2.63c0.21-0.28,0.62-0.26,0.82,0.02L10,18l2.61-3.48c0.2-0.26,0.59-0.27,0.79-0.01l2.95,3.68
+			C16.61,18.52,16.38,19,15.96,19z"/>
+	</g>
+</g>
+</svg>

package/ImageUpload/icons/round-close-24px.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<path fill="currentColor" d="M18.3,5.71L18.3,5.71c-0.39-0.39-1.02-0.39-1.41,0L12,10.59L7.11,5.7c-0.39-0.39-1.02-0.39-1.41,0l0,0
+		c-0.39,0.39-0.39,1.02,0,1.41L10.59,12L5.7,16.89c-0.39,0.39-0.39,1.02,0,1.41h0c0.39,0.39,1.02,0.39,1.41,0L12,13.41l4.89,4.89
+		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L13.41,12l4.89-4.89C18.68,6.73,18.68,6.09,18.3,5.71z"/>
+</g>
+</svg>

package/ImageUpload/icons/round-edit-24px.svg

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

package/ImageUpload/index.d.ts

@@ -0,0 +1,4 @@
+export { SingleImageUpload } from "./SingleImageUpload";
+export { MultiImageUpload } from "./MultiImageUpload";
+export { default as Image } from "./Image";
+export { default as ImageEditorDialog } from "./ImageEditorDialog";

package/ImageUpload/index.js

@@ -0,0 +1,39 @@
+"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"}

package/ImageUpload/styled.d.ts

@@ -0,0 +1,21 @@
+/// <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;
+} & {
+    children?: import("react").ReactNode;
+}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    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" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, 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>;

package/ImageUpload/styled.js

@@ -0,0 +1,136 @@
+"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"
+})({
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  ">svg": {
+    width: "100%",
+    height: "100%",
+    maxWidth: 50,
+    maxHeight: 50,
+    display: "block",
+    opacity: 0.5,
+    margin: "0 auto"
+  }
+});
+exports.AddImageIconWrapper = AddImageIconWrapper;
+var AddImageWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
+  target: "e1engwcq1",
+  label: "AddImageWrapper"
+})({
+  width: "100%",
+  height: "100%",
+  minHeight: 50,
+  minWidth: 50,
+  textAlign: "center",
+  backgroundColor: "var(--mdc-theme-on-background)",
+  borderRadius: 0,
+  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  flexDirection: "column",
+  transition: "color 0.2s",
+  cursor: "pointer",
+  padding: 10,
+  boxSizing: "border-box",
+  "&:hover": {
+    backgroundColor: "rgba(0,0,0, 0.5)",
+    borderBottom: "1px solid var(--mdc-theme-on-surface)"
+  }
+});
+exports.AddImageWrapper = AddImageWrapper;
+var AddImageWrapperRound = /*#__PURE__*/(0, _styled2.default)(AddImageWrapper, {
+  target: "e1engwcq2",
+  label: "AddImageWrapperRound"
+})({
+  margin: "auto",
+  width: "150px",
+  height: "150px",
+  borderRadius: "50%"
+});
+exports.AddImageWrapperRound = AddImageWrapperRound;
+var RemoveImage = /*#__PURE__*/(0, _styled2.default)("div", {
+  target: "e1engwcq3",
+  label: "RemoveImage"
+})({
+  position: "absolute",
+  cursor: "pointer",
+  top: 10,
+  right: 10,
+  display: "none",
+  color: "white",
+  opacity: 0.5,
+  "&:hover": {
+    opacity: 0.75
+  }
+});
+exports.RemoveImage = RemoveImage;
+var EditImage = /*#__PURE__*/(0, _styled2.default)("div", {
+  target: "e1engwcq4",
+  label: "EditImage"
+})({
+  position: "absolute",
+  cursor: "pointer",
+  top: 10,
+  left: 10,
+  display: "none",
+  color: "white",
+  opacity: 0.5,
+  "&:hover": {
+    opacity: 0.75
+  }
+});
+exports.EditImage = EditImage;
+var ImagePreviewWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
+  target: "e1engwcq5",
+  label: "ImagePreviewWrapper"
+})((_styled = {
+  width: "100%",
+  height: "100%",
+  minHeight: 50,
+  minWidth: 50,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  flexDirection: "column",
+  boxSizing: "border-box",
+  position: "relative"
+}, (0, _defineProperty2.default)(_styled, AddImageWrapper, (0, _defineProperty2.default)({
+  position: "absolute",
+  display: "none",
+  top: 0,
+  height: "100%",
+  zIndex: 1,
+  backgroundColor: "rgba(0,0,0, 0.75)"
+}, AddImageIconWrapper, {
+  top: "50%",
+  left: "50%",
+  transform: "translateY(-50%) translateX(-50%)",
+  position: "absolute",
+  color: "white"
+})), (0, _defineProperty2.default)(_styled, "&:hover", (_hover = {}, (0, _defineProperty2.default)(_hover, AddImageWrapper, {
+  display: "block"
+}), (0, _defineProperty2.default)(_hover, RemoveImage, {
+  display: "block",
+  zIndex: 2
+}), (0, _defineProperty2.default)(_hover, EditImage, {
+  display: "block",
+  zIndex: 2
+}), _hover)), _styled));
+exports.ImagePreviewWrapper = ImagePreviewWrapper;

package/ImageUpload/styled.js.map

@@ -0,0 +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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"}

package/Input/Input.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="web" />
+import React from "react";
+import { TextFieldProps } from "@rmwc/textfield";
+import { FormComponentProps } from "../types";
+import { ReactElement } from "react";
+export declare type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
+    autoComplete?: string;
+    rawOnChange?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    description?: string | ReactElement;
+    rows?: number;
+    maxLength?: number;
+    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onEnter?: () => any;
+    className?: string;
+    "data-testid"?: string;
+};
+export declare const Input: React.FC<InputProps>;