@m4l/components 0.1.36 → 0.1.37

package/dist/components/areas/components/Window/index.252fbf4e.js

@@ -0,0 +1,646 @@
+import React__default, { createContext, useState, useContext, useMemo, useRef, useCallback, useEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../../../../contexts/ModalContext/index.b90eec94.js";
+import "react-hook-form";
+import "@hookform/resolvers/yup";
+import "../../../../contexts/RHFormContext/index.d88e6e27.js";
+import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { Skeleton, Typography, styled as styled$1 } from "@mui/material";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.82f16572.js";
+import { I as Icon } from "../../../Icon/index.8d754623.js";
+import "../../../mui_extended/Accordion/index.a541c71c.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "@mui/lab";
+import { B as Button } from "../../../mui_extended/Button/index.86a155a2.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.ee17bddd.js";
+import "../../../mui_extended/Popover/index.53c77d23.js";
+import "../../../mui_extended/Pager/index.74d3f5fc.js";
+import "../../../mui_extended/Tab/index.e0653a0a.js";
+import debounce from "lodash/debounce";
+import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { m } from "framer-motion";
+import { I as Image } from "../../../Image/index.93d5f37f.js";
+import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+const WindowContext = createContext(null);
+function WindowProvider(props) {
+  const {
+    children,
+    initialExternalActions = [],
+    ...other
+  } = props;
+  const [moduleActions, setModuleActions] = useState([]);
+  const [externalActions, setExternalActions] = useState(initialExternalActions);
+  return /* @__PURE__ */ jsx(WindowContext.Provider, {
+    value: {
+      moduleActions,
+      externalActions,
+      setModuleActions,
+      setExternalActions,
+      ...other
+    },
+    children
+  });
+}
+const WrapperWindow = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%",
+  overflow: "hidden",
+  backgroundColor: theme.palette.background.paper,
+  padding: theme.spacing(3),
+  border: "1px solid gray",
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const WrapperContent = styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const useWindow = () => {
+  const context = useContext(WindowContext);
+  if (!context)
+    throw new Error("useWindow context must be use inside WindowContext");
+  return context;
+};
+const Component = (props) => {
+  const {
+    setModuleActions
+  } = useWindow();
+  return /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+    setModuleActions,
+    children: props.children
+  });
+};
+React__default.memo(Component);
+const StyledHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden",
+  cursor: "move",
+  height: "60px",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  height: "60px",
+  minHeight: "60px",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: `0 0`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  minHeight: "60px"
+}));
+const ModuleTitleContent = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  gridGap: theme.spacing(1.75),
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(3, auto)"
+  }
+}));
+const ModuleTitle = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(3)} auto`,
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  width: "auto",
+  height: "auto"
+}));
+const Separator = styled("div")(({
+  theme
+}) => ({
+  display: "none",
+  alignItems: "center",
+  width: "1px",
+  background: theme.palette.divider,
+  height: "100%",
+  margin: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex"
+  }
+}));
+const Breadcrumbs = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  alignItems: "center",
+  gridTemplateColumns: `repeat(3, auto)`,
+  gridGap: theme.spacing(2)
+}));
+const ModuleActions = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
+    gridGap: theme.spacing(2)
+  }
+}));
+function SKTModuleHeader() {
+  const isDesktop = useResponsiveDesktop();
+  return /* @__PURE__ */ jsxs(Wrapper, {
+    id: "HeaderSkeleton",
+    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
+      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 120,
+          height: 14
+        })]
+      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 4,
+          height: 4
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(ModuleActions, {
+      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        })]
+      }) : /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 24,
+        height: 24
+      })
+    })]
+  });
+}
+function getMenuActions(isDesktop, moduleActions) {
+  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
+  if (isDesktop !== void 0 && isDesktop) {
+    menuActions = menuActions.filter((action) => action.visibility === "normal");
+  }
+  return menuActions;
+}
+function getMainActions(isDesktop, moduleActions) {
+  let mainActions = [];
+  if (isDesktop !== void 0 && isDesktop) {
+    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
+  }
+  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
+  return mainActions;
+}
+function Header() {
+  const {
+    url_icon,
+    title,
+    moduleActions,
+    onClose,
+    container_id
+  } = useWindow();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const menuActions = useMemo(() => getMenuActions(isDesktop, moduleActions), [moduleActions, isDesktop]);
+  const mainActions = useMemo(() => {
+    return getMainActions(isDesktop, moduleActions);
+  }, [moduleActions, isDesktop]);
+  const onCloseLocal = () => {
+    onClose && onClose(container_id);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+  }
+  return /* @__PURE__ */ jsxs(StyledHeader, {
+    id: "Header",
+    className: "m4l_draggable_handle",
+    children: [/* @__PURE__ */ jsx(Icon, {
+      src: url_icon,
+      bgColor: "primary.main",
+      size: "24px"
+    }), /* @__PURE__ */ jsx(Typography, {
+      variant: "h5",
+      sx: {
+        maxWidth: 260,
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        color: "text.primary",
+        marginLeft: "12px",
+        marginRight: "24px",
+        textOverflow: "ellipsis"
+      },
+      children: title
+    }), mainActions.map((mainAction, index) => {
+      if (!mainAction.component) {
+        return /* @__PURE__ */ jsx(IconButton, {
+          src: mainAction.urlIcon,
+          className: mainAction.className,
+          onClick: mainAction.onClick,
+          "aria-label": mainAction.label,
+          disabled: mainAction.disabled
+        }, `main_action_${index}`);
+      }
+      return /* @__PURE__ */ jsx(mainAction.component, {
+        description: mainAction.label,
+        onClick: mainAction.onClick
+      }, `main_action_${index}`);
+    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
+      arrowType: "right-top",
+      marginTop: "11px",
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions
+    }), onClose && /* @__PURE__ */ jsx(IconButton, {
+      onClick: onCloseLocal,
+      "aria-label": "click",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/window/assets/icons/close.svg`
+    })]
+  });
+}
+const WrapperLinearProgress = styled$1("div")(() => ({
+  width: "70%",
+  margin: "auto auto"
+}));
+const WrapperFallBackNotFound = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(3)
+}));
+function FallBackNotFound(props) {
+  const {
+    setNetworkRefresh
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const handlerClick = () => {
+    setNetworkRefresh((prop) => !prop);
+  };
+  return /* @__PURE__ */ jsxs(WrapperFallBackNotFound, {
+    children: [/* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Typography, {
+        variant: "h3",
+        paragraph: true,
+        children: getLabel("loading_mf_title")
+      })
+    }), /* @__PURE__ */ jsx(Typography, {
+      sx: {
+        color: "text.secondary"
+      },
+      children: getLabel("loading_mf_description")
+    }), /* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Image, {
+        src: `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`,
+        width: "292px",
+        height: "219px"
+      })
+    }), /* @__PURE__ */ jsx(Button, {
+      size: "large",
+      variant: "contained",
+      onClick: handlerClick,
+      children: getLabel("loading_mf_intro")
+    })]
+  });
+}
+const LoadingMF = (props) => {
+  const {
+    loadingProgress,
+    setNetworkRefresh
+  } = props;
+  if (loadingProgress !== -1) {
+    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
+      id: "WrapperLinearProgress",
+      children: /* @__PURE__ */ jsx(LinearProgress, {
+        variant: "determinate",
+        value: loadingProgress
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(FallBackNotFound, {
+    setNetworkRefresh
+  });
+};
+function getDivScritId(prefix, moduleId) {
+  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
+  return {
+    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
+    scriptId: `script_${moduleId}_${rotational_id}`,
+    moduleId
+  };
+}
+function MFLoader(props) {
+  const {
+    prefix,
+    module_id,
+    cache = true,
+    debug_port,
+    dynamicParams
+  } = props;
+  const {
+    hostThemeOptions,
+    fnComponentsOverrides
+  } = useHostTheme();
+  const {
+    networkOperation
+  } = useNetwork();
+  const environment = useEnvironment();
+  const hostTools = useHostTools();
+  const formatter = useFormatter();
+  const [isLoading, setIsLoading] = useState(true);
+  const [networkProgress, setNetworkProgress] = useState(-1);
+  const [_networkRefresh, setNetworkRefresh] = useState(false);
+  const {
+    currentLocale
+  } = useLocales();
+  const [divScript, setDivScript] = useState(getDivScritId(prefix, module_id));
+  const refTime = useRef(0);
+  const isFirstRender = useFirstRender([module_id]);
+  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${module_id}`;
+  function cleanUp(dScript) {
+    try {
+      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
+        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
+      }
+    } catch (error) {
+    }
+    if (!cache) {
+      const script = document.getElementById(dScript.scriptId);
+      if (script) {
+        try {
+          document.head.removeChild(script);
+          delete window[`render_${prefix}_${dScript.moduleId}`];
+          delete window[`unmount_${prefix}_${dScript.moduleId}`];
+        } catch (error) {
+        }
+      }
+    }
+  }
+  const renderMicroFrontend = useCallback((newDScript) => {
+    try {
+      setIsLoading(false);
+      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
+        hostThemeOptions,
+        fnComponentsOverrides
+      }, axiosOperation, formatter, {
+        version: 1,
+        ...dynamicParams ? dynamicParams : {}
+      });
+    } catch (error) {
+    }
+  }, [hostThemeOptions, currentLocale, formatter, dynamicParams]);
+  const debouncedSetDivScript = useCallback(debounce((newName) => {
+    const newDivScript = getDivScritId(prefix, newName);
+    if (newName !== divScript.moduleId) {
+      setDivScript({
+        ...newDivScript
+      });
+    }
+  }, 200), [divScript]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      debouncedSetDivScript(module_id + "");
+      if (module_id !== divScript.moduleId)
+        ;
+    }
+    return () => {
+    };
+  }, [module_id]);
+  useEffect(() => {
+    setIsLoading(true);
+    let mounted = true;
+    const controller = new AbortController();
+    const dsScript = {
+      ...divScript
+    };
+    const loadIfNotLoaded = async () => {
+      if (!window[`render_${prefix}_${module_id}`]) {
+        let urlFile = "";
+        setNetworkProgress(0);
+        const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
+          console.debug("Error fetching manifest", `${final_host}/manifest.json`);
+          return void 0;
+        });
+        if (!manifest) {
+          return;
+        }
+        setNetworkProgress(10);
+        if (mounted) {
+          urlFile = `${final_host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
+          refTime.current = 0;
+          await networkOperation({
+            method: "GET",
+            endPoint: urlFile,
+            isRemote: !environment.isLocalhost,
+            headers: {
+              "Content-Type": "application/json"
+            },
+            onDownloadProgress: (progressEvent) => {
+              let percentCompleted = 0;
+              try {
+                if (progressEvent.lengthComputable) {
+                  percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
+                } else {
+                  if (refTime.current === 0) {
+                    refTime.current = new Date().getTime();
+                  }
+                  percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
+                  if (percentCompleted > 95)
+                    percentCompleted = 95;
+                }
+              } catch (error) {
+              }
+              if (mounted) {
+                setNetworkProgress(percentCompleted);
+              }
+            },
+            isExternalUrl: true,
+            responseType: "text",
+            signal: controller.signal
+          }).then(() => {
+            if (mounted) {
+              setNetworkProgress(100);
+            }
+          }).catch(() => {
+          });
+          if (mounted) {
+            const script = document.createElement("script");
+            script.id = divScript.scriptId;
+            script.crossOrigin = "";
+            script.type = "module";
+            script.src = urlFile || "";
+            script.onload = () => {
+              if (mounted) {
+                console.debug("Script loaded", new Date().getTime());
+                setNetworkProgress(100);
+                renderMicroFrontend(dsScript);
+              }
+            };
+            document.head.appendChild(script);
+            console.debug("Script appened", new Date().getTime());
+          }
+        }
+      } else {
+        if (mounted) {
+          renderMicroFrontend(dsScript);
+        }
+      }
+    };
+    loadIfNotLoaded();
+    return () => {
+      mounted = false;
+      controller.abort();
+      cleanUp(dsScript);
+    };
+  }, [divScript]);
+  console.log("Render micro frontend", divScript.divContainerId, final_host);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      id: divScript.divContainerId
+    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
+      loadingProgress: networkProgress,
+      setNetworkRefresh
+    }) : null]
+  });
+}
+MFLoader.defaultProps = {
+  document,
+  window
+};
+const MicroFrontend = (props) => {
+  const {
+    setModuleActions
+  } = useWindow();
+  return /* @__PURE__ */ jsx(MFLoader, {
+    ...props,
+    dynamicParams: {
+      ...props.dynamicParams,
+      setModuleActions
+    }
+  });
+};
+React__default.memo(MicroFrontend);
+const Window = (props) => {
+  return /* @__PURE__ */ jsx(WrapperWindow, {
+    children: /* @__PURE__ */ jsxs(WindowProvider, {
+      initialExternalActions: [],
+      ...props,
+      children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(WrapperContent, {
+        children: props.winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
+          ...props.mfProps
+        }) : /* @__PURE__ */ jsx(Component, {
+          children: props.component
+        })
+      })]
+    })
+  });
+};
+const MemonizedWindow = React__default.memo(Window);
+export {
+  MemonizedWindow as M,
+  Window as W
+};