@m4l/components 0.2.35 → 0.2.36

package/components/hook-form/RHFUpload/index.c5e5c61c.js

@@ -0,0 +1,258 @@
+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 { I as Image } from "../../Image/index.8cc036b1.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { unstable_composeClasses } from "@mui/base";
+import { T as Typography } from "../../mui_extended/Typography/index.a1e774a2.js";
+import { B as Button } from "../../mui_extended/Button/index.5395d101.js";
+import { H as HelperText } from "../../HelperText/index.81c5d349.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 } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("skeleton")
+      } : {},
+      children: [
+        "est\xE1 con skeleton",
+        /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" })
+      ]
+    }
+  );
+};
+const componentName = "M4LRHFUploadImage";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "dropZoneStyle",
+    "containerFileImage",
+    "placeHolder",
+    "containerUploadBoddy",
+    "containerBodyImage",
+    "containerMessage",
+    "containerTitle",
+    "containerDescription",
+    "containerConditions",
+    "containerUploadImage",
+    "string",
+    "skeleton",
+    "inputDropZone",
+    "stateError"
+  ]
+);
+function getRHFUploadImagebUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const RHFUploadImageUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.isDragReject && "stateError",
+      ownerState.isDragActive && "stateActive",
+      ownerState.hasFile && "hasFile"
+    ],
+    dropZoneStyle: ["dropZoneStyle"],
+    containerFileImage: ["containerFileImage"],
+    placeHolder: ["placeHolder"],
+    containerUploadBoddy: ["containerUploadBoddy"],
+    containerBodyImage: ["containerBodyImage"],
+    containerMessage: ["containerMessage"],
+    containerTitle: ["containerTitle"],
+    containerDescription: ["containerDescription"],
+    containerConditions: ["containerConditions"],
+    containerUploadImage: ["containerUploadImage"],
+    skeleton: ["skeleton"],
+    inputDropZone: ["inputDropZone"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFUploadImagebUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function UploadImage({ error, file, helperText, sx, ...other }) {
+  const { getRootProps, getInputProps, isDragActive, isDragReject, open } = useDropzone({
+    multiple: false,
+    ...other
+  });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const ownerSate = {
+    isDragReject: isDragReject || error,
+    isDragActive,
+    hasFile: file
+  };
+  const classes = RHFUploadImageUtilityClasses(ownerSate);
+  return /* @__PURE__ */ jsx(
+    UploadImageRoot,
+    {
+      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: classes.containerUploadImage,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadImage")
+            } : {},
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: classes.dropZoneStyle,
+                ...getRootProps(),
+                ...process.env.NODE_ENV !== "production" ? {
+                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("dropZoneStyle")
+                } : {},
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...getInputProps(),
+                      className: classes.inputDropZone,
+                      ...process.env.NODE_ENV !== "production" ? {
+                        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("inputDropZone")
+                      } : {}
+                    }
+                  ),
+                  file && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classes.containerFileImage,
+                      ...process.env.NODE_ENV !== "production" ? {
+                        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerFileImage")
+                      } : {},
+                      children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          alt: "bgImageUploadImage",
+                          src: isString(file) ? file : file.preview || "",
+                          ratio: "1:1"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classes.placeHolder,
+                      ...process.env.NODE_ENV !== "production" ? {
+                        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("placeHolder")
+                      } : {},
+                      children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: classes.containerUploadBoddy,
+                          ...process.env.NODE_ENV !== "production" ? {
+                            [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadBoddy")
+                          } : {},
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: classes.containerBodyImage,
+                                ...process.env.NODE_ENV !== "production" ? {
+                                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerBodyImage")
+                                } : {},
+                                children: /* @__PURE__ */ jsx(
+                                  Image,
+                                  {
+                                    src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+                                    ratio: "1:1"
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                className: classes.containerMessage,
+                                ...process.env.NODE_ENV !== "production" ? {
+                                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerMessage")
+                                } : {},
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      className: classes.containerTitle,
+                                      variant: "subtitle",
+                                      skeletonWidth: "150px",
+                                      children: getLabel("upload_image.title_upload")
+                                    }
+                                  ),
+                                  /* @__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") })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        helperText && helperText
+      ] }) : /* @__PURE__ */ jsx(SkeletonUploadImage, { classes: classes.skeleton })
+    }
+  );
+}
+const WrapperRHFUploadImage = styled("div")(() => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
+function RHFUploadImage({ name, ...other }) {
+  const { control, setValue } = useFormContext();
+  const handleDrop = useCallback(
+    (acceptedFiles) => {
+      const file = acceptedFiles[0];
+      if (file) {
+        setValue(
+          name,
+          Object.assign(file, {
+            preview: URL.createObjectURL(file)
+          })
+        );
+      }
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const checkError = !!error && !field.value;
+        return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, { children: [
+          /* @__PURE__ */ jsx(UploadImage, { onDrop: handleDrop, error: checkError, ...other, file: field.value }),
+          checkError && /* @__PURE__ */ jsx(HelperText, { message: error.message })
+        ] });
+      }
+    }
+  );
+}
+export {
+  RHFUploadImage as R
+};

package/components/maps/components/GpsTools/constants.d.ts

@@ -1,4 +1,4 @@
-import { StyleOpacity, StyleDashArray, StyleWheight } from "./types";
+import { StyleOpacity, StyleDashArray, StyleWheight } from './types';
 export declare const COMPONENT_TEST_ID = "M4LGpsTools";
 export declare const COMPONENT_CLASS_NAME = "M4LGpsTools";
 export declare const COOKIE_MAP_GEO_FILTER = "filter_map_geo";

package/components/maps/components/GpsTools/contexts/GpsToolsContext/types.d.ts

@@ -126,15 +126,15 @@ export interface GpsToolsStateWithActions extends GpsToolsState {
     geofenceActions: {
         /**
          * @description Agrega una geocerca al store
-        */
+         */
         addGeofence: (geofenceId: GeofenceId, geofence: GeofenceFeature) => void;
         /**
          * @description Actualizar parcialmente una geocerca
-        */
+         */
         updatePartialGeofence: (geofenceId: GeofenceId, geofence: Partial<GeofenceFeature>) => void;
         /**
          * @description Actualizar la filas que son mostradas en el grid de geocercas
-        */
+         */
         updateRows: (newRows: GeofenceListModel[]) => void;
         /**
          * @description Agrega una geocerca del set de chequeo