@nova-ui-native/core 1.0.0 → 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 +144 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,144 @@
|
|
|
1
|
-
|
|
1
|
+
````markdown
|
|
2
|
+
# @nova-ui-native/core 🚀
|
|
3
|
+
|
|
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
|
+
---
|
|
7
|
+
|
|
8
|
+
## 📦 Instalación
|
|
9
|
+
|
|
10
|
+
Instala el paquete en tu proyecto de React Native o Expo.
|
|
11
|
+
|
|
12
|
+
### npm
|
|
13
|
+
|
|
14
|
+
```bash
|
|
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
|
|
142
|
+
|
|
143
|
+
React Native • Expo • UI Kit • Components • Autocomplete • Search • TypeScript • Design System • Mobile UI
|
|
144
|
+
````
|
package/package.json
CHANGED