@m4l/layouts 0.1.38 → 0.1.40

package/hooks/useAuth/index.cb6a3420.js

@@ -1,11 +1,11 @@
-import { useContext as o } from "react";
-import { a as e } from "../../contexts/AuthContext/index.6f966215.js";
-const n = () => {
-  const t = o(e);
-  if (!t)
+import { useContext } from "react";
+import { a as AuthContext } from "../../contexts/AuthContext/index.6f966215.js";
+const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context)
     throw new Error("Auth context must be use inside AuthProvider");
-  return t;
+  return context;
 };
 export {
-  n as u
+  useAuth as u
 };

package/hooks/useMasterDetail/index.927c0c26.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.bca0fce5.js";
+const useMasterDetail = () => useContext(MasterDetailContext);
+export {
+  useMasterDetail as u
+};

package/hooks/useModule/index.edcd7b28.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { M as ModuleContext } from "../../layouts/ModuleLayout/index.850f7dcf.js";
+const useModule = () => {
+  const context = useContext(ModuleContext);
+  if (!context)
+    throw new Error("useModule context must be use inside ModuleContext");
+  return context;
+};
+export {
+  useModule as u
+};

package/index.js

@@ -1,13 +1,13 @@
-import { M as f } from "./components/MFIsolationApp/index.ed197bc0.js";
-import { M as D } from "./components/MFHostApp/index.420c2626.js";
-import { B as L } from "./components/BaseModule/index.6309486a.js";
-import { a as g, A as h } from "./contexts/AuthContext/index.6f966215.js";
-import { a as N, d as B, g as F } from "./layouts/ModuleLayout/index.90b4dc8e.js";
-import { a as H, d as I, g as P } from "./layouts/MasterDetailLayout/index.2c363c7a.js";
-import { N as j, d as k, g as q } from "./layouts/NoAuthModuleLayout/index.eabf38c1.js";
-import { u as z } from "./hooks/useMasterDetail/index.50331312.js";
-import { u as G } from "./hooks/useAuth/index.cb6a3420.js";
-import { u as K } from "./hooks/useModule/index.35cc5fe0.js";
+import { M } from "./components/MFIsolationApp/index.e36cf308.js";
+import { M as M2 } from "./components/MFHostApp/index.420c2626.js";
+import { B } from "./components/BaseModule/index.6309486a.js";
+import { a, A } from "./contexts/AuthContext/index.6f966215.js";
+import { a as a2, d, g } from "./layouts/ModuleLayout/index.850f7dcf.js";
+import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.bca0fce5.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.eabf38c1.js";
+import { u } from "./hooks/useMasterDetail/index.927c0c26.js";
+import { u as u2 } from "./hooks/useAuth/index.cb6a3420.js";
+import { u as u3 } from "./hooks/useModule/index.edcd7b28.js";
 import "react";
 import "react-router-dom";
 import "react-toastify";
@@ -22,21 +22,21 @@ import "nprogress";
 import "@m4l/components";
 import "@mui/material/styles";
 export {
-  g as AuthContext,
-  h as AuthProvider,
-  L as BaseModule,
-  D as MFHostApp,
-  f as MFIsolationApp,
-  H as MasterDetailLayout,
-  N as ModuleLayout,
-  j as NoAuthModuleLayout,
-  I as defaultMasterDetailDictionary,
-  B as defaultModuleLayoutDictionary,
-  k as defaultNoAuthModuleLayoutDictionary,
-  P as getMasterDetailLayoutComponentsDictionary,
-  F as getModuleLayoutComponentsDictionary,
-  q as getNoAuthModuleLayoutComponentsDictionary,
-  G as useAuth,
-  z as useMasterDetail,
-  K as useModule
+  a as AuthContext,
+  A as AuthProvider,
+  B as BaseModule,
+  M2 as MFHostApp,
+  M as MFIsolationApp,
+  a3 as MasterDetailLayout,
+  a2 as ModuleLayout,
+  N as NoAuthModuleLayout,
+  d2 as defaultMasterDetailDictionary,
+  d as defaultModuleLayoutDictionary,
+  d3 as defaultNoAuthModuleLayoutDictionary,
+  g2 as getMasterDetailLayoutComponentsDictionary,
+  g as getModuleLayoutComponentsDictionary,
+  g3 as getNoAuthModuleLayoutComponentsDictionary,
+  u2 as useAuth,
+  u as useMasterDetail,
+  u3 as useModule
 };

package/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MasterDetailContextProps, MasterDetailProviderProps } from './types';
 declare const MasterDetailContext: import("react").Context<MasterDetailContextProps>;
-declare function MasterDetailProvider(props: MasterDetailProviderProps): JSX.Element;
+declare function MasterDetailProvider(props: MasterDetailProviderProps): import("react").JSX.Element;
 export { MasterDetailProvider, MasterDetailContext };

package/layouts/MasterDetailLayout/index.bca0fce5.js

@@ -0,0 +1,136 @@
+import { createContext, useState, useRef, useMemo, useCallback } from "react";
+import { voidFunction, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { WindowBase, SplitLayout } from "@m4l/components";
+import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index.850f7dcf.js";
+import { jsx } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const initialState = {
+  masterSelection: void 0,
+  onChangeMasterSelection: voidFunction
+};
+const MasterDetailContext = createContext(initialState);
+function MasterDetailProvider(props) {
+  const {
+    children
+  } = props;
+  const [masterSelection, setMasterSelection] = useState(void 0);
+  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
+    value: {
+      masterSelection,
+      onChangeMasterSelection: setMasterSelection
+    },
+    children
+  });
+}
+function getTotalModuleActions(splitActions, moduleActions = [], viewDetailAction, isDesktop) {
+  let totalActions = isDesktop !== void 0 && isDesktop ? [...splitActions] : [viewDetailAction];
+  totalActions = moduleActions.concat(totalActions);
+  return totalActions;
+}
+function MasterDetailLayout(props) {
+  const {
+    moduleId,
+    masterComponent,
+    detailComponent,
+    moduleActions,
+    version
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const [splitPosition, setSplitPosition] = useState("vertical");
+  const isDesktop = useResponsiveDesktop();
+  const moduleLayoutRef = useRef(null);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const splitActions = useMemo(() => [{
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+    onClick: () => onChangePostionInternal("vertical"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.split_vertical"),
+    tag: "vertical",
+    className: "splitactions",
+    disabled: splitPosition === "vertical",
+    key: "vertical"
+  }, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+    onClick: () => onChangePostionInternal("horizontal"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.split_horizontal"),
+    tag: "horizontal",
+    className: "splitactions",
+    disabled: splitPosition === "horizontal",
+    key: "horizontal"
+  }, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+    onClick: () => onChangePostionInternal("none"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.no_split"),
+    tag: "none",
+    className: "splitactions",
+    disabled: splitPosition === "none",
+    key: "none"
+  }], [getLabel, splitPosition]);
+  const onChangePostionInternal = useCallback((newPostion) => {
+    setSplitPosition(newPostion);
+  }, []);
+  const onClickViewDetail = useCallback(() => {
+    moduleLayoutRef.current?.openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      window: /* @__PURE__ */ jsx(WindowBase, {
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+        title: getLabel("master_detail_layout.view_detail"),
+        children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
+      })
+    });
+  }, [detailComponent, getLabel]);
+  const viewDetailAction = useMemo(() => {
+    return {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+      onClick: onClickViewDetail,
+      disabled: false,
+      visibility: "allways",
+      label: getLabel("master_detail_layout.view_detail"),
+      tag: "none",
+      className: "",
+      key: "detail"
+    };
+  }, [environment_assets, onClickViewDetail]);
+  const finalModuleActions = useMemo(() => {
+    const actions = getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop);
+    return actions;
+  }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
+  return /* @__PURE__ */ jsx(MasterDetailProvider, {
+    children: /* @__PURE__ */ jsx(ModuleLayout, {
+      ref: moduleLayoutRef,
+      moduleId,
+      moduleActions: finalModuleActions,
+      version,
+      children: /* @__PURE__ */ jsx(SplitLayout, {
+        splitPosition: isDesktop ? splitPosition : "none",
+        firstPart: masterComponent,
+        secondPart: detailComponent
+      })
+    })
+  });
+}
+function getMasterDetailLayoutComponentsDictionary() {
+  return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());
+}
+const defaultMasterDetailDictionary = {
+  master_detail_layout: {
+    split_vertical: "Split vertically",
+    split_horizontal: "Split horizontally",
+    no_split: "No split",
+    view_detail: "View detail"
+  }
+};
+export {
+  MasterDetailContext as M,
+  MasterDetailLayout as a,
+  defaultMasterDetailDictionary as d,
+  getMasterDetailLayoutComponentsDictionary as g
+};

package/layouts/MasterDetailLayout/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { MasterDetailLayoutProps } from './types';
-export declare function MasterDetailLayout(props: MasterDetailLayoutProps): JSX.Element;
+export declare function MasterDetailLayout(props: MasterDetailLayoutProps): import("react").JSX.Element;

package/layouts/ModuleLayout/contexts/ModuleContext/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ModuleLayoutContextProps, ModuleLayoutProviderProps } from './types';
 declare const ModuleContext: import("react").Context<ModuleLayoutContextProps | null>;
-declare function ModuleProvider(props: ModuleLayoutProviderProps): JSX.Element;
+declare function ModuleProvider(props: ModuleLayoutProviderProps): import("react").JSX.Element;
 export { ModuleProvider, ModuleContext };

package/layouts/ModuleLayout/index.850f7dcf.js

@@ -0,0 +1,118 @@
+import { useModal, useWindowToolsMF, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
+import { forwardRef, useRef, useImperativeHandle, createContext, useState, useMemo, useEffect } from "react";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperInnerModule = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  margin: "0px 12px 12px 12px",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px",
+  overflow: "hidden"
+}));
+const ModuleContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  position: "relative",
+  marginTop: theme.spacing(1),
+  justifyContent: "center",
+  flexGrow: "1",
+  overflow: "hidden"
+}));
+const InnerModule = forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    openModal
+  } = useModal();
+  const divRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    openModal,
+    current: divRef.current
+  }));
+  return /* @__PURE__ */ jsx(WrapperInnerModule, {
+    id: "WrapperInnerModule",
+    className: "m4l_module_layout",
+    ref: divRef,
+    children: /* @__PURE__ */ jsx(ModuleContent, {
+      id: "ModuleContent",
+      children
+    })
+  });
+});
+InnerModule.displayName = "InnerModule";
+const ModuleContext = createContext(null);
+function ModuleProvider(props) {
+  const {
+    children,
+    moduleActions,
+    moduleId,
+    version
+  } = props;
+  const [configOptions] = useState(() => ({
+    moduleId,
+    dictionary: void 0
+  }));
+  const {
+    setActions
+  } = useWindowToolsMF();
+  const [dynamicActions, setDynamicActions] = useState([]);
+  const finalModuleActions = useMemo(() => {
+    return (moduleActions || []).concat(dynamicActions);
+  }, [moduleActions, dynamicActions]);
+  useEffect(() => {
+    setActions(finalModuleActions, version);
+  }, [finalModuleActions]);
+  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
+    value: {
+      setDynamicActions,
+      moduleId: configOptions.moduleId
+    },
+    children
+  });
+}
+const ModuleLayout = forwardRef((props, ref) => {
+  const {
+    moduleId,
+    moduleActions,
+    version,
+    children
+  } = props;
+  const moduleRef = useRef(null);
+  const openModal = (modalOpenProps) => {
+    moduleRef.current?.openModal(modalOpenProps);
+  };
+  useImperativeHandle(ref, () => ({
+    openModal,
+    current: moduleRef.current
+  }));
+  return /* @__PURE__ */ jsx(ModuleProvider, {
+    moduleId,
+    moduleActions,
+    version,
+    children: /* @__PURE__ */ jsx(ModalProvider, {
+      children: /* @__PURE__ */ jsx(InnerModule, {
+        ref: moduleRef,
+        children
+      })
+    })
+  });
+});
+ModuleLayout.displayName = "ModuleLayout";
+function getModuleLayoutComponentsDictionary() {
+  return ["module_layout"].concat(getModalDialogComponentsDictionary());
+}
+const defaultModuleLayoutDictionary = {
+  module_layout: {}
+};
+export {
+  ModuleContext as M,
+  ModuleLayout as a,
+  defaultModuleLayoutDictionary as d,
+  getModuleLayoutComponentsDictionary as g
+};

package/layouts/ModuleLayout/subcomponents/InnerModule/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperInnerModule: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModuleContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/layouts/NoAuthModuleLayout/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { NoAuthModuleLayoutProps } from './types';
-export declare const NoAuthModuleLayout: (props: NoAuthModuleLayoutProps) => JSX.Element;
+export declare const NoAuthModuleLayout: (props: NoAuthModuleLayoutProps) => import("react").JSX.Element;