@m4l/components 0.1.64 → 0.1.66

package/components/areas/contexts/AreaContext/index.7890e58d.js

@@ -1,509 +0,0 @@
-import React__default, { createContext, useRef, useEffect } from "react";
-import { shallow } from "zustand/shallow";
-import { useNetwork } from "@m4l/core";
-import { createStore, useStore } from "zustand";
-import { immer } from "zustand/middleware/immer";
-import { devtools } from "zustand/middleware";
-import debounce from "lodash/debounce";
-import cloneDeep from "lodash.clonedeep";
-import { u as useAreasStore } from "../../hooks/useArea/index.d6263051.js";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { jsx } from "react/jsx-runtime";
-const ROW_HEIGTH_GRIDLAYOUT = 100;
-const CONTAINER_PADDING_GRIDLAYOUT = 3;
-const DEBOUCED_SAVE_TIME = 500;
-const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
-const COOKIE_WINDOWS = "windows";
-const NORMALIZED_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
-const NORMALIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 2 };
-const getParmsFromValue = (key, data) => {
-  try {
-    if (Array.isArray(data)) {
-      let ob = data.find((f) => f.id === key);
-      if (ob) {
-        ob = JSON.parse(ob.value);
-      }
-      return ob;
-    }
-  } catch (error) {
-  }
-  return void 0;
-};
-function setAddBreakPoints(state, newLayout) {
-  const layoutsBreakPoints = state.breakpointsLayouts;
-  const beforeMaximizebreakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
-  for (const key in layoutsBreakPoints) {
-    const layoutBreakpoint = layoutsBreakPoints[key];
-    layoutBreakpoint.push(newLayout);
-  }
-  if (state.viewMode === "single") {
-    for (const key in beforeMaximizebreakpointsLayouts) {
-      const beforeLayoutBreakpoint = beforeMaximizebreakpointsLayouts[key];
-      beforeLayoutBreakpoint.push(newLayout);
-    }
-  }
-  return layoutsBreakPoints;
-}
-function setBreakPointsMaximized(state, layoutId) {
-  const layoutsBreakPoints = state.breakpointsLayouts;
-  const container = document.getElementsByClassName(`M4L_Area_wrapper_${state.id}`)[0];
-  if (container) {
-    const clientHeight = container.clientHeight - 40;
-    for (const key in layoutsBreakPoints) {
-      const layoutBreakpoint = layoutsBreakPoints[key];
-      const cols = key in NORMALIZED_COLS ? NORMALIZED_COLS[key] : 1;
-      const heigth_by_rowheigth = clientHeight / (ROW_HEIGTH_GRIDLAYOUT + 2 * CONTAINER_PADDING_GRIDLAYOUT);
-      for (let index = 0; index < layoutBreakpoint.length; index++) {
-        const l = layoutBreakpoint[index];
-        if (l.i === layoutId) {
-          l.x = 0;
-          l.y = 0;
-          l.h = heigth_by_rowheigth;
-          l.w = key in NORMALIZED_COLS ? NORMALIZED_COLS[key] : 1;
-          l.minW = 0;
-          l.maxW = cols;
-          l.minH = 0;
-          l.maxH = heigth_by_rowheigth;
-          l.isResizable = false;
-          l.isDraggable = false;
-        } else {
-          l.x = 0;
-          l.y = 1;
-          l.h = 0;
-          l.w = 0;
-          l.minW = 0;
-          l.maxW = 0;
-          l.minH = 0;
-          l.maxH = 0;
-        }
-        l.isResizable = false;
-        l.isDraggable = false;
-      }
-    }
-  }
-  return layoutsBreakPoints;
-}
-function getDataFromResponse(data, state) {
-  const newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
-  const windows = getParmsFromValue(COOKIE_WINDOWS, data);
-  const newGridLayouts = [];
-  const newHashWindowLayouts = {};
-  if (windows) {
-    for (const key in windows) {
-      const element = windows[key];
-      if (element && element["layoutProps"] && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
-        element["layoutProps"].i = key;
-        newGridLayouts.push(element["layoutProps"]);
-        newHashWindowLayouts[key] = {
-          ...element,
-          windowId: key,
-          emergeType: "layout",
-          onClose: state.actions.closeWindowLayout
-        };
-      }
-    }
-  }
-  return {
-    newBreakPointsLayouts,
-    newGridLayouts,
-    newHashWindowLayouts
-  };
-}
-const createAreaStore = (initProps) => {
-  const startProps = {
-    zPopUpIndex: 999,
-    status: "init",
-    breakpointsLayouts: {},
-    beforeMaximizebreakpointsLayouts: {},
-    gridLayouts: [],
-    windowModal: null,
-    windowsPopUps: [],
-    hashWindowsPopups: {},
-    hashWindowsLayouts: {},
-    currentLayoutId: "",
-    currentPopUpId: "",
-    viewMode: initProps.isDesktop ? "multiple" : "single",
-    breakpoints: NORMALIZED_BREAKPOINTS,
-    cols: NORMALIZED_COLS,
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        actions: {
-          addWindow: (newWindow) => {
-            const windowId = `${get().id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-            console.log("addWindow", newWindow.emergeType);
-            if (newWindow.emergeType === "layout") {
-              get().actions.addWindowLayout(windowId, newWindow);
-            } else if (newWindow.emergeType === "popup") {
-              get().actions.addWindowPopUp(windowId, newWindow);
-            } else if (newWindow.emergeType === "modal") {
-              get().actions.addWindowModal(windowId, newWindow);
-            }
-          },
-          closeWindowModal: () => {
-            set((state) => {
-              state.windowModal = void 0;
-            });
-          },
-          addWindowModal: (container_id, newWindowModalProps) => {
-            set((state) => {
-              state.windowModal = { ...newWindowModalProps, windowId: container_id };
-            });
-          },
-          closeWindowPopUp: (removePopUpId) => {
-            set((state) => {
-              const removeIndex = state.windowsPopUps.findIndex(
-                (wpId) => wpId === removePopUpId
-              );
-              if (removeIndex > -1) {
-                state.windowsPopUps.splice(removeIndex, 1);
-              }
-              delete state.hashWindowsPopups[removePopUpId];
-            });
-          },
-          addWindowPopUp: (windowId, newWindowPopupProps) => {
-            let popUpId = windowId;
-            set((state) => {
-              if (newWindowPopupProps.replaceMeId) {
-                for (const key in state.hashWindowsPopups) {
-                  const WindoPopUp = state.hashWindowsPopups[key];
-                  if (WindoPopUp.replaceMeId === newWindowPopupProps.replaceMeId) {
-                    popUpId = key;
-                    state.hashWindowsPopups[key].dynamicParams = newWindowPopupProps.dynamicParams;
-                    break;
-                  }
-                }
-              }
-              if (popUpId === windowId) {
-                state.windowsPopUps.push(windowId);
-                state.hashWindowsPopups[windowId] = {
-                  ...newWindowPopupProps,
-                  emergeType: "popup",
-                  windowId,
-                  onClose: get().actions.closeWindowPopUp,
-                  zIndex: state.zPopUpIndex
-                };
-                state.currentPopUpId = windowId;
-              }
-            });
-            get().actions.selectWindowPopUp(popUpId);
-          },
-          closeWindowLayout: (removeLayoutId) => {
-            set((state) => {
-              const removeIndex = state.gridLayouts.findIndex(
-                (gl) => gl.i === removeLayoutId
-              );
-              if (removeIndex > -1) {
-                state.gridLayouts.splice(removeIndex, 1);
-              }
-              delete state.hashWindowsLayouts[removeLayoutId];
-            });
-            get().actions.saveLayouts();
-            if (get().singleId === removeLayoutId) {
-              get().actions.maximizeLayout();
-            }
-          },
-          addWindowLayout: (windowId, newWindow) => {
-            const newLayout = {
-              ...newWindow.layoutProps,
-              i: windowId,
-              isDraggable: true,
-              isResizable: true,
-              winType: newWindow.winType
-            };
-            set((state) => {
-              state.gridLayouts.push(newLayout);
-              state.hashWindowsLayouts[windowId] = {
-                ...newWindow,
-                windowId,
-                emergeType: "layout",
-                onClose: get().actions.closeWindowLayout
-              };
-              setAddBreakPoints(state, newLayout);
-            });
-            get().actions.selectWindowLayout(windowId);
-            if (get().viewMode === "single") {
-              get().actions.maximizeLayout(windowId);
-            }
-            get().actions.saveLayouts();
-            get().actions.bouncedSaveBreakpointsLayouts();
-          },
-          saveLayouts: () => {
-            let nrKeys = 0;
-            const saveObjetc = {};
-            for (const key in get().hashWindowsLayouts) {
-              const element = get().hashWindowsLayouts[key];
-              if (element.winType === "microfrontend") {
-                const newElement = { ...element };
-                delete newElement.onClose;
-                delete newElement.devCookies;
-                saveObjetc[key] = newElement;
-                nrKeys++;
-              }
-            }
-            if (nrKeys > 0) {
-              get().networkOperation({
-                method: "PUT",
-                endPoint: `cookies/${get().id}/${COOKIE_WINDOWS}`,
-                data: {
-                  value: JSON.stringify(saveObjetc)
-                },
-                toastSuccess: false,
-                toastError: false
-              });
-            } else {
-              get().networkOperation({
-                method: "DELETE",
-                endPoint: `cookies`,
-                data: { f: [{ n: "container_id", o: "c", o1: get().id }] },
-                toastSuccess: false,
-                toastError: false
-              });
-            }
-          },
-          bouncedSaveBreakpointsLayouts: debounce(
-            () => {
-              const purgedLayouts = {
-                ...get().viewMode === "multiple" ? get().breakpointsLayouts : get().beforeMaximizebreakpointsLayouts
-              };
-              const finalLayouts = {};
-              for (const key in purgedLayouts) {
-                const element = purgedLayouts[key];
-                purgedLayouts[key] = element.filter((l) => {
-                  if (l.i === "none") {
-                    return false;
-                  }
-                  if (get().hashWindowsLayouts[l.i]) {
-                    return true;
-                  }
-                  return false;
-                });
-                if (purgedLayouts[key].length > 0) {
-                  finalLayouts[key] = purgedLayouts[key];
-                }
-              }
-              if (Object.keys(finalLayouts).length > 0) {
-                get().networkOperation({
-                  method: "PUT",
-                  endPoint: `cookies/${get().id}/${COOKIE_BREAKPOINT_LAYOUTS}`,
-                  data: {
-                    value: JSON.stringify(finalLayouts)
-                  },
-                  toastSuccess: false,
-                  toastError: false
-                });
-              }
-            },
-            DEBOUCED_SAVE_TIME
-          ),
-          onBreakpointsLayoutsChange: (_currentLayouts, newAllLayouts) => {
-            set((state) => {
-              state.breakpointsLayouts = newAllLayouts;
-            });
-            if (!get().singleId) {
-              get().actions.bouncedSaveBreakpointsLayouts();
-            }
-          },
-          selectWindowLayout: (layoutId) => {
-            set((state) => {
-              state.currentLayoutId = layoutId;
-              if (state.currentPopUpId !== "" && state.hashWindowsPopups[state.currentPopUpId]) {
-                const windowPopup = state.hashWindowsPopups[state.currentPopUpId];
-                if (windowPopup.parentLayoutId !== layoutId) {
-                  state.currentPopUpId = "";
-                }
-              }
-            });
-          },
-          selectWindowPopUp: (popUpId) => {
-            set((state) => {
-              state.zPopUpIndex++;
-              state.currentPopUpId = popUpId;
-              state.zPopUpIndex++;
-              state.currentPopUpId = popUpId;
-              state.hashWindowsPopups[popUpId].zIndex = state.zPopUpIndex;
-              if (state.hashWindowsPopups[popUpId].parentLayoutId && state.hashWindowsPopups[popUpId].parentLayoutId !== "") {
-                state.currentLayoutId = state.hashWindowsPopups[popUpId].parentLayoutId;
-              } else {
-                state.currentLayoutId = "";
-              }
-            });
-            setTimeout(() => {
-              const container = document.getElementsByClassName(
-                `M4L_WrapperGridLayout_${get().id}`
-              )[0];
-              const element = document.getElementsByClassName(
-                `M4L_WindowPopUp_${popUpId}`
-              )[0];
-              if (element && container) {
-                const { top, left } = element.getBoundingClientRect();
-                const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-                container.scrollTop = container.scrollTop + top - containerTop;
-                container.scrollLeft = container.scrollLeft + left - containerLeft;
-              }
-            }, 100);
-          },
-          maximizeLayout: (layoutId) => {
-            let finalLayoutId = layoutId;
-            set((state) => {
-              if (state.viewMode === "multiple") {
-                state.beforeMaximizebreakpointsLayouts = cloneDeep(
-                  state.breakpointsLayouts
-                );
-              }
-              if (!finalLayoutId) {
-                if (state.gridLayouts.length > 0) {
-                  finalLayoutId = state.gridLayouts[0].i;
-                }
-              }
-              state.viewMode = "single";
-              state.singleId = finalLayoutId;
-              setBreakPointsMaximized(state, finalLayoutId);
-            });
-            if (finalLayoutId) {
-              get().actions.selectWindowLayout(finalLayoutId);
-            }
-          },
-          normalizeLayouts: () => {
-            set((state) => {
-              if (!state.isDesktop)
-                return;
-              if (state.isDesktop && state.viewMode === "single") {
-                state.viewMode = "multiple";
-                state.singleId = void 0;
-                state.breakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
-              }
-            });
-          }
-        },
-        internalActions: {
-          loadFromApi: () => {
-            if (get().status !== "init") {
-              return;
-            }
-            if (!get().loadAreasFromNetwork || !get().loadWindows) {
-              set((state) => {
-                state.status = "loaded";
-              });
-              return;
-            }
-            get().networkOperation({
-              method: "GET",
-              endPoint: `cookies`,
-              parms: { f: [{ n: "container_id", o: "e", o1: get().id }] },
-              toastSuccess: false,
-              toastError: false
-            }).then((response) => {
-              set((state) => {
-                const {
-                  newBreakPointsLayouts,
-                  newGridLayouts,
-                  newHashWindowLayouts
-                } = getDataFromResponse(response.data, state);
-                if (state.viewMode === "multiple") {
-                  state.breakpointsLayouts = newBreakPointsLayouts;
-                } else {
-                  state.breakpointsLayouts = newBreakPointsLayouts;
-                  state.beforeMaximizebreakpointsLayouts = newBreakPointsLayouts;
-                }
-                state.gridLayouts = newGridLayouts;
-                state.hashWindowsLayouts = newHashWindowLayouts;
-                state.status = "loaded";
-              });
-              if (get().viewMode === "single") {
-                get().actions.maximizeLayout();
-              }
-            }).catch((_response) => {
-              set((state) => {
-                state.status = "loaded";
-              });
-            });
-          },
-          changeDesktopBreakpoint: (isDesktop) => {
-            const previousState = get().isDesktop;
-            set((state) => {
-              state.isDesktop = isDesktop;
-            });
-            if (previousState != isDesktop) {
-              if (isDesktop) {
-                get().actions.normalizeLayouts();
-              } else {
-                if (get().viewMode === "multiple") {
-                  if (get().gridLayouts.length > 0) {
-                    get().actions.maximizeLayout(get().gridLayouts[0].i);
-                  }
-                }
-              }
-            }
-          }
-        }
-      })),
-      { name: `Area state ${initProps.id}` }
-    )
-  );
-};
-const AreaContext = createContext(null);
-const AreaProvider = (props) => {
-  const {
-    children,
-    id,
-    active,
-    loadWindows = true
-  } = props;
-  const loadAreasFromNetwork = useAreasStore((state) => state.loadAreasFromNetwork);
-  const {
-    setAreaLink
-  } = useAreasStore((state) => state.internalActions);
-  const isDesktop = useResponsiveDesktop();
-  const isFirstRender = useFirstRender([isDesktop]);
-  const {
-    networkOperation
-  } = useNetwork();
-  const areaStoreRef = useRef();
-  if (!areaStoreRef.current) {
-    areaStoreRef.current = createAreaStore({
-      id,
-      networkOperation,
-      loadAreasFromNetwork,
-      loadWindows,
-      isDesktop: !!isDesktop
-    });
-  }
-  const {
-    loadFromApi,
-    changeDesktopBreakpoint
-  } = useStore(areaStoreRef.current, (state) => state.internalActions, shallow);
-  const status = useStore(areaStoreRef.current, (state) => state.status, shallow);
-  useEffect(() => {
-    if (!isFirstRender) {
-      changeDesktopBreakpoint(!!isDesktop);
-    }
-  }, [isDesktop]);
-  useEffect(() => {
-    if (areaStoreRef.current) {
-      setAreaLink(id, areaStoreRef.current);
-    }
-    return () => {
-    };
-  }, []);
-  useEffect(() => {
-    if (active && status === "init") {
-      loadFromApi();
-    }
-  }, [active]);
-  return /* @__PURE__ */ jsx(AreaContext.Provider, {
-    value: areaStoreRef.current,
-    children
-  });
-};
-AreaProvider.displayName = "AreaProvider";
-React__default.memo(AreaProvider);
-export {
-  AreaProvider as A,
-  CONTAINER_PADDING_GRIDLAYOUT as C,
-  ROW_HEIGTH_GRIDLAYOUT as R,
-  AreaContext as a
-};

package/components/areas/contexts/AreaContext/types.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import type { Layout } from 'react-grid-layout';
-import { NewWindowProps, WinType } from '../../components/Area/types';
-import { AreaProps } from '../../components/Area/types';
-import { AreaStore } from './store';
-export declare type AreaStatus = 'init' | 'load' | 'loaded' | 'error';
-export interface AreaProviderProps extends AreaProps {
-    children: ReactNode;
-}
-export declare type WinLayout = Layout & {
-    winType: WinType;
-};
-export declare type AreaProviderRef = {
-    store: AreaStore;
-    addWindow: (newWindow: NewWindowProps) => string;
-};
-export interface AreaContextProps {
-    store: AreaStore;
-    addWindow: (newWindow: NewWindowProps) => string;
-}