@tenancy.nz/ui 1.0.2 → 1.0.3

package/dist/cjs/components/AvatarCropDialog.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -15,44 +16,80 @@ var ModalActions = require('./ModalActions.cjs');
 require('react-image-crop/dist/ReactCrop.css');
 var AvatarCropDialog_styled = require('./AvatarCropDialog.styled.cjs');
 
-function AvatarCropDialog({
-  helperText = "",
-  label = "",
-  showError = false,
-  errorMessage = "",
-  onSave = () => Promise.resolve(true),
-  onDelete = () => Promise.resolve(true),
-  droppedFile = null
-}) {
-  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
-  const [crop, setCrop] = React.useState({ aspect: 1, unit: "%", width: 100 });
-  const [originalImage, setOriginalImage] = React.useState(null);
-  const [confirmDelete, setConfirmDelete] = React.useState(false);
-  const [editorWidth, setEditorWidth] = React.useState("100%");
-  const [saving, setSaving] = React.useState(false);
-  const [cancelling, setCancelling] = React.useState(false);
-  const handleCancel = () => {
+function AvatarCropDialog(_ref) {
+  var _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? function () {
+      return Promise.resolve(true);
+    } : _ref$onSave,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? function () {
+      return Promise.resolve(true);
+    } : _ref$onDelete,
+    _ref$droppedFile = _ref.droppedFile,
+    droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("md");
+  });
+  var _useState = React.useState({
+      aspect: 1,
+      unit: "%",
+      width: 100
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    crop = _useState2[0],
+    setCrop = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    originalImage = _useState4[0],
+    setOriginalImage = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    confirmDelete = _useState6[0],
+    setConfirmDelete = _useState6[1];
+  var _useState7 = React.useState("100%"),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    editorWidth = _useState8[0],
+    setEditorWidth = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    saving = _useState0[0],
+    setSaving = _useState0[1];
+  var _useState1 = React.useState(false),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState1, 2),
+    cancelling = _useState10[0],
+    setCancelling = _useState10[1];
+  var handleCancel = function handleCancel() {
     setCancelling(true);
-    onDelete().then(() => {
+    onDelete().then(function () {
       setOriginalImage(null);
       setConfirmDelete(false);
       setCancelling(false);
     });
   };
-  const handleCropChange = (newCrop) => setCrop(newCrop);
-  const handleImageLoaded = (image) => {
-    let { width } = image;
+  var handleCropChange = function handleCropChange(newCrop) {
+    return setCrop(newCrop);
+  };
+  var handleImageLoaded = function handleImageLoaded(image) {
+    var width = image.width;
     if (window.innerHeight * 0.7 < image.height) {
       width = image.width * (window.innerHeight * 0.7 / image.height);
     }
     if (width < window.innerWidth * 0.7) {
-      setEditorWidth(`${width}px`);
+      setEditorWidth("".concat(width, "px"));
     }
-    const widthPercent = image.width < image.height ? 1 : image.height / image.width;
-    const heightPercent = image.width > image.height ? 1 : image.width / image.height;
-    const y = (1 - heightPercent) / 2;
-    const x = (1 - widthPercent) / 2;
-    const height = image.height * (width / image.width);
+    var widthPercent = image.width < image.height ? 1 : image.height / image.width;
+    var heightPercent = image.width > image.height ? 1 : image.width / image.height;
+    var y = (1 - heightPercent) / 2;
+    var x = (1 - widthPercent) / 2;
+    var height = image.height * (width / image.width);
     setCrop({
       unit: "px",
       width: width * widthPercent,
@@ -64,107 +101,81 @@ function AvatarCropDialog({
     setOriginalImage(image);
     return false;
   };
-  const handleImageSave = () => {
+  var handleImageSave = function handleImageSave() {
     if (originalImage && crop.width && crop.height) {
-      const canvas = document.createElement("canvas");
-      const scaleX = originalImage.naturalWidth / originalImage.width;
-      const scaleY = originalImage.naturalHeight / originalImage.height;
+      var canvas = document.createElement("canvas");
+      var scaleX = originalImage.naturalWidth / originalImage.width;
+      var scaleY = originalImage.naturalHeight / originalImage.height;
       canvas.width = crop.width;
       canvas.height = crop.height;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(
-        originalImage,
-        crop.x * scaleX,
-        crop.y * scaleY,
-        crop.width * scaleX,
-        crop.height * scaleY,
-        0,
-        0,
-        crop.width,
-        crop.height
-      );
-      return new Promise((resolve, reject) => {
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              console.error("Canvas is empty");
-              reject();
-            }
-            setSaving(true);
-            const reader = new FileReader();
-            reader.addEventListener("load", () => {
-              onSave(reader.result, blob).then(() => resolve());
+      var ctx = canvas.getContext("2d");
+      ctx.drawImage(originalImage, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height);
+      return new Promise(function (resolve, reject) {
+        canvas.toBlob(function (blob) {
+          if (!blob) {
+            console.error("Canvas is empty");
+            reject();
+          }
+          setSaving(true);
+          var reader = new FileReader();
+          reader.addEventListener("load", function () {
+            onSave(reader.result, blob).then(function () {
+              return resolve();
             });
-            reader.readAsDataURL(blob);
-          },
-          "image/jpeg",
-          0.6
-        );
+          });
+          reader.readAsDataURL(blob);
+        }, "image/jpeg", 0.6);
       });
     }
     return false;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormControl.default,
-      {
-        name: "avatar-crop-editor",
-        fullWidth: true,
-        label,
-        helperText,
-        showError,
-        errorMessage,
-        children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCropDialog_styled.StyledEditor, { showError, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ReactCrop,
-          {
-            src: droppedFile,
-            crop,
-            style: {
-              width: editorWidth,
-              maxHeight: window.innerHeight * 0.7
-            },
-            circularCrop: true,
-            onChange: handleCropChange,
-            onImageLoaded: handleImageLoaded,
-            keepSelection: true
-          }
-        ) })
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(FormControl.default, {
+      name: "avatar-crop-editor",
+      fullWidth: true,
+      label: label,
+      helperText: helperText,
+      showError: showError,
+      errorMessage: errorMessage,
+      children: /* @__PURE__ */jsxRuntime.jsx(AvatarCropDialog_styled.StyledEditor, {
+        showError: showError,
+        children: /* @__PURE__ */jsxRuntime.jsx(ReactCrop, {
+          src: droppedFile,
+          crop: crop,
+          style: {
+            width: editorWidth,
+            maxHeight: window.innerHeight * 0.7
+          },
+          circularCrop: true,
+          onChange: handleCropChange,
+          onImageLoaded: handleImageLoaded,
+          keepSelection: true
+        })
+      })
+    }, "form-control"), /* @__PURE__ */jsxRuntime.jsxs(ModalActions.default, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(Button.default, {
+        onClick: handleCancel,
+        variant: "outlined",
+        loading: cancelling,
+        color: "primaryAlt",
+        fullWidth: !isNotMobile,
+        children: "Cancel"
+      }), /* @__PURE__ */jsxRuntime.jsx(Button.default, {
+        onClick: handleImageSave,
+        loading: saving,
+        color: "primaryAlt",
+        fullWidth: !isNotMobile,
+        children: "Save"
+      })]
+    }), /* @__PURE__ */jsxRuntime.jsx(Confirmation.default, {
+      open: confirmDelete,
+      onCancel: function onCancel() {
+        return setConfirmDelete(false);
       },
-      "form-control"
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalActions.default, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button.default,
-        {
-          onClick: handleCancel,
-          variant: "outlined",
-          loading: cancelling,
-          color: "primaryAlt",
-          fullWidth: !isNotMobile,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button.default,
-        {
-          onClick: handleImageSave,
-          loading: saving,
-          color: "primaryAlt",
-          fullWidth: !isNotMobile,
-          children: "Save"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Confirmation.default,
-      {
-        open: confirmDelete,
-        onCancel: () => setConfirmDelete(false),
-        onConfirm: handleCancel,
-        message: "Are you sure you want to remove the attached image?"
-      }
-    )
-  ] });
+      onConfirm: handleCancel,
+      message: "Are you sure you want to remove the attached image?"
+    })]
+  });
 }
 AvatarCropDialog.propTypes = {
   /**

package/dist/cjs/components/AvatarCropDialog.styled.cjs

@@ -3,19 +3,23 @@
 
 var styles = require('@mui/material/styles');
 
-const StyledEditor = styles.styled("div")(({ 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: theme.shape.borderRadius,
-  "& .ReactCrop": {
-    margin: "0 auto",
-    display: "block"
-  }
-}));
+var StyledEditor = styles.styled("div")(function (_ref) {
+  var showError = _ref.showError,
+    theme = _ref.theme;
+  return {
+    width: "100%",
+    padding: theme.spacing(6, 4),
+    backgroundImage: "linear-gradient(45deg, ".concat(theme.palette.grey[700], " 25%, transparent 25%), linear-gradient(-45deg, ").concat(theme.palette.grey[700], " 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ").concat(theme.palette.grey[700], " 75%), linear-gradient(-45deg, transparent 75%, ").concat(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 ".concat(showError ? theme.palette.error.main : theme.palette.primary.main),
+    borderRadius: theme.shape.borderRadius,
+    "& .ReactCrop": {
+      margin: "0 auto",
+      display: "block"
+    }
+  };
+});
 
 exports.StyledEditor = StyledEditor;