@m4l/components 1.0.0 → 1.0.2

package/components/{Image/index.36a3d440.js → hook-form/RHFUpload/index.9eeaee0f.js}

@@ -1,182 +1,30 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import { generateUtilityClasses, generateUtilityClass, IconButton, Tooltip, Skeleton, styled as styled$1 } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { unstable_composeClasses } from "@mui/base";
-import { v as IMAGE_PREFIX, T as TEST_PROP_ID, w as componentName$1, x as IMAGEBUTTON_PREFIX, y as ICON_PREFIX, z as componentName$2 } from "../areas/constants.5387d83e.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import isString from "lodash/isString";
 import { useDropzone } from "react-dropzone";
-import clsx from "clsx";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton, useBase, evaluateWithContext } from "@m4l/core";
-import { T as Typography, B as Button } from "../../vendor.a1ce6777.js";
-import { H as HelperText } from "../HelperText/index.be949cdf.js";
-import { c as classes, g as getSize } from "../PrintingSystem/index.fb176a93.js";
-import QRCode from "qrcode.react";
-const ImageRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LImage?.styleOverrides
-}));
-const ratioOptions = {
-  "1.168:1": {
-    width: 1.168,
-    height: 1
-  },
-  "16:9": {
-    width: 16,
-    height: 9
-  },
-  "1:1": {
-    width: 1,
-    height: 1
-  },
-  "1:1.168": {
-    width: 1,
-    height: 1.168
-  },
-  "2:1": {
-    width: 2,
-    height: 1
-  },
-  "2:3": {
-    width: 2,
-    height: 3
-  },
-  "3:1": {
-    width: 3,
-    height: 1
-  },
-  "3:2": {
-    width: 3,
-    height: 2
-  },
-  "3:4": {
-    width: 3,
-    height: 4
-  },
-  "4:3": {
-    width: 4,
-    height: 3
-  },
-  "5:2": {
-    width: 5,
-    height: 2
-  }
-};
-const getRatioValues = (ratio) => {
-  const numType = ratioOptions[ratio];
-  const numRef = numType.width / numType.height;
-  if (numRef >= 1) {
-    return {
-      width: "100%",
-      height: `${Math.trunc(numRef * 100)}%`
-    };
-  } else {
-    return {
-      width: `${Math.trunc(numRef * 100)}%`,
-      height: "100%"
-    };
-  }
-};
-const getNameDataTestId$1 = (KEY) => {
-  return `${IMAGE_PREFIX}-${KEY}`;
-};
-const componentName = "M4LImage";
-generateUtilityClasses(componentName, [
-  "root",
-  "img"
-]);
-function getImagenClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses$1 = () => {
-  const slots = {
-    root: ["root"],
-    img: ["img"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getImagenClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function Image(props) {
-  const { src, alt, width, height, ratio = "1:1", className } = props;
-  const ratioImage = getRatioValues(ratio);
-  const classes2 = useUtilityClasses$1();
-  return /* @__PURE__ */ jsx(
-    ImageRoot,
-    {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("root") } : {},
-      style: width && height ? { minWidth: width, minHeight: height, width, height } : { width: "100%", height: "100%" },
-      children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          alt,
-          src,
-          className: classes2.img,
-          width: !width ? "100%" : ratioImage.width,
-          height: !height ? "100%" : ratioImage.height,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("img") } : {}
-        }
-      )
-    }
-  );
-}
-const WrapperImageButton = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LImageButton?.styleOverrides
-}));
-generateUtilityClasses(componentName$1, [
-  "root"
-]);
-function getImageButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$1, slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getImageButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const getNameDataTestId = (KEY) => {
-  return `${IMAGEBUTTON_PREFIX}-${KEY}`;
-};
-function ImageButton({
-  src,
-  width,
-  height,
-  tooltip,
-  sx = { width, height },
-  ...other
-}) {
-  const finalTooltip = tooltip;
-  const classes2 = useUtilityClasses();
-  const imageButton = useMemo(() => {
-    return /* @__PURE__ */ jsx(IconButton, { sx, ...other, children: /* @__PURE__ */ jsx(Image, { src }) });
-  }, [src, width, height, sx]);
-  return /* @__PURE__ */ jsx(
-    WrapperImageButton,
-    {
-      className: classes2.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: imageButton }) : imageButton
-    }
-  );
-}
+import { I as Image } from "../../Image/index.0d32558e.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { unstable_composeClasses } from "@mui/base";
+import { T as Typography } from "../../mui_extended/Typography/index.2a1c68f8.js";
+import { B as Button } from "../../mui_extended/Button/index.a7dc6ef0.js";
+import { H as HelperText } from "../../HelperText/index.651a9b4b.js";
 const UploadImageRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LRHFUploadImage?.styleOverrides
 }));
+const ICON_PREFIX = "M4LRHFUploadImage";
 const getNameRHFUploadImageDataTestId = (KEY) => {
   return `${ICON_PREFIX}-${KEY}`;
 };
 const SkeletonUploadImage = (props) => {
-  const { classes: classes2 } = props;
+  const { classes } = props;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classes2,
+      className: classes,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("skeleton")
       } : {},
@@ -187,8 +35,9 @@ const SkeletonUploadImage = (props) => {
     }
   );
 };
+const componentName = "M4LRHFUploadImage";
 generateUtilityClasses(
-  componentName$2,
+  componentName,
   [
     "root",
     "dropZoneStyle",
@@ -208,7 +57,7 @@ generateUtilityClasses(
   ]
 );
 function getRHFUploadImagebUtilityClass(slot) {
-  return generateUtilityClass(componentName$2, slot);
+  return generateUtilityClass(componentName, slot);
 }
 const RHFUploadImageUtilityClasses = (ownerState) => {
   const slots = {
@@ -249,25 +98,25 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
     isDragActive,
     hasFile: file
   };
-  const classes2 = RHFUploadImageUtilityClasses(ownerSate);
+  const classes = RHFUploadImageUtilityClasses(ownerSate);
   return /* @__PURE__ */ jsx(
     UploadImageRoot,
     {
-      className: classes2.root,
+      className: classes.root,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("root") } : {},
       children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
         "est\xE1 sin skeleton",
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classes2.containerUploadImage,
+            className: classes.containerUploadImage,
             ...process.env.NODE_ENV !== "production" ? {
               [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadImage")
             } : {},
             children: /* @__PURE__ */ jsxs(
               "div",
               {
-                className: classes2.dropZoneStyle,
+                className: classes.dropZoneStyle,
                 ...getRootProps(),
                 ...process.env.NODE_ENV !== "production" ? {
                   [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("dropZoneStyle")
@@ -277,7 +126,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                     "input",
                     {
                       ...getInputProps(),
-                      className: classes2.inputDropZone,
+                      className: classes.inputDropZone,
                       ...process.env.NODE_ENV !== "production" ? {
                         [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("inputDropZone")
                       } : {}
@@ -286,7 +135,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                   file && /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: classes2.containerFileImage,
+                      className: classes.containerFileImage,
                       ...process.env.NODE_ENV !== "production" ? {
                         [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerFileImage")
                       } : {},
@@ -303,14 +152,14 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: classes2.placeHolder,
+                      className: classes.placeHolder,
                       ...process.env.NODE_ENV !== "production" ? {
                         [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("placeHolder")
                       } : {},
                       children: /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: classes2.containerUploadBoddy,
+                          className: classes.containerUploadBoddy,
                           ...process.env.NODE_ENV !== "production" ? {
                             [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadBoddy")
                           } : {},
@@ -318,7 +167,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                             /* @__PURE__ */ jsx(
                               "div",
                               {
-                                className: classes2.containerBodyImage,
+                                className: classes.containerBodyImage,
                                 ...process.env.NODE_ENV !== "production" ? {
                                   [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerBodyImage")
                                 } : {},
@@ -334,7 +183,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                             /* @__PURE__ */ jsxs(
                               "div",
                               {
-                                className: classes2.containerMessage,
+                                className: classes.containerMessage,
                                 ...process.env.NODE_ENV !== "production" ? {
                                   [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerMessage")
                                 } : {},
@@ -342,14 +191,14 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                                   /* @__PURE__ */ jsx(
                                     Typography,
                                     {
-                                      className: classes2.containerTitle,
+                                      className: classes.containerTitle,
                                       variant: "subtitle",
                                       skeletonWidth: "150px",
                                       children: getLabel("upload_image.title_upload")
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(Typography, { className: classes2.containerDescription, variant: "body", children: getLabel("upload_image.description") }),
-                                  /* @__PURE__ */ jsx(Typography, { className: classes2.containerConditions, variant: "body", children: getLabel("upload_image.conditions") }),
+                                  /* @__PURE__ */ jsx(Typography, { className: classes.containerDescription, variant: "body", children: getLabel("upload_image.description") }),
+                                  /* @__PURE__ */ jsx(Typography, { className: classes.containerConditions, variant: "body", children: getLabel("upload_image.conditions") }),
                                   /* @__PURE__ */ jsx(Button, { onClick: open, children: getLabel("upload_image.label_button") })
                                 ]
                               }
@@ -365,7 +214,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
           }
         ),
         helperText && helperText
-      ] }) : /* @__PURE__ */ jsx(SkeletonUploadImage, { classes: classes2.skeleton })
+      ] }) : /* @__PURE__ */ jsx(SkeletonUploadImage, { classes: classes.skeleton })
     }
   );
 }
@@ -405,55 +254,6 @@ function RHFUploadImage({ name, ...other }) {
     }
   );
 }
-const ImageNode = (props) => {
-  const { className, style, src, width = "100%", height = "100%" } = props;
-  const { unitSize, sourceData } = useBase();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const resourceImg = evaluateWithContext(sourceData, src);
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: `${host_static_assets}/${environment_assets}/${resourceImg}`,
-      className: clsx(classes.imageNodeRoot, className),
-      style: {
-        width: getSize(width, unitSize),
-        height: getSize(height, unitSize),
-        ...style
-      }
-    }
-  );
-};
-const convertToPx = (size, magnitud) => {
-  if (isNaN(size)) {
-    return 0;
-  }
-  if (magnitud === "px") {
-    return size;
-  }
-  switch (magnitud) {
-    case "cm":
-      return size * 37.8;
-    case "mm":
-      return size * 3.78;
-    case "in":
-      return size * 96;
-    case "pt":
-      return size * 1.33;
-    case "pc":
-      return size * 16;
-    default:
-      return 100;
-  }
-};
-const QRImageNode = (props) => {
-  const { url, size = 8, color } = props;
-  const { unitSize } = useBase();
-  return /* @__PURE__ */ jsx(QRCode, { value: url, size: convertToPx(size, unitSize), fgColor: color, renderAs: "canvas" });
-};
 export {
-  Image as I,
-  QRImageNode as Q,
-  RHFUploadImage as R,
-  ImageButton as a,
-  ImageNode as b
+  RHFUploadImage as R
 };

package/components/maps/components/GpsTools/index.ef751d28.js

@@ -0,0 +1,251 @@
+import { createContext, useRef, useEffect, useContext } from "react";
+import { shallow } from "zustand/shallow";
+import { createStore, useStore } from "zustand";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { enableMapSet } from "immer";
+import { u as useMapStore, C as CommonFeatureRender } from "../../index.ba1ccfad.js";
+import { G as GeofencesFeaturesLayers, T as TabsGpsTools } from "../../../mui_extended/Tab/index.ad88441e.js";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
+import { _ as COMPONENT_CLASS_NAME, M as MAP_ZINDEX_OVER_MAP } from "../../../areas/constants.630a4f42.js";
+enableMapSet();
+const createGpsToolsStore = (initProps) => {
+  const startProps = {
+    currentTabGpsTool: "geofences",
+    geofenceState: {
+      rows: [],
+      checkedGeofences: /* @__PURE__ */ new Set(),
+      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
+      checkedInternalFeatures: /* @__PURE__ */ new Set(),
+      hashGeofences: {}
+    },
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, _get) => ({
+        ...startProps,
+        gpsToolsActions: {
+          init: () => {
+            set((state) => {
+              state.ownerState.status = "ready";
+            });
+          },
+          setGpsToolsState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+            });
+          },
+          setCurrentTabTool: (newTabTool) => {
+            set((state) => {
+              state.currentTabGpsTool = newTabTool;
+            });
+          }
+        },
+        geofenceActions: {
+          addGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = geofence;
+            });
+          },
+          updatePartialGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = {
+                ...state.geofenceState.hashGeofences[geofenceId],
+                ...geofence
+              };
+            });
+          },
+          updateRows: (newRows) => {
+            set((state) => {
+              state.geofenceState.rows = newRows;
+            });
+          },
+          addCheckedGeofence: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences.add(geofenceId);
+              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
+            });
+          },
+          removeCheckedGeofence: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences.delete(geofenceId);
+              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
+            });
+          },
+          setCheckedGeofences: (newGeofences) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences = new Set(newGeofences);
+            });
+          },
+          setCheckedCrossingFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
+            });
+          },
+          setCheckedInternalFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
+            });
+          }
+        }
+      })),
+      { name: `Map Tools Store` }
+    )
+  );
+};
+const GpsToolsContext = createContext(null);
+function GpsToolsProvider(props) {
+  const { children } = props;
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createGpsToolsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
+      }
+    });
+  }
+  const { setHandlerGetLabel, setExternalState } = useStore(
+    mapStoreRef.current,
+    (state) => state.gpsToolsActions,
+    shallow
+  );
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({ isMobile: !isDesktop, isSkeleton });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(GpsToolsContext.Provider, { value: mapStoreRef.current, children });
+}
+function useGpsToolsStore(selector, equalityFn) {
+  const context = useContext(GpsToolsContext);
+  if (!context)
+    throw new Error("useGpsToolsStore context must be use inside GpsToolsContext");
+  return useStore(context, selector, equalityFn);
+}
+function useLayers() {
+  const { addLayer, removeLayer } = useMapStore((state) => state.mapActions, shallow);
+  const { init } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
+  useEffect(() => {
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
+      name: "Geocercas",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
+      name: "Geometr\xEDas de tr\xE1nsito",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
+      name: "Geometr\xEDas internas",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    init();
+    return () => {
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
+    };
+  }, []);
+}
+const gpsToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "gpsToolsRoot",
+  "gpsToolsTab",
+  "gpsToolsTabContent",
+  "gpsToolsGeofencesList",
+  "gpsToolsGeofencesAddEdit",
+  "gpsToolsGeofencesAddEditContent",
+  "toolGeofencesAddEditGeneral",
+  "toolGeofencesAddEditStyle",
+  "visible",
+  "hidden"
+]);
+const DivGpsToolsRoot = styled("div")`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+
+  z-index: ${MAP_ZINDEX_OVER_MAP};
+
+  .${gpsToolsClasses.gpsToolsTabContent}.${gpsToolsClasses.hidden} {
+    display: none;
+  }
+
+  .${gpsToolsClasses.gpsToolsGeofencesList} .M4LDataGrid-root {
+    height: unset !important;
+    flex-grow: 1;
+  }
+
+  .${gpsToolsClasses.toolGeofencesAddEditGeneral} {
+    flex-grow: 1;
+  }
+
+  ${(props) => props.theme.components?.M4LGpsTools?.styleOverrides}
+`;
+function GpsTools() {
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(Fragment, { children: !isSkeleton && /* @__PURE__ */ jsx(TabsGpsTools, {}) });
+}
+export {
+  DivGpsToolsRoot as D,
+  GpsTools as G,
+  useLayers as a,
+  GpsToolsProvider as b,
+  gpsToolsClasses as g,
+  useGpsToolsStore as u
+};