@m4l/components 0.2.13 → 0.2.15

package/components/mui_extended/ToggleIconButton/{index.2de19be3.js → index.80d38bf4.js}

@@ -1,12 +1,7 @@
 import clsx from "clsx";
-import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.5afe56b7.js";
+import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.b705c196.js";
 import { w as withToggle } from "../../../hocs/withToggle/index.e44eb0da.js";
 import { jsx } from "react/jsx-runtime";
-import "react";
-import "@m4l/core";
-import "@mui/material";
-import "../../Icon/index.e215d0f0.js";
-import "@m4l/graphics";
 const ToggleAbleIconButton = ({
   onClick,
   isPressed,

package/components/mui_extended/ToggleIconButton/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentWithToggleProps, WithToggleProps } from "../../../hocs/withToggle";
+import { ComponentWithToggleProps, WithToggleProps } from "../../../hocs/withToggle/types";
 import { IconButtonProps } from "../IconButton";
 export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'onClick'>, Pick<ComponentWithToggleProps, 'onClick'>, Pick<WithToggleProps, 'isPressed'> {
     src: string;

package/components/mui_extended/index.b606cd9d.js

@@ -0,0 +1 @@
+

package/contexts/ModalContext/{index.ef38d747.js → index.054af5d8.js}

@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.40f6571e.js";
+import { M as ModalDialog } from "../../components/ModalDialog/index.a30831c9.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const ModalContext = createContext(null);
 function ModalProvider({

package/hocs/withToggle/index.d.ts

@@ -1,11 +1,3 @@
 import React from 'react';
-export interface WithToggleProps {
-    isPressed: boolean;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}
-export declare type ComponentWithToggleProps = {
-    onClick: (e: React.MouseEvent<HTMLButtonElement>, isPressed?: boolean) => void;
-    defaultIsPressed?: boolean;
-    children?: React.ReactNode;
-};
+import { ComponentWithToggleProps, WithToggleProps } from './types';
 export declare function withToggle<T extends WithToggleProps>(Component: React.ComponentType<T>): (props: ComponentWithToggleProps) => import("react/jsx-runtime").JSX.Element;

package/hocs/withToggle/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface WithToggleProps {
+    isPressed: boolean;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare type ComponentWithToggleProps = {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>, isPressed?: boolean) => void;
+    defaultIsPressed?: boolean;
+    children?: React.ReactNode;
+};

package/hooks/useFormAddEdit/index.b4348b6a.js

@@ -0,0 +1,96 @@
+import { useNetwork, useFlags, useModuleDictionary } from "@m4l/core";
+import { useState, useEffect } from "react";
+import { u as useModal } from "../useModal/index.acc61361.js";
+import { jsx } from "react/jsx-runtime";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.7a79bfa5.js";
+function useFormAddEdit(props) {
+  const {
+    initialValues,
+    objectId,
+    endPoint,
+    formatDataEnpoint,
+    queryParamas,
+    isRemote = true,
+    omitCallEnpoint = false
+  } = props;
+  const {
+    openModal
+  } = useModal();
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(objectId === void 0 ? "new" : "edit");
+  const {
+    networkOperation
+  } = useNetwork();
+  const {
+    addFlag
+  } = useFlags();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  console.log("statusLoad", statusLoad);
+  const setRefresh = () => {
+    if (statusLoad === "ready") {
+      setStatusLoad("edit");
+      console.log("useFormAddEdit statusLoad", statusLoad);
+    }
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      if (omitCallEnpoint) {
+        addFlag("form_loaded");
+        setStatusLoad("ready");
+        return;
+      }
+      networkOperation({
+        method: "GET",
+        endPoint: queryParamas ? `${endPoint}/${objectId}?${queryParamas}` : `${endPoint}/${objectId}`,
+        isRemote
+      }).then((response) => {
+        if (mounted) {
+          if (formatDataEnpoint) {
+            setFormValues(formatDataEnpoint(response));
+          } else {
+            setFormValues(response.data);
+          }
+          setStatusLoad("reload_values_provider");
+        }
+      }, () => {
+        setStatusLoad("error");
+        openModal({
+          window: /* @__PURE__ */ jsx(WindowConfirm, {
+            variant: "delete",
+            title: getLabel("form_add_edit.label_error_title"),
+            msg: getLabel("form_add_edit.error_authorization_message"),
+            onClickIntro: () => close()
+          }),
+          variant: "delete"
+        });
+        addFlag("form_loaded");
+      });
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  useEffect(() => {
+    if (statusLoad === "ready" && objectId !== void 0) {
+      setStatusLoad("edit");
+    }
+  }, [objectId]);
+  return {
+    formValues,
+    statusLoad,
+    setRefresh
+  };
+}
+const getformAddEditDictionary = () => {
+  return "form_add_edit";
+};
+export {
+  getformAddEditDictionary as g,
+  useFormAddEdit as u
+};

package/hooks/useFormReadyForUpdate/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * hook encargado de activar la bandera de readyToUpdate cuando el formulario este completamente cargado
+ * @param statusLoad
+ * @returns
+ */
+export declare function useFormReadyForUpdate(): boolean;

package/hooks/useFormReadyForUpdate/index.f60f500e.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+function useFormReadyForUpdate() {
+  const [readyToUpdate, setReadyToUpdate] = useState(false);
+  const { control } = useFormContext();
+  const statusLoad = useWatch({
+    control,
+    name: "statusLoad"
+  });
+  useEffect(() => {
+    if (statusLoad !== "ready") {
+      return;
+    }
+    setReadyToUpdate(true);
+  }, [statusLoad]);
+  return readyToUpdate;
+}
+export {
+  useFormReadyForUpdate as u
+};

package/hooks/useModal/{index.8acace45.js → index.acc61361.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModalContext } from "../../contexts/ModalContext/index.ef38d747.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.054af5d8.js";
 function useModal() {
   const context = useContext(ModalContext);
   if (!context)

package/hooks/useSizeContainer/contants.d.ts

@@ -0,0 +1 @@
+export declare const THROTTLE_RESIZE_TIMEOUT = 200;

package/hooks/useSizeContainer/index.62b4e0c4.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+import { throttle } from "lodash";
+const THROTTLE_RESIZE_TIMEOUT = 200;
+function useSizeContainer(containerElement) {
+  const [currentState, setCurrentState] = useState();
+  useEffect(() => {
+    if (!containerElement) {
+      return;
+    }
+    const throttleResize = throttle(setCurrentState, THROTTLE_RESIZE_TIMEOUT, {
+      leading: false,
+      trailing: true
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        throttleResize({
+          containerWidth: entry.contentRect.width,
+          containerHeight: entry.contentRect.height
+        });
+      }
+    });
+    if (containerElement) {
+      resizeObserver.observe(containerElement);
+    }
+    return () => {
+      if (containerElement) {
+        resizeObserver.unobserve(containerElement);
+      }
+    };
+  }, [containerElement]);
+  return currentState;
+}
+export {
+  useSizeContainer as u
+};

package/hooks/useSizeContainer/index.d.ts

@@ -0,0 +1,8 @@
+import { ContainerSize } from '../../utils/types';
+/**
+ * useSizeContainer: hook encargado de obtener el tamaño de un elemento contenedor
+ * TODO: Usar throttle para evitar llamadas innecesarias
+ * @param containerElement
+ * @returns un objeto con el ancho y alto del contenedor
+ */
+export declare function useSizeContainer(containerElement?: HTMLElement | undefined): ContainerSize | undefined;

package/hooks/useStateRef/index.538edb89.js

@@ -0,0 +1,15 @@
+import { useState, useRef } from "react";
+function useStateRef(initialValue) {
+  const [refState, setRefState] = useState(initialValue);
+  const nodeRef = useRef(null);
+  const ref = (node) => {
+    if (node && nodeRef.current !== node) {
+      nodeRef.current = node;
+      setRefState(node);
+    }
+  };
+  return [refState, ref];
+}
+export {
+  useStateRef as u
+};

package/hooks/useStateRef/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * "useStateRef" es un hook que permite tener una referencia a un elemento del DOM
+ * y al mismo tiempo tener un estado para ese elemento, lo que hace que se rerenderize
+ * donde se usa refState
+ * @param initialValue
+ * @returns
+ */
+export declare function useStateRef<T>(initialValue: T | null): [T | null, (node: T | null) => void];

package/hooks/useTab/index.500c048b.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { d as TabContext } from "../../components/mui_extended/Tab/index.cefe27e7.js";
+const useTab = () => {
+  const context = useContext(TabContext);
+  if (context === null) {
+    throw new Error("useTab must be used within a TabProvider");
+  }
+  return context;
+};
+export {
+  useTab as u
+};