@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/esm/components/FileUpload.js

@@ -1,4 +1,5 @@
 "use strict";
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -18,213 +19,259 @@ import { getFileName } from '../utils/helpers/file.js';
 import '../utils/helpers/time.js';
 import { StyledSavedWrapper, StyledLoader, StyledAlertTitle } from './FileUpload.styled.js';
 
-function FileUpload({
-  fileActions = () => null,
-  fileErrors = () => null,
-  disabled = false,
-  dropzoneLabel = "Upload file(s)",
-  dropzoneDescription = "Drag and drop files here, or click to select files",
-  helperText = "",
-  helperTextPlacement = "below",
-  label = "",
-  required = false,
-  showError = false,
-  errorMessage = "",
-  edges = "normal",
-  dropzoneProps = null,
-  onChange,
-  onDelete = void 0,
-  saving = void 0,
-  name,
-  files = null
-}) {
-  const [confirmDelete, setConfirmDelete] = useState(null);
-  const [confirmDeleteAll, setConfirmDeleteAll] = useState(false);
-  const [viewedFile, setViewedFile] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const handleFileSave = useCallback(
-    (results) => {
-      const uploadedFiles = Array.isArray(files) ? [...files] : [];
-      const promises = [];
-      results.forEach(
-        (file) => promises.push(
-          new Promise((resolve) => {
-            const reader = new FileReader();
-            reader.onload = () => {
-              uploadedFiles.push({
-                url: reader.result,
-                filename: file.path,
-                filetype: file.type
-              });
-              resolve();
-            };
-            reader.readAsDataURL(file);
-          })
-        )
-      );
-      Promise.all(promises).then(() => {
-        setLoading(false);
-        onChange(uploadedFiles);
-      });
-    },
-    [files, onChange]
-  );
-  const onDrop = (results) => {
+function FileUpload(_ref) {
+  var _ref$fileActions = _ref.fileActions,
+    fileActions = _ref$fileActions === void 0 ? function () {
+      return null;
+    } : _ref$fileActions,
+    _ref$fileErrors = _ref.fileErrors,
+    fileErrors = _ref$fileErrors === void 0 ? function () {
+      return null;
+    } : _ref$fileErrors,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropzoneLabel = _ref.dropzoneLabel,
+    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "Upload file(s)" : _ref$dropzoneLabel,
+    _ref$dropzoneDescript = _ref.dropzoneDescription,
+    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop files here, or click to select files" : _ref$dropzoneDescript,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$helperTextPlacem = _ref.helperTextPlacement,
+    helperTextPlacement = _ref$helperTextPlacem === void 0 ? "below" : _ref$helperTextPlacem,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$dropzoneProps = _ref.dropzoneProps,
+    dropzoneProps = _ref$dropzoneProps === void 0 ? null : _ref$dropzoneProps,
+    onChange = _ref.onChange,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? void 0 : _ref$onDelete,
+    _ref$saving = _ref.saving,
+    saving = _ref$saving === void 0 ? void 0 : _ref$saving,
+    name = _ref.name,
+    _ref$files = _ref.files,
+    files = _ref$files === void 0 ? null : _ref$files;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    confirmDelete = _useState2[0],
+    setConfirmDelete = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirmDeleteAll = _useState4[0],
+    setConfirmDeleteAll = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    viewedFile = _useState6[0],
+    setViewedFile = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var handleFileSave = useCallback(function (results) {
+    var uploadedFiles = Array.isArray(files) ? _toConsumableArray(files) : [];
+    var promises = [];
+    results.forEach(function (file) {
+      return promises.push(new Promise(function (resolve) {
+        var reader = new FileReader();
+        reader.onload = function () {
+          uploadedFiles.push({
+            url: reader.result,
+            filename: file.path,
+            filetype: file.type
+          });
+          resolve();
+        };
+        reader.readAsDataURL(file);
+      }));
+    });
+    Promise.all(promises).then(function () {
+      setLoading(false);
+      onChange(uploadedFiles);
+    });
+  }, [files, onChange]);
+  var onDrop = function onDrop(results) {
     setLoading(true);
-    setTimeout(() => handleFileSave(results), 500);
+    setTimeout(function () {
+      return handleFileSave(results);
+    }, 500);
   };
-  const handleDelete = () => {
-    const updatedFiles = [...files];
+  var handleDelete = function handleDelete() {
+    var updatedFiles = _toConsumableArray(files);
     updatedFiles.splice(confirmDelete, 1);
-    onDelete(updatedFiles, files[confirmDelete], confirmDelete).then(() => {
+    onDelete(updatedFiles, files[confirmDelete], confirmDelete).then(function () {
       onChange(updatedFiles);
       setLoading(false);
       setConfirmDelete(null);
-    }).catch((e) => console.error(e));
+    }).catch(function (e) {
+      return console.error(e);
+    });
   };
-  const handleDeleteWithoutConfirmation = (index) => {
-    const updatedFiles = [...files];
+  var handleDeleteWithoutConfirmation = function handleDeleteWithoutConfirmation(index) {
+    var updatedFiles = _toConsumableArray(files);
     updatedFiles.splice(index, 1);
-    onDelete(updatedFiles, files[index]).then(() => {
+    onDelete(updatedFiles, files[index]).then(function () {
       onChange(updatedFiles);
       setLoading(false);
-    }).catch((e) => console.error(e));
+    }).catch(function (e) {
+      return console.error(e);
+    });
   };
-  const handleDeleteConfirmation = (index) => {
+  var handleDeleteConfirmation = function handleDeleteConfirmation(index) {
     setLoading(true);
     setConfirmDelete(index);
   };
-  const handleDeleteAll = () => {
+  var handleDeleteAll = function handleDeleteAll() {
     setConfirmDeleteAll(false);
-    onDelete().then(() => {
+    onDelete().then(function () {
       onChange([]);
     });
   };
-  const fade = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 }
+  var fade = {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      FormControl,
-      {
-        name,
-        fullWidth: true,
-        label,
-        helperText,
-        helperTextPlacement,
-        disabled,
-        required,
-        showError,
-        errorMessage,
-        edges,
-        children: [
-          /* @__PURE__ */ jsx(FormFocus, { name }),
-          files && files.length > 0 && /* @__PURE__ */ jsxs(StyledSavedWrapper, { ...fade, edges, children: [
-            (saving || loading) && /* @__PURE__ */ jsx(StyledLoader, { disableShrink: true }),
-            /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "center", spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(AnimateSharedLayout, { children: files.map((file, index) => /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                positionTransition: true,
-                initial: { opacity: 0, y: 50, scale: 0.3 },
-                animate: { opacity: 1, y: 0, scale: 1 },
-                exit: {
-                  opacity: 0,
-                  scale: 0.5,
-                  transition: { duration: 0.2 }
-                },
-                children: /* @__PURE__ */ jsxs(
-                  Alert,
-                  {
-                    severity: showError || fileErrors(file, index) !== null ? "error" : "success",
-                    style: { marginBottom: 5 },
-                    action: /* @__PURE__ */ jsxs(Fragment, { children: [
-                      fileActions(file, index) !== null && fileActions(file, index),
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          onClick: () => setViewedFile(file),
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(FormControl, {
+      name: name,
+      fullWidth: true,
+      label: label,
+      helperText: helperText,
+      helperTextPlacement: helperTextPlacement,
+      disabled: disabled,
+      required: required,
+      showError: showError,
+      errorMessage: errorMessage,
+      edges: edges,
+      children: [/* @__PURE__ */jsx(FormFocus, {
+        name: name
+      }), files && files.length > 0 && /* @__PURE__ */jsxs(StyledSavedWrapper, _objectSpread2(_objectSpread2({}, fade), {}, {
+        edges: edges,
+        children: [(saving || loading) && /* @__PURE__ */jsx(StyledLoader, {
+          disableShrink: true
+        }), /* @__PURE__ */jsx(Grid, {
+          container: true,
+          alignItems: "center",
+          spacing: 5,
+          children: /* @__PURE__ */jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /* @__PURE__ */jsx(AnimateSharedLayout, {
+              children: files.map(function (file, index) {
+                return /* @__PURE__ */jsx(AnimatePresence, {
+                  children: /* @__PURE__ */jsx(motion.div, {
+                    positionTransition: true,
+                    initial: {
+                      opacity: 0,
+                      y: 50,
+                      scale: 0.3
+                    },
+                    animate: {
+                      opacity: 1,
+                      y: 0,
+                      scale: 1
+                    },
+                    exit: {
+                      opacity: 0,
+                      scale: 0.5,
+                      transition: {
+                        duration: 0.2
+                      }
+                    },
+                    children: /* @__PURE__ */jsxs(Alert, {
+                      severity: showError || fileErrors(file, index) !== null ? "error" : "success",
+                      style: {
+                        marginBottom: 5
+                      },
+                      action: /* @__PURE__ */jsxs(Fragment, {
+                        children: [fileActions(file, index) !== null && fileActions(file, index), /* @__PURE__ */jsx(Button, {
+                          onClick: function onClick() {
+                            return setViewedFile(file);
+                          },
                           color: "inherit",
                           size: "small",
                           variant: "text",
                           children: "View"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Tooltip, { title: "Delete", enterDelay: 0, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                        IconButton,
-                        {
-                          disabled: saving,
-                          size: "small",
-                          "aria-label": "delete",
-                          style: { padding: 0 },
-                          onClick: () => !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index),
-                          children: /* @__PURE__ */ jsx(DeleteIcon, {})
-                        }
-                      ) }) })
-                    ] }),
-                    children: [
-                      /* @__PURE__ */ jsx(StyledAlertTitle, { children: getFileName(file) }),
-                      fileErrors(file, index)
-                    ]
-                  }
-                )
-              }
-            ) }, getFileName(file))) }) }) })
-          ] }),
-          (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              ...fade,
-              style: files && files.length > 0 ? { marginTop: 8 } : null,
-              children: /* @__PURE__ */ jsx(
-                DropZone,
-                {
-                  loading,
-                  disabled,
-                  onDrop,
-                  edges,
-                  dropzoneLabel,
-                  dropzoneDescription,
-                  dropzoneProps,
-                  compact: files && files.length > 0
-                }
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Confirmation,
-      {
-        open: confirmDeleteAll,
-        onCancel: () => setConfirmDeleteAll(false),
-        onConfirm: handleDeleteAll,
-        message: "Are you sure you want to remove the attached file(s)?"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Confirmation,
-      {
-        open: confirmDelete !== null,
-        onCancel: () => {
-          setConfirmDelete(null);
-          setLoading(false);
-        },
-        onConfirm: handleDelete,
-        message: "Are you sure you want to remove the attached file?"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FileViewer,
-      {
-        file: viewedFile,
-        open: viewedFile !== null,
-        onClose: () => setViewedFile(null)
+                        }), /* @__PURE__ */jsx(Tooltip, {
+                          title: "Delete",
+                          enterDelay: 0,
+                          children: /* @__PURE__ */jsx("div", {
+                            children: /* @__PURE__ */jsx(IconButton, {
+                              disabled: saving,
+                              size: "small",
+                              "aria-label": "delete",
+                              style: {
+                                padding: 0
+                              },
+                              onClick: function onClick() {
+                                return !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index);
+                              },
+                              children: /* @__PURE__ */jsx(DeleteIcon, {})
+                            })
+                          })
+                        })]
+                      }),
+                      children: [/* @__PURE__ */jsx(StyledAlertTitle, {
+                        children: getFileName(file)
+                      }), fileErrors(file, index)]
+                    })
+                  })
+                }, getFileName(file));
+              })
+            })
+          })
+        })]
+      })), (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */jsx(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
+        style: files && files.length > 0 ? {
+          marginTop: 8
+        } : null,
+        children: /* @__PURE__ */jsx(DropZone, {
+          loading: loading,
+          disabled: disabled,
+          onDrop: onDrop,
+          edges: edges,
+          dropzoneLabel: dropzoneLabel,
+          dropzoneDescription: dropzoneDescription,
+          dropzoneProps: dropzoneProps,
+          compact: files && files.length > 0
+        })
+      }))]
+    }), /* @__PURE__ */jsx(Confirmation, {
+      open: confirmDeleteAll,
+      onCancel: function onCancel() {
+        return setConfirmDeleteAll(false);
+      },
+      onConfirm: handleDeleteAll,
+      message: "Are you sure you want to remove the attached file(s)?"
+    }), /* @__PURE__ */jsx(Confirmation, {
+      open: confirmDelete !== null,
+      onCancel: function onCancel() {
+        setConfirmDelete(null);
+        setLoading(false);
+      },
+      onConfirm: handleDelete,
+      message: "Are you sure you want to remove the attached file?"
+    }), /* @__PURE__ */jsx(FileViewer, {
+      file: viewedFile,
+      open: viewedFile !== null,
+      onClose: function onClose() {
+        return setViewedFile(null);
       }
-    )
-  ] });
+    })]
+  });
 }
 FileUpload.propTypes = {
   /**
@@ -238,13 +285,11 @@ FileUpload.propTypes = {
   /**
    * Array of existing images already uploaded to this field
    */
-  files: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string,
-      filename: PropTypes.string,
-      filetype: PropTypes.string
-    })
-  ),
+  files: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string,
+    filename: PropTypes.string,
+    filetype: PropTypes.string
+  })),
   /**
    * If `true`, the label, input and helper text should be displayed in a disabled state.
    */

package/dist/esm/components/FileUpload.styled.js

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import AlertTitle from '@mui/material/AlertTitle';
 import CircularProgress from '@mui/material/CircularProgress';
 
-const borderRadius = (edges, theme) => {
+var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
       return 99;
@@ -14,14 +14,14 @@ const borderRadius = (edges, theme) => {
       return theme.shape.borderRadius;
   }
 };
-const StyledAlertTitle = styled(AlertTitle)({
+var StyledAlertTitle = styled(AlertTitle)({
   fontSize: 14,
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
   marginBottom: 0
 });
-const StyledLoader = styled(CircularProgress)({
+var StyledLoader = styled(CircularProgress)({
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -29,15 +29,19 @@ const StyledLoader = styled(CircularProgress)({
   marginLeft: -20,
   zIndex: 1
 });
-const StyledSavedWrapper = styled(motion.div)(({ edges, theme }) => ({
-  borderRadius: borderRadius(edges, theme),
-  border: `1px solid ${theme.palette.text.secondary}`,
-  padding: theme.spacing(6, 4),
-  "& .MuiAlert-message": {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }
-}));
+var StyledSavedWrapper = styled(motion.div)(function (_ref) {
+  var edges = _ref.edges,
+    theme = _ref.theme;
+  return {
+    borderRadius: borderRadius(edges, theme),
+    border: "1px solid ".concat(theme.palette.text.secondary),
+    padding: theme.spacing(6, 4),
+    "& .MuiAlert-message": {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  };
+});
 
 export { StyledAlertTitle, StyledLoader, StyledSavedWrapper };