@m4l/layouts 1.0.4 → 2.0.0

package/layouts/MasterDetailLayout/index.748f7ada.js

@@ -0,0 +1,155 @@
+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.e7218171.js";
+import { jsx } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+const initialState = {
+  masterSelection: void 0,
+  onChangeMasterSelection: voidFunction,
+  onClickViewDetail: voidFunction
+};
+const MasterDetailContext = createContext(initialState);
+function MasterDetailProvider(props) {
+  const {
+    children,
+    onClickViewDetail
+  } = props;
+  const [masterSelection, setMasterSelection] = useState(void 0);
+  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
+    value: {
+      masterSelection,
+      onChangeMasterSelection: setMasterSelection,
+      onClickViewDetail
+    },
+    children
+  });
+}
+const componentName = "M4LMasterDetailLayout";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getMasterDetailLayoutUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useMasterDetailLayoutUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getMasterDetailLayoutUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const MasterDetailLayoutRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LMasterDetailLayout?.styleOverrides
+}));
+function getTotalModuleActions(splitActions, moduleActions = []) {
+  let totalActions = [...splitActions];
+  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,
+        {
+          title: getLabel("master_detail_layout.view_detail"),
+          children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
+        }
+      )
+    });
+  }, [detailComponent, getLabel]);
+  const finalModuleActions = useMemo(() => {
+    const actions = getTotalModuleActions(splitActions, moduleActions);
+    return actions;
+  }, [splitActions, moduleActions]);
+  const classes = useMasterDetailLayoutUtilityClasses();
+  return /* @__PURE__ */ jsx(MasterDetailProvider, {
+    onClickViewDetail,
+    children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, {
+      className: classes.root,
+      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/styles.d.ts

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

package/{dist/layouts → layouts}/MasterDetailLayout/types.d.ts

@@ -6,5 +6,4 @@ export interface ContainerProps {
 export interface MasterDetailLayoutProps extends Omit<ModuleLayoutProps, 'children'> {
     masterComponent: ((props?: any) => JSX.Element) | ReactNode;
     detailComponent: ((props?: any) => JSX.Element) | ReactNode;
-    onChangeSelected?: (row: any[]) => void;
 }

package/layouts/ModuleLayout/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LModuleLayout";

package/layouts/ModuleLayout/classes/index.d.ts

@@ -0,0 +1,7 @@
+import { ModuleLayoutClassesType } from './types';
+export declare const moduleLayoutClasses: ModuleLayoutClassesType;
+export declare function getModuleLayoutUtilityClass(slot: string): string;
+export declare const useModuleLayoutUtilityClasses: () => {
+    root: string;
+    moduleContent: string;
+};

package/layouts/ModuleLayout/classes/types.d.ts

@@ -0,0 +1,7 @@
+import { useModuleLayoutUtilityClasses } from ".";
+export interface ModuleLayoutClassesType {
+    root: string;
+    moduleContent: string;
+}
+export declare type ModuleLayoutClassesKey = keyof ModuleLayoutClassesType;
+export declare type Classes = ReturnType<typeof useModuleLayoutUtilityClasses>;

package/{dist/layouts → 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>;
-declare function ModuleProvider(props: ModuleLayoutProviderProps): JSX.Element;
+declare const ModuleContext: import("react").Context<ModuleLayoutContextProps | null>;
+declare function ModuleProvider(props: ModuleLayoutProviderProps): import("react").JSX.Element;
 export { ModuleProvider, ModuleContext };

package/{dist/layouts → layouts}/ModuleLayout/contexts/ModuleContext/types.d.ts

@@ -1,18 +1,13 @@
-import type { TLink } from '@m4l/components';
+import { ModuleAction } from '@m4l/components';
 import type { ReactNode } from 'react';
-import type { ModuleAction } from '../../types';
 export interface ModuleLayoutContextStateProps {
-    urlIcon: string;
-    moduleId: number;
-    moduleNameField: string;
-    breadcrumbLinks: TLink[];
+    moduleId: string;
 }
 export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextStateProps, 'init'> {
     children: ReactNode;
-    initialModuleActions: ModuleAction[];
+    version: string;
+    moduleActions?: ModuleAction[];
 }
 export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
-    moduleActions: ModuleAction[];
-    dynamicActions: ModuleAction[];
     setDynamicActions: (dynamicActions: ModuleAction[]) => void;
 }

package/layouts/ModuleLayout/index.e7218171.js

@@ -0,0 +1,122 @@
+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 { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx } from "react/jsx-runtime";
+const InnerModuleRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LModuleLayout?.styleOverrides
+}));
+const componentName = "M4LModuleLayout";
+generateUtilityClasses(componentName, [
+  "root",
+  "moduleContent"
+]);
+function getModuleLayoutUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useModuleLayoutUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    moduleContent: ["moduleContent"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getModuleLayoutUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const InnerModule = forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    openModal
+  } = useModal();
+  const divRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    openModal,
+    current: divRef.current
+  }));
+  const classes = useModuleLayoutUtilityClasses();
+  return /* @__PURE__ */ jsx(InnerModuleRoot, {
+    className: classes.root,
+    ref: divRef,
+    children: /* @__PURE__ */ jsx("div", {
+      className: classes.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/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ModuleProps, ModuleRef } from './types';
+export declare const InnerModule: import("react").ForwardRefExoticComponent<ModuleProps & import("react").RefAttributes<ModuleRef>>;

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

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

package/layouts/ModuleLayout/types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { ModalOpenOptions, ModuleAction } from '@m4l/components';
+import type { ModuleRef } from './subcomponents/InnerModule/types';
+export interface ContainerProps {
+    vertical: boolean;
+}
+export declare type ModuleLayoutRef = {
+    openModal: (modalOpenProps: ModalOpenOptions) => void;
+    current: ModuleRef | null;
+};
+export interface ModuleLayoutProps {
+    moduleId: string;
+    moduleActions?: ModuleAction[];
+    children: ReactNode;
+    version: string;
+}

package/layouts/NoAuthModuleLayout/dicctionary.d.ts

@@ -0,0 +1,3 @@
+import type { Dictionary } from '@m4l/core';
+export declare function getNoAuthModuleLayoutComponentsDictionary(): string[];
+export declare const defaultNoAuthModuleLayoutDictionary: Dictionary;