cloudmr-ux 1.3.1 → 1.3.3

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps, SxProps, Theme } from '@mui/material';
-import React, { ReactNode, ChangeEvent, CSSProperties, FC } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode, ChangeEvent, CSSProperties, FC } from 'react';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import { CollapsibleType } from 'antd/es/collapse/CollapsePanel';
 import { ExpandIconPosition } from 'antd/es/collapse/Collapse';
@@ -9,17 +10,17 @@ import { DataGridProps } from '@mui/x-data-grid';
 
 declare const CmrButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+interface CmrInputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
     defaultValue?: string;
     id?: string;
     maxLength?: number;
     size?: SizeType;
     value?: string;
     type?: any;
-    prefix?: React.ReactNode;
+    prefix?: React__default.ReactNode;
     bordered?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onPressEnter?: (e: React__default.KeyboardEvent<HTMLInputElement>) => void;
 }
 declare const CmrInput: (props: CmrInputProps) => react_jsx_runtime.JSX.Element;
 
@@ -34,7 +35,7 @@ interface CmrRadioProps {
     defaultValue?: string;
     onChange?: (value: string) => void;
 }
-declare const CmrRadioGroup: React.FC<CmrRadioProps>;
+declare const CmrRadioGroup: React__default.FC<CmrRadioProps>;
 
 interface Option {
     label: string;
@@ -45,7 +46,7 @@ interface CmrSelectProps {
     label: string;
     disabled?: boolean;
 }
-declare const CmrSelect: React.FC<CmrSelectProps>;
+declare const CmrSelect: React__default.FC<CmrSelectProps>;
 
 interface CmrCollapseProps {
     accordion?: boolean;
@@ -61,14 +62,14 @@ interface CmrCollapseProps {
 }
 declare const CmrCollapse: (props: CmrCollapseProps) => react_jsx_runtime.JSX.Element;
 
-interface CmrPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CmrPanelProps extends React__default.HTMLAttributes<HTMLDivElement> {
     activeKey?: string | string[];
     header: string | undefined;
     children: ReactNode;
     panelKey?: number;
     onToggle?: (key: number | undefined) => void;
     expanded?: boolean;
-    cardProps?: React.HTMLAttributes<HTMLDivElement>;
+    cardProps?: React__default.HTMLAttributes<HTMLDivElement>;
 }
 declare const CmrPanel: (props: CmrPanelProps) => react_jsx_runtime.JSX.Element;
 
@@ -84,7 +85,7 @@ interface LambdaFile {
  * functionalities and call back methods evoked
  * for specific interactions
  */
-interface CMRUploadProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CMRUploadProps extends React__default.HTMLAttributes<HTMLDivElement> {
     retains?: boolean;
     maxCount: number;
     changeNameAfterUpload?: boolean;
@@ -205,7 +206,7 @@ interface CmrTabsProps {
 }
 declare function CmrTabs(props: CmrTabsProps): react_jsx_runtime.JSX.Element;
 
-interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CmrCheckboxProps extends React__default.HTMLAttributes<HTMLDivElement> {
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
@@ -218,7 +219,7 @@ interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const CmrCheckbox: (props: CmrCheckboxProps) => react_jsx_runtime.JSX.Element;
 
-interface CmrLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CmrLabelProps extends React__default.HTMLAttributes<HTMLDivElement> {
     required?: boolean;
     children?: any;
 }
@@ -233,11 +234,54 @@ interface CmrInputNumberProps {
     size?: SizeType;
     value?: number;
     onChange?: (value: number | null) => void;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     style?: CSSProperties;
 }
 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 UploadWindowProps {
+    upload: (file: File, fileAlias: string, fileDatabase: string) => Promise<number>;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    fileExtension?: string;
+    template?: {
+        showFileName?: boolean;
+        showDatabase?: boolean;
+        showFileSize?: boolean;
+    };
+}
+declare function CmrUploadWindow({ upload, open, setOpen, fileExtension, template, }: UploadWindowProps): react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -248,4 +292,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, CmrUploadWindow, 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,
@@ -45,7 +46,8 @@ __export(src_exports, {
   CmrRadioGroup: () => CmrRadioGroup_default,
   CmrSelect: () => CmrSelect_default,
   CmrTable: () => CmrTable2,
-  CmrTabs: () => CmrTabs
+  CmrTabs: () => CmrTabs,
+  CmrUploadWindow: () => CmrUploadWindow
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -288,7 +290,7 @@ var Label_default = CmrLabel;
 
 // src/CmrComponents/upload/UploadWindow.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function UploadWindow({
+function CmrUploadWindow({
   upload,
   open,
   setOpen,
@@ -709,7 +711,7 @@ var CmrUpload = (props) => {
       "%"
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      UploadWindow,
+      CmrUploadWindow,
       {
         open,
         setOpen,
@@ -1081,9 +1083,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 +1197,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 +1223,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,
@@ -1136,5 +1239,6 @@ var CmrTable2 = CmrTable_default;
   CmrRadioGroup,
   CmrSelect,
   CmrTable,
-  CmrTabs
+  CmrTabs,
+  CmrUploadWindow
 });

package/dist/index.mjs

@@ -243,7 +243,7 @@ var Label_default = CmrLabel;
 
 // src/CmrComponents/upload/UploadWindow.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function UploadWindow({
+function CmrUploadWindow({
   upload,
   open,
   setOpen,
@@ -664,7 +664,7 @@ var CmrUpload = (props) => {
       "%"
     ] }),
     /* @__PURE__ */ jsx10(
-      UploadWindow,
+      CmrUploadWindow,
       {
         open,
         setOpen,
@@ -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,
@@ -1090,5 +1191,6 @@ export {
   CmrRadioGroup_default as CmrRadioGroup,
   CmrSelect_default as CmrSelect,
   CmrTable2 as CmrTable,
-  CmrTabs
+  CmrTabs,
+  CmrUploadWindow
 };

package/package.json

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