@soyfri/shared-library 1.3.17 → 1.4.1
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/components/Tooltip/Tooltip.cjs +42 -0
- package/components/Tooltip/Tooltip.cjs.map +1 -0
- package/components/Tooltip/Tooltip.d.ts +23 -0
- package/components/Tooltip/Tooltip.js +42 -0
- package/components/Tooltip/Tooltip.js.map +1 -0
- package/components/Tooltip/index.d.ts +1 -0
- package/components/Tooltip.d.ts +2 -0
- package/hooks/ClipBoard/ClipBoard.cjs +2 -2
- package/hooks/ClipBoard/ClipBoard.cjs.map +1 -1
- package/hooks/ClipBoard/ClipBoard.d.ts +2 -2
- package/hooks/ClipBoard/ClipBoard.js +2 -2
- package/hooks/ClipBoard/ClipBoard.js.map +1 -1
- package/package.json +6 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
22
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
const MuiTooltip = require("@mui/material/Tooltip");
|
|
24
|
+
const Typography = require("@mui/material/Typography");
|
|
25
|
+
const Box = require("@mui/material/Box");
|
|
26
|
+
const Tooltip = ({ text, maxWidth, children, sx }) => {
|
|
27
|
+
const tooltipContentStyle = __spreadProps(__spreadValues({}, maxWidth && { maxWidth }), {
|
|
28
|
+
padding: "4px 8px",
|
|
29
|
+
textAlign: "center"
|
|
30
|
+
});
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
MuiTooltip,
|
|
33
|
+
{
|
|
34
|
+
title: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", component: "span", sx: tooltipContentStyle, children: text }),
|
|
35
|
+
placement: "top",
|
|
36
|
+
arrow: true,
|
|
37
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: __spreadValues({ display: "inline-block" }, sx), children })
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
exports.Tooltip = Tooltip;
|
|
42
|
+
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport MuiTooltip from '@mui/material/Tooltip'; \nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport { SxProps, Theme } from '@mui/material';\n\n/**\n * Propiedades del componente Tooltip.\n * @param {string} text - El texto a mostrar dentro del Tooltip.\n * @param {number} [maxWidth] - El ancho máximo opcional del Tooltip en píxeles.\n * @param {React.ReactNode} children - El elemento al que se le aplicará el Tooltip.\n * @param {SxProps<Theme>} [sx] - Estilos opcionales para el Box contenedor.\n */\ninterface TooltipProps {\n text: string;\n maxWidth?: number;\n children: React.ReactNode;\n sx?: SxProps<Theme>;\n}\n\n/**\n * Componente Tooltip reutilizable.\n * Muestra un texto al pasar el ratón sobre su elemento hijo, \n * permitiendo un ancho máximo configurable.\n * * @param {TooltipProps} props - Propiedades del Tooltip.\n */\nconst Tooltip: React.FC<TooltipProps> = ({ text, maxWidth, children, sx }) => {\n \n const tooltipContentStyle: SxProps<Theme> = {\n \n ...(maxWidth && { maxWidth: maxWidth }), \n padding: '4px 8px', \n textAlign: 'center',\n \n };\n\n return (\n \n <MuiTooltip\n title={\n \n <Typography variant=\"caption\" component=\"span\" sx={tooltipContentStyle}>\n {text}\n </Typography>\n }\n \n placement=\"top\" \n arrow \n >\n \n <Box component=\"span\" sx={{ display: 'inline-block', ...sx }}>\n {children}\n </Box>\n </MuiTooltip>\n );\n};\n\nexport default Tooltip;"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,UAAkC,CAAC,EAAE,MAAM,UAAU,UAAU,SAAS;AAE5E,QAAM,sBAAsC,iCAEtC,YAAY,EAAE,SAAA,IAFwB;AAAA,IAG1C,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAIb,SAEEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,sCAEG,YAAA,EAAW,SAAQ,WAAU,WAAU,QAAO,IAAI,qBAChD,UAAA,KAAA,CACH;AAAA,MAGF,WAAU;AAAA,MACV,OAAK;AAAA,MAGL,UAAAA,2BAAAA,IAAC,KAAA,EAAI,WAAU,QAAO,IAAI,iBAAE,SAAS,kBAAmB,KACrD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material';
|
|
3
|
+
/**
|
|
4
|
+
* Propiedades del componente Tooltip.
|
|
5
|
+
* @param {string} text - El texto a mostrar dentro del Tooltip.
|
|
6
|
+
* @param {number} [maxWidth] - El ancho máximo opcional del Tooltip en píxeles.
|
|
7
|
+
* @param {React.ReactNode} children - El elemento al que se le aplicará el Tooltip.
|
|
8
|
+
* @param {SxProps<Theme>} [sx] - Estilos opcionales para el Box contenedor.
|
|
9
|
+
*/
|
|
10
|
+
interface TooltipProps {
|
|
11
|
+
text: string;
|
|
12
|
+
maxWidth?: number;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
sx?: SxProps<Theme>;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Componente Tooltip reutilizable.
|
|
18
|
+
* Muestra un texto al pasar el ratón sobre su elemento hijo,
|
|
19
|
+
* permitiendo un ancho máximo configurable.
|
|
20
|
+
* * @param {TooltipProps} props - Propiedades del Tooltip.
|
|
21
|
+
*/
|
|
22
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
23
|
+
export default Tooltip;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { jsx } from "react/jsx-runtime";
|
|
21
|
+
import MuiTooltip from "@mui/material/Tooltip";
|
|
22
|
+
import Typography from "@mui/material/Typography";
|
|
23
|
+
import Box from "@mui/material/Box";
|
|
24
|
+
const Tooltip = ({ text, maxWidth, children, sx }) => {
|
|
25
|
+
const tooltipContentStyle = __spreadProps(__spreadValues({}, maxWidth && { maxWidth }), {
|
|
26
|
+
padding: "4px 8px",
|
|
27
|
+
textAlign: "center"
|
|
28
|
+
});
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
MuiTooltip,
|
|
31
|
+
{
|
|
32
|
+
title: /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: tooltipContentStyle, children: text }),
|
|
33
|
+
placement: "top",
|
|
34
|
+
arrow: true,
|
|
35
|
+
children: /* @__PURE__ */ jsx(Box, { component: "span", sx: __spreadValues({ display: "inline-block" }, sx), children })
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
export {
|
|
40
|
+
Tooltip
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport MuiTooltip from '@mui/material/Tooltip'; \nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport { SxProps, Theme } from '@mui/material';\n\n/**\n * Propiedades del componente Tooltip.\n * @param {string} text - El texto a mostrar dentro del Tooltip.\n * @param {number} [maxWidth] - El ancho máximo opcional del Tooltip en píxeles.\n * @param {React.ReactNode} children - El elemento al que se le aplicará el Tooltip.\n * @param {SxProps<Theme>} [sx] - Estilos opcionales para el Box contenedor.\n */\ninterface TooltipProps {\n text: string;\n maxWidth?: number;\n children: React.ReactNode;\n sx?: SxProps<Theme>;\n}\n\n/**\n * Componente Tooltip reutilizable.\n * Muestra un texto al pasar el ratón sobre su elemento hijo, \n * permitiendo un ancho máximo configurable.\n * * @param {TooltipProps} props - Propiedades del Tooltip.\n */\nconst Tooltip: React.FC<TooltipProps> = ({ text, maxWidth, children, sx }) => {\n \n const tooltipContentStyle: SxProps<Theme> = {\n \n ...(maxWidth && { maxWidth: maxWidth }), \n padding: '4px 8px', \n textAlign: 'center',\n \n };\n\n return (\n \n <MuiTooltip\n title={\n \n <Typography variant=\"caption\" component=\"span\" sx={tooltipContentStyle}>\n {text}\n </Typography>\n }\n \n placement=\"top\" \n arrow \n >\n \n <Box component=\"span\" sx={{ display: 'inline-block', ...sx }}>\n {children}\n </Box>\n </MuiTooltip>\n );\n};\n\nexport default Tooltip;"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,UAAkC,CAAC,EAAE,MAAM,UAAU,UAAU,SAAS;AAE5E,QAAM,sBAAsC,iCAEtC,YAAY,EAAE,SAAA,IAFwB;AAAA,IAG1C,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAIb,SAEE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,2BAEG,YAAA,EAAW,SAAQ,WAAU,WAAU,QAAO,IAAI,qBAChD,UAAA,KAAA,CACH;AAAA,MAGF,WAAU;AAAA,MACV,OAAK;AAAA,MAGL,UAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,iBAAE,SAAS,kBAAmB,KACrD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Tooltip } from './Tooltip';
|
|
@@ -52,7 +52,7 @@ function useClipboard(options) {
|
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
}, [copyText]);
|
|
55
|
-
const
|
|
55
|
+
const CopyMessage = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
56
|
material.Snackbar,
|
|
57
57
|
{
|
|
58
58
|
open: snackbarOpen,
|
|
@@ -65,7 +65,7 @@ function useClipboard(options) {
|
|
|
65
65
|
children: /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { onClose: handleSnackbarClose, severity: snackbarSeverity, sx: { width: "100%" }, children: snackbarMessage })
|
|
66
66
|
}
|
|
67
67
|
);
|
|
68
|
-
return { ref: elementRef,
|
|
68
|
+
return { ref: elementRef, CopyMessage };
|
|
69
69
|
}
|
|
70
70
|
exports.useClipboard = useClipboard;
|
|
71
71
|
//# sourceMappingURL=ClipBoard.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClipBoard.cjs","sources":["../../../src/hooks/ClipBoard/ClipBoard.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { Snackbar, Alert } from '@mui/material';\nimport { AlertProps } from '@mui/material/Alert';\n\n// Tipo para las opciones del Snackbar\ninterface SnackbarOptions {\n message?: string;\n duration?: number;\n severity?: AlertProps['severity'];\n position?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right' };\n}\n\n/**\n * Hook 'useClipboard'.\n * Permite adjuntar la funcionalidad de copiar el innerText de un elemento al portapapeles\n * mediante un clic y gestiona el feedback del Snackbar de forma interna.\n *\n * @param options Opciones de configuración para el Snackbar de feedback.\n * @returns Un objeto que contiene:\n * - 'ref': Una referencia de React que debe adjuntarse al elemento cuyo contenido se copiará.\n * - '
|
|
1
|
+
{"version":3,"file":"ClipBoard.cjs","sources":["../../../src/hooks/ClipBoard/ClipBoard.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { Snackbar, Alert } from '@mui/material';\nimport { AlertProps } from '@mui/material/Alert';\n\n// Tipo para las opciones del Snackbar\ninterface SnackbarOptions {\n message?: string;\n duration?: number;\n severity?: AlertProps['severity'];\n position?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right' };\n}\n\n/**\n * Hook 'useClipboard'.\n * Permite adjuntar la funcionalidad de copiar el innerText de un elemento al portapapeles\n * mediante un clic y gestiona el feedback del Snackbar de forma interna.\n *\n * @param options Opciones de configuración para el Snackbar de feedback.\n * @returns Un objeto que contiene:\n * - 'ref': Una referencia de React que debe adjuntarse al elemento cuyo contenido se copiará.\n * - 'CopyMessage': El componente Snackbar pre-configurado y listo para ser renderizado.\n */\nexport function useClipboard(options?: SnackbarOptions) {\n const elementRef = useRef<HTMLElement>(null); // Tipado más específico para HTMLElement\n\n // Estados internos para el Snackbar, con valores por defecto\n const [snackbarOpen, setSnackbarOpen] = useState(false);\n const [snackbarMessage, setSnackbarMessage] = useState(options?.message || '¡Copiado al portapapeles!');\n const [snackbarSeverity, setSnackbarSeverity] = useState<AlertProps['severity']>(options?.severity || 'success');\n const [snackbarPosition, setSnackbarPosition] = useState(options?.position || { vertical: 'bottom', horizontal: 'center' });\n const [snackbarDuration, setSnackbarDuration] = useState(options?.duration || 3000);\n\n // Función para cerrar el Snackbar\n const handleSnackbarClose = useCallback((event?: React.SyntheticEvent | Event, reason?: string) => {\n if (reason === 'clickaway') {\n return;\n }\n setSnackbarOpen(false);\n }, []);\n\n // Función para copiar texto al portapapeles (utilizando document.execCommand para compatibilidad en iframes)\n const copyText = useCallback(() => {\n if (elementRef.current) {\n try {\n const textarea = document.createElement('textarea');\n textarea.value = elementRef.current.innerText || ''; // Captura el innerText del elemento\n document.body.appendChild(textarea);\n textarea.select();\n document.execCommand('copy');\n document.body.removeChild(textarea);\n\n // Actualiza el mensaje del snackbar con las opciones proporcionadas o los valores por defecto\n // Estos setters se invocan aquí para que los estados se actualicen antes de abrir el snackbar.\n setSnackbarMessage(options?.message || '¡Copiado al portapapeles!');\n setSnackbarSeverity(options?.severity || 'success');\n setSnackbarPosition(options?.position || { vertical: 'bottom', horizontal: 'center' });\n setSnackbarDuration(options?.duration || 3000);\n setSnackbarOpen(true); // Abre el snackbar\n } catch (err) {\n console.error('Error al copiar al portapapeles:', err);\n // En caso de error, usa un mensaje y severidad de error\n setSnackbarMessage('Error al copiar.');\n setSnackbarSeverity('error');\n setSnackbarPosition(options?.position || { vertical: 'bottom', horizontal: 'center' }); // Mantener posición si hay error\n setSnackbarDuration(options?.duration || 3000); // Mantener duración si hay error\n setSnackbarOpen(true); // Abre el snackbar con el mensaje de error\n }\n }\n }, [options]); // Dependencia en options para que el hook se reconfigure si las opciones cambian\n\n // Adjunta un event listener de clic al elemento referenciado\n useEffect(() => {\n const currentElement = elementRef.current;\n if (currentElement) {\n currentElement.style.cursor = 'pointer'; // Opcional: para indicar que es clickeable\n currentElement.addEventListener('click', copyText);\n }\n\n // Limpieza: remueve el event listener cuando el componente se desmonte\n return () => {\n if (currentElement) {\n currentElement.removeEventListener('click', copyText);\n }\n };\n }, [copyText]); // Dependencia en copyText para asegurar que el listener se actualice si la función cambia\n\n // Componente Snackbar encapsulado que el hook retorna para ser renderizado\n const CopyMessage = () => (\n <Snackbar\n open={snackbarOpen}\n autoHideDuration={snackbarDuration}\n onClose={handleSnackbarClose}\n anchorOrigin={{\n vertical: snackbarPosition.vertical as 'top' | 'bottom',\n horizontal: snackbarPosition.horizontal as 'left' | 'center' | 'right'\n }}\n >\n <Alert onClose={handleSnackbarClose} severity={snackbarSeverity} sx={{ width: '100%' }}>\n {snackbarMessage}\n </Alert>\n </Snackbar>\n );\n\n return { ref: elementRef, CopyMessage };\n}\n\nexport default useClipboard"],"names":["useRef","useState","useCallback","useEffect","jsx","Snackbar","Alert"],"mappings":";;;;;AAsBO,SAAS,aAAa,SAA2B;AACtD,QAAM,aAAaA,MAAAA,OAAoB,IAAI;AAG3C,QAAM,CAAC,cAAc,eAAe,IAAIC,MAAAA,SAAS,KAAK;AACtD,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,MAAAA,UAAS,mCAAS,YAAW,2BAA2B;AACtG,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,MAAAA,UAAiC,mCAAS,aAAY,SAAS;AAC/G,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,MAAAA,UAAS,mCAAS,aAAY,EAAE,UAAU,UAAU,YAAY,SAAA,CAAU;AAC1H,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,MAAAA,UAAS,mCAAS,aAAY,GAAI;AAGlF,QAAM,sBAAsBC,MAAAA,YAAY,CAAC,OAAsC,WAAoB;AACjG,QAAI,WAAW,aAAa;AAC1B;AAAA,IACF;AACA,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAA,CAAE;AAGL,QAAM,WAAWA,MAAAA,YAAY,MAAM;AACjC,QAAI,WAAW,SAAS;AACtB,UAAI;AACF,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ,WAAW,QAAQ,aAAa;AACjD,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,OAAA;AACT,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAIlC,4BAAmB,mCAAS,YAAW,2BAA2B;AAClE,6BAAoB,mCAAS,aAAY,SAAS;AAClD,6BAAoB,mCAAS,aAAY,EAAE,UAAU,UAAU,YAAY,UAAU;AACrF,6BAAoB,mCAAS,aAAY,GAAI;AAC7C,wBAAgB,IAAI;AAAA,MACtB,SAAS,KAAK;AACZ,gBAAQ,MAAM,oCAAoC,GAAG;AAErD,2BAAmB,kBAAkB;AACrC,4BAAoB,OAAO;AAC3B,6BAAoB,mCAAS,aAAY,EAAE,UAAU,UAAU,YAAY,UAAU;AACrF,6BAAoB,mCAAS,aAAY,GAAI;AAC7C,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAGZC,QAAAA,UAAU,MAAM;AACd,UAAM,iBAAiB,WAAW;AAClC,QAAI,gBAAgB;AAClB,qBAAe,MAAM,SAAS;AAC9B,qBAAe,iBAAiB,SAAS,QAAQ;AAAA,IACnD;AAGA,WAAO,MAAM;AACX,UAAI,gBAAgB;AAClB,uBAAe,oBAAoB,SAAS,QAAQ;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,cAAc,MAClBC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,kBAAkB;AAAA,MAClB,SAAS;AAAA,MACT,cAAc;AAAA,QACZ,UAAU,iBAAiB;AAAA,QAC3B,YAAY,iBAAiB;AAAA,MAAA;AAAA,MAG/B,UAAAD,2BAAAA,IAACE,SAAAA,OAAA,EAAM,SAAS,qBAAqB,UAAU,kBAAkB,IAAI,EAAE,OAAO,OAAA,GAC3E,UAAA,gBAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAO,EAAE,KAAK,YAAY,YAAA;AAC5B;;"}
|
|
@@ -17,10 +17,10 @@ interface SnackbarOptions {
|
|
|
17
17
|
* @param options Opciones de configuración para el Snackbar de feedback.
|
|
18
18
|
* @returns Un objeto que contiene:
|
|
19
19
|
* - 'ref': Una referencia de React que debe adjuntarse al elemento cuyo contenido se copiará.
|
|
20
|
-
* - '
|
|
20
|
+
* - 'CopyMessage': El componente Snackbar pre-configurado y listo para ser renderizado.
|
|
21
21
|
*/
|
|
22
22
|
export declare function useClipboard(options?: SnackbarOptions): {
|
|
23
23
|
ref: React.RefObject<HTMLElement | null>;
|
|
24
|
-
|
|
24
|
+
CopyMessage: () => import("react/jsx-runtime").JSX.Element;
|
|
25
25
|
};
|
|
26
26
|
export default useClipboard;
|
|
@@ -50,7 +50,7 @@ function useClipboard(options) {
|
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
}, [copyText]);
|
|
53
|
-
const
|
|
53
|
+
const CopyMessage = () => /* @__PURE__ */ jsx(
|
|
54
54
|
Snackbar,
|
|
55
55
|
{
|
|
56
56
|
open: snackbarOpen,
|
|
@@ -63,7 +63,7 @@ function useClipboard(options) {
|
|
|
63
63
|
children: /* @__PURE__ */ jsx(Alert, { onClose: handleSnackbarClose, severity: snackbarSeverity, sx: { width: "100%" }, children: snackbarMessage })
|
|
64
64
|
}
|
|
65
65
|
);
|
|
66
|
-
return { ref: elementRef,
|
|
66
|
+
return { ref: elementRef, CopyMessage };
|
|
67
67
|
}
|
|
68
68
|
export {
|
|
69
69
|
useClipboard
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClipBoard.js","sources":["../../../src/hooks/ClipBoard/ClipBoard.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { Snackbar, Alert } from '@mui/material';\nimport { AlertProps } from '@mui/material/Alert';\n\n// Tipo para las opciones del Snackbar\ninterface SnackbarOptions {\n message?: string;\n duration?: number;\n severity?: AlertProps['severity'];\n position?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right' };\n}\n\n/**\n * Hook 'useClipboard'.\n * Permite adjuntar la funcionalidad de copiar el innerText de un elemento al portapapeles\n * mediante un clic y gestiona el feedback del Snackbar de forma interna.\n *\n * @param options Opciones de configuración para el Snackbar de feedback.\n * @returns Un objeto que contiene:\n * - 'ref': Una referencia de React que debe adjuntarse al elemento cuyo contenido se copiará.\n * - '
|
|
1
|
+
{"version":3,"file":"ClipBoard.js","sources":["../../../src/hooks/ClipBoard/ClipBoard.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { Snackbar, Alert } from '@mui/material';\nimport { AlertProps } from '@mui/material/Alert';\n\n// Tipo para las opciones del Snackbar\ninterface SnackbarOptions {\n message?: string;\n duration?: number;\n severity?: AlertProps['severity'];\n position?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right' };\n}\n\n/**\n * Hook 'useClipboard'.\n * Permite adjuntar la funcionalidad de copiar el innerText de un elemento al portapapeles\n * mediante un clic y gestiona el feedback del Snackbar de forma interna.\n *\n * @param options Opciones de configuración para el Snackbar de feedback.\n * @returns Un objeto que contiene:\n * - 'ref': Una referencia de React que debe adjuntarse al elemento cuyo contenido se copiará.\n * - 'CopyMessage': El componente Snackbar pre-configurado y listo para ser renderizado.\n */\nexport function useClipboard(options?: SnackbarOptions) {\n const elementRef = useRef<HTMLElement>(null); // Tipado más específico para HTMLElement\n\n // Estados internos para el Snackbar, con valores por defecto\n const [snackbarOpen, setSnackbarOpen] = useState(false);\n const [snackbarMessage, setSnackbarMessage] = useState(options?.message || '¡Copiado al portapapeles!');\n const [snackbarSeverity, setSnackbarSeverity] = useState<AlertProps['severity']>(options?.severity || 'success');\n const [snackbarPosition, setSnackbarPosition] = useState(options?.position || { vertical: 'bottom', horizontal: 'center' });\n const [snackbarDuration, setSnackbarDuration] = useState(options?.duration || 3000);\n\n // Función para cerrar el Snackbar\n const handleSnackbarClose = useCallback((event?: React.SyntheticEvent | Event, reason?: string) => {\n if (reason === 'clickaway') {\n return;\n }\n setSnackbarOpen(false);\n }, []);\n\n // Función para copiar texto al portapapeles (utilizando document.execCommand para compatibilidad en iframes)\n const copyText = useCallback(() => {\n if (elementRef.current) {\n try {\n const textarea = document.createElement('textarea');\n textarea.value = elementRef.current.innerText || ''; // Captura el innerText del elemento\n document.body.appendChild(textarea);\n textarea.select();\n document.execCommand('copy');\n document.body.removeChild(textarea);\n\n // Actualiza el mensaje del snackbar con las opciones proporcionadas o los valores por defecto\n // Estos setters se invocan aquí para que los estados se actualicen antes de abrir el snackbar.\n setSnackbarMessage(options?.message || '¡Copiado al portapapeles!');\n setSnackbarSeverity(options?.severity || 'success');\n setSnackbarPosition(options?.position || { vertical: 'bottom', horizontal: 'center' });\n setSnackbarDuration(options?.duration || 3000);\n setSnackbarOpen(true); // Abre el snackbar\n } catch (err) {\n console.error('Error al copiar al portapapeles:', err);\n // En caso de error, usa un mensaje y severidad de error\n setSnackbarMessage('Error al copiar.');\n setSnackbarSeverity('error');\n setSnackbarPosition(options?.position || { vertical: 'bottom', horizontal: 'center' }); // Mantener posición si hay error\n setSnackbarDuration(options?.duration || 3000); // Mantener duración si hay error\n setSnackbarOpen(true); // Abre el snackbar con el mensaje de error\n }\n }\n }, [options]); // Dependencia en options para que el hook se reconfigure si las opciones cambian\n\n // Adjunta un event listener de clic al elemento referenciado\n useEffect(() => {\n const currentElement = elementRef.current;\n if (currentElement) {\n currentElement.style.cursor = 'pointer'; // Opcional: para indicar que es clickeable\n currentElement.addEventListener('click', copyText);\n }\n\n // Limpieza: remueve el event listener cuando el componente se desmonte\n return () => {\n if (currentElement) {\n currentElement.removeEventListener('click', copyText);\n }\n };\n }, [copyText]); // Dependencia en copyText para asegurar que el listener se actualice si la función cambia\n\n // Componente Snackbar encapsulado que el hook retorna para ser renderizado\n const CopyMessage = () => (\n <Snackbar\n open={snackbarOpen}\n autoHideDuration={snackbarDuration}\n onClose={handleSnackbarClose}\n anchorOrigin={{\n vertical: snackbarPosition.vertical as 'top' | 'bottom',\n horizontal: snackbarPosition.horizontal as 'left' | 'center' | 'right'\n }}\n >\n <Alert onClose={handleSnackbarClose} severity={snackbarSeverity} sx={{ width: '100%' }}>\n {snackbarMessage}\n </Alert>\n </Snackbar>\n );\n\n return { ref: elementRef, CopyMessage };\n}\n\nexport default useClipboard"],"names":[],"mappings":";;;AAsBO,SAAS,aAAa,SAA2B;AACtD,QAAM,aAAa,OAAoB,IAAI;AAG3C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,UAAS,mCAAS,YAAW,2BAA2B;AACtG,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,UAAiC,mCAAS,aAAY,SAAS;AAC/G,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,UAAS,mCAAS,aAAY,EAAE,UAAU,UAAU,YAAY,SAAA,CAAU;AAC1H,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,UAAS,mCAAS,aAAY,GAAI;AAGlF,QAAM,sBAAsB,YAAY,CAAC,OAAsC,WAAoB;AACjG,QAAI,WAAW,aAAa;AAC1B;AAAA,IACF;AACA,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAA,CAAE;AAGL,QAAM,WAAW,YAAY,MAAM;AACjC,QAAI,WAAW,SAAS;AACtB,UAAI;AACF,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ,WAAW,QAAQ,aAAa;AACjD,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,OAAA;AACT,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAIlC,4BAAmB,mCAAS,YAAW,2BAA2B;AAClE,6BAAoB,mCAAS,aAAY,SAAS;AAClD,6BAAoB,mCAAS,aAAY,EAAE,UAAU,UAAU,YAAY,UAAU;AACrF,6BAAoB,mCAAS,aAAY,GAAI;AAC7C,wBAAgB,IAAI;AAAA,MACtB,SAAS,KAAK;AACZ,gBAAQ,MAAM,oCAAoC,GAAG;AAErD,2BAAmB,kBAAkB;AACrC,4BAAoB,OAAO;AAC3B,6BAAoB,mCAAS,aAAY,EAAE,UAAU,UAAU,YAAY,UAAU;AACrF,6BAAoB,mCAAS,aAAY,GAAI;AAC7C,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAGZ,YAAU,MAAM;AACd,UAAM,iBAAiB,WAAW;AAClC,QAAI,gBAAgB;AAClB,qBAAe,MAAM,SAAS;AAC9B,qBAAe,iBAAiB,SAAS,QAAQ;AAAA,IACnD;AAGA,WAAO,MAAM;AACX,UAAI,gBAAgB;AAClB,uBAAe,oBAAoB,SAAS,QAAQ;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,cAAc,MAClB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,kBAAkB;AAAA,MAClB,SAAS;AAAA,MACT,cAAc;AAAA,QACZ,UAAU,iBAAiB;AAAA,QAC3B,YAAY,iBAAiB;AAAA,MAAA;AAAA,MAG/B,UAAA,oBAAC,OAAA,EAAM,SAAS,qBAAqB,UAAU,kBAAkB,IAAI,EAAE,OAAO,OAAA,GAC3E,UAAA,gBAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAO,EAAE,KAAK,YAAY,YAAA;AAC5B;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soyfri/shared-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -38,6 +38,11 @@
|
|
|
38
38
|
"types": "./index.d.ts"
|
|
39
39
|
},
|
|
40
40
|
"./package.json": "./package.json",
|
|
41
|
+
"./components/Tooltip": {
|
|
42
|
+
"import": "./components/Tooltip/Tooltip.js",
|
|
43
|
+
"require": "./components/Tooltip/Tooltip.cjs",
|
|
44
|
+
"types": "./components/Tooltip/Tooltip.d.ts"
|
|
45
|
+
},
|
|
41
46
|
"./components/Timeline": {
|
|
42
47
|
"import": "./components/Timeline/Timeline.js",
|
|
43
48
|
"require": "./components/Timeline/Timeline.cjs",
|