cloudmr-ux 1.6.8 → 1.7.0

package/dist/index.d.ts

@@ -274,7 +274,7 @@ interface UploadWindowProps {
     upload: (file: File, fileAlias: string, fileDatabase: string) => Promise<number>;
     open: boolean;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    fileExtension?: string;
+    fileExtension?: string | string[];
     template?: {
         showFileName?: boolean;
         showDatabase?: boolean;

package/dist/index.js

@@ -317,6 +317,16 @@ function CmrUploadWindow({
   const handleClose = () => {
     setOpen(false);
   };
+  const checkExtension = (filename, allowed) => {
+    if (!filename)
+      return false;
+    const name = filename.toLowerCase();
+    if (Array.isArray(allowed)) {
+      return allowed.some((ext) => name.endsWith(ext.startsWith(".") ? ext : "." + ext));
+    } else {
+      return name.endsWith(allowed.startsWith(".") ? allowed : "." + allowed);
+    }
+  };
   const getExtension = (fileName) => {
     if (fileName == void 0)
       return;
@@ -464,8 +474,10 @@ function CmrUploadWindow({
         let draggedFiles = e.dataTransfer.files;
         if (draggedFiles.length > 1) {
           setUploadBoxWarning("Only one file can be uploaded at a time");
-        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
-          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        } else if (fileExtension != void 0 && draggedFiles.length !== 0 && !checkExtension(draggedFiles[0].name, fileExtension)) {
+          setUploadBoxWarning(
+            `Only accepting files with extension(s): ${Array.isArray(fileExtension) ? fileExtension.join(", ") : fileExtension}`
+          );
         }
       }
       e.dataTransfer.dropEffect = "copy";
@@ -481,10 +493,12 @@ function CmrUploadWindow({
         setWarningText("Only one file can be uploaded at a time");
         setTimeout(() => setInfoOpen(false), 2500);
         return;
-      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+      } else if (fileExtension !== void 0 && !checkExtension(files[0].name, fileExtension)) {
         setInfoOpen(true);
         setInfoStyle("warning");
-        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setWarningText(
+          `Only accepting files with extension(s): ${Array.isArray(fileExtension) ? fileExtension.join(", ") : fileExtension}`
+        );
         setTimeout(() => setInfoOpen(false), 2500);
         return;
       }
@@ -551,7 +565,7 @@ function CmrUploadWindow({
             type: "file",
             id: "file-window",
             multiple: true,
-            accept: fileExtension == void 0 ? "*" : fileExtension,
+            accept: fileExtension === void 0 ? "*" : Array.isArray(fileExtension) ? fileExtension.join(",") : fileExtension,
             style: { display: "none" },
             onChange: loadSelectedFiles
           }
@@ -1096,12 +1110,13 @@ var InputNumber_default = CmrInputNumber;
 // src/CmrComponents/select-upload/SelectUpload.tsx
 var import_react8 = __toESM(require("react"));
 var import_material12 = require("@mui/material");
-var import_Select = __toESM(require("@mui/material/Select"));
 var import_Dialog6 = __toESM(require("@mui/material/Dialog"));
 var import_DialogTitle6 = __toESM(require("@mui/material/DialogTitle"));
 var import_DialogContent6 = __toESM(require("@mui/material/DialogContent"));
 var import_DialogContentText5 = __toESM(require("@mui/material/DialogContentText"));
 var import_Box3 = __toESM(require("@mui/material/Box"));
+var import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
+var import_TextField5 = __toESM(require("@mui/material/TextField"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var CMRSelectUpload = (props) => {
   let [open, setOpen] = import_react8.default.useState(false);
@@ -1115,9 +1130,6 @@ var CMRSelectUpload = (props) => {
   const handleClose = () => {
     setOpen(false);
   };
-  const handleChange = (event) => {
-    selectFileIndex(event.target.value);
-  };
   const onSet = () => {
     props.onSelected(props.fileSelection[fileIndex]);
     setOpen(false);
@@ -1126,18 +1138,24 @@ var CMRSelectUpload = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogTitle6.default, { children: "Select or Upload" }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_DialogContent6.default, { sx: { width: 520 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogContentText5.default, { sx: { pl: 1, pr: 1, pb: 0 }, children: uploading ? "Please wait for the upload to finish." : "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogContent6.default, { sx: { p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-        import_Select.default,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogContent6.default, { sx: { p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_Autocomplete.default,
         {
-          value: fileIndex,
-          onChange: handleChange,
           disabled: uploading,
-          inputProps: { "aria-label": "Without label" },
-          sx: { width: "100%" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.MenuItem, { value: -1, children: props.fileSelection.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("em", { children: "No Stored Files" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("em", { children: "Select a Stored File" }) }),
-            (props.fileSelection != void 0 ? props.fileSelection : []).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.MenuItem, { value: index, children: option.fileName }, index))
-          ]
+          options: props.fileSelection,
+          getOptionLabel: (option) => option.fileName,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          value: fileIndex === -1 ? null : props.fileSelection[fileIndex],
+          onChange: (event, newValue) => {
+            if (newValue) {
+              const index = props.fileSelection.findIndex((file) => file.id === newValue.id);
+              selectFileIndex(index);
+            } else {
+              selectFileIndex(-1);
+            }
+          },
+          renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_TextField5.default, { ...params, label: "Select a Stored File" }),
+          sx: { width: "100%" }
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box3.default, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [

package/dist/index.mjs

@@ -269,6 +269,16 @@ function CmrUploadWindow({
   const handleClose = () => {
     setOpen(false);
   };
+  const checkExtension = (filename, allowed) => {
+    if (!filename)
+      return false;
+    const name = filename.toLowerCase();
+    if (Array.isArray(allowed)) {
+      return allowed.some((ext) => name.endsWith(ext.startsWith(".") ? ext : "." + ext));
+    } else {
+      return name.endsWith(allowed.startsWith(".") ? allowed : "." + allowed);
+    }
+  };
   const getExtension = (fileName) => {
     if (fileName == void 0)
       return;
@@ -416,8 +426,10 @@ function CmrUploadWindow({
         let draggedFiles = e.dataTransfer.files;
         if (draggedFiles.length > 1) {
           setUploadBoxWarning("Only one file can be uploaded at a time");
-        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
-          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        } else if (fileExtension != void 0 && draggedFiles.length !== 0 && !checkExtension(draggedFiles[0].name, fileExtension)) {
+          setUploadBoxWarning(
+            `Only accepting files with extension(s): ${Array.isArray(fileExtension) ? fileExtension.join(", ") : fileExtension}`
+          );
         }
       }
       e.dataTransfer.dropEffect = "copy";
@@ -433,10 +445,12 @@ function CmrUploadWindow({
         setWarningText("Only one file can be uploaded at a time");
         setTimeout(() => setInfoOpen(false), 2500);
         return;
-      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+      } else if (fileExtension !== void 0 && !checkExtension(files[0].name, fileExtension)) {
         setInfoOpen(true);
         setInfoStyle("warning");
-        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setWarningText(
+          `Only accepting files with extension(s): ${Array.isArray(fileExtension) ? fileExtension.join(", ") : fileExtension}`
+        );
         setTimeout(() => setInfoOpen(false), 2500);
         return;
       }
@@ -503,7 +517,7 @@ function CmrUploadWindow({
             type: "file",
             id: "file-window",
             multiple: true,
-            accept: fileExtension == void 0 ? "*" : fileExtension,
+            accept: fileExtension === void 0 ? "*" : Array.isArray(fileExtension) ? fileExtension.join(",") : fileExtension,
             style: { display: "none" },
             onChange: loadSelectedFiles
           }
@@ -1047,13 +1061,14 @@ var InputNumber_default = CmrInputNumber;
 
 // src/CmrComponents/select-upload/SelectUpload.tsx
 import React11, { Fragment } from "react";
-import { Button as Button4, MenuItem as MenuItem3 } from "@mui/material";
-import Select2 from "@mui/material/Select";
+import { Button as Button4 } from "@mui/material";
 import Dialog6 from "@mui/material/Dialog";
 import DialogTitle6 from "@mui/material/DialogTitle";
 import DialogContent6 from "@mui/material/DialogContent";
 import DialogContentText5 from "@mui/material/DialogContentText";
 import Box4 from "@mui/material/Box";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField5 from "@mui/material/TextField";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var CMRSelectUpload = (props) => {
   let [open, setOpen] = React11.useState(false);
@@ -1067,9 +1082,6 @@ var CMRSelectUpload = (props) => {
   const handleClose = () => {
     setOpen(false);
   };
-  const handleChange = (event) => {
-    selectFileIndex(event.target.value);
-  };
   const onSet = () => {
     props.onSelected(props.fileSelection[fileIndex]);
     setOpen(false);
@@ -1078,18 +1090,24 @@ var CMRSelectUpload = (props) => {
     /* @__PURE__ */ jsx18(DialogTitle6, { children: "Select or Upload" }),
     /* @__PURE__ */ jsxs12(DialogContent6, { sx: { width: 520 }, children: [
       /* @__PURE__ */ jsx18(DialogContentText5, { sx: { pl: 1, pr: 1, pb: 0 }, children: uploading ? "Please wait for the upload to finish." : "" }),
-      /* @__PURE__ */ jsx18(DialogContent6, { sx: { p: 1 }, children: /* @__PURE__ */ jsxs12(
-        Select2,
+      /* @__PURE__ */ jsx18(DialogContent6, { sx: { p: 1 }, children: /* @__PURE__ */ jsx18(
+        Autocomplete,
         {
-          value: fileIndex,
-          onChange: handleChange,
           disabled: uploading,
-          inputProps: { "aria-label": "Without label" },
-          sx: { width: "100%" },
-          children: [
-            /* @__PURE__ */ jsx18(MenuItem3, { value: -1, children: props.fileSelection.length < 1 ? /* @__PURE__ */ jsx18("em", { children: "No Stored Files" }) : /* @__PURE__ */ jsx18("em", { children: "Select a Stored File" }) }),
-            (props.fileSelection != void 0 ? props.fileSelection : []).map((option, index) => /* @__PURE__ */ jsx18(MenuItem3, { value: index, children: option.fileName }, index))
-          ]
+          options: props.fileSelection,
+          getOptionLabel: (option) => option.fileName,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          value: fileIndex === -1 ? null : props.fileSelection[fileIndex],
+          onChange: (event, newValue) => {
+            if (newValue) {
+              const index = props.fileSelection.findIndex((file) => file.id === newValue.id);
+              selectFileIndex(index);
+            } else {
+              selectFileIndex(-1);
+            }
+          },
+          renderInput: (params) => /* @__PURE__ */ jsx18(TextField5, { ...params, label: "Select a Stored File" }),
+          sx: { width: "100%" }
         }
       ) }),
       /* @__PURE__ */ jsxs12(Box4, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",