@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/ImageUpload/ImageEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Alert","ImageEditorDialog","createElement","type","variant"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DialogOnClose } from \"../Dialog\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n    \"data-testid\"?: string;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `ImageEditorDialog` component inside the `@webiny/app-file-manager` package instead.\n */\nexport const ImageEditorDialog = ({}: ImageEditorDialogProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/app-file-manager` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AAgBxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAC,CAAyB,CAAC,KAAK;EAC7D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,+FAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/MultiImageUpload.d.ts

@@ -1,14 +1,15 @@
-import * as React from "react";
-import { SelectedFile, FileError } from "react-butterfiles";
-import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+import React from "react";
+import type { FormComponentProps } from "../types";
+interface MultiImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
     className?: string;
-    accept?: Array<string>;
+    accept?: string[];
     maxSize: string;
-    imageEditor?: Object;
+    imageEditor?: {
+        [key: string]: any;
+    };
     errorMessages: {
         maxSizeExceeded: string;
         unsupportedFileType: string;
@@ -17,45 +18,10 @@ declare type Props = FormComponentProps & {
     cropper?: {
         [key: string]: any;
     };
-};
-declare type State = {
-    errors?: FileError[];
-    selectedImages: Object;
-    loading: boolean;
-    imageEditor: {
-        image?: SelectedFile;
-        open: boolean;
-        index?: number;
-    };
-};
-declare class MultiImageUpload extends React.Component<Props, State> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        accept: string[];
-        maxSize: string;
-        imageEditor: {};
-        errorMessages: {
-            maxSizeExceeded: string;
-            unsupportedFileType: string;
-            default: string;
-        };
-    };
-    state: {
-        errors: any;
-        selectedImages: {};
-        loading: boolean;
-        imageEditor: {
-            open: boolean;
-            image: any;
-            index: any;
-        };
-    };
-    onChange: (value: any) => Promise<void>;
-    handleSelectedImages: (images: Array<SelectedFile>, selectedIndex?: number) => Promise<void>;
-    handleErrors: (errors: Array<FileError>) => void;
-    removeImage: (image: SelectedFile) => void;
-    render(): JSX.Element;
 }
-export { MultiImageUpload };
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export declare const MultiImageUpload: ({}: MultiImageUploadProps) => React.JSX.Element;
+export {};

package/ImageUpload/MultiImageUpload.js

@@ -1,383 +1,14 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import BrowseFiles from "react-butterfiles";
-import { css } from "emotion";
-import classNames from "classnames";
-import { FormElementMessage } from "../FormElementMessage";
-import Image from "./Image";
-import ImageEditorDialog from "./ImageEditorDialog";
-var imagesStyle = /*#__PURE__*/css({
-  ".disabled": {
-    opacity: 0.75,
-    pointerEvents: "none"
-  },
-  "ul.images": {
-    listStyle: "none",
-    li: {
-      verticalAlign: "top",
-      margin: 2,
-      display: "inline-block",
-      width: 150,
-      height: 150,
-      "&:last-child": {
-        border: "1px solid lightgray",
-        cursor: "pointer",
-        textAlign: "center"
-      }
-    }
-  }
-}, "label:imagesStyle;"); // Do not apply editping for following image types.
-// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
-
-var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
-  _inherits(MultiImageUpload, _React$Component);
-
-  var _super = _createSuper(MultiImageUpload);
-
-  function MultiImageUpload() {
-    var _this;
-
-    _classCallCheck(this, MultiImageUpload);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      errors: null,
-      selectedImages: {},
-      loading: false,
-      imageEditor: {
-        open: false,
-        image: null,
-        index: null
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
-        var _this$props, onChange, validate;
-
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = _this.props, onChange = _this$props.onChange, validate = _this$props.validate;
-                _context.t0 = onChange;
-
-                if (!_context.t0) {
-                  _context.next = 5;
-                  break;
-                }
-
-                _context.next = 5;
-                return onChange(value);
-
-              case 5:
-                _context.t1 = validate;
-
-                if (!_context.t1) {
-                  _context.next = 9;
-                  break;
-                }
-
-                _context.next = 9;
-                return validate();
-
-              case 9:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(_assertThisInitialized(_this), "handleSelectedImages", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(images) {
-        var selectedIndex,
-            _args4 = arguments;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
-
-                _this.setState({
-                  errors: null,
-                  loading: true
-                }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-                  var selectedImages, i, image;
-                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                    while (1) {
-                      switch (_context3.prev = _context3.next) {
-                        case 0:
-                          selectedImages = {};
-
-                          for (i = 0; i < images.length; i++) {
-                            image = images[i];
-                            selectedImages[selectedIndex + i] = _objectSpread({}, image);
-                          }
-
-                          _this.setState({
-                            selectedImages: selectedImages
-                          }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-                            var newValue, convertedImages, _i, _image;
-
-                            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                              while (1) {
-                                switch (_context2.prev = _context2.next) {
-                                  case 0:
-                                    newValue = Array.isArray(_this.props.value) ? _toConsumableArray(_this.props.value) : [];
-                                    convertedImages = [];
-
-                                    for (_i = 0; _i < images.length; _i++) {
-                                      _image = images[_i];
-                                      convertedImages.push({
-                                        src: _image.src.base64,
-                                        name: _image.name,
-                                        size: _image.size,
-                                        type: _image.type
-                                      });
-                                    }
-
-                                    newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
-                                    _context2.next = 6;
-                                    return _this.onChange(newValue);
-
-                                  case 6:
-                                    _this.setState({
-                                      loading: false
-                                    });
-
-                                  case 7:
-                                  case "end":
-                                    return _context2.stop();
-                                }
-                              }
-                            }, _callee2);
-                          })));
-
-                        case 3:
-                        case "end":
-                          return _context3.stop();
-                      }
-                    }
-                  }, _callee3);
-                })));
-
-              case 2:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4);
-      }));
-
-      return function (_x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function (errors) {
-      _this.setState({
-        errors: errors
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "removeImage", function (image) {
-      var _this$props2 = _this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange;
-
-      if (!onChange) {
-        return;
-      }
-
-      var images = Array.isArray(value) ? _toConsumableArray(value) : [];
-      images.splice(images.indexOf(image), 1);
-      onChange(images);
-    });
-
-    return _this;
-  }
-
-  _createClass(MultiImageUpload, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          value = _this$props3.value,
-          validation = _this$props3.validation,
-          label = _this$props3.label,
-          description = _this$props3.description,
-          disabled = _this$props3.disabled,
-          imageEditor = _this$props3.imageEditor,
-          accept = _this$props3.accept,
-          maxSize = _this$props3.maxSize,
-          className = _this$props3.className;
-      var imageEditorImageSrc = "";
-
-      if (this.state.imageEditor.image) {
-        imageEditorImageSrc = this.state.imageEditor.image.src;
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(imagesStyle, className)
-      }, label && /*#__PURE__*/React.createElement("div", {
-        className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/React.createElement(ImageEditorDialog, {
-        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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-              var newValue, imageEditorImageIndex;
-              return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-                while (1) {
-                  switch (_context5.prev = _context5.next) {
-                    case 0:
-                      newValue = Array.isArray(_this2.props.value) ? _toConsumableArray(_this2.props.value) : [];
-                      imageEditorImageIndex = _this2.state.imageEditor.index;
-                      newValue[imageEditorImageIndex].src = src;
-                      _context5.next = 5;
-                      return _this2.onChange(newValue);
-
-                    case 5:
-                      _this2.setState({
-                        loading: false,
-                        imageEditor: {
-                          image: null,
-                          open: false,
-                          index: null
-                        }
-                      });
-
-                    case 6:
-                    case "end":
-                      return _context5.stop();
-                  }
-                }
-              }, _callee5);
-            })));
-          });
-        }
-      }), /*#__PURE__*/React.createElement(BrowseFiles, {
-        accept: accept,
-        maxSize: maxSize,
-        multiple: true,
-        convertToBase64: true,
-        onSuccess: function onSuccess(files) {
-          _this2.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
-        },
-        onError: function onError(errors) {
-          return _this2.handleErrors(errors);
-        }
-      }, function (_ref6) {
-        var browseFiles = _ref6.browseFiles,
-            getDropZoneProps = _ref6.getDropZoneProps;
-        var images = Array.isArray(value) ? _toConsumableArray(value) : [];
-        return /*#__PURE__*/React.createElement("div", getDropZoneProps({
-          className: classNames({
-            disabled: disabled
-          })
-        }), /*#__PURE__*/React.createElement("ul", {
-          className: "images"
-        }, images.map(function (image, index) {
-          return /*#__PURE__*/React.createElement("li", {
-            key: index
-          }, /*#__PURE__*/React.createElement(Image, {
-            loading: _this2.state.selectedImages[index] && _this2.state.loading,
-            value: image.file || image,
-            removeImage: function removeImage() {
-              return _this2.removeImage(image.file || image);
-            },
-            editImage: _this2.state.selectedImages[index] && function () {
-              _this2.setState({
-                imageEditor: {
-                  index: index,
-                  open: true,
-                  image: _this2.state.selectedImages[index]
-                }
-              });
-            },
-            uploadImage: function uploadImage() {
-              browseFiles({
-                onSuccess: function onSuccess(files) {
-                  _this2.handleSelectedImages(files, index + 1);
-                },
-                onError: function onError(errors) {
-                  return _this2.handleErrors(errors);
-                }
-              });
-            }
-          }));
-        }), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Image, {
-          disabled: _this2.state.loading,
-          uploadImage: function uploadImage() {
-            browseFiles({
-              onSuccess: function onSuccess(files) {
-                _this2.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
-              },
-              onError: function onError(errors) {
-                return _this2.handleErrors(errors);
-              }
-            });
-          }
-        }))));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, "Your selection of images failed because of the following images:", /*#__PURE__*/React.createElement("ul", null, this.state.errors.map(function (error, index) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: error.file.name + index
-        }, index + 1, ". ", /*#__PURE__*/React.createElement("strong", null, error.file.name), " -\xA0", _this2.props.errorMessages[error.type] || _this2.props.errorMessages.default);
-      }))));
-    }
-  }]);
-
-  return MultiImageUpload;
-}(React.Component);
-
-_defineProperty(MultiImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
-  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-  maxSize: "5mb",
-  imageEditor: {},
-  errorMessages: {
-    maxSizeExceeded: "Max size exceeded.",
-    unsupportedFileType: "Unsupported file type.",
-    default: "An error occurred."
-  }
-});
-
-export { MultiImageUpload };
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const MultiImageUpload = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/admin-ui` package.");
+};
+
+//# sourceMappingURL=MultiImageUpload.js.map

package/ImageUpload/MultiImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Alert","MultiImageUpload","createElement","type","variant"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FormComponentProps } from \"../types\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.\n */\nexport const MultiImageUpload = ({}: MultiImageUploadProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/admin-ui` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AAuCxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAC,CAAwB,CAAC,KAAK;EAC3D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,uFAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/SingleImageUpload.d.ts

@@ -1,14 +1,15 @@
-import * as React from "react";
-import { FormComponentProps } from "../types";
-import { SelectedFile, FileError } from "react-butterfiles";
-declare type Props = FormComponentProps & {
+import React from "react";
+import type { FormComponentProps } from "../types";
+interface SingleImageUploadProps extends FormComponentProps {
     label?: string;
     disabled?: boolean;
     description?: string;
     className?: string;
-    accept?: Array<string>;
+    accept?: string[];
     maxSize: string;
-    imageEditor?: Object;
+    imageEditor?: {
+        [key: string]: any;
+    };
     renderImagePreview?: () => React.ReactElement<any>;
     showRemoveImageButton?: boolean;
     errorMessages: {
@@ -18,47 +19,10 @@ declare type Props = FormComponentProps & {
         multipleNotAllowed: string;
         multipleMaxSizeExceeded: string;
     };
-};
-declare type State = {
-    loading: boolean;
-    error?: FileError;
-    imageEditor: {
-        image?: {
-            name: string;
-            type: string;
-            size: number;
-            src?: string;
-        };
-        open: boolean;
-    };
-};
-export declare class SingleImageUpload extends React.Component<Props, State> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        maxSize: string;
-        imageEditor: {};
-        accept: string[];
-        showRemoveImageButton: boolean;
-        errorMessages: {
-            maxSizeExceeded: string;
-            multipleMaxSizeExceeded: string;
-            multipleNotAllowed: string;
-            unsupportedFileType: string;
-            default: string;
-        };
-    };
-    state: {
-        loading: boolean;
-        error: any;
-        imageEditor: {
-            open: boolean;
-            image: any;
-        };
-    };
-    handleFiles: (images: SelectedFile[]) => void;
-    handleErrors: (errors: FileError[]) => void;
-    render(): JSX.Element;
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export declare const SingleImageUpload: ({}: SingleImageUploadProps) => React.JSX.Element;
 export {};