@m4l/components 8.2.4 → 9.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@types/export.d.ts +0 -6
- package/@types/types.d.ts +119 -100
- package/components/AccountPopover/classes/index.d.ts +1 -1
- package/components/CommonActions/components/ActionsContainer/ActionsContainer.d.ts +11 -0
- package/components/CommonActions/components/ActionsContainer/ActionsContainer.js +23 -0
- package/components/CommonActions/components/ActionsContainer/ActionsContainer.test.d.ts +1 -0
- package/components/CommonActions/components/ActionsContainer/ActionsContainerStyles.d.ts +2 -0
- package/components/CommonActions/components/ActionsContainer/ActionsContainerStyles.js +26 -0
- package/components/CommonActions/components/ActionsContainer/constans.d.ts +8 -0
- package/components/CommonActions/components/ActionsContainer/constans.js +4 -0
- package/components/CommonActions/components/ActionsContainer/slots/ActionsContainerEnum.d.ts +3 -0
- package/components/CommonActions/components/ActionsContainer/slots/ActionsContainerEnum.js +7 -0
- package/components/CommonActions/components/ActionsContainer/slots/ActionsContainerSlots.d.ts +4 -0
- package/components/CommonActions/components/ActionsContainer/slots/ActionsContainerSlots.js +12 -0
- package/components/CommonActions/components/ActionsContainer/slots/index.d.ts +2 -0
- package/components/CommonActions/components/ActionsContainer/slots/index.js +1 -0
- package/components/CommonActions/components/ActionsContainer/types.d.ts +20 -0
- package/components/CommonActions/index.d.ts +1 -1
- package/components/DataGrid/subcomponents/Actions/subcomponents/Density/index.js +3 -3
- package/components/DataGrid/subcomponents/Actions/subcomponents/MobileMenuActions/index.js +10 -10
- package/components/DataGrid/subcomponents/Actions/subcomponents/hooks/useModalSettings/index.d.ts +4 -0
- package/components/DataGrid/subcomponents/Actions/subcomponents/hooks/useModalSettings/index.js +2 -2
- package/components/DynamicFilter/slots/dynamicFilterSlots.d.ts +1 -1
- package/components/DynamicFilter/slots/dynamicFilterSlots.js +2 -2
- package/components/DynamicSort/slots/DynamicSortSlots.d.ts +1 -1
- package/components/SideBar/classes/index.d.ts +1 -1
- package/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.d.ts +5 -0
- package/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.js +2 -2
- package/components/areas/components/AreasAdmin/subcomponents/AreaChip/subcomponents/ChipActionsMobile/index.js +2 -2
- package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.d.ts +4 -0
- package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js +2 -2
- package/components/areas/components/AreasViewer/classes/index.d.ts +1 -1
- package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/helper.js +3 -3
- package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/MainActions/index.js +3 -3
- package/components/extended/react-resizable/Resizable/slots/ResizableSlots.d.ts +1 -1
- package/components/extended/react-resizable/ResizableBox/slots/ResizableBoxSlots.d.ts +1 -1
- package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeImage/index.js +1 -1
- package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.d.ts +5 -0
- package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.styles.d.ts +8 -0
- package/components/hook-form/RHFInputNumberSpinner/constants.d.ts +4 -0
- package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerEnum.d.ts +10 -0
- package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerSlots.d.ts +28 -0
- package/components/hook-form/RHFInputNumberSpinner/stories/RHFInputNumberSpinner.defaultProps.stories.d.ts +26 -0
- package/components/hook-form/RHFInputNumberSpinner/stories/RHFInputNumberSpinner.error.stories.d.ts +13 -0
- package/components/hook-form/RHFInputNumberSpinner/stories/RHFInputNumberSpinner.variants.stories.d.ts +23 -0
- package/components/hook-form/RHFInputNumberSpinner/types.d.ts +71 -0
- package/components/hook-form/RHFTextField/RHFTextField.js +13 -23
- package/components/hook-form/RHFTextField/RHFTextField.styles.js +104 -157
- package/components/hook-form/RHFTextField/slots/RHFTextFieldSlots.d.ts +1 -1
- package/components/hook-form/RHFTextField/stories/Error/RHFTextFieldErrorOutlined.stories.d.ts +29 -0
- package/components/hook-form/RHFTextField/stories/Error/RHFTextFieldErrorText.stories.d.ts +29 -0
- package/components/hook-form/RHFTextField/stories/Primary/RHFTextFieldOutlined.stories.d.ts +29 -0
- package/components/hook-form/RHFTextField/stories/Primary/RHFTextFieldText.stories.d.ts +32 -0
- package/components/hook-form/RHFTextField/types.d.ts +3 -0
- package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useRowActionsGetter.js +2 -2
- package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MyActions/index.d.ts +4 -0
- package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MyActions/index.js +2 -2
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/index.js +1 -1
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.d.ts +4 -0
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.js +2 -2
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyTabs/index.js +1 -1
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofencesList/hooks/useRowActionsGetter.js +5 -5
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofencesList/index.d.ts +4 -0
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofencesList/index.js +2 -2
- package/components/modal/WindowConfirm/index.d.ts +5 -0
- package/components/modal/WindowConfirm/index.js +2 -2
- package/components/modal/classes/index.d.ts +2 -2
- package/components/mui_extended/MenuActions/MenuActions.d.ts +8 -1
- package/components/mui_extended/MenuActions/MenuActions.js +55 -77
- package/components/mui_extended/MenuActions/MenuActions.styles.d.ts +4 -0
- package/components/mui_extended/MenuActions/MenuActions.styles.js +11 -38
- package/components/mui_extended/MenuActions/constants.d.ts +17 -0
- package/components/mui_extended/MenuActions/constants.js +6 -2
- package/components/mui_extended/MenuActions/dictionary.d.ts +15 -0
- package/components/mui_extended/MenuActions/slots/MenuActionsEnum.d.ts +8 -5
- package/components/mui_extended/MenuActions/slots/MenuActionsEnum.js +1 -4
- package/components/mui_extended/MenuActions/slots/MenuActionsSlots.d.ts +29 -16
- package/components/mui_extended/MenuActions/slots/MenuActionsSlots.js +16 -33
- package/components/mui_extended/MenuActions/stories/MenuActions.default.stories.d.ts +25 -0
- package/components/mui_extended/MenuActions/stories/MenuActions.othersProps.stories.d.ts +13 -0
- package/components/mui_extended/MenuActions/types.d.ts +80 -18
- package/components/mui_extended/MenuItem/MenuItem.js +85 -0
- package/components/mui_extended/MenuItem/MenuItem.styles.js +121 -0
- package/components/mui_extended/MenuItem/constants.js +4 -0
- package/components/mui_extended/MenuItem/index.js +1 -0
- package/components/mui_extended/MenuItem/slots/MenuItemEnum.js +9 -0
- package/components/mui_extended/MenuItem/slots/MenuItemSlots.js +24 -0
- package/components/mui_extended/MenuItem/types.js +1 -0
- package/components/mui_extended/Pager/classes/index.d.ts +1 -1
- package/components/mui_extended/Select/slots/SelectSlots.d.ts +1 -1
- package/components/mui_extended/Tab/Slots/TabEnum.d.ts +9 -0
- package/components/mui_extended/Tab/Slots/TabEnum.js +9 -0
- package/components/mui_extended/Tab/Slots/TabSlots.d.ts +26 -0
- package/components/mui_extended/Tab/Slots/TabSlots.js +24 -0
- package/components/mui_extended/Tab/Slots/index.d.ts +2 -0
- package/components/mui_extended/Tab/Slots/index.js +1 -0
- package/components/mui_extended/Tab/Tab.d.ts +5 -0
- package/components/mui_extended/Tab/Tab.js +67 -0
- package/components/mui_extended/Tab/Tab.styles.d.ts +5 -0
- package/components/mui_extended/Tab/Tab.styles.js +147 -0
- package/components/mui_extended/Tab/constants.d.ts +14 -0
- package/components/mui_extended/Tab/constants.js +10 -0
- package/components/mui_extended/Tab/index.d.ts +1 -5
- package/components/mui_extended/Tab/types.d.ts +53 -2
- package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts +1 -1
- package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts +6 -6
- package/components/mui_extended/TextField/types.d.ts +54 -10
- package/components/mui_extended/index.d.ts +1 -1
- package/index.js +3 -3
- package/package.json +1 -1
- package/storybook/components/commonActions/components/ActionsContainer/ActionsContainer.stories.d.ts +13 -0
- package/storybook/components/extended/mui/Tab/stories/Tab.disable.stories.d.ts +36 -0
- package/storybook/components/extended/mui/Tab/stories/Tab.enable.stories.d.ts +36 -0
- package/storybook/components/extended/mui/Tab/stories/Tab.sizes.stories.d.ts +28 -0
- package/storybook/components/extended/mui/Tab/stories/Tab.skeleton.stories.d.ts +32 -0
- package/components/CommonActions/components/Actions/index.d.ts +0 -2
- package/components/CommonActions/components/Actions/index.js +0 -24
- package/components/CommonActions/components/Actions/styles.d.ts +0 -1
- package/components/CommonActions/components/Actions/styles.js +0 -14
- package/components/CommonActions/components/Actions/types.d.ts +0 -4
- package/components/CommonActions/tests/constants.js +0 -4
- package/components/CommonActions/tests/utils.js +0 -7
- package/components/hook-form/RHFTextField/stories/Error/TextFieldErrorOutlined.stories.d.ts +0 -9
- package/components/hook-form/RHFTextField/stories/Error/TextFieldErrorText.stories.d.ts +0 -9
- package/components/hook-form/RHFTextField/stories/Primary/TextFieldOutlined.stories.d.ts +0 -9
- package/components/hook-form/RHFTextField/stories/Primary/TextFieldText.stories.d.ts +0 -9
- package/components/mui_extended/MenuActions/MenuActions.stories.d.ts +0 -25
- package/components/mui_extended/Tab/classes/constants.d.ts +0 -1
- package/components/mui_extended/Tab/classes/constants.js +0 -4
- package/components/mui_extended/Tab/classes/index.d.ts +0 -10
- package/components/mui_extended/Tab/classes/index.js +0 -25
- package/components/mui_extended/Tab/classes/types.d.ts +0 -7
- package/components/mui_extended/Tab/constant.d.ts +0 -1
- package/components/mui_extended/Tab/constant.js +0 -4
- package/components/mui_extended/Tab/index.js +0 -40
- package/components/mui_extended/Tab/styles.d.ts +0 -2
- package/components/mui_extended/Tab/styles.js +0 -11
- package/components/mui_extended/Tab/tests/utils.d.ts +0 -2
- /package/components/{mui_extended/Tab/tests/index.test.d.ts → CommonActions/components/ActionsContainer/ActionsContainer.integration.test.d.ts} +0 -0
|
@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { useModuleDictionary, useEnvironment } from "@m4l/core";
|
|
4
4
|
import clsx from "clsx";
|
|
5
|
-
import { T as Tab } from "../../../../../../../../../mui_extended/Tab/
|
|
5
|
+
import { T as Tab } from "../../../../../../../../../mui_extended/Tab/Tab.js";
|
|
6
6
|
import { G as GeneralData } from "../GeneralData/index.js";
|
|
7
7
|
import { C as ConfigData } from "../ConfigData/index.js";
|
|
8
8
|
import { S as StyleData } from "../StyleData/index.js";
|
|
@@ -79,8 +79,8 @@ function useRowActionsGetter(props) {
|
|
|
79
79
|
(row) => {
|
|
80
80
|
const conditionalItems = [];
|
|
81
81
|
conditionalItems.push({
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
startIcon: urlIconEdit,
|
|
83
|
+
label: MAP_GPSTOOLS_DICCTIONARY.ROW_ACTION_GEO_EDIT,
|
|
84
84
|
onClick: () => {
|
|
85
85
|
goEdit(row.id, row.name);
|
|
86
86
|
},
|
|
@@ -89,12 +89,12 @@ function useRowActionsGetter(props) {
|
|
|
89
89
|
disabled: !row.authUserOptions.edit
|
|
90
90
|
});
|
|
91
91
|
conditionalItems.push({
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
startIcon: urlIconDelete,
|
|
93
|
+
label: MAP_GPSTOOLS_DICCTIONARY.ROW_ACTION_GEO_DELETE,
|
|
94
94
|
onClick: () => {
|
|
95
95
|
onDelete(row);
|
|
96
96
|
},
|
|
97
|
-
|
|
97
|
+
error: true,
|
|
98
98
|
// Solo se habilita si intenta editarse a él mismo, o si tiene permisos pero está en un nivel superior al usuario a editar
|
|
99
99
|
// disabled: !(itsMe || (hasPrivilege(PRIVILEGE_EDIT) && (loggedUserType > row.user_type.id)))
|
|
100
100
|
disabled: !row.authUserOptions.edit
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* TODO: Documentar
|
|
3
|
+
* @author SebastianM - automatic
|
|
4
|
+
* @createdAt 2024-11-01 12:34:48 - automatic
|
|
5
|
+
* @updatedAt 2024-11-01 12:34:49 - automatic
|
|
6
|
+
* @updatedUser SebastianM - automatic
|
|
3
7
|
*/
|
|
4
8
|
export declare function GeofencesList(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,7 +6,7 @@ import { S as StackGeofenceListRoot } from "./styles.js";
|
|
|
6
6
|
import { useModuleDictionary } from "@m4l/core";
|
|
7
7
|
import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../dictionary.js";
|
|
8
8
|
import { D as DataGrid } from "../../../../../../../DataGrid/index.js";
|
|
9
|
-
import { A as
|
|
9
|
+
import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
|
|
10
10
|
import { B as Button } from "../../../../../../../mui_extended/Button/Button.js";
|
|
11
11
|
function GeofencesList() {
|
|
12
12
|
const { getLabel } = useModuleDictionary();
|
|
@@ -65,7 +65,7 @@ function GeofencesList() {
|
|
|
65
65
|
},
|
|
66
66
|
"list"
|
|
67
67
|
),
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
68
|
+
/* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(Button, { onClick: () => goToAdd(), children: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODULE_NAME_GEOFENCE_ADD) }) })
|
|
69
69
|
]
|
|
70
70
|
}
|
|
71
71
|
);
|
|
@@ -4,8 +4,13 @@ import { WindowConfirmProps } from './types';
|
|
|
4
4
|
* Este componente muestra una ventana modal de confirmación con un mensaje y opciones de acción.
|
|
5
5
|
* Utiliza hooks como useModal, useModuleDictionary y useEnvironment de @m4l/core.
|
|
6
6
|
* También importa componentes y clases necesarios de CommonActions, subcomponents y classes.
|
|
7
|
+
* @createdAt 2024-11-01 09:11:42 - automatic
|
|
7
8
|
*/
|
|
8
9
|
/**
|
|
9
10
|
* TODO: Documentar
|
|
11
|
+
* @author SebastianM - automatic
|
|
12
|
+
* @createdAt 2024-11-01 09:11:42 - automatic
|
|
13
|
+
* @updatedAt 2024-11-01 12:34:50 - automatic
|
|
14
|
+
* @updatedUser SebastianM - automatic
|
|
10
15
|
*/
|
|
11
16
|
export declare const WindowConfirm: (props: WindowConfirmProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { u as useModal } from "../../../hooks/useModal/index.js";
|
|
3
|
-
import { A as
|
|
3
|
+
import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
|
|
4
4
|
import { M as MessageIlustration } from "./subcomponents/MessageIlustration/index.js";
|
|
5
5
|
import { m as modalUtilityClasses } from "../classes/index.js";
|
|
6
6
|
import { W as WindowBase } from "../WindowBase/index.js";
|
|
@@ -30,7 +30,7 @@ const WindowConfirm = (props) => {
|
|
|
30
30
|
urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/window_confirm.svg`,
|
|
31
31
|
children: [
|
|
32
32
|
/* @__PURE__ */ jsx(MessageIlustration, { classes, msg, title }),
|
|
33
|
-
/* @__PURE__ */ jsxs(
|
|
33
|
+
/* @__PURE__ */ jsxs(ActionsContainer, { children: [
|
|
34
34
|
/* @__PURE__ */ jsx(ActionCancel, { onClick: onCloseCancel }),
|
|
35
35
|
/* @__PURE__ */ jsx(ActionIntro, { onClick: onClikIntroLocal })
|
|
36
36
|
] })
|
|
@@ -7,8 +7,6 @@ export declare function getModalUtilityClass(slot: string): string;
|
|
|
7
7
|
*/
|
|
8
8
|
export declare const modalUtilityClasses: (ownerState: OwnerStateWindowConfim) => {
|
|
9
9
|
root: string;
|
|
10
|
-
resizeHandle: string;
|
|
11
|
-
windowContent: string;
|
|
12
10
|
windowBaseRoot: string;
|
|
13
11
|
containerWindow: string;
|
|
14
12
|
headerContainer: string;
|
|
@@ -21,4 +19,6 @@ export declare const modalUtilityClasses: (ownerState: OwnerStateWindowConfim) =
|
|
|
21
19
|
messageContainer: string;
|
|
22
20
|
illustration: string;
|
|
23
21
|
windowConfirm: string;
|
|
22
|
+
resizeHandle: string;
|
|
23
|
+
windowContent: string;
|
|
24
24
|
};
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { MenuActionsProps } from './types';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Componente `MenuActions`:
|
|
5
|
+
* Un componente interactivo que despliega un menú con diferentes acciones,
|
|
6
|
+
* accesible a través de un botón con ícono. Ofrece soporte para mostrar acciones personalizadas
|
|
7
|
+
* y estilos configurables.
|
|
5
8
|
*/
|
|
6
9
|
export declare function MenuActions(props: MenuActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Componente `MemonizedMenuActions`:
|
|
12
|
+
* Una versión memorizada del componente `MenuActions` para mejorar el rendimiento.
|
|
13
|
+
*/
|
|
7
14
|
export declare const MemonizedMenuActions: React.MemoExoticComponent<typeof MenuActions>;
|
|
8
15
|
export default MenuActions;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsxs,
|
|
2
|
-
import React, {
|
|
3
|
-
import { useTheme } from "@mui/material/styles";
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import React, { useRef, useState, useMemo } from "react";
|
|
4
3
|
import { useEnvironment, useModuleDictionary } from "@m4l/core";
|
|
5
|
-
import {
|
|
4
|
+
import { useTheme } from "@mui/material/styles";
|
|
5
|
+
import { I as ICON_PATH, a as ICONS, M as MENU_ACTIONS_, b as MENU_ACTIONS_EMPTY } from "./constants.js";
|
|
6
6
|
import { g as getMenuActionsDictionary, D as DICTIONARY } from "./dictionary.js";
|
|
7
|
-
import {
|
|
7
|
+
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
8
|
+
import { R as RootStyled, I as IconButtonStyled, P as PopoverStyled, M as MenuItemStyled } from "./slots/MenuActionsSlots.js";
|
|
8
9
|
function MenuActions(props) {
|
|
9
10
|
const {
|
|
10
11
|
menuActions,
|
|
@@ -14,48 +15,40 @@ function MenuActions(props) {
|
|
|
14
15
|
objItem = {},
|
|
15
16
|
urlIcon,
|
|
16
17
|
toolTip = "",
|
|
17
|
-
marginTop
|
|
18
|
+
marginTop,
|
|
18
19
|
marginBottom,
|
|
19
20
|
marginLeft,
|
|
20
21
|
marginRight,
|
|
21
22
|
width = 200,
|
|
22
|
-
withBadge = false,
|
|
23
23
|
badgeContent,
|
|
24
24
|
arrowType = "right-top",
|
|
25
25
|
externalOpen = null,
|
|
26
26
|
externalClose,
|
|
27
|
+
sizes = "medium",
|
|
27
28
|
...other
|
|
28
29
|
} = props;
|
|
30
|
+
const { currentSize } = useComponentSize(sizes);
|
|
31
|
+
const rootRef = useRef(null);
|
|
32
|
+
const OwnerState = {
|
|
33
|
+
iconSize: currentSize
|
|
34
|
+
};
|
|
29
35
|
const { host_static_assets, environment_assets } = useEnvironment();
|
|
30
36
|
const { getLabel } = useModuleDictionary();
|
|
31
|
-
const [open, setOpen] = useState(
|
|
32
|
-
const
|
|
33
|
-
setOpen(
|
|
37
|
+
const [open, setOpen] = useState(false);
|
|
38
|
+
const handleOpenClose = () => {
|
|
39
|
+
setOpen(() => !open);
|
|
34
40
|
};
|
|
35
41
|
const theme = useTheme();
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
let mounted = true;
|
|
38
|
-
if (mounted) {
|
|
39
|
-
setOpen(externalOpen);
|
|
40
|
-
}
|
|
41
|
-
return function cleanUp() {
|
|
42
|
-
mounted = false;
|
|
43
|
-
};
|
|
44
|
-
}, [externalOpen]);
|
|
45
42
|
const urlFinalIcon = useMemo(() => {
|
|
46
43
|
if (urlIcon) {
|
|
47
44
|
return urlIcon;
|
|
48
45
|
}
|
|
49
46
|
return `${host_static_assets}/${environment_assets}/${ICON_PATH}/${ICONS.MENU}`;
|
|
50
47
|
}, [urlIcon, host_static_assets, environment_assets]);
|
|
51
|
-
const
|
|
52
|
-
e.stopPropagation();
|
|
53
|
-
setOpen(null);
|
|
54
|
-
externalClose && externalClose(null);
|
|
55
|
-
};
|
|
56
|
-
const handleClick = (e, _menuAction) => {
|
|
48
|
+
const handleClick = (e, menuAction) => {
|
|
57
49
|
e.stopPropagation();
|
|
58
|
-
|
|
50
|
+
menuAction.onClick && menuAction.onClick(e);
|
|
51
|
+
setOpen(false);
|
|
59
52
|
};
|
|
60
53
|
const finalActions = useMemo(() => {
|
|
61
54
|
let ret;
|
|
@@ -66,35 +59,26 @@ function MenuActions(props) {
|
|
|
66
59
|
}
|
|
67
60
|
return ret;
|
|
68
61
|
}, [menuActions, objItem]);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
ownerState: {},
|
|
82
|
-
src: urlFinalIcon,
|
|
83
|
-
onClick: handleOpen,
|
|
84
|
-
tooltip: toolTip,
|
|
85
|
-
className: iconButtonClassName
|
|
86
|
-
}
|
|
87
|
-
) });
|
|
88
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
89
|
-
IconButtonElement,
|
|
62
|
+
return /* @__PURE__ */ jsxs(RootStyled, { ownerState: { OwnerState }, ref: rootRef, children: [
|
|
63
|
+
/* @__PURE__ */ jsx(
|
|
64
|
+
IconButtonStyled,
|
|
65
|
+
{
|
|
66
|
+
ownerState: { OwnerState },
|
|
67
|
+
size: sizes,
|
|
68
|
+
src: urlFinalIcon,
|
|
69
|
+
onClick: () => handleOpenClose(),
|
|
70
|
+
tooltip: toolTip,
|
|
71
|
+
className: iconButtonClassName
|
|
72
|
+
}
|
|
73
|
+
),
|
|
90
74
|
/* @__PURE__ */ jsxs(
|
|
91
|
-
|
|
75
|
+
PopoverStyled,
|
|
92
76
|
{
|
|
93
|
-
ownerState: {},
|
|
77
|
+
ownerState: { OwnerState },
|
|
94
78
|
id: "Popover",
|
|
95
|
-
open
|
|
96
|
-
anchorEl:
|
|
97
|
-
onClose:
|
|
79
|
+
open,
|
|
80
|
+
anchorEl: externalOpen ?? rootRef.current,
|
|
81
|
+
onClose: () => handleOpenClose(),
|
|
98
82
|
arrowType,
|
|
99
83
|
sx: {
|
|
100
84
|
marginTop,
|
|
@@ -102,37 +86,31 @@ function MenuActions(props) {
|
|
|
102
86
|
marginLeft,
|
|
103
87
|
marginRight,
|
|
104
88
|
width,
|
|
105
|
-
maxWidth: 300,
|
|
106
|
-
"& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 },
|
|
107
89
|
...theme.components?.M4LMenuActions?.styleOverrides || {},
|
|
108
90
|
...menuActionSx
|
|
109
91
|
},
|
|
110
92
|
...other,
|
|
111
93
|
children: [
|
|
112
|
-
finalActions.map(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
{
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
},
|
|
120
|
-
sx: { color: menuAction.color ?? "text.main" },
|
|
121
|
-
disabled: menuAction.disabled,
|
|
122
|
-
ownerState: { variant: menuAction.variant, color: menuAction.color },
|
|
123
|
-
children: [
|
|
124
|
-
menuAction.urlIcon ? /* @__PURE__ */ jsx(
|
|
125
|
-
IconButtonUrlStyled,
|
|
126
|
-
{
|
|
127
|
-
ownerState: { variant: menuAction.variant },
|
|
128
|
-
src: menuAction.urlIcon
|
|
129
|
-
}
|
|
130
|
-
) : null,
|
|
131
|
-
/* @__PURE__ */ jsx(LabelMenuItemStyled, { ownerState: {}, children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId) })
|
|
132
|
-
]
|
|
94
|
+
finalActions.length > 0 ? finalActions.map((menuAction, index) => /* @__PURE__ */ jsx(
|
|
95
|
+
MenuItemStyled,
|
|
96
|
+
{
|
|
97
|
+
ownerState: { OwnerState },
|
|
98
|
+
size: sizes,
|
|
99
|
+
onClick: (e) => {
|
|
100
|
+
handleClick(e, menuAction);
|
|
133
101
|
},
|
|
134
|
-
|
|
135
|
-
|
|
102
|
+
...menuAction
|
|
103
|
+
},
|
|
104
|
+
`${MENU_ACTIONS_}${index}`
|
|
105
|
+
)) : /* @__PURE__ */ jsx(
|
|
106
|
+
MenuItemStyled,
|
|
107
|
+
{
|
|
108
|
+
ownerState: { OwnerState },
|
|
109
|
+
size: sizes,
|
|
110
|
+
disabled: true,
|
|
111
|
+
label: getLabel(getMenuActionsDictionary(DICTIONARY.no_actions_label))
|
|
112
|
+
},
|
|
113
|
+
MENU_ACTIONS_EMPTY
|
|
136
114
|
),
|
|
137
115
|
endListElement ? endListElement : null
|
|
138
116
|
]
|
|
@@ -1,49 +1,22 @@
|
|
|
1
|
-
const CONTAINER_QUERY_NAME = "menuActions";
|
|
2
1
|
const menuActionsStyles = {
|
|
3
2
|
/**
|
|
4
|
-
*
|
|
3
|
+
* Estilos para el contenedor raíz del menú.
|
|
5
4
|
*/
|
|
6
|
-
root: (
|
|
7
|
-
|
|
8
|
-
"& .MuiPaper-root": {
|
|
9
|
-
display: "flex",
|
|
10
|
-
flexDirection: "column",
|
|
11
|
-
background: theme.palette.background.default,
|
|
12
|
-
gap: "8px",
|
|
13
|
-
maxWidth: 300
|
|
14
|
-
}
|
|
5
|
+
root: () => ({
|
|
6
|
+
width: "fit-content"
|
|
15
7
|
}),
|
|
16
|
-
|
|
8
|
+
/***
|
|
9
|
+
* Estilos para el Popover
|
|
10
|
+
*/
|
|
11
|
+
popover: {},
|
|
17
12
|
/**
|
|
18
|
-
*
|
|
13
|
+
* Estilos para el `IconButton` utilizado para abrir el menú.
|
|
19
14
|
*/
|
|
20
|
-
|
|
21
|
-
display: "flex",
|
|
22
|
-
justifyContent: "center",
|
|
23
|
-
minHeight: "24px",
|
|
24
|
-
minWidth: "24px",
|
|
25
|
-
padding: "0",
|
|
26
|
-
gap: "0px",
|
|
27
|
-
...ownerState.variant === "delete" ? {
|
|
28
|
-
color: theme.palette.error.main
|
|
29
|
-
} : {}
|
|
30
|
-
}),
|
|
31
|
-
menuItemLabel: {},
|
|
15
|
+
iconButton: {},
|
|
32
16
|
/**
|
|
33
|
-
*
|
|
17
|
+
* Estilos para los `menuItems` del menú.
|
|
34
18
|
*/
|
|
35
|
-
|
|
36
|
-
"&.M4LIcon-root": {
|
|
37
|
-
minHeight: "24px",
|
|
38
|
-
minWidth: "24px",
|
|
39
|
-
"& > .M4LIcon-icon": {
|
|
40
|
-
backgroundColor: ownerState.variant === "delete" ? theme.palette.error.main : ""
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}),
|
|
44
|
-
labelEmpty: () => ({
|
|
45
|
-
zIndex: 1
|
|
46
|
-
})
|
|
19
|
+
menuItem: {}
|
|
47
20
|
};
|
|
48
21
|
export {
|
|
49
22
|
menuActionsStyles as m
|
|
@@ -1,5 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Ruta donde se encuentran los íconos en los assets.
|
|
3
|
+
*/
|
|
1
4
|
export declare const ICON_PATH = "frontend/components/menu_actions/assets/icons";
|
|
5
|
+
/**
|
|
6
|
+
* Íconos utilizados en el menú por defecto.
|
|
7
|
+
*/
|
|
2
8
|
export declare const ICONS: {
|
|
3
9
|
MENU: string;
|
|
4
10
|
};
|
|
11
|
+
/**
|
|
12
|
+
* Nombre clave del componente `MenuActions` dentro de la aplicación.
|
|
13
|
+
*/
|
|
5
14
|
export declare const MENU_ACTIONS_KEY_COMPONENT = "M4LMenuActions";
|
|
15
|
+
/**
|
|
16
|
+
* Constante que define la clave cuando un ítem del menú está vacío.
|
|
17
|
+
*/
|
|
18
|
+
export declare const MENU_ACTIONS_EMPTY = "menu_action_empty";
|
|
19
|
+
/**
|
|
20
|
+
* Prefijo de la clave que se utiliza cuando un ítem del menú está cargando en React.
|
|
21
|
+
*/
|
|
22
|
+
export declare const MENU_ACTIONS_ = "menu_action_";
|
|
@@ -3,8 +3,12 @@ const ICONS = {
|
|
|
3
3
|
MENU: "menu.svg"
|
|
4
4
|
};
|
|
5
5
|
const MENU_ACTIONS_KEY_COMPONENT = "M4LMenuActions";
|
|
6
|
+
const MENU_ACTIONS_EMPTY = "menu_action_empty";
|
|
7
|
+
const MENU_ACTIONS_ = "menu_action_";
|
|
6
8
|
export {
|
|
7
9
|
ICON_PATH as I,
|
|
8
|
-
|
|
9
|
-
ICONS as a
|
|
10
|
+
MENU_ACTIONS_ as M,
|
|
11
|
+
ICONS as a,
|
|
12
|
+
MENU_ACTIONS_EMPTY as b,
|
|
13
|
+
MENU_ACTIONS_KEY_COMPONENT as c
|
|
10
14
|
};
|
|
@@ -1,7 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Identificador clave utilizado para el diccionario de `MenuActions`.
|
|
3
|
+
*/
|
|
1
4
|
export declare const MENU_ACTIONS_DICTIONARY_ID = "menu_actions";
|
|
5
|
+
/**
|
|
6
|
+
* Devuelve un array que contiene el identificador del diccionario de `MenuActions`.
|
|
7
|
+
*/
|
|
2
8
|
export declare function getMenuActionsComponentsDictionary(): string[];
|
|
9
|
+
/**
|
|
10
|
+
* Diccionario de claves para las etiquetas y textos utilizados en el componente `MenuActions`.
|
|
11
|
+
*/
|
|
3
12
|
export declare const DICTIONARY: {
|
|
4
13
|
readonly no_actions_label: "no_actions_label";
|
|
5
14
|
};
|
|
15
|
+
/**
|
|
16
|
+
* Tipo que representa las claves del diccionario de `MenuActions`.
|
|
17
|
+
*/
|
|
6
18
|
export type TypeDictionary = typeof DICTIONARY;
|
|
19
|
+
/**
|
|
20
|
+
* Función que obtiene el valor completo de una clave del diccionario de `MenuActions` utilizando su identificador.
|
|
21
|
+
*/
|
|
7
22
|
export declare const getMenuActionsDictionary: (key: keyof TypeDictionary) => string;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enum `MenuActionsSlots`
|
|
3
|
+
*
|
|
4
|
+
* Define los nombres de los slots de estilo para el componente `MenuActions`. Estos slots se utilizan para
|
|
5
|
+
* aplicar estilos específicos y crear clases CSS únicas para los distintos elementos del componente.
|
|
6
|
+
*/
|
|
1
7
|
export declare enum MenuActionsSlots {
|
|
2
8
|
root = "root",
|
|
3
|
-
|
|
9
|
+
popover = "popover",
|
|
4
10
|
iconButton = "iconButton",
|
|
5
|
-
menuItem = "menuItem"
|
|
6
|
-
menuItemIcon = "menuItemIcon",
|
|
7
|
-
menuItemLabel = "menuItemLabel",
|
|
8
|
-
labelEmpty = "labelEmpty"
|
|
11
|
+
menuItem = "menuItem"
|
|
9
12
|
}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
var MenuActionsSlots = /* @__PURE__ */ ((MenuActionsSlots2) => {
|
|
2
2
|
MenuActionsSlots2["root"] = "root";
|
|
3
|
-
MenuActionsSlots2["
|
|
3
|
+
MenuActionsSlots2["popover"] = "popover";
|
|
4
4
|
MenuActionsSlots2["iconButton"] = "iconButton";
|
|
5
5
|
MenuActionsSlots2["menuItem"] = "menuItem";
|
|
6
|
-
MenuActionsSlots2["menuItemIcon"] = "menuItemIcon";
|
|
7
|
-
MenuActionsSlots2["menuItemLabel"] = "menuItemLabel";
|
|
8
|
-
MenuActionsSlots2["labelEmpty"] = "labelEmpty";
|
|
9
6
|
return MenuActionsSlots2;
|
|
10
7
|
})(MenuActionsSlots || {});
|
|
11
8
|
export {
|
|
@@ -1,23 +1,36 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Componente raíz estilizado para `MenuActions`, basado en el componente `Popover`.
|
|
3
|
+
*
|
|
4
|
+
* Utiliza el sistema de estilos de Material-UI para aplicar estilos personalizados al contenedor principal (`Popover`)
|
|
5
|
+
* de `MenuActions`. Si no se proporcionan estilos, se utiliza un objeto vacío como valor predeterminado.
|
|
6
|
+
*/
|
|
7
|
+
export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
|
|
2
8
|
ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
|
|
3
|
-
},
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
9
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
10
|
+
/**
|
|
11
|
+
* Componente estilizado para `MenuActions`, basado en el componente `Popover`.
|
|
12
|
+
*
|
|
13
|
+
* Utiliza el sistema de estilos de Material-UI para aplicar estilos personalizados al contenedor principal (`Popover`)
|
|
14
|
+
* de `MenuActions`. Si no se proporcionan estilos, se utiliza un objeto vacío como valor predeterminado.
|
|
15
|
+
*/
|
|
16
|
+
export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Popover/types').PopoverProps, keyof import('../../Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
|
|
8
17
|
ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
|
|
9
18
|
}, {}, {}>;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Componente estilizado para el botón de icono dentro de `MenuActions`, basado en el componente `IconButton`.
|
|
21
|
+
*
|
|
22
|
+
* Utiliza el sistema de estilos de Material-UI para aplicar estilos personalizados al botón de icono.
|
|
23
|
+
* Si no se proporcionan estilos, se utiliza un objeto vacío como valor predeterminado.
|
|
24
|
+
*/
|
|
25
|
+
export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../IconButton/types').IconButtonProps, keyof import('../../IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
|
|
13
26
|
ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
|
|
14
27
|
}, {}, {}>;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Componente estilizado para el ítem del menú dentro de `MenuActions`, basado en el componente `MenuItem`.
|
|
30
|
+
*
|
|
31
|
+
* Utiliza el sistema de estilos de Material-UI para aplicar estilos personalizados al ítem del menú.
|
|
32
|
+
* Si no se proporcionan estilos, se utiliza un objeto vacío como valor predeterminado.
|
|
33
|
+
*/
|
|
34
|
+
export declare const MenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuItem').MenuItemProps, keyof import('../../MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
|
|
19
35
|
ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
|
|
20
36
|
}, {}, {}>;
|
|
21
|
-
export declare const LabelEmptyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
|
|
22
|
-
ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
|
|
23
|
-
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
@@ -1,46 +1,29 @@
|
|
|
1
1
|
import { styled } from "@mui/material/styles";
|
|
2
|
-
import {
|
|
3
|
-
import { M as MENU_ACTIONS_KEY_COMPONENT } from "../constants.js";
|
|
2
|
+
import { c as MENU_ACTIONS_KEY_COMPONENT } from "../constants.js";
|
|
4
3
|
import { m as menuActionsStyles } from "../MenuActions.styles.js";
|
|
5
4
|
import { M as MenuActionsSlots } from "./MenuActionsEnum.js";
|
|
6
|
-
import { I as IconButton } from "../../IconButton/IconButton.js";
|
|
7
5
|
import { P as Popover } from "../../Popover/Popover.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
const
|
|
11
|
-
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
12
|
-
slot: MenuActionsSlots.iconButton
|
|
13
|
-
})(menuActionsStyles?.iconButton || {});
|
|
14
|
-
const RootStyled = styled(Popover, {
|
|
6
|
+
import { I as IconButton } from "../../IconButton/IconButton.js";
|
|
7
|
+
import { M as MenuItem } from "../../MenuItem/MenuItem.js";
|
|
8
|
+
const RootStyled = styled("div", {
|
|
15
9
|
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
16
10
|
slot: MenuActionsSlots.root
|
|
17
|
-
})(menuActionsStyles?.root
|
|
18
|
-
const
|
|
11
|
+
})(menuActionsStyles?.root);
|
|
12
|
+
const PopoverStyled = styled(Popover, {
|
|
19
13
|
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
20
|
-
slot: MenuActionsSlots.
|
|
21
|
-
})(menuActionsStyles?.
|
|
14
|
+
slot: MenuActionsSlots.popover
|
|
15
|
+
})(menuActionsStyles?.popover);
|
|
16
|
+
const IconButtonStyled = styled(IconButton, {
|
|
17
|
+
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
18
|
+
slot: MenuActionsSlots.iconButton
|
|
19
|
+
})(menuActionsStyles?.iconButton);
|
|
22
20
|
const MenuItemStyled = styled(MenuItem, {
|
|
23
21
|
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
24
22
|
slot: MenuActionsSlots.menuItem
|
|
25
|
-
})(menuActionsStyles?.menuItem
|
|
26
|
-
const LabelMenuItemStyled = styled("div", {
|
|
27
|
-
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
28
|
-
slot: MenuActionsSlots.menuItemLabel
|
|
29
|
-
})(menuActionsStyles?.menuItemLabel || {});
|
|
30
|
-
const IconButtonUrlStyled = styled(Icon, {
|
|
31
|
-
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
32
|
-
slot: MenuActionsSlots.menuItemIcon
|
|
33
|
-
})(menuActionsStyles?.menuItemIcon || {});
|
|
34
|
-
const LabelEmptyStyled = styled("div", {
|
|
35
|
-
name: MENU_ACTIONS_KEY_COMPONENT,
|
|
36
|
-
slot: MenuActionsSlots.labelEmpty
|
|
37
|
-
})(menuActionsStyles?.labelEmpty || {});
|
|
23
|
+
})(menuActionsStyles?.menuItem);
|
|
38
24
|
export {
|
|
39
|
-
|
|
40
|
-
IconButtonUrlStyled as I,
|
|
41
|
-
LabelMenuItemStyled as L,
|
|
25
|
+
IconButtonStyled as I,
|
|
42
26
|
MenuItemStyled as M,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
IconButtonStyled as b
|
|
27
|
+
PopoverStyled as P,
|
|
28
|
+
RootStyled as R
|
|
46
29
|
};
|