@codeplex-sac/superposiciones 0.1.2 → 0.1.4
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/README.md +171 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
# @codeplex-sac/superposiciones
|
|
2
|
+
|
|
3
|
+
Utilidades de posicionamiento, portales y transiciones para aplicaciones React, basadas en **Material UI**. API en Español con retrocompatibilidad silenciosa para props en inglés.
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @codeplex-sac/superposiciones @codeplex-sac/tema @mui/material @emotion/react @emotion/styled
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Componentes
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
### CodeplexPortal
|
|
18
|
+
|
|
19
|
+
Renderiza hijos fuera de la jerarquía DOM del componente padre (útil para modales, tooltips y overlays).
|
|
20
|
+
|
|
21
|
+
**Ejemplo:**
|
|
22
|
+
```tsx
|
|
23
|
+
import { CodeplexPortal } from '@codeplex-sac/superposiciones';
|
|
24
|
+
|
|
25
|
+
export const Ejemplo = () => (
|
|
26
|
+
<CodeplexPortal idContenedor="portal-root">
|
|
27
|
+
<div>Esto se renderiza dentro de #portal-root, no del padre React.</div>
|
|
28
|
+
</CodeplexPortal>
|
|
29
|
+
);
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**Props:**
|
|
33
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
34
|
+
| :--- | :--- | :--- | :--- |
|
|
35
|
+
| `contenedor` | `Element \| (() => Element) \| null` | — | Nodo DOM de destino. |
|
|
36
|
+
| `idContenedor` | `string` | — | ID del nodo DOM de destino (alternativa a `contenedor`). |
|
|
37
|
+
| `deshabilitarPortal` | `boolean` | `false` | Si `true`, renderiza en el lugar original. |
|
|
38
|
+
| `children` | `ReactNode` | — | Contenido a teletransportar. |
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
### CodeplexPosicionador
|
|
43
|
+
|
|
44
|
+
Popper con Panel flotante que se posiciona relativo a un elemento ancla.
|
|
45
|
+
|
|
46
|
+
**Ejemplo:**
|
|
47
|
+
```tsx
|
|
48
|
+
import { CodeplexPosicionador } from '@codeplex-sac/superposiciones';
|
|
49
|
+
import { useState, useRef } from 'react';
|
|
50
|
+
|
|
51
|
+
export const Ejemplo = () => {
|
|
52
|
+
const [abierto, setAbierto] = useState(false);
|
|
53
|
+
const ancla = useRef<HTMLButtonElement>(null);
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<>
|
|
57
|
+
<button ref={ancla} onClick={() => setAbierto(!abierto)}>Opciones</button>
|
|
58
|
+
<CodeplexPosicionador
|
|
59
|
+
abierto={abierto}
|
|
60
|
+
elementoAncla={ancla.current}
|
|
61
|
+
colocacion="bottom-start"
|
|
62
|
+
cerrarAlClicFuera
|
|
63
|
+
alCerrar={() => setAbierto(false)}
|
|
64
|
+
titulo="Acciones disponibles"
|
|
65
|
+
>
|
|
66
|
+
<p>Contenido del panel flotante</p>
|
|
67
|
+
</CodeplexPosicionador>
|
|
68
|
+
</>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Props:**
|
|
74
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
75
|
+
| :--- | :--- | :--- | :--- |
|
|
76
|
+
| `abierto` | `boolean` | — | Controla la visibilidad del panel. |
|
|
77
|
+
| `elementoAncla` | `PopperProps['anchorEl']` | — | Elemento de referencia para posicionarse. |
|
|
78
|
+
| `colocacion` | `PopperPlacementType` | `'bottom-start'` | Posición relativa al ancla. |
|
|
79
|
+
| `titulo` | `ReactNode` | — | Cabecera del panel. |
|
|
80
|
+
| `estiloContenido` | `SxProps` | — | Estilos del contenedor interno. |
|
|
81
|
+
| `conFondo` | `boolean` | `true` | Envuelve el contenido en un `Paper`. |
|
|
82
|
+
| `transicion` | `boolean` | `true` | Activa animación Fade al abrir/cerrar. |
|
|
83
|
+
| `distancia` | `number` | `4` | Separación en px del elemento ancla. |
|
|
84
|
+
| `cerrarAlClicFuera` | `boolean` | `false` | Cierra el panel al clicar fuera. |
|
|
85
|
+
| `alCerrar` | `(e: MouseEvent \| TouchEvent) => void` | — | Callback al clicar fuera (requiere `cerrarAlClicFuera`). |
|
|
86
|
+
| `hijos` | `ReactNode` | — | Contenido del panel (alias de `children`). |
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
### CodeplexDetectorClicFuera
|
|
91
|
+
|
|
92
|
+
Wrapper que ejecuta un callback cuando el usuario hace clic fuera del área envuelta.
|
|
93
|
+
|
|
94
|
+
**Ejemplo:**
|
|
95
|
+
```tsx
|
|
96
|
+
import { CodeplexDetectorClicFuera } from '@codeplex-sac/superposiciones';
|
|
97
|
+
import { useState } from 'react';
|
|
98
|
+
|
|
99
|
+
export const Ejemplo = () => {
|
|
100
|
+
const [abierto, setAbierto] = useState(true);
|
|
101
|
+
|
|
102
|
+
return (
|
|
103
|
+
<CodeplexDetectorClicFuera alClickFuera={() => setAbierto(false)}>
|
|
104
|
+
{abierto && (
|
|
105
|
+
<div style={{ background: 'white', padding: 16, border: '1px solid #ccc' }}>
|
|
106
|
+
Haz clic fuera para cerrar este panel.
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
109
|
+
</CodeplexDetectorClicFuera>
|
|
110
|
+
);
|
|
111
|
+
};
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
**Props:**
|
|
115
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
116
|
+
| :--- | :--- | :--- | :--- |
|
|
117
|
+
| `alClickFuera` | `(e: MouseEvent \| TouchEvent) => void` | — | Callback al detectar clic exterior. |
|
|
118
|
+
| `deshabilitado` | `boolean` | `false` | Desactiva la detección. |
|
|
119
|
+
| `children` | `ReactNode` | — | Área a monitorear. |
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
### Transiciones
|
|
124
|
+
|
|
125
|
+
Wrappers en Español para las transiciones nativas de MUI: `Collapse`, `Fade`, `Grow`, `Slide`, `Zoom`.
|
|
126
|
+
|
|
127
|
+
**Componentes exportados:**
|
|
128
|
+
- `CodeplexColapso` → `Collapse`
|
|
129
|
+
- `CodeplexDesvanecer` → `Fade`
|
|
130
|
+
- `CodeplexCrecer` → `Grow`
|
|
131
|
+
- `CodeplexDeslizar` → `Slide`
|
|
132
|
+
- `CodeplexZoom` → `Zoom`
|
|
133
|
+
|
|
134
|
+
**Ejemplo con CodeplexDesvanecer:**
|
|
135
|
+
```tsx
|
|
136
|
+
import { CodeplexDesvanecer } from '@codeplex-sac/superposiciones';
|
|
137
|
+
import { useState } from 'react';
|
|
138
|
+
|
|
139
|
+
export const Ejemplo = () => {
|
|
140
|
+
const [visible, setVisible] = useState(true);
|
|
141
|
+
|
|
142
|
+
return (
|
|
143
|
+
<>
|
|
144
|
+
<button onClick={() => setVisible(!visible)}>Toggle</button>
|
|
145
|
+
<CodeplexDesvanecer visible={visible} duracion={400}>
|
|
146
|
+
<div>Contenido que aparece y desaparece con fade.</div>
|
|
147
|
+
</CodeplexDesvanecer>
|
|
148
|
+
</>
|
|
149
|
+
);
|
|
150
|
+
};
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
**Props comunes a todas las transiciones:**
|
|
154
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
155
|
+
| :--- | :--- | :--- | :--- |
|
|
156
|
+
| `visible` | `boolean` | — | Controla si el elemento es visible. |
|
|
157
|
+
| `duracion` | `number \| { enter?, exit? }` | `{ enter: 300, exit: 200 }` | Duración de la animación en ms. |
|
|
158
|
+
| `duracionEntrada` | `number` | — | Duración de la animación de entrada. |
|
|
159
|
+
| `duracionSalida` | `number` | — | Duración de la animación de salida. |
|
|
160
|
+
| `children` | `ReactNode` | — | Elemento a animar. |
|
|
161
|
+
|
|
162
|
+
**Props específicas de `CodeplexDeslizar`:**
|
|
163
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
164
|
+
| :--- | :--- | :--- | :--- |
|
|
165
|
+
| `direccion` | `'arriba' \| 'abajo' \| 'izquierda' \| 'derecha'` | `'abajo'` | Dirección del deslizamiento. |
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Licencia
|
|
170
|
+
|
|
171
|
+
Propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
|