react-ecosistema-unp 1.14.1 → 1.14.2
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
CHANGED
|
@@ -2,113 +2,57 @@
|
|
|
2
2
|
|
|
3
3
|
<span align="center">
|
|
4
4
|
<a href="https://www.npmjs.com/package/react-ecosistema-unp"><img title="npm version" src="https://badgen.net/npm/v/react-ecosistema-unp?label=latest"></a>
|
|
5
|
-
<!-- <a href="https://www.npmjs.com/package/react-ecosistema-unp"><img title="npm version" src="https://badgen.net/npm/v/react-ecosistema-unp?label=pre"></a> -->
|
|
6
5
|
</span>
|
|
7
6
|
|
|
8
7
|
La Librería del Ecosistema de Información es una colección de componentes reutilizables y modulares para crear y gestionar el entorno digital de la Unidad Nacional de Protección. Esta librería proporciona componentes para facilitar la integración de diversas funcionalidades dentro de las aplicaciones del ecosistema.
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
<!-- #### Migración
|
|
12
|
-
|
|
13
|
-
Todos los proyectos que utilizan la librería [eco-unp](https://www.npmjs.com/package/eco-unp) deben realizar la migración a [react-ecosistema-unp](https://www.npmjs.com/package/react-ecosistema-unp). Para ello deben seguir los siguientes pasos:
|
|
14
|
-
* Desinstalar eco-unp: ```npm uninstall eco-unp```
|
|
15
|
-
* Cambiar el Module Resolution en los proyectos React TS a *bundler* ```"moduleResolution": "bundler"```
|
|
16
|
-
* Instalar la última versión de react-ecosistema-unp: ```npm install react-ecosistema-unp@latest```
|
|
17
|
-
* Realizar el cambio en las siguientes importaciones:
|
|
18
|
-
```tsx
|
|
19
|
-
import { AuthProvider } from 'eco-unp/Utils'; -> import { AuthProvider } from 'react-ecosistema-unp/utils';
|
|
20
|
-
import { UserRoute, ProtectedRoute } from 'eco-unp/Utils'; -> import { ProtectedRoute, UserRoute } from 'react-ecosistema-unp/utils';
|
|
21
|
-
|
|
22
|
-
import { VentanaLienzo } from 'eco-unp/Ui'; -> import { VentanaLienzo } from 'react-ecosistema-unp/shared';
|
|
23
|
-
import { VentanaUsuario } from 'eco-unp/Ui'; -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
|
|
24
|
-
import { TabVentana } from 'eco-unp/Ui'; -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
|
|
25
|
-
|
|
26
|
-
import { SubtituloForm } from 'eco-unp/Ui'; -> import { Subtitulo } from "react-ecosistema-unp/ui";
|
|
27
|
-
|
|
28
|
-
import { CardForm } from 'eco-unp/Ui'; -> import { Tarjeta } from 'react-ecosistema-unp/cards';
|
|
29
|
-
|
|
30
|
-
import { BootstrapTable } from 'eco-unp/Tables'; -> import { TablaRegistros } from 'react-ecosistema-unp/tables';
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
> El componente Subtitulo cambia el prop subtitulo a subtitle -->
|
|
34
|
-
|
|
35
|
-
|
|
36
9
|
## Instalación
|
|
37
10
|
|
|
38
11
|
```bash
|
|
39
12
|
npm install react-ecosistema-unp@latest
|
|
40
13
|
```
|
|
41
|
-
|
|
14
|
+
|
|
15
|
+
> **Nota:** El Module Resolution del proyecto debe ser *bundler* para su correcto funcionamiento
|
|
16
|
+
|
|
42
17
|
```json
|
|
43
18
|
"moduleResolution": "bundler"
|
|
44
19
|
```
|
|
45
20
|
|
|
21
|
+
## Configuración inicial
|
|
46
22
|
|
|
47
|
-
|
|
23
|
+
Todo proyecto que utilice la librería debe envolver la aplicación con el componente `EcoProvider`. Este proveedor configura los contextos de autenticación y WebSocket necesarios para el correcto funcionamiento de los demás componentes.
|
|
48
24
|
|
|
49
|
-
|
|
25
|
+
```tsx
|
|
26
|
+
import { EcoProvider } from 'react-ecosistema-unp/utils';
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<EcoProvider>
|
|
31
|
+
{/* Tu aplicación */}
|
|
32
|
+
</EcoProvider>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Documentación
|
|
50
38
|
|
|
51
39
|
* [Elementos UI](docs/ui.md)
|
|
40
|
+
* [Componentes compartidos (Layout)](docs/shared.md)
|
|
52
41
|
* [Tarjetas](docs/cards.md)
|
|
53
|
-
* [
|
|
42
|
+
* [Tablas y modales](docs/tables.md)
|
|
54
43
|
* [Utilidades](docs/utils.md)
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
* [Autenticación](docs/auth.md)
|
|
45
|
+
* [Datos](docs/data.md)
|
|
58
46
|
* [Accesibilidad](docs/accessibility.md)
|
|
59
47
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
- Se pasa la prop `enableRowSelection` al componente de tabla.
|
|
73
|
-
- Se define la prop `onSelectionChange`, que recibe el array de identificadores seleccionados.
|
|
74
|
-
|
|
75
|
-
## Props requeridas
|
|
76
|
-
|
|
77
|
-
| Prop | Tipo | Descripción |
|
|
78
|
-
|---------------------|--------------|-----------------------------------------------------------------------------|
|
|
79
|
-
| `enableRowSelection`| `boolean` | Habilita la selección de filas. |
|
|
80
|
-
| `onSelectionChange` | `(ids: string[]) => void` | Callback que recibe los ids de las filas seleccionadas. |
|
|
81
|
-
|
|
82
|
-
## Comportamiento
|
|
83
|
-
|
|
84
|
-
1. Al seleccionar una fila, todas las filas con el mismo valor en la columna `tipoMesa` se agrupan y se posicionan inmediatamente debajo de la fila seleccionada.
|
|
85
|
-
2. Si se seleccionan varias filas de diferentes `tipoMesa`, cada grupo se posiciona debajo de la primera fila seleccionada de su tipo.
|
|
86
|
-
3. La selección se realiza por el identificador único de la fila (`numeroRegistro`), lo que garantiza que la selección se mantenga aunque el orden de las filas cambie.
|
|
87
|
-
4. No se generan duplicados: cada fila aparece solo una vez en la tabla.
|
|
88
|
-
5. El reordenamiento solo ocurre cuando ambas props están presentes; de lo contrario, la tabla mantiene su orden original.
|
|
89
|
-
|
|
90
|
-
## Ejemplo de uso
|
|
91
|
-
|
|
92
|
-
```tsx
|
|
93
|
-
import { TablaRegistros } from '.../lib/tables';
|
|
94
|
-
|
|
95
|
-
const columns = [
|
|
96
|
-
// ...definición de columnas...
|
|
97
|
-
];
|
|
98
|
-
|
|
99
|
-
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
100
|
-
|
|
101
|
-
<TablaRegistros
|
|
102
|
-
columns={columns}
|
|
103
|
-
data={data}
|
|
104
|
-
enableRowSelection
|
|
105
|
-
onSelectionChange={setSelectedIds}
|
|
106
|
-
// ...otros props...
|
|
107
|
-
/>;
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
## Notas adicionales
|
|
111
|
-
|
|
112
|
-
- El identificador único de cada fila debe estar en la propiedad `numeroRegistro`.
|
|
113
|
-
- El comportamiento de agrupación es transparente para el usuario y no requiere configuración adicional.
|
|
114
|
-
- Si se desea desactivar la agrupación, basta con omitir alguna de las props requeridas.
|
|
48
|
+
## Módulos de importación
|
|
49
|
+
|
|
50
|
+
| Módulo | Importación | Componentes principales |
|
|
51
|
+
|--------|-------------|------------------------|
|
|
52
|
+
| UI | `react-ecosistema-unp/ui` | Encabezado, Subtitulo, Logo, Paginador, Animacion, ContenedorVentana, IconoTooltip, ItemsModal, ContenidoModal, EcoModal |
|
|
53
|
+
| Shared | `react-ecosistema-unp/shared` | VentanaLienzo, VentanaTabs, TabVentana, IconosSistema |
|
|
54
|
+
| Cards | `react-ecosistema-unp/cards` | Tarjeta, SeccionTarjeta, ContenedorTarjeta, NuevoElemento, TarjetaLectura, SeccionTarjetaLectura, TarjetaInfo |
|
|
55
|
+
| Tables | `react-ecosistema-unp/tables` | TablaRegistros |
|
|
56
|
+
| Utils | `react-ecosistema-unp/utils` | EcoProvider, ProtectedRoute, UserRoute, useFetchData, useFormValidation, CaptchaEcosistema, useWebSocket, ModalRadicado, ModalDocumento, UnpHistorico |
|
|
57
|
+
| Accessibility | `react-ecosistema-unp/accessibility` | BarraAccesibilidad |
|
|
58
|
+
| Data | `react-ecosistema-unp/data` | DocsEcosistema |
|