cloudmr-ux 1.0.7 → 1.0.8

package/dist/index.d.ts

@@ -164,6 +164,13 @@ declare const CmrUpload: {
     };
 };
 
+declare function CmrNameDialog(props: {
+    originalName: string;
+    renamingCallback: (alias: string) => Promise<boolean>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}): react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -174,4 +181,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrInput, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, LambdaFile };
+export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrInput, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, LambdaFile };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   CmrCheckbox: () => CmrCheckbox,
   CmrCollapse: () => Collapse_default,
   CmrInput: () => CmrInput,
+  CmrNameDialog: () => CmrNameDialog,
   CmrPanel: () => Panel_default,
   CmrRadioGroup: () => CmrRadioGroup_default,
   CmrSelect: () => CmrSelect_default,
@@ -758,9 +759,98 @@ CmrUpload.defaultProps = {
 };
 var Upload_default = CmrUpload;
 
+// src/CmrComponents/rename/edit.tsx
+var React6 = __toESM(require("react"));
+var import_material8 = require("@mui/material");
+var import_TextField2 = __toESM(require("@mui/material/TextField"));
+var import_Dialog2 = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions2 = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent2 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogTitle2 = __toESM(require("@mui/material/DialogTitle"));
+var import_react5 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function CmrNameDialog(props) {
+  let { originalName, open, setOpen } = props;
+  const [helperText, setHelperText] = React6.useState("");
+  const [text, setText] = React6.useState(originalName);
+  const [error, setError] = React6.useState(false);
+  const renamingCallback = props.renamingCallback;
+  const handleClose = () => {
+    setOpen(false);
+  };
+  (0, import_react5.useEffect)(() => {
+    checkError(originalName);
+  }, [originalName]);
+  const handleConfirm = async () => {
+    if (await renamingCallback(text))
+      handleClose();
+  };
+  const handleTextFieldChange = (e) => {
+    setText(e.target.value);
+    checkError(e.target.value);
+  };
+  const checkError = (text2) => {
+    const fileNameRegex = /^[a-zA-Z0-9_\-]+\.[a-zA-Z]{1,5}$/;
+    let newExtension = text2.split(".").pop();
+    let orgExtension = originalName.indexOf(".") >= 0 ? originalName.split(".").pop() : "?";
+    if (!fileNameRegex.test(text2)) {
+      setError(true);
+      if (text2.indexOf(".") < 0) {
+        setHelperText("Invalid file name, needs a valid extension.");
+      } else {
+        setHelperText("Invalid file name, please check.");
+      }
+    } else if (newExtension !== orgExtension) {
+      setHelperText(`You are modifying your file extension from .${orgExtension} to .${newExtension}.`);
+      setError(false);
+    } else {
+      setError(false);
+      setHelperText("");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_Dialog2.default,
+    {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "xs",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Typography, { children: [
+          " Rename the File ",
+          originalName,
+          " as:"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogContent2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_TextField2.default,
+          {
+            autoFocus: true,
+            margin: "dense",
+            id: "name",
+            defaultValue: originalName,
+            onFocus: (event) => {
+              event.target.select();
+            },
+            fullWidth: true,
+            inputProps: { style: { fontSize: "16px" } },
+            variant: "standard",
+            onChange: handleTextFieldChange,
+            error,
+            helperText
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_DialogActions2.default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CmrButton, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CmrButton, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
+        ] })
+      ]
+    }
+  ) });
+}
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -772,7 +862,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -803,6 +893,7 @@ var CmrTable2 = CmrTable_default;
   CmrCheckbox,
   CmrCollapse,
   CmrInput,
+  CmrNameDialog,
   CmrPanel,
   CmrRadioGroup,
   CmrSelect,

package/dist/index.mjs

@@ -720,9 +720,98 @@ CmrUpload.defaultProps = {
 };
 var Upload_default = CmrUpload;
 
+// src/CmrComponents/rename/edit.tsx
+import * as React6 from "react";
+import { Typography as Typography2 } from "@mui/material";
+import TextField2 from "@mui/material/TextField";
+import Dialog2 from "@mui/material/Dialog";
+import DialogActions2 from "@mui/material/DialogActions";
+import DialogContent2 from "@mui/material/DialogContent";
+import DialogTitle2 from "@mui/material/DialogTitle";
+import { useEffect } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function CmrNameDialog(props) {
+  let { originalName, open, setOpen } = props;
+  const [helperText, setHelperText] = React6.useState("");
+  const [text, setText] = React6.useState(originalName);
+  const [error, setError] = React6.useState(false);
+  const renamingCallback = props.renamingCallback;
+  const handleClose = () => {
+    setOpen(false);
+  };
+  useEffect(() => {
+    checkError(originalName);
+  }, [originalName]);
+  const handleConfirm = async () => {
+    if (await renamingCallback(text))
+      handleClose();
+  };
+  const handleTextFieldChange = (e) => {
+    setText(e.target.value);
+    checkError(e.target.value);
+  };
+  const checkError = (text2) => {
+    const fileNameRegex = /^[a-zA-Z0-9_\-]+\.[a-zA-Z]{1,5}$/;
+    let newExtension = text2.split(".").pop();
+    let orgExtension = originalName.indexOf(".") >= 0 ? originalName.split(".").pop() : "?";
+    if (!fileNameRegex.test(text2)) {
+      setError(true);
+      if (text2.indexOf(".") < 0) {
+        setHelperText("Invalid file name, needs a valid extension.");
+      } else {
+        setHelperText("Invalid file name, please check.");
+      }
+    } else if (newExtension !== orgExtension) {
+      setHelperText(`You are modifying your file extension from .${orgExtension} to .${newExtension}.`);
+      setError(false);
+    } else {
+      setError(false);
+      setHelperText("");
+    }
+  };
+  return /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsxs7(
+    Dialog2,
+    {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "xs",
+      children: [
+        /* @__PURE__ */ jsx11(DialogTitle2, { children: /* @__PURE__ */ jsxs7(Typography2, { children: [
+          " Rename the File ",
+          originalName,
+          " as:"
+        ] }) }),
+        /* @__PURE__ */ jsx11(DialogContent2, { children: /* @__PURE__ */ jsx11(
+          TextField2,
+          {
+            autoFocus: true,
+            margin: "dense",
+            id: "name",
+            defaultValue: originalName,
+            onFocus: (event) => {
+              event.target.select();
+            },
+            fullWidth: true,
+            inputProps: { style: { fontSize: "16px" } },
+            variant: "standard",
+            onChange: handleTextFieldChange,
+            error,
+            helperText
+          }
+        ) }),
+        /* @__PURE__ */ jsxs7(DialogActions2, { children: [
+          /* @__PURE__ */ jsx11(CmrButton, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx11(CmrButton, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
+        ] })
+      ]
+    }
+  ) });
+}
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -734,7 +823,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx11("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx12(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -764,6 +853,7 @@ export {
   CmrCheckbox,
   Collapse_default as CmrCollapse,
   CmrInput,
+  CmrNameDialog,
   Panel_default as CmrPanel,
   CmrRadioGroup_default as CmrRadioGroup,
   CmrSelect_default as CmrSelect,

package/package.json

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