@blerp/design 1.2.74 → 1.2.76

package/dist/cjs/ImageUploadModal.js

@@ -0,0 +1,278 @@
+'use strict';
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var index = require('./index.js');
+var React = require('react');
+var AvatarEditor = require('react-avatar-editor');
+var Dropzone = require('react-dropzone');
+var styled = require('styled-components');
+var InsertPhotoRoundedIcon = require('@mui/icons-material/InsertPhotoRounded');
+var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
+var ScreenSizeHook = require('./ScreenSizeHook.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
+var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
+var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
+
+var _templateObject, _templateObject2;
+const Slider = styled__default['default'].input(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    -webkit-appearance: none;\n    align-self: center;\n    width: 80%;\n    height: 5px;\n    border-radius: 5px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    &:focus {\n        border: 0px !important;\n    }\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n"])), props => props.theme.colors.ibisRed, props => props.theme.colors.waxwing, props => props.theme.colors.ibisRed, props => props.theme.colors.waxwing);
+const ZoomIcon = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
+
+const ImageUploadModal = _ref => {
+  let {
+    prevImage,
+    updateImage,
+    onClose,
+    title,
+    isCircularImage,
+    isSquareImage,
+    sizeInfo
+  } = _ref;
+  const [image, setImage] = React.useState(prevImage);
+  const [zoom, setZoom] = React.useState(50);
+  const [loading, setLoading] = React.useState(false);
+  const [dropzoneHovered, setDropzoneHovered] = React.useState(false);
+  const size = ScreenSizeHook.useWindowSize();
+
+  const urlToObject = async img => {
+    const response = await fetch(img); // here image is url/location of image
+
+    const blob = await response.blob();
+    const file = new File([blob], img, {
+      type: blob.type,
+      size: blob.type
+    });
+    setImage(file);
+  };
+
+  React.useEffect(() => {
+    if (prevImage) {
+      urlToObject(prevImage);
+    }
+  }, [prevImage]);
+  const imageEditorRef = /*#__PURE__*/React.createRef();
+
+  const handleImageDrop = acceptedFiles => {
+    if (acceptedFiles[0].type === "image/gif") {
+      console.log("hit dat GIF in IF");
+    }
+
+    setImage(acceptedFiles[0]);
+    setDropzoneHovered(false);
+  };
+
+  const handleGifUpload = async () => {
+    if (image.name !== prevImage) {
+      console.log("does not equal");
+      updateImage(image);
+    }
+
+    onClose();
+  }; // This is called when there is a non-gif photo ready to be uploaded
+
+
+  const handleUploadClick = async () => {
+    // check image exists
+    if (!image) {
+      alert("You must upload a valid image");
+      return;
+    } // check image size
+
+
+    if (image.size > 8842038) {
+      alert("You must update with a valid image less then 7mb");
+      return;
+    } // create a dom element for the photo and creates a data URL (URI)
+
+
+    setLoading(true);
+    const canvas = imageEditorRef.current.getImage().toDataURL();
+    let file;
+    await fetch(canvas) // canvas res is the URL data of the photo. Now the .blob() method reads that data URL (URI), and creates a new Blob (file-like object of immutable data)
+    .then(res => res.blob()).then(blob => {
+      // assign the blob data to the DOM STRING of the DOM element
+      window.URL.createObjectURL(blob); // create an image file using the data from the blob, assign the file a name, assign the file type
+      // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
+
+      file = new File([blob], image.name, {
+        type: image.type,
+        size: image.size
+      });
+    });
+    await updateImage(file);
+    setLoading(false);
+    onClose();
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      minHeight: "580px"
+    },
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
+    sx: {
+      position: "absolute",
+      cursor: "pointer",
+      top: "20px",
+      right: "20px"
+    },
+    onClick: () => onClose()
+  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    alignItems: "center",
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    sx: {
+      fontSize: "32px",
+      marginbottom: "16px"
+    }
+  }, title), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    color: "grey4",
+    sx: {
+      fontWeight: "lighter",
+      marginBottom: "2px"
+    }
+  }, "Adjust your image below."), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    color: "grey4",
+    sx: {
+      fontWeight: "lighter",
+      marginBottom: "2px"
+    }
+  }, sizeInfo)), loading ? /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: "100%",
+      height: "300px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, null, "Loading...")) : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      minWidth: "300px",
+      margin: "0px 0",
+      position: "relative",
+      backgroundColor: "waxwing.main",
+      maxHeight: "250px",
+      overflow: "hidden",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, image ? image.type !== "image/gif" ? isCircularImage ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
+    ref: imageEditorRef,
+    width: 250,
+    height: 250,
+    borderRadius: 125,
+    image: image,
+    scale: zoom / 50,
+    crossOrigin: "anonymous"
+  })) : isSquareImage ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
+    ref: imageEditorRef,
+    width: 250,
+    height: 250,
+    borderRadius: 0,
+    image: image,
+    scale: zoom / 50,
+    crossOrigin: "anonymous"
+  })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
+    ref: imageEditorRef,
+    width: 650,
+    height: 225,
+    image: image,
+    scale: zoom / 50,
+    crossorigin: "anonymous"
+  })) : /*#__PURE__*/React__default['default'].createElement("img", {
+    src: URL.createObjectURL(image) || image.name,
+    width: "250px",
+    height: "auto",
+    style: {
+      alignSelf: "center"
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
+    onDragEnter: () => setDropzoneHovered(true),
+    onDragLeave: () => setDropzoneHovered(false),
+    onDrop: acceptedFiles => handleImageDrop(acceptedFiles)
+  }, _ref2 => {
+    let {
+      getRootProps,
+      getInputProps
+    } = _ref2;
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      sx: {
+        width: "100%",
+        height: size.width > 600 ? "300px" : "200px",
+        cursor: "pointer",
+        box: "borderBox",
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
+      style: {
+        height: "100%",
+        display: "flex"
+      }
+    }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      color: "grey3",
+      style: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
+      style: {
+        color: "white",
+        height: "90%",
+        width: "90%"
+      }
+    })) : /*#__PURE__*/React__default['default'].createElement(index.Text, {
+      sx: {
+        flexWrap: "wrap",
+        width: "80%",
+        alignSelf: "center",
+        textAlign: "center",
+        verticalAlign: "center",
+        margin: "auto"
+      }
+    }, "Click or drop image here to upload.")));
+  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    alignItems: "center"
+  }, image && image.type !== "image/gif" ? /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    style: {
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(ZoomIcon, null), /*#__PURE__*/React__default['default'].createElement(Slider, {
+    type: "range",
+    min: "35",
+    max: "100",
+    value: zoom,
+    onChange: e => setZoom(e.target.value)
+  })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(index.Button, {
+    variant: "text",
+    color: "notBlack",
+    sx: {
+      textDecoration: "none",
+      textTransform: "none",
+      cursor: "pointer",
+      textDecoration: "underline",
+      margin: "20px 0"
+    },
+    onClick: () => setImage(image ? null : () => {
+      urlToObject(prevImage);
+      return image;
+    })
+  }, image ? "Change Image" : "Cancel"), /*#__PURE__*/React__default['default'].createElement(index.Button, {
+    variant: "contained",
+    disableElevation: true,
+    onClick: () => {
+      image.type === "image/gif" ? handleGifUpload() : handleUploadClick();
+    }
+  }, "Save Image")));
+};
+
+module.exports = ImageUploadModal;