@soyfri/shared-library 1.4.0 → 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.
|
@@ -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;"}
|