@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Forms/ImageSelector/ImageSelector.js

@@ -1,516 +0,0 @@
-import { useCallback, useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { Typography, Collapse, Slider, ImageListItem, ImageList } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import { useDropzone } from "react-dropzone";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
-import CollectionsIcon from "@mui/icons-material/Collections";
-import InsertPhotoIcon from "@mui/icons-material/InsertPhoto";
-import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import ImageLibrary from "../../Dialogs/ImageLibrary/ImageLibrary";
-import { formatFileSize, getBase64ImageFromUrl } from "../../utils";
-import Cropper from "react-easy-crop";
-import ImagePreview from "../../Misc/ImagePreview/ImagePreview";
-import { getCroppedImg } from "../../utils/canvasUtils";
-import ResponsiveDialog from "../../Dialogs/ResponsiveDialog/ResponsiveDialog";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const getColor = (props, theme) => {
-  if (props.isDragAccept) {
-    return theme.palette.success.main;
-  }
-  if (props.isDragReject) {
-    return theme.palette.error.main;
-  }
-  if (props.isDragActive) {
-    return theme.palette.primary.main;
-  }
-  return theme.palette.grey[300];
-};
-const useStyles = makeStyles()(theme => ({
-  dropzoneContainer: {
-    flex: 1,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexWrap: "wrap",
-    padding: "20px",
-    marginBottom: theme.spacing(2),
-    borderWidth: "2px",
-    borderRadius: "2px",
-    borderColor: props => getColor(props, theme),
-    borderStyle: "dashed",
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    outline: "none",
-    transition: "border .24s ease-in-out",
-    maxWidth: 400,
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.5
-    },
-    "&:focus": {
-      outline: `2px ${theme.palette.mode === "dark" ? "#303030" : "#fafafa"} solid`,
-      outlineOffset: 0,
-      boxShadow: `0 0 0 4px ${theme.palette.mode === "light" ? "#0b57d0" : "white"}`
-    }
-  },
-  thumbsContainer: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginTop: 16
-  },
-  thumbContainer: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  thumb: {
-    display: "inline-flex",
-    borderRadius: 2,
-    border: "1px solid #eaeaea",
-    marginBottom: 8,
-    marginRight: 8,
-    width: 100,
-    height: 100,
-    padding: 4,
-    boxSizing: "border-box"
-  },
-  thumbInner: {
-    display: "flex",
-    minWidth: 0,
-    overflow: "hidden"
-  },
-  img: {
-    display: "block",
-    width: "auto",
-    height: "100%"
-  },
-  root: {
-    marginTop: "16px",
-    marginBottom: "8px"
-  },
-  buttons: {
-    display: "flex"
-  },
-  button: {
-    display: "flex",
-    justifyContent: "flex-start",
-    margin: `0px ${theme.spacing(0.5)}`
-  },
-  input: {
-    display: "none"
-  },
-  imageIcon: {
-    fontSize: 30,
-    color: "rgb(150, 150, 150)",
-    marginRight: theme.spacing()
-  },
-  cropContainer: {
-    position: "relative",
-    width: "100%",
-    height: 200,
-    background: "#333",
-    [theme.breakpoints.up("sm")]: {
-      height: 350
-    }
-  },
-  cropButton: {
-    flexShrink: 0,
-    marginLeft: 16
-  },
-  controls: {
-    padding: 16,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    [theme.breakpoints.up("sm")]: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  },
-  sliderContainer: {
-    display: "flex",
-    flex: "1",
-    alignItems: "center"
-  },
-  sliderLabel: {
-    [theme.breakpoints.down("sm")]: {
-      minWidth: 65
-    }
-  },
-  slider: {
-    padding: "22px 0px",
-    marginLeft: 16,
-    [theme.breakpoints.up("sm")]: {
-      flexDirection: "row",
-      alignItems: "center",
-      margin: "0 16px"
-    }
-  },
-  gridTile: {
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.8
-    }
-  }
-}));
-function ImageSelector({
-  t = text => text,
-  multiple = false,
-  name,
-  handleChange,
-  value,
-  accept = "image/*",
-  fileSizeLimit = 5000000,
-  aspect = 16 / 9,
-  previewComponent,
-  removeImage,
-  cropCompletedCallback,
-  isBanner,
-  autoSuggest,
-  autoSuggestedImages,
-  verificationStatus
-}) {
-  const [isImageLibraryOpen, setIsImageLibraryOpen] = useState(false);
-  const [fileSizeExceeded, setFileSizeExceeded] = useState(false);
-  const [fileSize, setFileSize] = useState(0);
-  const [isCropComplete, setIsCropComplete] = useState(true);
-  const [imageSrc, setImageSrc] = useState(null);
-  const [originalImage, setOriginalImage] = useState(null);
-  const [crop, setCrop] = useState({
-    x: 0,
-    y: 0
-  });
-  const [rotation, setRotation] = useState(0);
-  const [zoom, setZoom] = useState(1);
-  const [croppedImage, setCroppedImage] = useState(null);
-  const [openPreview, setOpenPreview] = useState(false);
-  const isUrl = value && value.startsWith("http");
-
-  // Downloads file as base64 for cropping when URL is supplied
-  useEffect(() => {
-    const urlExpression = /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)?/gi;
-    if (value && value.match(urlExpression)) {
-      getBase64ImageFromUrl(value).then(result => {
-        setImageSrc(result);
-        setOriginalImage(result);
-      }).catch(err => console.error(err));
-    }
-  }, [value]);
-  const handleTogglePreview = () => {
-    setOpenPreview(!openPreview);
-  };
-  const handleCloseCroppingDialog = () => {
-    setIsCropComplete(true);
-    setOpenPreview(false);
-  };
-  const onCropComplete = async (croppedArea, croppedAreaPixels) => {
-    try {
-      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels, rotation);
-      setCroppedImage(croppedImage);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-  const handleCropComplete = () => {
-    setIsCropComplete(true);
-    onChange(croppedImage);
-    setOpenPreview(false);
-    onClose();
-    if (cropCompletedCallback) {
-      cropCompletedCallback();
-    }
-  };
-  const onClose = useCallback(() => {
-    setCroppedImage(null);
-  }, []);
-  const onChange = useCallback(value => {
-    handleChange({
-      target: {
-        name,
-        value
-      }
-    });
-  }, [handleChange, name]);
-  const onDrop = useCallback(acceptedFiles => {
-    const file = acceptedFiles[0];
-    const reader = new FileReader();
-    if (file) {
-      if (file.size < fileSizeLimit) {
-        setFileSize(file.size);
-        reader.readAsDataURL(file);
-        reader.addEventListener("load", () => {
-          setImageSrc(reader.result);
-          setOriginalImage(reader.result);
-          setIsCropComplete(false);
-          onChange(reader.result);
-        }, false);
-      } else {
-        setFileSizeExceeded(true);
-        setTimeout(() => setFileSizeExceeded(false), 6000);
-      }
-    }
-  }, [fileSizeLimit, onChange]);
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragAccept,
-    isDragReject
-  } = useDropzone({
-    accept: accept,
-    multiple: multiple,
-    onDrop
-  });
-  const {
-    classes
-  } = useStyles({
-    isDragActive,
-    isDragAccept,
-    isDragReject
-  });
-  const onFileSelected = event => {
-    const file = event.target.files[0];
-    const reader = new FileReader();
-    if (file) {
-      if (file.size < fileSizeLimit) {
-        setFileSize(file.size);
-        reader.readAsDataURL(file);
-        reader.addEventListener("load", () => {
-          setImageSrc(reader.result);
-          setOriginalImage(reader.result);
-          setIsCropComplete(false);
-          onChange(reader.result);
-        }, false);
-      } else {
-        setFileSizeExceeded(true);
-        setTimeout(() => setFileSizeExceeded(false), 6000);
-      }
-    }
-  };
-  return /*#__PURE__*/_jsxs("section", {
-    className: classes.root,
-    children: [value && !isCropComplete && /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsxs(ResponsiveDialog, {
-        open: !isCropComplete,
-        handleClose: handleCloseCroppingDialog,
-        dialogTitle: t("crop_image"),
-        maxWidth: "lg",
-        handleSubmit: handleCropComplete,
-        submitText: t("crop"),
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.cropContainer,
-          children: /*#__PURE__*/_jsx(Cropper, {
-            image: imageSrc,
-            crop: crop,
-            rotation: rotation,
-            zoom: zoom,
-            aspect: aspect,
-            onCropChange: setCrop,
-            onRotationChange: setRotation,
-            onCropComplete: onCropComplete,
-            onZoomChange: setZoom
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: classes.controls,
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: classes.sliderContainer,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "overline",
-              classes: {
-                root: classes.sliderLabel
-              },
-              children: t("zoom")
-            }), /*#__PURE__*/_jsx(Slider, {
-              value: zoom,
-              min: 1,
-              max: 3,
-              step: 0.1,
-              "aria-label": "Zoom",
-              classes: {
-                root: classes.slider
-              },
-              onChange: (e, zoom) => setZoom(zoom)
-            })]
-          }), /*#__PURE__*/_jsxs("div", {
-            className: classes.sliderContainer,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "overline",
-              classes: {
-                root: classes.sliderLabel
-              },
-              children: t("rotate")
-            }), /*#__PURE__*/_jsx(Slider, {
-              value: rotation,
-              min: 0,
-              max: 360,
-              step: 1,
-              "aria-label": "Rotation",
-              classes: {
-                root: classes.slider
-              },
-              onChange: (e, rotation) => setRotation(rotation)
-            })]
-          }), /*#__PURE__*/_jsx(DefaultButton, {
-            onClick: handleTogglePreview,
-            endIcon: openPreview ? /*#__PURE__*/_jsx(ArrowUpwardIcon, {}) : /*#__PURE__*/_jsx(ArrowDownwardIcon, {}),
-            children: openPreview ? t("hide_preview") : t("show_preview")
-          })]
-        }), openPreview && /*#__PURE__*/_jsx(ImagePreview, {
-          img: croppedImage,
-          previewComponent: previewComponent,
-          isBanner: isBanner
-        })]
-      })
-    }), value && isCropComplete && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs("aside", {
-        className: classes.thumbsContainer,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.thumb,
-          children: /*#__PURE__*/_jsx("div", {
-            className: classes.thumbInner,
-            children: /*#__PURE__*/_jsx("img", {
-              alt: "",
-              src: value,
-              className: classes.img
-            })
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx(DefaultButton, {
-            className: classes.button,
-            onClick: () => {
-              if (isUrl && removeImage) {
-                removeImage();
-              } else {
-                onChange(null);
-              }
-            },
-            children: t("remove_card")
-          }), value && !isUrl && /*#__PURE__*/_jsx(DefaultButton, {
-            className: classes.button,
-            onClick: () => {
-              setImageSrc(originalImage);
-              setIsCropComplete(false);
-            },
-            children: t("crop")
-          })]
-        })]
-      }), fileSize > 0 && /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "subtitle2",
-          gutterBottom: true,
-          children: formatFileSize(fileSize)
-        })
-      })]
-    }), autoSuggest && autoSuggestedImages.length && (value === "" || value === null) ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Typography, {
-        variant: "subtitle1",
-        sx: {
-          marginBottom: 1,
-          fontWeight: "bold"
-        },
-        children: [/*#__PURE__*/_jsxs(_Fragment, {
-          children: [" ", t("suggested_images")]
-        }), /*#__PURE__*/_jsx(AutoAwesomeIcon, {
-          sx: theme => ({
-            color: theme.palette.primary.main
-          })
-        })]
-      }), /*#__PURE__*/_jsx(ImageList, {
-        sx: {
-          width: 300,
-          paddingBottom: 2
-        },
-        cols: 3,
-        children: autoSuggestedImages.map((img, i) => /*#__PURE__*/_jsx(ImageListItem, {
-          cols: 1,
-          onClick: () => {
-            setFileSize(0);
-            getBase64ImageFromUrl(img.largeImageURL).then(dataUrl => {
-              setImageSrc(dataUrl);
-              setOriginalImage(dataUrl);
-              setIsCropComplete(false);
-              onChange(dataUrl);
-            }).catch(e => console.error(e));
-          },
-          className: classes.gridTile,
-          children: /*#__PURE__*/_jsx("img", {
-            src: img.webformatURL,
-            alt: ""
-          })
-        }, i))
-      })]
-    }) : /*#__PURE__*/_jsx(_Fragment, {}), !value && /*#__PURE__*/_jsxs("div", {
-      ...getRootProps({
-        className: classes.dropzoneContainer
-      }),
-      children: [/*#__PURE__*/_jsx("input", {
-        ...getInputProps()
-      }), /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(InsertPhotoIcon, {
-          className: classes.imageIcon
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(Typography, {
-          component: "p",
-          variant: "body1",
-          children: t("Drag and drop image from your computer")
-        })
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx(Collapse, {
-        in: fileSizeExceeded,
-        children: /*#__PURE__*/_jsxs(Typography, {
-          gutterBottom: true,
-          color: "error",
-          children: [t("file_size_exceeded"), " ", formatFileSize(fileSizeLimit)]
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: classes.buttons,
-        children: [/*#__PURE__*/_jsx(DefaultButton, {
-          variant: "outlined",
-          className: classes.button,
-          onClick: () => setIsImageLibraryOpen(!isImageLibraryOpen),
-          startIcon: /*#__PURE__*/_jsx(CollectionsIcon, {}),
-          children: t("Image Library")
-        }), /*#__PURE__*/_jsx("input", {
-          accept: "image/*",
-          className: classes.input,
-          id: `upload-image-${name}`,
-          type: "file",
-          onChange: onFileSelected
-        }), /*#__PURE__*/_jsx("label", {
-          htmlFor: `upload-image-${name}`,
-          children: /*#__PURE__*/_jsx(DefaultButton, {
-            variant: "outlined",
-            className: classes.button,
-            component: "span",
-            startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
-            children: t("Upload Image")
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(ImageLibrary, {
-      open: isImageLibraryOpen,
-      handleClose: () => setIsImageLibraryOpen(false),
-      verificationStatus: verificationStatus,
-      handleChange: image => {
-        setFileSize(0);
-        getBase64ImageFromUrl(image.largeImageURL).then(dataUrl => {
-          setImageSrc(dataUrl);
-          setOriginalImage(dataUrl);
-          setIsCropComplete(false);
-          onChange(dataUrl);
-        }).catch(e => console.error(e));
-        setIsImageLibraryOpen(false);
-      }
-    })]
-  });
-}
-ImageSelector.propTypes = {
-  previewComponent: PropTypes.node
-};
-export default ImageSelector;

package/dist/Forms/ImageSelector/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "ImageSelector",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ImageSelector.js"
-}