@nova-ui-native/core 1.0.1 → 1.0.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 +135 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,40 +1,144 @@
|
|
|
1
|
+
````markdown
|
|
1
2
|
# @nova-ui-native/core 🚀
|
|
2
3
|
|
|
3
|
-
Un kit de componentes nativos profesionales, intuitivos y altamente optimizados para
|
|
4
|
+
Un kit de componentes nativos profesionales, intuitivos y altamente optimizados para aplicaciones de React Native. Diseñado con un enfoque moderno, limpio y totalmente personalizable.
|
|
5
|
+
|
|
6
|
+
---
|
|
4
7
|
|
|
5
8
|
## 📦 Instalación
|
|
6
9
|
|
|
7
|
-
Instala el paquete en tu proyecto de
|
|
10
|
+
Instala el paquete en tu proyecto de React Native o Expo.
|
|
11
|
+
|
|
12
|
+
### npm
|
|
8
13
|
|
|
9
14
|
```bash
|
|
10
15
|
npm install @nova-ui-native/core
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Yarn
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
yarn add @nova-ui-native/core
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### pnpm
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
pnpm add @nova-ui-native/core
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
# CustomAutocomplete
|
|
33
|
+
|
|
34
|
+
Un componente de autocompletado reutilizable para React Native que soporta filtrado local y remoto (API), ideal para formularios y grandes conjuntos de datos.
|
|
35
|
+
|
|
36
|
+
## Características
|
|
37
|
+
|
|
38
|
+
- 🔍 Búsqueda en tiempo real.
|
|
39
|
+
- 📡 Filtrado local o mediante API.
|
|
40
|
+
- 🎨 Diseño moderno.
|
|
41
|
+
- ⚡ Alto rendimiento.
|
|
42
|
+
- 📱 Compatible con Expo y React Native.
|
|
43
|
+
- 🔧 Totalmente personalizable.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Props
|
|
48
|
+
|
|
49
|
+
| Prop | Tipo | Requerido | Por defecto | Descripción |
|
|
50
|
+
|------|------|-----------|-------------|-------------|
|
|
51
|
+
| data | T[] | Sí | - | Colección de elementos. |
|
|
52
|
+
| valueKey | keyof T | Sí | - | Llave que identifica el valor único. |
|
|
53
|
+
| filterKey | keyof T | Sí | - | Llave utilizada para realizar la búsqueda. |
|
|
54
|
+
| value | string \| number \| null | Sí | - | Valor actualmente seleccionado. |
|
|
55
|
+
| onSelect | (value) => void | Sí | - | Callback al seleccionar un elemento. |
|
|
56
|
+
| filterMode | 'local' \| 'api' | No | 'local' | Tipo de búsqueda. |
|
|
57
|
+
| onSearch | (query)=>void | No | - | Se ejecuta al escribir cuando filterMode es api. |
|
|
58
|
+
| minSearchLength | number | No | 1 | Cantidad mínima de caracteres para buscar. |
|
|
59
|
+
| placeholder | string | No | "Buscar..." | Texto del input. |
|
|
60
|
+
| label | string | No | - | Etiqueta superior. |
|
|
61
|
+
| helperText | string | No | - | Texto de ayuda inferior. |
|
|
62
|
+
| error | boolean | No | false | Estado de error. |
|
|
63
|
+
| loading | boolean | No | false | Muestra un indicador de carga. |
|
|
64
|
+
| containerStyle | StyleProp<ViewStyle> | No | - | Estilos personalizados del contenedor. |
|
|
65
|
+
| visibleItems | number | No | 4 | Número máximo de elementos visibles. |
|
|
66
|
+
| maxResults | number | No | 200 | Máximo de resultados renderizados. |
|
|
67
|
+
| heightItem | number | No | 0 | Altura adicional por elemento. |
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
# Ejemplo
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import React, { useState } from "react";
|
|
75
|
+
import { SafeAreaView, StyleSheet } from "react-native";
|
|
76
|
+
import { CustomAutocomplete } from "@nova-ui-native/core";
|
|
77
|
+
|
|
78
|
+
interface ItemData {
|
|
79
|
+
id: string;
|
|
80
|
+
nombre: string;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export default function App() {
|
|
84
|
+
const [selectedValue, setSelectedValue] = useState<string | number | null>(null);
|
|
85
|
+
|
|
86
|
+
const datasets: ItemData[] = [
|
|
87
|
+
{ id: "1", nombre: "Opción 1" },
|
|
88
|
+
{ id: "2", nombre: "Opción 2" },
|
|
89
|
+
{ id: "3", nombre: "Opción 3" },
|
|
90
|
+
{ id: "4", nombre: "Opción 4" },
|
|
91
|
+
];
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<SafeAreaView style={styles.container}>
|
|
95
|
+
<CustomAutocomplete
|
|
96
|
+
data={datasets}
|
|
97
|
+
filterKey="nombre"
|
|
98
|
+
valueKey="id"
|
|
99
|
+
value={selectedValue}
|
|
100
|
+
onSelect={setSelectedValue}
|
|
101
|
+
label="Seleccione una opción"
|
|
102
|
+
placeholder="Buscar..."
|
|
103
|
+
/>
|
|
104
|
+
</SafeAreaView>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const styles = StyleSheet.create({
|
|
109
|
+
container: {
|
|
110
|
+
flex: 1,
|
|
111
|
+
padding: 20,
|
|
112
|
+
backgroundColor: "#F8FAFC",
|
|
113
|
+
},
|
|
114
|
+
});
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Soporte para búsqueda remota
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<CustomAutocomplete
|
|
123
|
+
data={data}
|
|
124
|
+
value={value}
|
|
125
|
+
valueKey="id"
|
|
126
|
+
filterKey="nombre"
|
|
127
|
+
filterMode="api"
|
|
128
|
+
onSearch={(query) => buscarClientes(query)}
|
|
129
|
+
onSelect={setValue}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## Licencia
|
|
136
|
+
|
|
137
|
+
MIT
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Palabras clave
|
|
11
142
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### 🔍 CustomAutocomplete
|
|
15
|
-
|
|
16
|
-
Un componente de autocompletado avanzado, optimizado estructuralmente para evitar bucles de renderizado infinitos y diseñado para una experiencia de usuario fluida.
|
|
17
|
-
|
|
18
|
-
#### ⚙️ Propiedades (Props)
|
|
19
|
-
|
|
20
|
-
El componente acepta un tipo genérico `<T extends object>` para estructurar conjuntos de datos complejos con flexibilidad total.
|
|
21
|
-
|
|
22
|
-
| Propiedad | Tipo | Requerido | Por Defecto | Descripción |
|
|
23
|
-
| :--- | :--- | :---: | :--- | :--- |
|
|
24
|
-
| `data` | `T[]` | **Sí** | - | La colección completa de objetos (registros) a desplegar o filtrar. |
|
|
25
|
-
| `valueKey` | `keyof T` | **Sí** | - | La propiedad del objeto que actúa como identificador único (ej: `'id'`, `'value'`). |
|
|
26
|
-
| `filterKey` | `keyof T` | **Sí** | - | La propiedad del objeto por la cual se buscará y filtrará visualmente (ej: `'nombre'`, `'label'`). |
|
|
27
|
-
| `value` | `string \| number \| null` | **Sí** | - | El valor seleccionado actualmente. Vinculado al `valueKey` del objeto. |
|
|
28
|
-
| `onSelect` | `(value: string \| number \| null) => void` | **Sí** | - | Callback interactivo que devuelve el identificador (`valueKey`) seleccionado o `null` si se limpia. |
|
|
29
|
-
| `filterMode` | `'local' \| 'api'` | No | `'local'` | Modifica la estrategia de filtrado. `'local'` opera sobre el arreglo en memoria; `'api'` delega la búsqueda a llamadas externas. |
|
|
30
|
-
| `onSearch` | `(query: string) => void` | No | - | Callback que se gatilla al escribir en el input. Requerido si usas `filterMode="api"`. |
|
|
31
|
-
| `minSearchLength` | `number` | No | `1` | Longitud mínima de caracteres requerida antes de disparar el evento `onSearch`. |
|
|
32
|
-
| `placeholder` | `string` | No | `'Buscar...'` | Mensaje flotante dentro de la caja de texto vacía. |
|
|
33
|
-
| `label` | `string` | No | - | Título textual opcional sobre el selector, ideal para formularios limpios. |
|
|
34
|
-
| `helperText` | `string` | No | - | Nota de soporte o descripción corta que se renderiza debajo del input. |
|
|
35
|
-
| `error` | `boolean` | No | `false` | Activa estados visuales de advertencia (bordes y tipografías en tonalidades carmín). |
|
|
36
|
-
| `loading` | `boolean` | No | `false` | Muestra un indicador de carga (`ActivityIndicator`) en lugar de los botones normales de interacción. |
|
|
37
|
-
| `containerStyle` | `StyleProp<ViewStyle>` | No | - | Permite inyectar estilos personalizados para ajustar dimensiones externas de la caja contenedora. |
|
|
38
|
-
| `visibleItems` | `number` | No | `4` | Cantidad máxima de elementos visibles de golpe dentro de la lista flotante antes de activar scrollbar. |
|
|
39
|
-
| `maxResults` | `number` | No | `200` | Límite máximo de renderizado para mitigar sobrecargas en arreglos masivos (`slice`). |
|
|
40
|
-
| `heightItem` | `number` | No | `0` | Margen o altura extra aditiva a sumar sobre los `62px` base de diseño de las celdas táctiles. |
|
|
143
|
+
React Native • Expo • UI Kit • Components • Autocomplete • Search • TypeScript • Design System • Mobile UI
|
|
144
|
+
````
|
package/package.json
CHANGED