@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/CroppedImageInput.cjs

@@ -0,0 +1,465 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var framerMotion = require('framer-motion');
+var ReactCrop = require('react-image-crop');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var Box = require('./Box.cjs');
+var Confirmation = require('./Confirmation.cjs');
+var DropZone = require('./DropZone.cjs');
+var FormControl = require('./FormControl.cjs');
+var FileUploadButton = require('./FileUploadButton.cjs');
+var FileViewer = require('./FileViewer.cjs');
+var Grid = require('./Grid.cjs');
+var Heading = require('./Heading.cjs');
+var IconButton = require('./IconButton.cjs');
+var Modal = require('./Modal.cjs');
+var ModalHeader = require('./ModalHeader.cjs');
+var ModalContent = require('./ModalContent.cjs');
+var CroppedImageInputActions = require('./CroppedImageInputActions.cjs');
+var file = require('../utils/helpers/file.cjs');
+require('../utils/helpers/time.cjs');
+require('react-image-crop/dist/ReactCrop.css');
+var CroppedImageInput_styled = require('./CroppedImageInput.styled.cjs');
+
+function CroppedImageInput({
+  defaultValue = null,
+  disabled = false,
+  dropzoneLabel = "Upload file",
+  dropzoneDescription = "Drag and drop a file here, or click to select a file",
+  helperText = "",
+  helperTextPlacement = "above",
+  croppedImageQuality = 0.6,
+  label = "",
+  required = false,
+  showError = false,
+  errorMessage = "",
+  edges = "normal",
+  cropRatio = null,
+  inputProps = null,
+  dropzoneProps = null,
+  onCancel = Promise.resolve(true),
+  onSave = Promise.resolve(true),
+  onDelete = Promise.resolve(true),
+  name,
+  dropppedFile = null,
+  cropGuide = null,
+  showActions = false,
+  saveButtonProps = {},
+  cancelButtonProps = {},
+  openInDialog = false,
+  fileViewerProps = {}
+}) {
+  const [src, setSrc] = React.useState(null);
+  const [filetype, setFiletype] = React.useState("");
+  const [originalImage, setOriginalImage] = React.useState(null);
+  const [croppedImage, setCroppedImage] = React.useState(null);
+  const [documentFile, setDocumentFile] = React.useState(null);
+  const [confirmDelete, setConfirmDelete] = React.useState(false);
+  const [viewDocument, setViewDocument] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [saving, setSaving] = React.useState(false);
+  const [cancelling, setCancelling] = React.useState(false);
+  const [crop, setCrop] = React.useState({ aspect: cropRatio, unit: "px" });
+  const input = React.useRef(null);
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+  React.useEffect(() => {
+    if (defaultValue) {
+      if (file.isImage(defaultValue)) {
+        setCroppedImage(defaultValue);
+      } else {
+        setDocumentFile(defaultValue);
+      }
+    }
+  }, [defaultValue]);
+  const onDrop = React.useCallback(
+    (acceptedFiles) => {
+      setFiletype(acceptedFiles[0].type);
+      if (!acceptedFiles[0].type.startsWith("image")) {
+        setSaving(true);
+      }
+      setLoading(true);
+      const reader = new FileReader();
+      reader.addEventListener("load", () => {
+        if (acceptedFiles[0].type.startsWith("image")) {
+          setSrc(reader.result);
+        } else {
+          setDocumentFile(reader.result);
+          onSave(reader.result, acceptedFiles[0]).then(() => {
+            setSaving(false);
+          });
+        }
+        setLoading(false);
+      });
+      reader.readAsDataURL(acceptedFiles[0]);
+    },
+    [onSave]
+  );
+  React.useEffect(() => {
+    if (dropppedFile) {
+      onDrop(dropppedFile);
+    }
+  }, [dropppedFile, onDrop]);
+  const handleCancel = () => {
+    setCancelling(true);
+    onCancel().then(() => {
+      setSrc(null);
+      setOriginalImage(null);
+      setCroppedImage(null);
+      setConfirmDelete(false);
+      setCancelling(false);
+    });
+  };
+  const handleDelete = () => {
+    setCancelling(true);
+    onDelete().then(() => {
+      setSrc(null);
+      setDocumentFile(null);
+      setOriginalImage(null);
+      setCroppedImage(null);
+      setConfirmDelete(false);
+      setCancelling(false);
+    });
+  };
+  const fade = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  };
+  const handleCropChange = (newCrop) => setCrop(newCrop);
+  const handleImageLoaded = (image) => {
+    const {
+      target: { clientWidth, clientHeight }
+    } = image;
+    let width = clientWidth;
+    if (window.innerHeight * 0.5 < clientHeight) {
+      width = clientWidth * (window.innerHeight * 0.5 / clientHeight);
+    }
+    const height = clientHeight * (width / clientWidth);
+    if (cropRatio) {
+      const widthPercent = clientWidth / crop.aspect < clientHeight * crop.aspect ? 1 : clientHeight * crop.aspect / clientWidth;
+      const heightPercent = clientWidth / crop.aspect > clientHeight * crop.aspect ? 1 : clientWidth / crop.aspect / clientHeight;
+      const y = (1 - heightPercent) / 2;
+      const x = (1 - widthPercent) / 2;
+      setCrop({
+        unit: "px",
+        width: width * widthPercent,
+        height: height * heightPercent,
+        x: width * x,
+        y: height * y,
+        aspect: crop.aspect
+      });
+    } else {
+      setCrop({
+        unit: "px",
+        width,
+        height,
+        x: 0,
+        y: 0
+      });
+    }
+    setOriginalImage(image);
+    return false;
+  };
+  const handleImageSave = () => {
+    if (originalImage && crop.width && crop.height) {
+      const {
+        target: { clientWidth, clientHeight, naturalWidth, naturalHeight }
+      } = originalImage;
+      const canvas = document.createElement("canvas");
+      const scaleX = naturalWidth / clientWidth;
+      const scaleY = naturalHeight / clientHeight;
+      const ctx = canvas.getContext("2d");
+      canvas.width = Math.floor(crop.width * scaleX);
+      canvas.height = Math.floor(crop.height * scaleY);
+      ctx.imageSmoothingQuality = "high";
+      const cropX = crop.x * scaleX;
+      const cropY = crop.y * scaleY;
+      const centerX = naturalWidth / 2;
+      const centerY = naturalHeight / 2;
+      ctx.save();
+      ctx.translate(-cropX, -cropY);
+      ctx.translate(centerX, centerY);
+      ctx.translate(-centerX, -centerY);
+      ctx.drawImage(
+        originalImage.target,
+        0,
+        0,
+        naturalWidth,
+        naturalHeight,
+        0,
+        0,
+        naturalWidth,
+        naturalHeight
+      );
+      ctx.restore();
+      return new Promise(() => {
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              console.error("Canvas is empty");
+              return;
+            }
+            setSaving(true);
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+              input.current.value = reader.result;
+              onSave(reader.result, blob).then(() => {
+                setCroppedImage(reader.result);
+                setSaving(false);
+              }).catch((e) => console.error(e));
+            });
+            reader.readAsDataURL(blob);
+          },
+          "image/jpeg",
+          croppedImageQuality
+        );
+      });
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileViewer.default,
+      {
+        ...fileViewerProps,
+        file: { url: documentFile, filetype },
+        open: viewDocument,
+        onClose: () => setViewDocument(false)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormControl.default,
+      {
+        name,
+        fullWidth: true,
+        label,
+        helperText,
+        helperTextPlacement,
+        disabled,
+        required,
+        showError,
+        errorMessage,
+        edges,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ React.createElement("input", { type: "hidden", ref: input, ...inputProps, key: "hidden-input" }),
+          saving || cancelling && /* @__PURE__ */ jsxRuntime.jsx(CroppedImageInput_styled.StyledCircularProgress, {}, "loading"),
+          /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { exitBeforeEnter: true, children: [
+            (croppedImage || documentFile) && !showError && /* @__PURE__ */ React.createElement(CroppedImageInput_styled.StyledSavedImage, { ...fade, key: "saved-image", edges }, /* @__PURE__ */ jsxRuntime.jsxs(Grid.default, { container: true, alignItems: "center", spacing: 5, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Grid.default, { item: true, xs: 12, md: 11, children: [
+                croppedImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: croppedImage, alt: "" }),
+                documentFile && /* @__PURE__ */ jsxRuntime.jsx(
+                  Grid.default,
+                  {
+                    item: true,
+                    xs: 12,
+                    md: 1,
+                    style: {
+                      justifyContent: "center",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.default, { onClick: () => setViewDocument(true), children: /* @__PURE__ */ jsxRuntime.jsx(CroppedImageInput_styled.StyledFileIcon, {}) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, xs: 12, md: 1, children: /* @__PURE__ */ jsxRuntime.jsx(CroppedImageInput_styled.StyledDeleteIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) }) })
+            ] })),
+            !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */ React.createElement(framerMotion.motion.div, { ...fade, key: "upload-button" }, /* @__PURE__ */ jsxRuntime.jsx(FileUploadButton.default, { onUpload: onDrop, fullWidth: !isNotMobile, children: dropzoneLabel })) : /* @__PURE__ */ React.createElement(framerMotion.motion.div, { ...fade, key: "dropzone" }, /* @__PURE__ */ jsxRuntime.jsx(
+              DropZone.default,
+              {
+                loading,
+                disabled,
+                onDrop,
+                edges,
+                dropzoneLabel,
+                dropzoneDescription,
+                dropzoneProps: {
+                  accept: ["image/*"],
+                  ...dropzoneProps,
+                  maxFiles: 1
+                }
+              }
+            ))),
+            src !== null && documentFile === null && (!croppedImage || showError) && (openInDialog ? /* @__PURE__ */ jsxRuntime.jsxs(Modal.default, { open: true, fullWidth: true, fullScreen: true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ModalHeader.default, { onClose: handleCancel, children: /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h4", children: "Crop Image" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { children: /* @__PURE__ */ jsxRuntime.jsxs(Box.default, { pl: 2.5, pr: 2.5, pb: 2.5, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CroppedImageInput_styled.StyledEditor, { edges, showError, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ReactCrop,
+                  {
+                    crop,
+                    style: {
+                      width: "100%"
+                    },
+                    onChange: handleCropChange,
+                    onImageLoaded: handleImageLoaded,
+                    renderSelectionAddon: cropGuide,
+                    children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CroppedImageInputActions.default,
+                  {
+                    handleCancel,
+                    cancelling,
+                    cancelButtonProps,
+                    handleImageSave,
+                    saving,
+                    saveButtonProps,
+                    disabled
+                  }
+                )
+              ] }) })
+            ] }) : /* @__PURE__ */ React.createElement(framerMotion.motion.div, { ...fade, key: "editor" }, /* @__PURE__ */ jsxRuntime.jsx(CroppedImageInput_styled.StyledEditor, { edges, showError, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ReactCrop,
+              {
+                crop,
+                style: {
+                  width: "100%"
+                },
+                onChange: handleCropChange,
+                renderSelectionAddon: cropGuide,
+                children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", onLoad: handleImageLoaded })
+              }
+            ) })))
+          ] })
+        ] })
+      },
+      "form-control"
+    ),
+    (!openInDialog && src !== null && (!croppedImage || showError) || !openInDialog && showActions) && /* @__PURE__ */ jsxRuntime.jsx(
+      CroppedImageInputActions.default,
+      {
+        handleCancel,
+        cancelling,
+        cancelButtonProps,
+        handleImageSave,
+        saving,
+        saveButtonProps,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Confirmation.default,
+      {
+        open: confirmDelete,
+        onCancel: () => setConfirmDelete(false),
+        onConfirm: handleDelete,
+        message: "Are you sure you want to remove the attached image?"
+      }
+    )
+  ] });
+}
+CroppedImageInput.propTypes = {
+  /**
+   * The image quality of cropped
+   */
+  croppedImageQuality: PropTypes.number,
+  /**
+   * URL for an existing image already uploaded to this field
+   */
+  defaultValue: PropTypes.string,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Text label displayed in the dropzone
+   */
+  dropzoneLabel: PropTypes.string,
+  /**
+   * Text description displayed in the dropzone
+   */
+  dropzoneDescription: PropTypes.string,
+  /**
+   * Pass props for react-dropzone. See https://react-dropzone.js.org/
+   */
+  dropzoneProps: PropTypes.object,
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  /**
+   * The error message to display if showError === true
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Placed the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * Ration crop selection e.g. 16 / 9
+   */
+  cropRatio: PropTypes.number,
+  /**
+   * Do something when user saves cropped image, received the base64 string
+   */
+  onSave: PropTypes.func,
+  /**
+   * Do something when user removes image
+   */
+  onDelete: PropTypes.func,
+  /**
+   * Do something when user requests cancel action
+   */
+  onCancel: PropTypes.func,
+  /**
+   * Pass through props for hidden input that holds the data url of the cropped image
+   */
+  inputProps: PropTypes.object,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * The field name
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * If `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * Result from dropzone...
+   */
+  dropppedFile: PropTypes.any,
+  /**
+   * @ignore
+   */
+  cropGuide: PropTypes.any,
+  /**
+   * If `true`, always show cancel and save button
+   */
+  showActions: PropTypes.bool,
+  /**
+   * Props for save button
+   */
+  saveButtonProps: PropTypes.object,
+  /**
+   * Props for cancel button
+   */
+  cancelButtonProps: PropTypes.object,
+  /**
+   * Replace the dropzone with a button that opens a dialog
+   */
+  openInDialog: PropTypes.bool,
+  /**
+   * Fileviewer props
+   */
+  fileViewerProps: PropTypes.object
+};
+
+exports.default = CroppedImageInput;

package/dist/cjs/components/CroppedImageInput.styled.cjs

@@ -0,0 +1,91 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+var styles = require('@mui/material/styles');
+var CircularProgress = require('@mui/material/CircularProgress');
+var DescriptionIcon = require('@mui/icons-material/Description');
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledFileIcon = styles.styled(DescriptionIcon)(({ compact, theme }) => ({
+  color: theme.palette.default.light,
+  margin: compact ? `0 ${theme.spacing(2)} 0 0` : "0 auto",
+  fontSize: compact ? "2rem" : "4rem"
+}));
+const StyledSavedImage = styles.styled(framerMotion.motion.div)(({ edges, theme }) => ({
+  borderRadius: borderRadius(edges, theme),
+  border: `1px solid ${theme.palette.text.secondary}`,
+  padding: theme.spacing(6, 4),
+  "& img": {
+    maxWidth: "100%",
+    width: "auto",
+    hieght: "auto",
+    margin: "0 auto",
+    boxShadow: theme.shadows[10],
+    display: "block"
+  }
+}));
+const StyledEditor = styles.styled("div")(({ edges, showError, theme }) => ({
+  width: "100%",
+  padding: theme.spacing(6, 4),
+  backgroundImage: `linear-gradient(45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.palette.grey[700]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.palette.grey[700]} 75%)`,
+  backgroundSize: "20px 20px",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+  border: `1px solid ${showError ? theme.palette.error.main : theme.palette.primary.main}`,
+  borderRadius: borderRadius(edges, theme),
+  "& .ReactCrop": {
+    margin: "0 auto",
+    display: "block"
+  }
+}));
+const StyledCircularProgress = styles.styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20,
+  zIndex: 1
+});
+const StyledDeleteIcon = styled.span`
+  ${({ theme }) => styled.css`
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: 25px;
+    z-index: 9;
+    background: transparent;
+    color: ${theme.palette.grey.main};
+    width: 48px;
+    height: 48px;
+    font-size: 20px;
+    transition: all 0.25s ease-in-out;
+    transform: translateY(-50%) scale(0.9);
+    box-shadow: ${theme.shadows[2]};
+    border-radius: 50%;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+      transform: translateY(-50%) scale(1.05);
+      color: ${theme.palette.secondary.main};
+      box-shadow: ${theme.shadows[4]};
+    }
+  `}
+`;
+
+exports.StyledCircularProgress = StyledCircularProgress;
+exports.StyledDeleteIcon = StyledDeleteIcon;
+exports.StyledEditor = StyledEditor;
+exports.StyledFileIcon = StyledFileIcon;
+exports.StyledSavedImage = StyledSavedImage;

package/dist/cjs/components/CroppedImageInputActions.cjs

@@ -0,0 +1,78 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var Box = require('./Box.cjs');
+var Button = require('./Button.cjs');
+var Grid = require('./Grid.cjs');
+
+function CroppedImageInputActions({
+  handleCancel,
+  cancelling = false,
+  cancelButtonProps,
+  handleImageSave,
+  saving = false,
+  saveButtonProps,
+  disabled = false
+}) {
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+  return (
+    // <Animate key="edit-controls">
+    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { paddingTop: "1.25rem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Grid.default,
+      {
+        container: true,
+        justifyContent: "flex-end",
+        direction: isNotMobile ? "row" : "column-reverse",
+        spacing: 5,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button.default,
+            {
+              loading: true,
+              color: "primaryAlt",
+              variant: "outlined",
+              size: "large",
+              onClick: handleCancel,
+              pending: cancelling,
+              disabled,
+              fullWidth: !isNotMobile,
+              ...cancelButtonProps,
+              children: cancelButtonProps.text || "Cancel"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button.default,
+            {
+              loading: true,
+              color: "primary",
+              size: "large",
+              onClick: handleImageSave,
+              pending: saving,
+              disabled,
+              fullWidth: !isNotMobile,
+              ...saveButtonProps,
+              children: saveButtonProps.text || "Save"
+            }
+          ) })
+        ]
+      }
+    ) })
+  );
+}
+CroppedImageInputActions.propTypes = {
+  handleCancel: PropTypes.func.isRequired,
+  cancelling: PropTypes.bool,
+  cancelButtonProps: PropTypes.object.isRequired,
+  handleImageSave: PropTypes.func.isRequired,
+  saving: PropTypes.bool,
+  saveButtonProps: PropTypes.object.isRequired,
+  disabled: PropTypes.bool
+};
+
+exports.default = CroppedImageInputActions;