@webiny/ui 0.0.0-mt-1

package/ImageUpload/MultiImageUpload.js

@@ -0,0 +1,383 @@
+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 };

package/ImageUpload/MultiImageUpload.stories.d.ts

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

package/ImageUpload/MultiImageUpload.stories.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import readme from "./README.md";
+import { Form } from "@webiny/form";
+import { MultiImageUpload } from "./MultiImageUpload";
+var story = storiesOf("Components/ImageUpload", module);
+story.addDecorator(withKnobs);
+var images = [{
+  id: 1,
+  name: "1st_image.jpg",
+  src: "http://i.pravatar.cc/150?img=49",
+  type: "image/jpeg",
+  size: 901611
+}, {
+  id: 2,
+  name: "2nd_image.jpg",
+  src: "http://i.pravatar.cc/150?img=63",
+  type: "image/jpeg",
+  size: 902612
+}, {
+  id: 3,
+  name: "3rd_image.jpg",
+  src: "http://i.pravatar.cc/150?img=24",
+  type: "image/jpeg",
+  size: 903613
+}, {
+  id: 4,
+  name: "4th_image.jpg",
+  src: "http://i.pravatar.cc/150?img=57",
+  type: "image/jpeg",
+  size: 904614
+}, {
+  id: 5,
+  name: "5th_image.jpg",
+  src: "http://i.pravatar.cc/150?img=31",
+  type: "image/jpeg",
+  size: 905615
+}];
+story.add("Multi Image Upload", function () {
+  var disabled = boolean("Disabled", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      images: images
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "images"
+    }, /*#__PURE__*/React.createElement(MultiImageUpload, {
+      label: "Your previously uploaded images:",
+      disabled: disabled,
+      description: "This list will not be shown to other users.",
+      cropper: {
+        aspectRatio: 1
+      }
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
+    images: images
+  }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
+}, {
+  info: {
+    propTables: [MultiImageUpload]
+  }
+});

package/ImageUpload/README.md

@@ -0,0 +1,11 @@
+# ImageUpload
+
+### Description
+
+`ImageUpload` component lets users select a image (eg. to be uploaded to a server), or multiple images.
+
+### Import
+
+```js
+import { SingleImageUpload, MultiImageUpload } from "@webiny/ui/ImageUpload";
+```

package/ImageUpload/SingleImageUpload.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+import { SelectedFile, FileError } from "react-butterfiles";
+declare type Props = FormComponentProps & {
+    label?: string;
+    disabled?: boolean;
+    description?: string;
+    className?: string;
+    accept?: Array<string>;
+    maxSize: string;
+    imageEditor?: Object;
+    renderImagePreview?: () => React.ReactElement<any>;
+    showRemoveImageButton?: boolean;
+    errorMessages: {
+        maxSizeExceeded: string;
+        unsupportedFileType: string;
+        default: string;
+        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;
+}
+export {};