cloudmr-ux 1.0.8 → 1.1.0

package/dist/index.d.ts

@@ -171,6 +171,33 @@ declare function CmrNameDialog(props: {
     setOpen: (open: boolean) => void;
 }): react_jsx_runtime.JSX.Element;
 
+declare function CmrConfirmation({ name, message, cancelText, color, open, setOpen, confirmCallback, confirmText, cancellable, cancelCallback, width }: {
+    name: string | undefined;
+    cancelText?: string;
+    message: string | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    confirmCallback?: () => void;
+    cancellable?: boolean;
+    cancelCallback?: () => void;
+    width?: number;
+    confirmText?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface TabInfo {
+    id: number;
+    text: string;
+    disable?: boolean;
+    children: JSX.Element;
+}
+
+interface CmrTabsProps {
+    tabList: TabInfo[];
+    onTabSelected?: (tabId: number) => void;
+}
+declare function CmrTabs(props: CmrTabsProps): react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -181,4 +208,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrInput, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, LambdaFile };
+export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrInput, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };

package/dist/index.js

@@ -34,12 +34,14 @@ __export(src_exports, {
   CmrButton: () => CmrButton,
   CmrCheckbox: () => CmrCheckbox,
   CmrCollapse: () => Collapse_default,
+  CmrConfirmation: () => CmrConfirmation,
   CmrInput: () => CmrInput,
   CmrNameDialog: () => CmrNameDialog,
   CmrPanel: () => Panel_default,
   CmrRadioGroup: () => CmrRadioGroup_default,
   CmrSelect: () => CmrSelect_default,
-  CmrTable: () => CmrTable2
+  CmrTable: () => CmrTable2,
+  CmrTabs: () => CmrTabs
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -848,9 +850,128 @@ function CmrNameDialog(props) {
   ) });
 }
 
+// src/CmrComponents/dialogue/Confirmation.tsx
+var React7 = __toESM(require("react"));
+var import_Dialog3 = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions3 = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent3 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText2 = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle3 = __toESM(require("@mui/material/DialogTitle"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CmrConfirmation({
+  name,
+  message,
+  cancelText = "Cancel",
+  color,
+  open,
+  setOpen,
+  confirmCallback = () => {
+  },
+  confirmText = "Confirm",
+  cancellable = false,
+  cancelCallback = () => {
+  },
+  width
+}) {
+  const [text, setText] = React7.useState("");
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    confirmCallback();
+    handleClose();
+  };
+  const handleCancel = () => {
+    cancelCallback();
+    handleClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Dialog3.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_DialogTitle3.default, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_DialogContent3.default, { sx: { width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_DialogContentText2.default, { alignContent: "center", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_DialogActions3.default, { className: "mt-4", children: [
+        cancellable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CmrButton, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: cancelText }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CmrButton, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CmrTabs/CmrTabs.tsx
+var React8 = __toESM(require("react"));
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
+var import_Tab = __toESM(require("@mui/material/Tab"));
+var import_Container = __toESM(require("@mui/material/Container"));
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var import_Box2 = __toESM(require("@mui/material/Box"));
+var import_react6 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`,
+      ...other,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box2.default, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Typography2.default, { children }) })
+    }
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`
+  };
+}
+function CmrTabs(props) {
+  const [value, setValue] = React8.useState(0);
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+    if (props.onTabSelected)
+      props.onTabSelected(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_Container.default,
+    {
+      maxWidth: "lg",
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        mt: 4
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box2.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_Tabs.default,
+          {
+            value,
+            onChange: handleChange,
+            "aria-label": "basic tabs example",
+            textColor: "inherit",
+            TabIndicatorProps: {
+              style: {
+                backgroundColor: "#580F8B"
+              }
+            },
+            children: props.tabList.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Tab.default, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
+          }
+        ) }),
+        props.tabList.map(
+          (tab, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CustomTabPanel, { value, index, children: (0, import_react6.cloneElement)(tab.children, {
+            visible: value == index
+          }) })
+        )
+      ]
+    }
+  );
+}
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -862,7 +983,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -892,10 +1013,12 @@ var CmrTable2 = CmrTable_default;
   CmrButton,
   CmrCheckbox,
   CmrCollapse,
+  CmrConfirmation,
   CmrInput,
   CmrNameDialog,
   CmrPanel,
   CmrRadioGroup,
   CmrSelect,
-  CmrTable
+  CmrTable,
+  CmrTabs
 });

package/dist/index.mjs

@@ -809,9 +809,128 @@ function CmrNameDialog(props) {
   ) });
 }
 
+// src/CmrComponents/dialogue/Confirmation.tsx
+import * as React7 from "react";
+import Dialog3 from "@mui/material/Dialog";
+import DialogActions3 from "@mui/material/DialogActions";
+import DialogContent3 from "@mui/material/DialogContent";
+import DialogContentText2 from "@mui/material/DialogContentText";
+import DialogTitle3 from "@mui/material/DialogTitle";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function CmrConfirmation({
+  name,
+  message,
+  cancelText = "Cancel",
+  color,
+  open,
+  setOpen,
+  confirmCallback = () => {
+  },
+  confirmText = "Confirm",
+  cancellable = false,
+  cancelCallback = () => {
+  },
+  width
+}) {
+  const [text, setText] = React7.useState("");
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    confirmCallback();
+    handleClose();
+  };
+  const handleCancel = () => {
+    cancelCallback();
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs8(Dialog3, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx12(DialogTitle3, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ jsxs8(DialogContent3, { sx: { width }, children: [
+      /* @__PURE__ */ jsx12(DialogContentText2, { alignContent: "center", children: message }),
+      /* @__PURE__ */ jsxs8(DialogActions3, { className: "mt-4", children: [
+        cancellable && /* @__PURE__ */ jsx12(CmrButton, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: cancelText }),
+        /* @__PURE__ */ jsx12(CmrButton, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CmrTabs/CmrTabs.tsx
+import * as React8 from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Container from "@mui/material/Container";
+import Typography3 from "@mui/material/Typography";
+import Box3 from "@mui/material/Box";
+import { cloneElement as cloneElement2 } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`,
+      ...other,
+      children: /* @__PURE__ */ jsx13(Box3, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx13(Typography3, { children }) })
+    }
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`
+  };
+}
+function CmrTabs(props) {
+  const [value, setValue] = React8.useState(0);
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+    if (props.onTabSelected)
+      props.onTabSelected(newValue);
+  };
+  return /* @__PURE__ */ jsxs9(
+    Container,
+    {
+      maxWidth: "lg",
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        mt: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx13(Box3, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx13(
+          Tabs,
+          {
+            value,
+            onChange: handleChange,
+            "aria-label": "basic tabs example",
+            textColor: "inherit",
+            TabIndicatorProps: {
+              style: {
+                backgroundColor: "#580F8B"
+              }
+            },
+            children: props.tabList.map((tab, index) => /* @__PURE__ */ jsx13(Tab, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
+          }
+        ) }),
+        props.tabList.map(
+          (tab, index) => /* @__PURE__ */ jsx13(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
+            visible: value == index
+          }) })
+        )
+      ]
+    }
+  );
+}
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -823,7 +942,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx12("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx14(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -852,10 +971,12 @@ export {
   CmrButton,
   CmrCheckbox,
   Collapse_default as CmrCollapse,
+  CmrConfirmation,
   CmrInput,
   CmrNameDialog,
   Panel_default as CmrPanel,
   CmrRadioGroup_default as CmrRadioGroup,
   CmrSelect_default as CmrSelect,
-  CmrTable2 as CmrTable
+  CmrTable2 as CmrTable,
+  CmrTabs
 };

package/package.json

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