cloudmr-ux 1.3.1 → 1.3.2

package/dist/index.d.ts

@@ -238,6 +238,36 @@ interface CmrInputNumberProps {
 }
 declare const CmrInputNumber: (props: CmrInputNumberProps) => react_jsx_runtime.JSX.Element;
 
+interface CMRSelectUploadProps extends CMRUploadProps {
+    /**
+     * A selection of currently uploaded files
+     */
+    fileSelection: UploadedFile[];
+    onSelected: (file?: UploadedFile) => void;
+    chosenFile?: string;
+    buttonText?: string;
+    /**
+     * Enforces the extension of selected files
+     */
+    fileExtension?: string;
+}
+interface UploadedFile {
+    id: number;
+    fileName: string;
+    link: string;
+    md5?: string;
+    size: string;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+    database: string;
+    location: string;
+}
+/**
+ * Select from a set of uploaded files or upload new
+ */
+declare const CMRSelectUpload: (props: CMRSelectUploadProps) => react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -248,4 +278,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrDeletionDialog, CmrEditConfirmation, CmrInput, CmrInputNumber, CmrLabel, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };
+export { CMRSelectUpload, CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrDeletionDialog, CmrEditConfirmation, CmrInput, CmrInputNumber, CmrLabel, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CMRSelectUpload: () => SelectUpload_default,
   CMRUpload: () => Upload_default,
   CmrButton: () => CmrButton_default,
   CmrCheckbox: () => Checkbox_default,
@@ -1081,9 +1082,109 @@ var CmrInputNumber = (props) => {
 };
 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_jsx_runtime18 = require("react/jsx-runtime");
+var CMRSelectUpload = (props) => {
+  let [open, setOpen] = import_react8.default.useState(false);
+  let [fileIndex, selectFileIndex] = import_react8.default.useState(-1);
+  let [uploading, setUploading] = import_react8.default.useState(false);
+  const [progress, setProgress] = import_react8.default.useState(0);
+  const handleClickOpen = () => {
+    selectFileIndex(-1);
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleChange = (event) => {
+    selectFileIndex(event.target.value);
+  };
+  const onSet = () => {
+    props.onSelected(props.fileSelection[fileIndex]);
+    setOpen(false);
+  };
+  const selectionDialog = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Dialog6.default, { open, onClose: handleClose, children: [
+    /* @__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,
+        {
+          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))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box3.default, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.Button, { fullWidth: true, variant: "outlined", sx: { marginRight: "8px" }, onClick: handleClose, children: " Cancel" }),
+        fileIndex !== -1 && !uploading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.Button, { fullWidth: true, sx: { marginLeft: "8px" }, variant: "contained", onClick: onSet, children: "OK" }),
+        fileIndex == -1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Upload_default,
+          {
+            ...props,
+            color: "info",
+            fullWidth: true,
+            onUploaded: (res, file) => {
+              console.log("calling Setup level on uploaded");
+              console.log(props.onUploaded);
+              selectFileIndex(props.fileSelection.length);
+              props.onUploaded(res, file);
+              setOpen(false);
+            },
+            fileExtension: props.fileExtension,
+            uploadHandler: props.uploadHandler,
+            uploadStarted: () => {
+              setUploading(true);
+              props.onSelected(void 0);
+            },
+            uploadProgressed: (progress2) => {
+              setOpen(false);
+              setProgress(progress2);
+            },
+            uploadEnded: () => setUploading(false)
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react8.Fragment, { children: [
+    uploading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material12.Button, { variant: "contained", style: { ...props.style, textTransform: "none" }, sx: { overflowWrap: "inherit" }, color: "primary", disabled: uploading, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_material12.Button,
+      {
+        variant: props.chosenFile == void 0 ? "contained" : "outlined",
+        color: "info",
+        onClick: handleClickOpen,
+        sx: { marginRight: "10pt" },
+        style: { ...props.style, textTransform: "none" },
+        children: props.chosenFile == void 0 ? props.buttonText ? props.buttonText : "Choose" : props.chosenFile
+      }
+    ),
+    selectionDialog
+  ] });
+};
+var SelectUpload_default = CMRSelectUpload;
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -1095,7 +1196,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -1121,6 +1222,7 @@ var CmrTable_default = CmrTable;
 var CmrTable2 = CmrTable_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CMRSelectUpload,
   CMRUpload,
   CmrButton,
   CmrCheckbox,

package/dist/index.mjs

@@ -1036,9 +1036,109 @@ var CmrInputNumber = (props) => {
 };
 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 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 { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var CMRSelectUpload = (props) => {
+  let [open, setOpen] = React11.useState(false);
+  let [fileIndex, selectFileIndex] = React11.useState(-1);
+  let [uploading, setUploading] = React11.useState(false);
+  const [progress, setProgress] = React11.useState(0);
+  const handleClickOpen = () => {
+    selectFileIndex(-1);
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleChange = (event) => {
+    selectFileIndex(event.target.value);
+  };
+  const onSet = () => {
+    props.onSelected(props.fileSelection[fileIndex]);
+    setOpen(false);
+  };
+  const selectionDialog = /* @__PURE__ */ jsxs12(Dialog6, { open, onClose: handleClose, children: [
+    /* @__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,
+        {
+          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))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs12(Box4, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [
+        /* @__PURE__ */ jsx18(Button4, { fullWidth: true, variant: "outlined", sx: { marginRight: "8px" }, onClick: handleClose, children: " Cancel" }),
+        fileIndex !== -1 && !uploading && /* @__PURE__ */ jsx18(Button4, { fullWidth: true, sx: { marginLeft: "8px" }, variant: "contained", onClick: onSet, children: "OK" }),
+        fileIndex == -1 && /* @__PURE__ */ jsx18(
+          Upload_default,
+          {
+            ...props,
+            color: "info",
+            fullWidth: true,
+            onUploaded: (res, file) => {
+              console.log("calling Setup level on uploaded");
+              console.log(props.onUploaded);
+              selectFileIndex(props.fileSelection.length);
+              props.onUploaded(res, file);
+              setOpen(false);
+            },
+            fileExtension: props.fileExtension,
+            uploadHandler: props.uploadHandler,
+            uploadStarted: () => {
+              setUploading(true);
+              props.onSelected(void 0);
+            },
+            uploadProgressed: (progress2) => {
+              setOpen(false);
+              setProgress(progress2);
+            },
+            uploadEnded: () => setUploading(false)
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs12(Fragment, { children: [
+    uploading ? /* @__PURE__ */ jsxs12(Button4, { variant: "contained", style: { ...props.style, textTransform: "none" }, sx: { overflowWrap: "inherit" }, color: "primary", disabled: uploading, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }) : /* @__PURE__ */ jsx18(
+      Button4,
+      {
+        variant: props.chosenFile == void 0 ? "contained" : "outlined",
+        color: "info",
+        onClick: handleClickOpen,
+        sx: { marginRight: "10pt" },
+        style: { ...props.style, textTransform: "none" },
+        children: props.chosenFile == void 0 ? props.buttonText ? props.buttonText : "Choose" : props.chosenFile
+      }
+    ),
+    selectionDialog
+  ] });
+};
+var SelectUpload_default = CMRSelectUpload;
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -1050,7 +1150,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx18("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx19(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -1075,6 +1175,7 @@ var CmrTable_default = CmrTable;
 // src/index.ts
 var CmrTable2 = CmrTable_default;
 export {
+  SelectUpload_default as CMRSelectUpload,
   Upload_default as CMRUpload,
   CmrButton_default as CmrButton,
   Checkbox_default as CmrCheckbox,

package/package.json

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