@blerp/design 1.2.74 → 1.2.76

package/dist/esm/ImageUploadModal.js

@@ -0,0 +1,265 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { Stack, Text, Button } from './index.js';
+import React, { useState, useEffect, createRef } from 'react';
+import AvatarEditor from 'react-avatar-editor';
+import Dropzone from 'react-dropzone';
+import styled from 'styled-components';
+import InsertPhotoRoundedIcon from '@mui/icons-material/InsertPhotoRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { useWindowSize } from './ScreenSizeHook.js';
+
+var _templateObject, _templateObject2;
+const Slider = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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] = useState(prevImage);
+  const [zoom, setZoom] = useState(50);
+  const [loading, setLoading] = useState(false);
+  const [dropzoneHovered, setDropzoneHovered] = useState(false);
+  const size = 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);
+  };
+
+  useEffect(() => {
+    if (prevImage) {
+      urlToObject(prevImage);
+    }
+  }, [prevImage]);
+  const imageEditorRef = /*#__PURE__*/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.createElement(Stack, {
+    sx: {
+      minHeight: "580px"
+    },
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(CloseRoundedIcon, {
+    sx: {
+      position: "absolute",
+      cursor: "pointer",
+      top: "20px",
+      right: "20px"
+    },
+    onClick: () => onClose()
+  }), /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center",
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "32px",
+      marginbottom: "16px"
+    }
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    color: "grey4",
+    sx: {
+      fontWeight: "lighter",
+      marginBottom: "2px"
+    }
+  }, "Adjust your image below."), /*#__PURE__*/React.createElement(Text, {
+    color: "grey4",
+    sx: {
+      fontWeight: "lighter",
+      marginBottom: "2px"
+    }
+  }, sizeInfo)), loading ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "300px"
+    }
+  }, /*#__PURE__*/React.createElement(Text, null, "Loading...")) : /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AvatarEditor, {
+    ref: imageEditorRef,
+    width: 250,
+    height: 250,
+    borderRadius: 125,
+    image: image,
+    scale: zoom / 50,
+    crossOrigin: "anonymous"
+  })) : isSquareImage ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AvatarEditor, {
+    ref: imageEditorRef,
+    width: 250,
+    height: 250,
+    borderRadius: 0,
+    image: image,
+    scale: zoom / 50,
+    crossOrigin: "anonymous"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AvatarEditor, {
+    ref: imageEditorRef,
+    width: 650,
+    height: 225,
+    image: image,
+    scale: zoom / 50,
+    crossorigin: "anonymous"
+  })) : /*#__PURE__*/React.createElement("img", {
+    src: URL.createObjectURL(image) || image.name,
+    width: "250px",
+    height: "auto",
+    style: {
+      alignSelf: "center"
+    }
+  }) : /*#__PURE__*/React.createElement(Dropzone, {
+    onDragEnter: () => setDropzoneHovered(true),
+    onDragLeave: () => setDropzoneHovered(false),
+    onDrop: acceptedFiles => handleImageDrop(acceptedFiles)
+  }, _ref2 => {
+    let {
+      getRootProps,
+      getInputProps
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Stack, {
+      sx: {
+        width: "100%",
+        height: size.width > 600 ? "300px" : "200px",
+        cursor: "pointer",
+        box: "borderBox",
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      style: {
+        height: "100%",
+        display: "flex"
+      }
+    }, getRootProps()), /*#__PURE__*/React.createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React.createElement(Stack, {
+      color: "grey3",
+      style: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(InsertPhotoRoundedIcon, {
+      style: {
+        color: "white",
+        height: "90%",
+        width: "90%"
+      }
+    })) : /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        flexWrap: "wrap",
+        width: "80%",
+        alignSelf: "center",
+        textAlign: "center",
+        verticalAlign: "center",
+        margin: "auto"
+      }
+    }, "Click or drop image here to upload.")));
+  })), /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center"
+  }, image && image.type !== "image/gif" ? /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    style: {
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React.createElement(ZoomIcon, null), /*#__PURE__*/React.createElement(Slider, {
+    type: "range",
+    min: "35",
+    max: "100",
+    value: zoom,
+    onChange: e => setZoom(e.target.value)
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(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.createElement(Button, {
+    variant: "contained",
+    disableElevation: true,
+    onClick: () => {
+      image.type === "image/gif" ? handleGifUpload() : handleUploadClick();
+    }
+  }, "Save Image")));
+};
+
+export default ImageUploadModal;