@m4l/layouts 0.1.3 → 0.1.5

package/layouts/MasterDetailLayout/index.js

@@ -43,7 +43,6 @@ function ButtonDetail(props) {
     onClick,
     description
   } = props;
-  console.log("ButtonDetail", masterSelection);
   return /* @__PURE__ */ jsx(Button, {
     onClick,
     variant: "outlined",
@@ -139,7 +138,6 @@ function MasterDetailLayout(props) {
     return actions;
   }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
   const finalComponentsDictionary = useMemo(() => componentsDictionary.concat(getMasterDetailLayoutComponentsDictionary()), [componentsDictionary]);
-  console.log("MasterDetailLayout Render");
   return /* @__PURE__ */ jsx(MasterDetailProvider, {
     children: /* @__PURE__ */ jsx(ModuleLayout, {
       ref: moduleLayoutRef,

package/layouts/ModuleLayout/index.js

@@ -251,7 +251,6 @@ function Header() {
     [moduleActions, isDesktop]
   );
   const mainActions = useMemo(() => {
-    console.log("useMemo Header ModuleActions mainActions", isDesktop, moduleActions);
     return getMainActions(isDesktop, moduleActions);
   }, [moduleActions, isDesktop]);
   if (isSkeleton) {

package/layouts/NoAuthModuleLayout/index.js

@@ -1,10 +1,9 @@
 import { Page, CompanyLogo, LanguagePopover, Typography, Image } from "@m4l/components";
 import { Card, Container, Stack } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { useModuleDictionary, useFlagsPresent, getLocalStorage, useNetwork, useEnvironment, useFlags, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
+import { useModuleDictionary, useFlagsPresent, FlagsProvider, DomainProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a as useResponsive } from "../../vendor.js";
-import { createContext, useState, useEffect } from "react";
+import { a as useResponsive, b as useLocales } from "../../vendor.js";
 const RootStyle = styled("div")(({
   theme
 }) => ({
@@ -75,7 +74,7 @@ const ModuleWrapper = (props) => {
     getModuleLabel
   } = useModuleDictionary();
   const mdUp = useResponsive("up", "md");
-  const isSkeleton = !useFlagsPresent(["dictionary_loaded", "style_loaded"]);
+  const isSkeleton = !useFlagsPresent(["dictionary_loaded"]);
   return /* @__PURE__ */ jsx(Page, {
     title: getModuleLabel(),
     children: /* @__PURE__ */ jsxs(RootStyle, {
@@ -150,66 +149,6 @@ const ModuleWrapper = (props) => {
     })
   });
 };
-const initialState = {
-  moduleId: "",
-  styleOptions: {
-    company_logo_small_url: "",
-    company_logo_normal_url: ""
-  }
-};
-const ModuleContext = createContext(initialState);
-function ModuleProvider(props) {
-  const {
-    children,
-    moduleId
-  } = props;
-  const [styleOptions, setStyleOptions] = useState(getLocalStorage("styleOptions", {
-    company_logo_small_url: "",
-    company_logo_normal_url: ""
-  }));
-  const {
-    networkOperation
-  } = useNetwork();
-  const {
-    domain_token
-  } = useEnvironment();
-  const {
-    flags,
-    addFlag
-  } = useFlags();
-  useEffect(() => {
-    let mounted = true;
-    if (flags.findIndex((f) => f === "dictionary_loaded") < 0 || flags.findIndex((f) => f === "style_loaded") > -1) {
-      return;
-    }
-    networkOperation({
-      method: "GET",
-      endPoint: `style`,
-      parms: {
-        domain_token
-      }
-    }).then((response) => {
-      if (mounted) {
-        console.log("Result - ModuleProvider - Load Style", response);
-        setStyleOptions({
-          ...response.data
-        });
-        addFlag("style_loaded");
-      }
-    }).finally(() => {
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [flags]);
-  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
-    value: {
-      styleOptions,
-      moduleId
-    },
-    children
-  });
-}
 const NoAuthModuleLayout = (props) => {
   const {
     moduleId,
@@ -218,16 +157,26 @@ const NoAuthModuleLayout = (props) => {
     componentsDictionary,
     skeletonFlags
   } = props;
+  const {
+    currentLang
+  } = useLocales();
+  const finalSkeletonFlags = skeletonFlags;
+  if (finalSkeletonFlags.findIndex((f) => f === "dictionary_loaded") < 0) {
+    finalSkeletonFlags.push("dictionary_loaded");
+  }
+  if (finalSkeletonFlags.findIndex((f) => f === "domain_loaded") < 0) {
+    finalSkeletonFlags.push("domain_loaded");
+  }
   return /* @__PURE__ */ jsx(FlagsProvider, {
-    children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
-      isAuth: false,
-      moduleId,
-      moduleName,
-      componentsDictionary,
-      children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
-        flags: skeletonFlags,
-        children: /* @__PURE__ */ jsx(ModuleProvider, {
-          moduleId,
+    children: /* @__PURE__ */ jsx(DomainProvider, {
+      children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
+        isAuth: false,
+        moduleId,
+        moduleName,
+        componentsDictionary,
+        currentLang: currentLang.value,
+        children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
+          flags: finalSkeletonFlags,
           children: /* @__PURE__ */ jsx(ModuleWrapper, {
             children
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/components": "*",

package/vendor.js

@@ -2,10 +2,10 @@ import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import "@mui/material";
 import "react/jsx-runtime";
-import "react";
+import { createContext, useContext } from "react";
+import "@m4l/core";
 import "@mui/x-date-pickers/AdapterDateFns";
 import "@mui/x-date-pickers";
-import "@m4l/core";
 import "./layouts/ModuleLayout/index.js";
 import "@m4l/components";
 import "./layouts/MasterDetailLayout/index.js";
@@ -35,6 +35,7 @@ function useResponsiveDesktop() {
   const isDesktop = useResponsive$1("up", "sm");
   return isDesktop;
 }
+const LocalesContext = createContext(null);
 function useResponsive(query, key, start, end) {
   const theme = useTheme();
   const mediaUp = useMediaQuery(theme.breakpoints.up(key));
@@ -54,4 +55,10 @@ function useResponsive(query, key, start, end) {
     return mediaOnly;
   }
 }
-export { useResponsive as a, useResponsiveDesktop as u };
+const useLocales = () => {
+  const context = useContext(LocalesContext);
+  if (!context)
+    throw new Error("useLocales context must be use inside LocalesProvider");
+  return context;
+};
+export { useResponsive as a, useLocales as b, useResponsiveDesktop as u };

package/layouts/NoAuthModuleLayout/contexts/NoAuthModuleContext/index.d.ts

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

package/layouts/NoAuthModuleLayout/contexts/NoAuthModuleContext/types.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-export interface DomainStyleOptions {
-    company_logo_small_url: string;
-    company_logo_normal_url: string;
-}
-export interface NoAuthModuleLayoutProviderProps {
-    moduleId: string;
-    children: ReactNode;
-}
-export interface NoAuthModuleLayoutContextProps extends Pick<NoAuthModuleLayoutProviderProps, 'moduleId'> {
-    styleOptions: DomainStyleOptions;
-}