Referencia Componentes y hooks
Componentes y hooks
Lo que necesita una aplicación de React está en este único paquete; lo que comparte con el drive sin framework también se exporta desde él.
Exportaciones
| Nombre | Qué es |
|---|---|
| FileDrive | El drive completo. |
| SharedLink | Lo que ve quien recibió un enlace, sin iniciar sesión. |
| createMemoryClient | El drive guardado en la página, con el cliente de las rutas del servidor. |
| createDriveClient, createLinkClient | Los clientes, de @rebofiles/drive. |
| RequestError | Lo que el servidor rechazó: su estado, su código y su mensaje. |
| TEXTS, formatSize, formatDate, formatDuration, kindOf | Las palabras, y lo que se dice de un archivo. |
| @rebofiles/react/rebodocs | previewDocx, viewDocx, thumbDocx, pictureOfDocx, textOfDocx: documentos de Word con el motor de Rebodocs. |
Hooks
| Hook | What it does |
|---|---|
| DriveProvider | El cliente y las palabras, para cada hook que tenga debajo. base, client, headers, language, texts, live; un <FileDrive> dentro usa los mismos. Cada hook vuelve a pedir cuando otro cambia el drive. |
| useEntries | Una carpeta, Recientes, Destacados, lo recibido por solicitudes, Compartido conmigo, la papelera o una búsqueda. entries, path, loading, error, refresh: se vuelve a pedir tras cada cambio. |
| useEntry | Una entrada tal como está ahora, y dónde está. entry, path, trashed; null mientras carga, o si no existe. |
| useActions | Lo que cambia el drive, avisando después a cada hook. createFolder, rename, move, moveToTrash, restore, deleteForever, emptyTrash, restoreVersion, copy, star, setColor, setFields, review, share, unshare, createLink, removeLink, linkToken, upload, url. |
| useUploads | Archivos subiendo, tres a la vez, con el tiempo que le queda a cada uno. uploads, summary, upload, retry, stop, stopAll, decide, dismiss, clear; { check: true } para preguntar por lo que ya existe. |
| useSettings | Los ajustes del drive y los de la persona. settings, drive, mine, canConfigure, save, saveMine. |
| useComments | Lo que se dice de una entrada, y decir más. comments, loading, error, add, edit, resolve, remove. |
| useActivity | Quién hizo qué a una entrada, lo más nuevo primero. activity, loading, error; useActivity(id, limit?). |
| useTextSearch | Los archivos con estas palabras escritas dentro, cada uno con un trozo de su texto. results (entry, snippet), loading, error; nada para una búsqueda vacía. |
| useNotifications | Lo que se le dijo a quien pregunta, y cuántas son nuevas. notifications, unseen, loading, error, saw(). |
| useRequests | Las solicitudes de archivos que uno ha hecho. requests (folder, link, token), loading, error, remind(folder, link). |
| useExpiring | Los archivos cuyo campo expires llega en tantos días, o ya pasó: los más próximos primero. files (entry, expires, days), loading, error; useExpiring(days?), 15 si no se dice. |
| useWithField | Las entradas con un campo de este valor: los archivos de un registro tuyo. entries, loading, error; nada sin valor. |
| usePeople | Quién coincide con lo escrito, de tu directorio, para compartir. people, loading, error; nadie para una búsqueda vacía. |
| useDrive | El propio provider. client, revision, changed(), t, locale, settings: cada ruta como función, un número que sube tras cada cambio, y las palabras del drive. Para lo que no tiene hook propio. |
Cada prop de <FileDrive>
| Prop | Type | What it does |
|---|---|---|
| base | string | Dónde están las rutas de @rebofiles/server. /api/files si no se dice. |
| client | DriveClient | Un cliente propio en lugar de base: el drive guardado en la página (createMemoryClient), o uno compartido con el resto de la página. |
| headers | () => Record<string, string> | Cabeceras para cada petición a tu servidor, como un token de la sesión; nunca se envían al bucket. Puede ser async. |
| linkAddress | (token) => string | Adónde apunta un enlace del drive: tu página con <SharedLink>. Esta página con ?link= si no se da. |
| settings | boolean | false quita la pantalla de ajustes y el botón que la abre. |
| language | 'en' | 'es' | 'zh' | Por debajo de la elección de cada persona, por encima de la del drive. Inglés si no se da. |
| texts | Texts | Las palabras de otro idioma, con las claves de TEXTS.en. |
| theme | 'light' | 'dark' | 'auto' | Por debajo de la elección de cada persona, por encima de la del drive. auto sigue al sistema. |
| title | string | El nombre sobre el drive: el de tu aplicación, o “Files”. |
| logo | ReactNode | Lo que va antes del título; la marca de ReboFiles si no se da. Un Node para mountDrive. |
| defaultView | 'list' | 'grid' | Cómo se muestra una carpeta la primera vez. |
| layout | 'full' | 'compact' | compact: sin columna a la izquierda; Nuevo y los lugares en una franja sobre la lista, para un drive en una parte más pequeña de la página. |
| className | string | Una clase propia en .rf-drive, para sus propiedades personalizadas. |
| chrome | boolean | false quita su barra y sus secciones, para que tu aplicación ponga las suyas: lo maneja con go, search, upload, newFolder, requestFiles, share y openSettings. |
| root | EntryId | La carpeta en la que se queda, como los archivos de un registro tuyo: empieza ahí, su ruta empieza ahí y nada por encima. |
| onState | (state) => void | Dónde está, cada vez que cambia: la sección, la carpeta y su ruta, lo buscado, cuántos y el espacio; para tu propia barra. |
| controls | RefObject<DriveControls> | React: go, search, upload, newFolder, requestFiles, share y openSettings del drive, puestos en él mientras está. |
| checkUploads | boolean | false sube sin buscar antes el mismo archivo, o uno con su nombre, en el drive: un nombre ocupado se libera con “(2)”. |
| requestTemplates | boolean | false quita las plantillas de solicitudes: para empezar de una y para guardar una. |
| qr | boolean | false quita el código QR de una solicitud hecha. |
| onOpen | (file, url) => void | Un archivo abierto con doble clic o Enter, a tu manera. Si no se da, lo muestra el visor del drive. |
| fields | 'show' | 'edit' | false | Los campos de tu aplicación en una entrada, en sus detalles: se muestran (si no se dice), se cambian ahí por quien puede renombrarla (edit), o se dejan fuera. |
| previewDocument | (bytes) => DocumentPreview | Los detalles de un .docx: su título y primeros párrafos. previewDocx. |
| viewDocument | (element, bytes) => ShownDocument | El visor de un .docx: sus páginas, una a una o todas, con el zoom y la impresión de Rebodocs. viewDocx. |
| thumbDocument | (bytes) => Promise<HTMLElement> | Su primera página dibujada en la cuadrícula, hasta que se haga una imagen de ella. thumbDocx. |
| pictureDocument | (bytes, size, type, quality) => Promise<Blob> | Su primera página como imagen, hecha al subir y guardada como su miniatura en los tamaños del drive. pictureOfDocx. |
| textDocument | (bytes) => string | Lo que tiene escrito, enviado al subir, para que una búsqueda lo encuentre. textOfDocx. |
| onOpenDocument | (file, url) => void | Da a un .docx un botón “Abrir en Rebodocs”, llamado con una dirección desde la que leerlo. |
| compareDocument | (element, before, after) => ShownDocument | “Comparar” en cada versión salvo la actual, en el historial: lo que cambió, sobre sus páginas. compareDocx. |
| newDocument | () => Uint8Array | “Documento nuevo” en el menú Subir: un .docx vacío con el nombre que le da la persona, en la carpeta donde está, y luego abierto. newDocx. |
| onChange | () => void | Tras cada cambio hecho desde el drive, para lo demás de la página que lo muestra (mountDrive; en React, el provider avisa a los hooks). |
| live | boolean | Lo que cambian otros, mostrado en el momento, desde /events del servidor. true si no se dice; en React, el del provider. |
Según para qué sirven, con ejemplos: Componente de React.