@m4l/components 0.0.2 → 0.0.3

package/dist/contexts/ModalContext/index.js

@@ -1,24 +1,16 @@
-import "@mui/material/Typography";
-import { voidFunction } from "@m4l/core";
-import "@mui/material/Box";
-import "react/jsx-runtime";
-import { createContext } from "react";
+import { createContext, useState } from "react";
+import { useEnvironment, voidFunction } from "@m4l/core";
+import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
-import "@mui/material";
-import "../../react-draggable.js";
-import "../../components/ModalDialog/index.js";
-import "../../components/Resizeable/index.js";
-import "@mui/material/useMediaQuery";
-import "../../components/mui_extended/MenuPopover/index.js";
-import "react-router-dom";
-import "../../components/mui_extended/MenuActions/index.js";
-import "../../components/FormActions/index.js";
-styled("div")(() => ({
+import { B as BoxIcon } from "../../components/mui_extended/BoxIcon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { M as ModalDialog } from "../../components/ModalDialog/index.js";
+const WrapperContentConfirm = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   height: "100%"
 }));
-styled("div")(({
+const ModalContent = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -33,7 +25,7 @@ styled("div")(({
     gridTemplateColumns: "1fr 1fr"
   }
 }));
-styled("div")(({
+const IllustrationContainer = styled("div")(({
   theme,
   variant
 }) => ({
@@ -44,10 +36,42 @@ styled("div")(({
     background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
   }
 }));
-styled("div")(() => ({
+const MessageContainer = styled("div")(() => ({
   display: "flex",
   alignItems: "center"
 }));
+const ContentConfirm = (props) => {
+  const {
+    variant = "info",
+    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
+  } = props;
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  return /* @__PURE__ */ jsx(WrapperContentConfirm, {
+    children: /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
+        variant,
+        children: /* @__PURE__ */ jsx(BoxIcon, {
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
+          sx: {
+            width: "230px",
+            height: "194px"
+          }
+        })
+      }), /* @__PURE__ */ jsx(MessageContainer, {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body1",
+          children: msg
+        })
+      })]
+    })
+  });
+};
 const initialState = {
   initialWidth: 600,
   initialHeigth: 400,
@@ -65,4 +89,74 @@ const initialState = {
   title: ""
 };
 const ModalContext = createContext(initialState);
-export { ModalContext as M };
+function ModalProvider({
+  children
+}) {
+  const [modalOptions, setModalOptions] = useState({
+    open: initialState.open,
+    withClose: true,
+    onQueryClose: voidFunction,
+    title: "",
+    iconComponent: void 0,
+    contentComponent: void 0,
+    actionComponents: void 0,
+    standardActions: void 0,
+    variant: void 0
+  });
+  const [hasChanges, setHasChanges] = useState(false);
+  const openModal = (modalOpenProps) => {
+    setModalOptions({
+      open: true,
+      ...modalOpenProps
+    });
+  };
+  const openModalConfirm = (modalOpenConfirmProps) => {
+    const {
+      variant = "warning",
+      title,
+      msg,
+      onClickIntro,
+      onClickCancel
+    } = modalOpenConfirmProps;
+    const onClickIntroClose = () => {
+      onClickIntro && onClickIntro();
+      closeModal();
+    };
+    setModalOptions({
+      open: true,
+      title,
+      variant,
+      contentComponent: /* @__PURE__ */ jsx(ContentConfirm, {
+        variant,
+        msg
+      }),
+      standardActions: {
+        withCancel: true,
+        onClickIntro: onClickIntroClose,
+        onClickCancel
+      }
+    });
+  };
+  const closeModal = () => {
+    setModalOptions((last) => ({
+      ...last,
+      open: false
+    }));
+    setHasChanges(false);
+  };
+  const setChanges = () => {
+    setHasChanges(true);
+  };
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+    value: {
+      ...modalOptions,
+      openModal,
+      openModalConfirm,
+      closeModal,
+      hasChanges,
+      setChanges
+    },
+    children: [children, /* @__PURE__ */ jsx(ModalDialog, {})]
+  });
+}
+export { ModalContext as M, ModalProvider as a };

package/dist/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModalContext/index';
+export * from './ModalContext/types';

package/dist/hooks/useModal/index.d.ts

@@ -1 +1 @@
-export declare const useModal: () => import("../../contexts/ModalContext/types").ModalContextProps;
+export declare const useModal: () => import("../..").ModalContextProps;

package/dist/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export * from './contexts';
+export * from './hooks/useModal';

package/dist/index.js

@@ -6,6 +6,8 @@ export { F as FormActions } from "./components/FormActions/index.js";
 export { M as ModalDialog } from "./components/ModalDialog/index.js";
 export { R as Resizeable } from "./components/Resizeable/index.js";
 export { S as SplitLayout } from "./components/SplitLayout/index.js";
+export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
+export { u as useModal } from "./hooks/useModal/index.js";
 import "@mui/material/Box";
 import "react/jsx-runtime";
 import "@mui/material/styles";
@@ -17,11 +19,9 @@ import "./react-draggable.js";
 import "prop-types";
 import "react-dom";
 import "clsx";
-import "./hooks/useModal/index.js";
-import "./contexts/ModalContext/index.js";
-import "@mui/material/Typography";
-import "@mui/material/useMediaQuery";
 import "./vendor.js";
+import "@mui/material/useMediaQuery";
 import "./react-splitter-layout.js";
 import "./commonjs.js";
 import "./react-resizable.js";
+import "@mui/material/Typography";

package/dist/vendor.js

@@ -17,6 +17,7 @@ import "./react-splitter-layout.js";
 import "./components/SplitLayout/index.js";
 import "./components/mui_extended/BoxIcon/index.js";
 import "./components/mui_extended/Breadcrumbs/index.js";
+import "./hooks/useModal/index.js";
 function useResponsive(query, key, start, end) {
   const theme = useTheme();
   const mediaUp = useMediaQuery(theme.breakpoints.up(key));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",