@m4l/components 9.1.13 → 9.1.15
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/types.d.ts +8 -0
- package/components/CommonActions/components/ActionFormIntro/index.d.ts +2 -2
- package/components/CommonActions/components/ActionFormIntro/index.js +4 -3
- package/components/ModalDialog/ModalDialog.d.ts +1 -18
- package/components/WindowBase/WindowBase.styles.js +16 -13
- package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeImage/index.js +1 -1
- package/components/mui_extended/CircularProgress/slots/CircularProgressSlots.js +1 -1
- package/components/mui_extended/Dialog/Dialog.styles.js +3 -2
- package/components/mui_extended/LoadingButton/LoadingButton.d.ts +5 -0
- package/components/mui_extended/LoadingButton/LoadingButton.js +93 -0
- package/components/mui_extended/LoadingButton/LoadingButton.styles.d.ts +5 -0
- package/components/mui_extended/LoadingButton/LoadingButton.styles.js +200 -0
- package/components/mui_extended/LoadingButton/constants.d.ts +8 -0
- package/components/mui_extended/LoadingButton/constants.js +4 -0
- package/components/mui_extended/LoadingButton/index.d.ts +1 -9
- package/components/mui_extended/LoadingButton/slots/LoadingButtonEnum.d.ts +7 -0
- package/components/mui_extended/LoadingButton/slots/LoadingButtonEnum.js +11 -0
- package/components/mui_extended/LoadingButton/slots/LoadingButtonSlots.d.ts +38 -0
- package/components/mui_extended/LoadingButton/slots/LoadingButtonSlots.js +36 -0
- package/components/mui_extended/LoadingButton/types.d.ts +13 -7
- package/components/mui_extended/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/storybook/components/ModalDialog/subcomponent/WithExtendedContainer.d.ts +2 -2
- package/storybook/components/extended/mui/LoadingButton/LoadingButton.stories.d.ts +42 -0
- package/components/LanguagePopover/tests/index.test.d.ts +0 -2
- package/components/hook-form/RHFAutocomplete/test/index.test.d.ts +0 -5
- package/components/mui_extended/LoadingButton/classes/constants.d.ts +0 -1
- package/components/mui_extended/LoadingButton/classes/constants.js +0 -4
- package/components/mui_extended/LoadingButton/classes/index.d.ts +0 -11
- package/components/mui_extended/LoadingButton/classes/index.js +0 -42
- package/components/mui_extended/LoadingButton/classes/types.d.ts +0 -11
- package/components/mui_extended/LoadingButton/index.js +0 -47
- package/components/mui_extended/LoadingButton/styles.d.ts +0 -1
- package/components/mui_extended/LoadingButton/styles.js +0 -8
- package/components/mui_extended/LoadingButton/tests/constants.d.ts +0 -1
- package/components/mui_extended/LoadingButton/tests/constants.js +0 -4
- package/components/mui_extended/LoadingButton/tests/utils.d.ts +0 -2
- package/components/mui_extended/LoadingButton/tests/utils.js +0 -7
- /package/components/mui_extended/{CircularProgress/CircularProgress.test.d.ts → LoadingButton/LoadingButton.test.d.ts} +0 -0
package/@types/types.d.ts
CHANGED
|
@@ -133,6 +133,7 @@ import { WindowBaseOwnerState, WindowBaseType } from '../components/WindowBase';
|
|
|
133
133
|
import { OwnerStateWindowConfirm, WindowConfirmType } from '../components/WindowConfirm';
|
|
134
134
|
import { AppBarSlotsType, AppBarOwnerState } from '../components/AppBar/types';
|
|
135
135
|
import { DialogOwnerState, DialogType } from '../components/mui_extended/Dialog/types';
|
|
136
|
+
import { LoadingButtonOwnerState, LoadingButtonSlotsType } from '../components/mui_extended/LoadingButton/types';
|
|
136
137
|
|
|
137
138
|
|
|
138
139
|
declare module '@mui/material/styles' {
|
|
@@ -173,6 +174,7 @@ declare module '@mui/material/styles' {
|
|
|
173
174
|
M4LWindowConfirm: WindowConfirmType;
|
|
174
175
|
M4LAppBar: AppBarSlotsType;
|
|
175
176
|
M4LWiDialog: DialogType;
|
|
177
|
+
M4LLoadingButton: LoadingButtonSlotsType;
|
|
176
178
|
}
|
|
177
179
|
|
|
178
180
|
interface ComponentsPropsList {
|
|
@@ -212,6 +214,7 @@ declare module '@mui/material/styles' {
|
|
|
212
214
|
M4LWindowConfirm: Partial<OwnerStateWindowConfirm>;
|
|
213
215
|
M4LAppBar: Partial<AppBarOwnerState>;
|
|
214
216
|
M4LWiDialog: Partial<DialogOwnerState>;
|
|
217
|
+
M4LLoadingButton: Partial<LoadingButtonOwnerState>;
|
|
215
218
|
}
|
|
216
219
|
|
|
217
220
|
interface Components {
|
|
@@ -485,5 +488,10 @@ declare module '@mui/material/styles' {
|
|
|
485
488
|
styleOverrides?: ComponentsOverrides<Theme>['M4LWiDialog'];
|
|
486
489
|
variants?: ComponentsVariants['M4LWiDialog'];
|
|
487
490
|
};
|
|
491
|
+
M4LLoadingButton?: {
|
|
492
|
+
defaultProps?: ComponentsPropsList['M4LLoadingButton'];
|
|
493
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LLoadingButton'];
|
|
494
|
+
variants?: ComponentsVariants['M4LLoadingButton'];
|
|
495
|
+
};
|
|
488
496
|
}
|
|
489
497
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
|
|
2
2
|
/**
|
|
3
3
|
* TODO: Documentar
|
|
4
4
|
*/
|
|
5
|
-
export declare function ActionFormIntro(props:
|
|
5
|
+
export declare function ActionFormIntro(props: LoadingButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useFormContext, useFormState } from "react-hook-form";
|
|
3
3
|
import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
|
|
4
4
|
import { Skeleton } from "@mui/material";
|
|
5
|
-
import { L as LoadingButton } from "../../../mui_extended/LoadingButton/
|
|
5
|
+
import { L as LoadingButton } from "../../../mui_extended/LoadingButton/LoadingButton.js";
|
|
6
6
|
import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
|
|
7
7
|
function ActionFormIntro(props) {
|
|
8
8
|
const { getLabel } = useModuleDictionary();
|
|
@@ -11,6 +11,7 @@ function ActionFormIntro(props) {
|
|
|
11
11
|
const { isSubmitting } = useFormState({
|
|
12
12
|
control
|
|
13
13
|
});
|
|
14
|
+
const { variant = "contained", color = "primary" } = props;
|
|
14
15
|
const classes = useCommonActionsUtilityClasses();
|
|
15
16
|
if (isSkeleton) {
|
|
16
17
|
return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
|
|
@@ -18,9 +19,9 @@ function ActionFormIntro(props) {
|
|
|
18
19
|
return /* @__PURE__ */ jsx(
|
|
19
20
|
LoadingButton,
|
|
20
21
|
{
|
|
21
|
-
variant
|
|
22
|
+
variant,
|
|
22
23
|
type: "submit",
|
|
23
|
-
color
|
|
24
|
+
color,
|
|
24
25
|
loading: isSubmitting,
|
|
25
26
|
className: classes.actionFormIntro,
|
|
26
27
|
...props,
|
|
@@ -32,26 +32,9 @@
|
|
|
32
32
|
* - Selects `PaperComponent` for fullscreen and mobile views.
|
|
33
33
|
* - Selects `DraggablePaperComponent` for non-mobile, non-fullscreen views.
|
|
34
34
|
* - Dynamically updates the fullscreen mode when the `fullScreen` prop changes.
|
|
35
|
-
*
|
|
36
|
-
* ### Example Usage:
|
|
37
|
-
* ```tsx
|
|
38
|
-
* import { ModalDialog } from './ModalDialog';
|
|
39
|
-
* import { useModal } from './hooks/useModal';
|
|
40
|
-
*
|
|
41
|
-
* const App = () => {
|
|
42
|
-
* const { openModal } = useModal();
|
|
43
|
-
*
|
|
44
|
-
* return (
|
|
45
|
-
* <div>
|
|
46
|
-
* <button onClick={() => openModal({ fullScreen: false })}>Open Modal</button>
|
|
47
|
-
* <ModalDialog />
|
|
48
|
-
* </div>
|
|
49
|
-
* );
|
|
50
|
-
* };
|
|
51
|
-
* ```
|
|
52
35
|
* @author cesar - automatic
|
|
53
36
|
* @createdAt 2024-11-28 08:35:15 - automatic
|
|
54
|
-
* @updatedAt 2024-12-
|
|
37
|
+
* @updatedAt 2024-12-06 11:53:51 - automatic
|
|
55
38
|
* @updatedUser cesar - automatic
|
|
56
39
|
*/
|
|
57
40
|
export declare const ModalDialog: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,12 +3,14 @@ const windowBaseStyles = {
|
|
|
3
3
|
* Styles for the window base wrapper component.
|
|
4
4
|
* @author cesar - automatic
|
|
5
5
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
6
|
-
* @updatedAt 2024-12-
|
|
6
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
7
7
|
* @updatedUser cesar - automatic
|
|
8
8
|
*/
|
|
9
9
|
wrapperWindowBase: ({ theme, ownerState }) => ({
|
|
10
10
|
height: "100%",
|
|
11
11
|
width: "100%",
|
|
12
|
+
display: "flex",
|
|
13
|
+
flexDirection: "column",
|
|
12
14
|
borderRadius: theme.vars.size.borderRadius.r1,
|
|
13
15
|
...ownerState?.windowBaseVariant === "outlined" && {
|
|
14
16
|
border: theme.vars.size.borderStroke.container,
|
|
@@ -25,17 +27,18 @@ const windowBaseStyles = {
|
|
|
25
27
|
* Styles for the content of the window base component.
|
|
26
28
|
* @author cesar - automatic
|
|
27
29
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
28
|
-
* @updatedAt 2024-12-
|
|
30
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
29
31
|
* @updatedUser cesar - automatic
|
|
30
32
|
*/
|
|
31
33
|
contentWindowBase: ({ theme }) => ({
|
|
32
|
-
padding: theme.vars.size.baseSpacings.sp3
|
|
34
|
+
padding: theme.vars.size.baseSpacings.sp3,
|
|
35
|
+
overflow: "auto"
|
|
33
36
|
}),
|
|
34
37
|
/**
|
|
35
38
|
* Styles for the header of the window base component.
|
|
36
39
|
* @author cesar - automatic
|
|
37
40
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
38
|
-
* @updatedAt 2024-12-
|
|
41
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
39
42
|
* @updatedUser cesar - automatic
|
|
40
43
|
*/
|
|
41
44
|
headerWindowComponent: ({ theme, ownerState }) => ({
|
|
@@ -71,7 +74,7 @@ const windowBaseStyles = {
|
|
|
71
74
|
* Styles for the content of the header of the window base component.
|
|
72
75
|
* @author cesar - automatic
|
|
73
76
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
74
|
-
* @updatedAt 2024-12-
|
|
77
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
75
78
|
* @updatedUser cesar - automatic
|
|
76
79
|
*/
|
|
77
80
|
headerContentWindowBase: ({ theme }) => ({
|
|
@@ -86,7 +89,7 @@ const windowBaseStyles = {
|
|
|
86
89
|
* Styles for the title of the header of the window base component.
|
|
87
90
|
* @author cesar - automatic
|
|
88
91
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
89
|
-
* @updatedAt 2024-12-
|
|
92
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
90
93
|
* @updatedUser cesar - automatic
|
|
91
94
|
*/
|
|
92
95
|
headerTitleWindowBase: ({ theme }) => ({
|
|
@@ -98,7 +101,7 @@ const windowBaseStyles = {
|
|
|
98
101
|
* Styles for the subtitle container of the header of the window base component.
|
|
99
102
|
* @author cesar - automatic
|
|
100
103
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
101
|
-
* @updatedAt 2024-12-
|
|
104
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
102
105
|
* @updatedUser cesar - automatic
|
|
103
106
|
*/
|
|
104
107
|
subtitleContainer: ({ theme }) => ({
|
|
@@ -113,7 +116,7 @@ const windowBaseStyles = {
|
|
|
113
116
|
* @returns An object containing the styles for the dot window base component.
|
|
114
117
|
* @author cesar - automatic
|
|
115
118
|
* @createdAt 2024-11-22 19:40:23 - automatic
|
|
116
|
-
* @updatedAt 2024-12-
|
|
119
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
117
120
|
* @updatedUser cesar - automatic
|
|
118
121
|
*/
|
|
119
122
|
pointWindowBase: ({ theme, ownerState }) => ({
|
|
@@ -140,7 +143,7 @@ const windowBaseStyles = {
|
|
|
140
143
|
* Styles for the subtitle of the header of the window base component.
|
|
141
144
|
* @author cesar - automatic
|
|
142
145
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
143
|
-
* @updatedAt 2024-12-
|
|
146
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
144
147
|
* @updatedUser cesar - automatic
|
|
145
148
|
*/
|
|
146
149
|
headerSubTitleWindowBase: ({ theme }) => ({
|
|
@@ -152,7 +155,7 @@ const windowBaseStyles = {
|
|
|
152
155
|
* Styles for the icon of the header of the window base component.
|
|
153
156
|
* @author cesar - automatic
|
|
154
157
|
* @createdAt 2024-11-18 08:11:19 - automatic
|
|
155
|
-
* @updatedAt 2024-12-
|
|
158
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
156
159
|
* @updatedUser cesar - automatic
|
|
157
160
|
*/
|
|
158
161
|
headerIconWindowBase: ({ theme }) => ({
|
|
@@ -166,7 +169,7 @@ const windowBaseStyles = {
|
|
|
166
169
|
* Styles for the icons wrapper of the window base component.
|
|
167
170
|
* @author cesar - automatic
|
|
168
171
|
* @createdAt 2024-11-18 08:11:19 - automatic
|
|
169
|
-
* @updatedAt 2024-12-
|
|
172
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
170
173
|
* @updatedUser cesar - automatic
|
|
171
174
|
*/
|
|
172
175
|
iconsWrapperWindowBase: () => ({
|
|
@@ -177,7 +180,7 @@ const windowBaseStyles = {
|
|
|
177
180
|
* Styles for the dot icon of the window base component.
|
|
178
181
|
* @author cesar - automatic
|
|
179
182
|
* @createdAt 2024-11-22 19:40:23 - automatic
|
|
180
|
-
* @updatedAt 2024-12-
|
|
183
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
181
184
|
* @updatedUser cesar - automatic
|
|
182
185
|
*/
|
|
183
186
|
pointIcon: ({ theme, ownerState }) => ({
|
|
@@ -202,7 +205,7 @@ const windowBaseStyles = {
|
|
|
202
205
|
* Styles for the menu actions of the window base component.
|
|
203
206
|
* @author cesar - automatic
|
|
204
207
|
* @createdAt 2024-12-05 07:49:27 - automatic
|
|
205
|
-
* @updatedAt 2024-12-
|
|
208
|
+
* @updatedAt 2024-12-06 14:42:54 - automatic
|
|
206
209
|
* @updatedUser cesar - automatic
|
|
207
210
|
*/
|
|
208
211
|
menuActionsWindowBase: () => ({
|
|
@@ -13,10 +13,10 @@ import { w as withRenderOption } from "../RenderOption/index.js";
|
|
|
13
13
|
import { S as SkeletonRHFAutocomplete } from "../Skeleton/index.js";
|
|
14
14
|
import { L as Label } from "../../../../Label/Label.js";
|
|
15
15
|
import { T as Typography } from "../../../../mui_extended/Typography/Typography.js";
|
|
16
|
-
import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
|
|
17
16
|
import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
|
|
18
17
|
import { H as HelperError } from "../../../../HelperError/HelperError.js";
|
|
19
18
|
import { I as Image } from "../../../../Image/Image.js";
|
|
19
|
+
import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
|
|
20
20
|
function ComponentTypeImage(props) {
|
|
21
21
|
const {
|
|
22
22
|
name: nameRHF,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { styled, CircularProgress } from "@mui/material";
|
|
2
|
+
import { S as Skeleton } from "../../Skeleton/Skeleton.js";
|
|
2
3
|
import { c as circularProgressStyles } from "../CircularProgress.styles.js";
|
|
3
4
|
import { a as CIRCULAR_PROGRESS_KEY_COMPONENT } from "../constants.js";
|
|
4
5
|
import { C as CircularProgressSlots } from "./CircularProgressEnum.js";
|
|
5
|
-
import { S as Skeleton } from "../../Skeleton/Skeleton.js";
|
|
6
6
|
const RootStyled = styled(CircularProgress, {
|
|
7
7
|
name: CIRCULAR_PROGRESS_KEY_COMPONENT,
|
|
8
8
|
slot: CircularProgressSlots.root
|
|
@@ -3,7 +3,7 @@ const dialogStyles = {
|
|
|
3
3
|
* Dialog Root style
|
|
4
4
|
* @author cesar - automatic
|
|
5
5
|
* @createdAt 2024-11-24 15:58:24 - automatic
|
|
6
|
-
* @updatedAt 2024-12-
|
|
6
|
+
* @updatedAt 2024-12-05 17:01:44 - automatic
|
|
7
7
|
* @updatedUser cesar - automatic
|
|
8
8
|
*/
|
|
9
9
|
dialogRoot: ({ theme }) => ({
|
|
@@ -17,7 +17,8 @@ const dialogStyles = {
|
|
|
17
17
|
margin: 0,
|
|
18
18
|
display: "flex",
|
|
19
19
|
alignItems: "center",
|
|
20
|
-
justifyContent: "center"
|
|
20
|
+
justifyContent: "center",
|
|
21
|
+
overflow: "unset"
|
|
21
22
|
}
|
|
22
23
|
})
|
|
23
24
|
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { LoadingButtonProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Componente LoadingButton que extiende las props de Button
|
|
4
|
+
*/
|
|
5
|
+
export declare const LoadingButton: import('react').ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
|
|
5
|
+
import { useTheme } from "@mui/material";
|
|
6
|
+
import { S as SkeletonLoadingButtonStyled, L as LoadingButtonRootStyled, T as TextLoadingButtonStyled, C as CircularProgressStyled, a as LoadingButtonIconStyled } from "./slots/LoadingButtonSlots.js";
|
|
7
|
+
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
8
|
+
const LoadingButton = forwardRef((props, ref) => {
|
|
9
|
+
const {
|
|
10
|
+
className,
|
|
11
|
+
endIcon,
|
|
12
|
+
label,
|
|
13
|
+
startIcon,
|
|
14
|
+
color = "default",
|
|
15
|
+
disabled = false,
|
|
16
|
+
size = "small",
|
|
17
|
+
variant = "contained",
|
|
18
|
+
skeletonWidth = "100%",
|
|
19
|
+
loading = false,
|
|
20
|
+
...others
|
|
21
|
+
} = props;
|
|
22
|
+
const { currentSize } = useComponentSize(size);
|
|
23
|
+
const isSkeleton = useModuleSkeleton();
|
|
24
|
+
const theme = useTheme();
|
|
25
|
+
const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
|
|
26
|
+
const paletteColor = getPropertyByString(
|
|
27
|
+
theme.vars.palette,
|
|
28
|
+
disabled ? "default" : color || "default",
|
|
29
|
+
theme.vars.palette.default
|
|
30
|
+
);
|
|
31
|
+
const ownerState = {
|
|
32
|
+
size,
|
|
33
|
+
variant,
|
|
34
|
+
disabled,
|
|
35
|
+
paletteColor,
|
|
36
|
+
color,
|
|
37
|
+
loading
|
|
38
|
+
};
|
|
39
|
+
if (isSkeleton) {
|
|
40
|
+
return /* @__PURE__ */ jsx(SkeletonLoadingButtonStyled, { "data-testid": "SkeletonButton", width: skeletonWidth, ownerState: { ...ownerState } });
|
|
41
|
+
}
|
|
42
|
+
const getAdjustedColor = (btnColor, btnVariant) => {
|
|
43
|
+
return btnVariant === "contained" ? `${btnColor}.contrastText` : `${btnColor}.main`;
|
|
44
|
+
};
|
|
45
|
+
const adjustedColor = getAdjustedColor(color, variant);
|
|
46
|
+
const renderIcon = (icon, instaceDataTestId) => {
|
|
47
|
+
if (!icon) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
if (typeof icon !== "string") {
|
|
51
|
+
return icon;
|
|
52
|
+
} else {
|
|
53
|
+
return /* @__PURE__ */ jsx(
|
|
54
|
+
LoadingButtonIconStyled,
|
|
55
|
+
{
|
|
56
|
+
color: adjustedColor,
|
|
57
|
+
ownerState: { ...ownerState },
|
|
58
|
+
src: icon,
|
|
59
|
+
alt: "icon",
|
|
60
|
+
size: adjustedSize,
|
|
61
|
+
disabled: loading || disabled,
|
|
62
|
+
instaceDataTestId,
|
|
63
|
+
className: clsx(className)
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
return /* @__PURE__ */ jsxs(
|
|
69
|
+
LoadingButtonRootStyled,
|
|
70
|
+
{
|
|
71
|
+
"aria-disabled": disabled,
|
|
72
|
+
role: "button",
|
|
73
|
+
startIcon: renderIcon(startIcon, "LoadingButtonStartIcon"),
|
|
74
|
+
endIcon: renderIcon(endIcon, "LoadingButtonEndIcon"),
|
|
75
|
+
className: clsx(className),
|
|
76
|
+
variant,
|
|
77
|
+
size,
|
|
78
|
+
disabled: loading || disabled,
|
|
79
|
+
disableRipple: true,
|
|
80
|
+
ownerState: { ...ownerState },
|
|
81
|
+
ref,
|
|
82
|
+
...others,
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsx(TextLoadingButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, children: label }),
|
|
85
|
+
loading === true && /* @__PURE__ */ jsx(CircularProgressStyled, { ownerState: { ...ownerState }, size: adjustedSize })
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
});
|
|
90
|
+
LoadingButton.displayName = "LoadingButton";
|
|
91
|
+
export {
|
|
92
|
+
LoadingButton as L
|
|
93
|
+
};
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
const loadingButtonStyles = {
|
|
2
|
+
/**
|
|
3
|
+
* Estilos para el elemento raíz del componente LoadingButton.
|
|
4
|
+
* Incluye el diseño, los espaciados y los estados para los diferentes variantes de botón: 'text', 'outlined', y 'contained'.
|
|
5
|
+
* Maneja los estados de enfoque, hover, activo y deshabilitado, incluyendo colores específicos y comportamientos de fondo.
|
|
6
|
+
*/
|
|
7
|
+
loadingButtonRoot: ({ theme, ownerState }) => ({
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
gap: theme.vars.size.baseSpacings.sp1,
|
|
11
|
+
padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
|
|
12
|
+
boxShadow: "none",
|
|
13
|
+
borderRadius: theme.vars.size.borderRadius.r1,
|
|
14
|
+
// Estilos para la variante 'text'
|
|
15
|
+
...ownerState.variant === "text" && {
|
|
16
|
+
color: ownerState.paletteColor?.semanticText,
|
|
17
|
+
'& [class*="M4LIcon-icon"]': {
|
|
18
|
+
backgroundColor: ownerState.paletteColor?.semanticText
|
|
19
|
+
},
|
|
20
|
+
"&:disabled": {
|
|
21
|
+
color: theme.vars.palette.text.disabled
|
|
22
|
+
},
|
|
23
|
+
backgroundColor: "transparent",
|
|
24
|
+
...ownerState.color === "default" && {
|
|
25
|
+
color: theme.vars.palette.text.primary,
|
|
26
|
+
'& [class*="M4LIcon-icon"]': {
|
|
27
|
+
backgroundColor: theme.vars.palette.text.primary
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
...ownerState.color === "primary" && {
|
|
31
|
+
color: ownerState.paletteColor?.enabled,
|
|
32
|
+
'& [class*="M4LIcon-icon"]': {
|
|
33
|
+
backgroundColor: ownerState.paletteColor?.enabled
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"&:hover": {
|
|
37
|
+
backgroundColor: ownerState.paletteColor?.hoverOpacity
|
|
38
|
+
},
|
|
39
|
+
"&:active": {
|
|
40
|
+
backgroundColor: ownerState.paletteColor?.activeOpacity
|
|
41
|
+
},
|
|
42
|
+
"&:focus-visible": {
|
|
43
|
+
boxShadow: "none",
|
|
44
|
+
outline: theme.vars.size.borderStroke.container,
|
|
45
|
+
outlineColor: ownerState.paletteColor?.focusVisible,
|
|
46
|
+
outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
|
|
47
|
+
backgroundColor: ownerState.paletteColor?.activeOpacity
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
// Estilos para la variante 'outlined'
|
|
51
|
+
...ownerState.variant === "outlined" && {
|
|
52
|
+
borderColor: ownerState.paletteColor?.enabled,
|
|
53
|
+
color: ownerState.paletteColor?.semanticText,
|
|
54
|
+
'& [class*="M4LIcon-icon"]': {
|
|
55
|
+
backgroundColor: ownerState.paletteColor?.semanticText
|
|
56
|
+
},
|
|
57
|
+
backgroundColor: "transparent",
|
|
58
|
+
...ownerState.color === "default" && {
|
|
59
|
+
color: theme.vars.palette.text.primary,
|
|
60
|
+
borderColor: ownerState.paletteColor?.enabled,
|
|
61
|
+
'& [class*="M4LIcon-icon"]': {
|
|
62
|
+
backgroundColor: theme.vars.palette.text.primary
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
...ownerState.color === "primary" && {
|
|
66
|
+
color: ownerState.paletteColor?.enabled,
|
|
67
|
+
'& [class*="M4LIcon-icon"]': {
|
|
68
|
+
backgroundColor: ownerState.paletteColor?.enabled
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
"&:hover": {
|
|
72
|
+
borderColor: ownerState.paletteColor?.hover,
|
|
73
|
+
backgroundColor: ownerState.paletteColor?.hoverOpacity
|
|
74
|
+
},
|
|
75
|
+
"&:active": {
|
|
76
|
+
backgroundColor: ownerState.paletteColor?.activeOpacity,
|
|
77
|
+
borderColor: ownerState.paletteColor?.active
|
|
78
|
+
},
|
|
79
|
+
"&:focus-visible": {
|
|
80
|
+
boxShadow: "none",
|
|
81
|
+
outline: theme.vars.size.borderStroke.container,
|
|
82
|
+
outlineColor: ownerState.paletteColor?.focusVisible,
|
|
83
|
+
outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
|
|
84
|
+
backgroundColor: ownerState.paletteColor?.activeOpacity,
|
|
85
|
+
borderColor: ownerState.paletteColor?.active
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
// Estilos para la variante 'contained'
|
|
89
|
+
...ownerState.variant === "contained" && {
|
|
90
|
+
backgroundColor: ownerState.paletteColor?.enabled,
|
|
91
|
+
color: ownerState.paletteColor?.contrastText,
|
|
92
|
+
...ownerState.color === "default" && {
|
|
93
|
+
color: theme.vars.palette.text.primary
|
|
94
|
+
},
|
|
95
|
+
"&:hover": {
|
|
96
|
+
backgroundColor: ownerState.paletteColor?.hover
|
|
97
|
+
},
|
|
98
|
+
"&:active": {
|
|
99
|
+
backgroundColor: ownerState.paletteColor?.active
|
|
100
|
+
},
|
|
101
|
+
"&:focus-visible": {
|
|
102
|
+
boxShadow: "none",
|
|
103
|
+
outline: theme.vars.size.borderStroke.container,
|
|
104
|
+
outlineColor: theme.vars.palette.border.main,
|
|
105
|
+
outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
|
|
106
|
+
backgroundColor: ownerState.paletteColor?.active
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
// Estilo para el texto dentro del botón
|
|
110
|
+
"& span": {
|
|
111
|
+
margin: "0px"
|
|
112
|
+
},
|
|
113
|
+
// Styles for small button size
|
|
114
|
+
...ownerState.size === "small" && {
|
|
115
|
+
...theme.generalSettings.isMobile ? {
|
|
116
|
+
height: theme.vars.size.mobile.small.action,
|
|
117
|
+
minHeight: theme.vars.size.mobile.small.action
|
|
118
|
+
} : {
|
|
119
|
+
height: theme.vars.size.desktop.small.action,
|
|
120
|
+
minHeight: theme.vars.size.desktop.small.action
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
// Styles for medium button size
|
|
124
|
+
...ownerState.size === "medium" && {
|
|
125
|
+
...theme.generalSettings.isMobile ? {
|
|
126
|
+
height: theme.vars.size.mobile.medium.action,
|
|
127
|
+
minHeight: theme.vars.size.mobile.medium.action
|
|
128
|
+
} : {
|
|
129
|
+
height: theme.vars.size.desktop.medium.action,
|
|
130
|
+
minHeight: theme.vars.size.desktop.medium.action
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}),
|
|
134
|
+
/**
|
|
135
|
+
* Estilos para el ícono dentro del botón.
|
|
136
|
+
* Ajusta la visibilidad para los estados de carga y deshabilitado.
|
|
137
|
+
*/
|
|
138
|
+
loadingButtonIcon: ({ theme, ownerState }) => ({
|
|
139
|
+
...ownerState.loading === true && {
|
|
140
|
+
visibility: "hidden"
|
|
141
|
+
},
|
|
142
|
+
...ownerState.disabled === true && {
|
|
143
|
+
'& [class*="M4LIcon-icon"]': {
|
|
144
|
+
backgroundColor: theme.vars.palette.text.disabled
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}),
|
|
148
|
+
/**
|
|
149
|
+
* Estilos para el texto del botón.
|
|
150
|
+
* Incluye ajustes para los estados de carga y deshabilitado.
|
|
151
|
+
*/
|
|
152
|
+
textLoadingButton: ({ theme, ownerState }) => ({
|
|
153
|
+
...theme.typography.bodyDens,
|
|
154
|
+
...ownerState.loading === true && {
|
|
155
|
+
visibility: "hidden"
|
|
156
|
+
},
|
|
157
|
+
...ownerState.disabled === true && {
|
|
158
|
+
color: theme.vars.palette.text.disabled
|
|
159
|
+
}
|
|
160
|
+
}),
|
|
161
|
+
/**
|
|
162
|
+
* Estilos para la versión esquelética del botón.
|
|
163
|
+
* Incluye tamaños responsivos para diferentes anchos de pantalla y tamaños de botón.
|
|
164
|
+
*/
|
|
165
|
+
skeletonLoadingButton: ({ theme, ownerState }) => ({
|
|
166
|
+
width: "100%",
|
|
167
|
+
background: theme.vars.palette.skeleton.transition,
|
|
168
|
+
// Styles for small size skeleton
|
|
169
|
+
...ownerState.size === "small" && {
|
|
170
|
+
...theme.generalSettings.isMobile ? {
|
|
171
|
+
height: theme.vars.size.mobile.small.action,
|
|
172
|
+
minHeight: theme.vars.size.mobile.small.action
|
|
173
|
+
} : {
|
|
174
|
+
height: theme.vars.size.desktop.small.action,
|
|
175
|
+
minHeight: theme.vars.size.desktop.small.action
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
// Styles for medium size skeleton
|
|
179
|
+
...ownerState.size === "medium" && {
|
|
180
|
+
...theme.generalSettings.isMobile ? {
|
|
181
|
+
height: theme.vars.size.mobile.medium.action,
|
|
182
|
+
minHeight: theme.vars.size.mobile.medium.action
|
|
183
|
+
} : {
|
|
184
|
+
height: theme.vars.size.desktop.medium.action,
|
|
185
|
+
minHeight: theme.vars.size.desktop.medium.action
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}),
|
|
189
|
+
/**
|
|
190
|
+
* Estilos para el componente CircularProgress.
|
|
191
|
+
* Posiciona el cargador dentro del botón y aplica un color consistente.
|
|
192
|
+
*/
|
|
193
|
+
circularProgress: ({ theme }) => ({
|
|
194
|
+
position: "absolute",
|
|
195
|
+
color: theme.vars.palette.text.disabled
|
|
196
|
+
})
|
|
197
|
+
};
|
|
198
|
+
export {
|
|
199
|
+
loadingButtonStyles as l
|
|
200
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Clave de identificación del componente LoadingButton dentro del sistema.
|
|
3
|
+
*
|
|
4
|
+
* Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
|
|
5
|
+
* relacionadas con el componente `LoadingButton` dentro del sistema de temas y estilos.
|
|
6
|
+
* @default 'M4LLoadingButton'
|
|
7
|
+
*/
|
|
8
|
+
export declare const LOADING_BUTTON_KEY_COMPONENT = "M4LLoadingButton";
|
|
@@ -1,9 +1 @@
|
|
|
1
|
-
|
|
2
|
-
/**
|
|
3
|
-
* TODO: Documentar
|
|
4
|
-
* @author Bruce Escobar - automatic
|
|
5
|
-
* @createdAt 2024-10-22 09:41:31 - automatic
|
|
6
|
-
* @updatedAt 2024-10-22 19:27:23 - automatic
|
|
7
|
-
* @updatedUser Bruce Escobar - automatic
|
|
8
|
-
*/
|
|
9
|
-
export declare const LoadingButton: (props: MuiLabLoadingButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
export * from './LoadingButton';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
var LoadingButtonSlots = /* @__PURE__ */ ((LoadingButtonSlots2) => {
|
|
2
|
+
LoadingButtonSlots2["loadingButtonRoot"] = "loadingButtonRoot";
|
|
3
|
+
LoadingButtonSlots2["skeletonLoadingButton"] = "skeletonLoadingButton";
|
|
4
|
+
LoadingButtonSlots2["loadingButtonIcon"] = "loadingButtonIcon";
|
|
5
|
+
LoadingButtonSlots2["textLoadingButton"] = "textLoadingButton";
|
|
6
|
+
LoadingButtonSlots2["circularProgress"] = "circularProgress";
|
|
7
|
+
return LoadingButtonSlots2;
|
|
8
|
+
})(LoadingButtonSlots || {});
|
|
9
|
+
export {
|
|
10
|
+
LoadingButtonSlots as L
|
|
11
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `LoadingButtonRootStyled`
|
|
3
|
+
* Componente raíz del botón que usa el componente `Button` de material UI.
|
|
4
|
+
*/
|
|
5
|
+
declare const LoadingButtonRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
6
|
+
ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
|
|
7
|
+
}, "children" | "size" | "action" | "color" | "style" | "disabled" | "variant" | "className" | "classes" | "sx" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon">, "children" | "value" | "ref" | "title" | "size" | "name" | "id" | "type" | "action" | "hidden" | "color" | "content" | "style" | "disabled" | "variant" | "className" | "classes" | "onChange" | "sx" | "translate" | "form" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "fullWidth" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
|
|
8
|
+
ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
|
|
9
|
+
}, {}, {}>;
|
|
10
|
+
/**
|
|
11
|
+
* `SkeletonLoadingButtonStyled`
|
|
12
|
+
* Esqueleto de carga del botón que usa el componente `Skeleton` de M4L.
|
|
13
|
+
*/
|
|
14
|
+
declare const SkeletonLoadingButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
|
|
15
|
+
ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
|
|
16
|
+
}, {}, {}>;
|
|
17
|
+
/**
|
|
18
|
+
* `LoadingButtonIconStyled`
|
|
19
|
+
* Ícono estilizado del botón (inicio o fin) que usa el componente `Icon` de M4L.
|
|
20
|
+
*/
|
|
21
|
+
declare const LoadingButtonIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
|
|
22
|
+
ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
|
|
23
|
+
}, {}, {}>;
|
|
24
|
+
/**
|
|
25
|
+
* `TextLoadingButtonStyled`
|
|
26
|
+
* Texto estilizado del botón del componente `Typography` de M4L.
|
|
27
|
+
*/
|
|
28
|
+
declare const TextLoadingButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
|
|
29
|
+
ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
|
|
30
|
+
}, {}, {}>;
|
|
31
|
+
/**
|
|
32
|
+
* `CircularProgressStyled`
|
|
33
|
+
* Indicador de progreso circular estilizado del componente `CircularProgress` de M4L.
|
|
34
|
+
*/
|
|
35
|
+
declare const CircularProgressStyled: import('@emotion/styled').StyledComponent<Pick<import('../../CircularProgress/types').CircularProgressProps, keyof import('../../CircularProgress/types').CircularProgressProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
|
|
36
|
+
ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
|
|
37
|
+
}, {}, {}>;
|
|
38
|
+
export { LoadingButtonRootStyled, SkeletonLoadingButtonStyled, LoadingButtonIconStyled, TextLoadingButtonStyled, CircularProgressStyled, };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Button } from "@mui/material";
|
|
2
|
+
import { styled } from "@mui/material/styles";
|
|
3
|
+
import { l as loadingButtonStyles } from "../LoadingButton.styles.js";
|
|
4
|
+
import { L as LOADING_BUTTON_KEY_COMPONENT } from "../constants.js";
|
|
5
|
+
import { L as LoadingButtonSlots } from "./LoadingButtonEnum.js";
|
|
6
|
+
import { S as Skeleton } from "../../Skeleton/Skeleton.js";
|
|
7
|
+
import { T as Typography } from "../../Typography/Typography.js";
|
|
8
|
+
import { C as CircularProgress } from "../../CircularProgress/CircularProgress.js";
|
|
9
|
+
import { I as Icon } from "../../../Icon/Icon.js";
|
|
10
|
+
const LoadingButtonRootStyled = styled(Button, {
|
|
11
|
+
name: LOADING_BUTTON_KEY_COMPONENT,
|
|
12
|
+
slot: LoadingButtonSlots.loadingButtonRoot
|
|
13
|
+
})(loadingButtonStyles?.loadingButtonRoot);
|
|
14
|
+
const SkeletonLoadingButtonStyled = styled(Skeleton, {
|
|
15
|
+
name: LOADING_BUTTON_KEY_COMPONENT,
|
|
16
|
+
slot: LoadingButtonSlots.skeletonLoadingButton
|
|
17
|
+
})(loadingButtonStyles?.skeletonLoadingButton);
|
|
18
|
+
const LoadingButtonIconStyled = styled(Icon, {
|
|
19
|
+
name: LOADING_BUTTON_KEY_COMPONENT,
|
|
20
|
+
slot: LoadingButtonSlots.loadingButtonIcon
|
|
21
|
+
})(loadingButtonStyles?.loadingButtonIcon);
|
|
22
|
+
const TextLoadingButtonStyled = styled(Typography, {
|
|
23
|
+
name: LOADING_BUTTON_KEY_COMPONENT,
|
|
24
|
+
slot: LoadingButtonSlots.textLoadingButton
|
|
25
|
+
})(loadingButtonStyles?.textLoadingButton);
|
|
26
|
+
const CircularProgressStyled = styled(CircularProgress, {
|
|
27
|
+
name: LOADING_BUTTON_KEY_COMPONENT,
|
|
28
|
+
slot: LoadingButtonSlots.circularProgress
|
|
29
|
+
})(loadingButtonStyles?.circularProgress);
|
|
30
|
+
export {
|
|
31
|
+
CircularProgressStyled as C,
|
|
32
|
+
LoadingButtonRootStyled as L,
|
|
33
|
+
SkeletonLoadingButtonStyled as S,
|
|
34
|
+
TextLoadingButtonStyled as T,
|
|
35
|
+
LoadingButtonIconStyled as a
|
|
36
|
+
};
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
2
|
+
import { PaletteColor, Theme } from '@mui/material';
|
|
3
|
+
import { LOADING_BUTTON_KEY_COMPONENT } from './constants';
|
|
4
|
+
import { LoadingButtonSlots } from './slots/LoadingButtonEnum';
|
|
5
|
+
import { ButtonProps } from '../Button';
|
|
6
|
+
export interface LoadingButtonProps extends Omit<ButtonProps, 'label'> {
|
|
7
|
+
label?: string;
|
|
8
|
+
loading?: boolean;
|
|
6
9
|
}
|
|
7
|
-
export interface
|
|
8
|
-
|
|
10
|
+
export interface LoadingButtonOwnerState extends Pick<LoadingButtonProps, 'size' | 'variant' | 'color' | 'disabled' | 'loading'> {
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
paletteColor: PaletteColor;
|
|
9
13
|
}
|
|
14
|
+
export type LoadingButtonSlotsType = keyof typeof LoadingButtonSlots;
|
|
15
|
+
export type LoadingButtonStyles = Partial<OverridesStyleRules<LoadingButtonSlotsType, typeof LOADING_BUTTON_KEY_COMPONENT, Theme> | undefined> | undefined;
|
|
@@ -14,7 +14,7 @@ export { Badge } from './Badge';
|
|
|
14
14
|
export * from './ImageButton/ImageButton';
|
|
15
15
|
export { LinearProgress } from './LinearProgress';
|
|
16
16
|
export { LinkWithRoute } from './LinkWithRoute';
|
|
17
|
-
export { LoadingButton } from './LoadingButton';
|
|
17
|
+
export { LoadingButton } from './LoadingButton/LoadingButton';
|
|
18
18
|
export type { MenuAction, ComponentActionProps } from './MenuActions/types';
|
|
19
19
|
export * from './Popover';
|
|
20
20
|
export * from './Skeleton';
|
package/index.js
CHANGED
|
@@ -154,7 +154,7 @@ import { C as C13 } from "./components/mui_extended/CircularProgress/CircularPro
|
|
|
154
154
|
import { B as B5 } from "./components/mui_extended/Badge/Badge.js";
|
|
155
155
|
import { L as L8 } from "./components/mui_extended/LinearProgress/index.js";
|
|
156
156
|
import { L as L9 } from "./components/mui_extended/LinkWithRoute/index.js";
|
|
157
|
-
import { L as L10 } from "./components/mui_extended/LoadingButton/
|
|
157
|
+
import { L as L10 } from "./components/mui_extended/LoadingButton/LoadingButton.js";
|
|
158
158
|
import { P as P14 } from "./components/mui_extended/Pager/index.js";
|
|
159
159
|
import { g as g26 } from "./components/mui_extended/Pager/dicctionary.js";
|
|
160
160
|
import { T as T6 } from "./components/mui_extended/Tab/Tab.js";
|
package/package.json
CHANGED
|
@@ -31,7 +31,7 @@ import { StoryFn, StoryContext } from '@storybook/react';
|
|
|
31
31
|
* @returns JSX.Element - The decorated story with modal integration.
|
|
32
32
|
* @author cesar - automatic
|
|
33
33
|
* @createdAt 2024-11-26 12:39:40 - automatic
|
|
34
|
-
* @updatedAt 2024-12-
|
|
34
|
+
* @updatedAt 2024-12-06 11:53:51 - automatic
|
|
35
35
|
* @updatedUser cesar - automatic
|
|
36
36
|
*/
|
|
37
|
-
export declare const WithExtendedContainer: (
|
|
37
|
+
export declare const WithExtendedContainer: (_: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react/*';
|
|
2
|
+
import { LoadingButton } from '../../../../../src/components/mui_extended/LoadingButton';
|
|
3
|
+
declare const meta: Meta<typeof LoadingButton>;
|
|
4
|
+
type Story = StoryObj<typeof LoadingButton>;
|
|
5
|
+
/**
|
|
6
|
+
* Base story for `Button` in standard mode.
|
|
7
|
+
*/
|
|
8
|
+
export declare const Default: Story;
|
|
9
|
+
/**
|
|
10
|
+
* Base story for `Button` with start icon.
|
|
11
|
+
*/
|
|
12
|
+
export declare const WithStartIcon: Story;
|
|
13
|
+
/**
|
|
14
|
+
* Base story for `Button` with end icon.
|
|
15
|
+
*/
|
|
16
|
+
export declare const WithEndIcon: Story;
|
|
17
|
+
/**
|
|
18
|
+
* Base story for `Button` with start and end icon.
|
|
19
|
+
*/
|
|
20
|
+
export declare const WithStartAndEndIcon: Story;
|
|
21
|
+
/**
|
|
22
|
+
* Base story for `Button` with disabled state.
|
|
23
|
+
*/
|
|
24
|
+
export declare const Disabled: Story;
|
|
25
|
+
/**
|
|
26
|
+
* Base story for `Button` with disabled state.
|
|
27
|
+
*/
|
|
28
|
+
export declare const Loading: Story;
|
|
29
|
+
/**
|
|
30
|
+
* Prueba 1
|
|
31
|
+
*/
|
|
32
|
+
export declare const TextLoadingButton: Story;
|
|
33
|
+
/**
|
|
34
|
+
* Prueba 2
|
|
35
|
+
*/
|
|
36
|
+
export declare const OutlinedLoadingButton: Story;
|
|
37
|
+
/**
|
|
38
|
+
* Prueba 3
|
|
39
|
+
*/
|
|
40
|
+
export declare const ContainedLoadingButton: Story;
|
|
41
|
+
export declare const Skeleton: Story;
|
|
42
|
+
export default meta;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const componentName = "M4LLoadingButton";
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { LoadingButtonClassesType } from './types';
|
|
2
|
-
import { OwnerState } from '../types';
|
|
3
|
-
export declare const loadingButtonClasses: LoadingButtonClassesType;
|
|
4
|
-
export declare function getLoadingButtonUtilityClass(slot: string): string;
|
|
5
|
-
/**
|
|
6
|
-
* TODO: Documentar
|
|
7
|
-
*/
|
|
8
|
-
export declare const useUtilityClasses: (onwerState: OwnerState) => {
|
|
9
|
-
skeleton: string;
|
|
10
|
-
root: string;
|
|
11
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
|
|
2
|
-
import { unstable_composeClasses } from "@mui/base";
|
|
3
|
-
import { c as componentName } from "./constants.js";
|
|
4
|
-
generateUtilityClasses(
|
|
5
|
-
componentName,
|
|
6
|
-
[
|
|
7
|
-
/* elements */
|
|
8
|
-
"root",
|
|
9
|
-
"skeleton",
|
|
10
|
-
/* states or variants of elements */
|
|
11
|
-
"sizeSmall",
|
|
12
|
-
"sizeMedium",
|
|
13
|
-
"variantOutlined",
|
|
14
|
-
"variantContained",
|
|
15
|
-
"variantText",
|
|
16
|
-
"isDisabled"
|
|
17
|
-
]
|
|
18
|
-
);
|
|
19
|
-
function getLoadingButtonUtilityClass(slot) {
|
|
20
|
-
return generateUtilityClass(componentName, slot);
|
|
21
|
-
}
|
|
22
|
-
const useUtilityClasses = (onwerState) => {
|
|
23
|
-
const slots = {
|
|
24
|
-
root: [
|
|
25
|
-
"root",
|
|
26
|
-
onwerState.size === "small" && "sizeSmall",
|
|
27
|
-
onwerState.size === "medium" && "sizeMedium",
|
|
28
|
-
onwerState.variant === "outlined" && "variantOutlined",
|
|
29
|
-
onwerState.variant === "contained" && "variantContained",
|
|
30
|
-
onwerState.variant === "text" && "variantText",
|
|
31
|
-
onwerState.isDisabled && "isDisabled"
|
|
32
|
-
],
|
|
33
|
-
skeleton: ["skeleton"]
|
|
34
|
-
};
|
|
35
|
-
const composedClasses = unstable_composeClasses(slots, getLoadingButtonUtilityClass, {});
|
|
36
|
-
return {
|
|
37
|
-
...composedClasses
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
export {
|
|
41
|
-
useUtilityClasses as u
|
|
42
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export interface LoadingButtonClassesType {
|
|
2
|
-
root: string;
|
|
3
|
-
skeleton: string;
|
|
4
|
-
sizeSmall: string;
|
|
5
|
-
sizeMedium: string;
|
|
6
|
-
variantOutlined: string;
|
|
7
|
-
variantContained: string;
|
|
8
|
-
variantText: string;
|
|
9
|
-
isDisabled: string;
|
|
10
|
-
}
|
|
11
|
-
export type LoadingbuttonClassesKey = keyof LoadingButtonClassesType;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { LoadingButton as LoadingButton$1 } from "@mui/lab";
|
|
3
|
-
import { useModuleSkeleton } from "@m4l/core";
|
|
4
|
-
import { Skeleton } from "@mui/material";
|
|
5
|
-
import { u as useUtilityClasses } from "./classes/index.js";
|
|
6
|
-
import { L as LoadingButtonRoot } from "./styles.js";
|
|
7
|
-
import { T as Typography } from "../Typography/Typography.js";
|
|
8
|
-
import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
|
|
9
|
-
import { g as getNameDataTestId } from "./tests/utils.js";
|
|
10
|
-
import clsx from "clsx";
|
|
11
|
-
const LoadingButton = (props) => {
|
|
12
|
-
const {
|
|
13
|
-
children,
|
|
14
|
-
skeletonWidth = "100%",
|
|
15
|
-
size = "small",
|
|
16
|
-
variant = "contained",
|
|
17
|
-
disabled,
|
|
18
|
-
className,
|
|
19
|
-
...other
|
|
20
|
-
} = props;
|
|
21
|
-
const isSkeleton = useModuleSkeleton();
|
|
22
|
-
const ownerState = {
|
|
23
|
-
size,
|
|
24
|
-
variant,
|
|
25
|
-
isDisabled: disabled
|
|
26
|
-
};
|
|
27
|
-
const classes = useUtilityClasses(ownerState);
|
|
28
|
-
return /* @__PURE__ */ jsx(
|
|
29
|
-
LoadingButtonRoot,
|
|
30
|
-
{
|
|
31
|
-
className: clsx(classes.root, className),
|
|
32
|
-
...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
|
|
33
|
-
children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, { ...other, variant, size, children: /* @__PURE__ */ jsx(Typography, { variant: "body", children }) }) : /* @__PURE__ */ jsx(
|
|
34
|
-
Skeleton,
|
|
35
|
-
{
|
|
36
|
-
className: classes.skeleton,
|
|
37
|
-
...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
|
|
38
|
-
variant: "rectangular",
|
|
39
|
-
width: skeletonWidth
|
|
40
|
-
}
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
export {
|
|
46
|
-
LoadingButton as L
|
|
47
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const LoadingButtonRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const LOADINGBUTTON_PREFIX = "M4LoadingButton";
|