@zevra/ui 0.43.1 → 0.44.0

package/react/data-table.tsx

@@ -15,11 +15,12 @@
 // variables. Aucune classe nouvelle n'entre par cette porte : ce sont les
 // mêmes .zv-table / .zv-row / .zv-cell que le tableau écrit à la main.
 
-import { Fragment, type CSSProperties, type ReactNode } from 'react'
+import { Fragment, type CSSProperties, type DragEvent, type ReactNode } from 'react'
 import {
   flexRender,
   type Column,
   type Header,
+  type Row,
   type RowData,
   type Table as TableTanstack,
 } from '@tanstack/react-table'
@@ -85,6 +86,32 @@ export interface DataTableProps<T> {
    *  liste). Elle porte un filet d'accent à gauche, distinct de la ligne
    *  COCHÉE, qui est une sélection pour agir. */
   ligneActive?: (ligne: T) => boolean
+  /** Clic droit sur une ligne : l'appelant ouvre son menu contextuel aux
+   *  coordonnées données. Le menu du navigateur est alors retenu. */
+  onRowContextMenu?: (ligne: T, x: number, y: number) => void
+  /** Double clic : « ouvrir pour de bon », quand le simple clic ne fait que
+   *  montrer. La sélection de texte qu'il provoque est effacée. */
+  onRowDoubleClick?: (ligne: T) => void
+  /** La ligne se saisit (glisser-déposer NATIF) : l'appelant remplit le
+   *  `dataTransfer`, pour ranger une pièce dans un dossier par exemple. */
+  onRowDragStart?: (ligne: T, e: DragEvent<HTMLDivElement>) => void
+  /** Les lignes à rendre, dans leur ordre, à la place du modèle de TanStack :
+   *  pour un ordre que le tri ne sait pas dire (des lignes épinglées en tête
+   *  quel que soit le tri). */
+  lignes?: Row<T>[]
+  /** Rangée posée en tête du corps, avant les lignes : une ligne de SAISIE. */
+  avantLignes?: ReactNode
+  /** Rangée intercalée AVANT une ligne : l'intitulé d'un groupe (une année,
+   *  un mois) quand la clé change. Rien pour ne rien intercaler. */
+  intercalaire?: (ligne: Row<T>, precedente: Row<T> | undefined) => ReactNode
+  /** Sous les lignes : un pied de totaux, le déclencheur d'une liste infinie. */
+  apresLignes?: ReactNode
+  /** Rangées resserrées, pour un tableau secondaire posé dans une fiche. */
+  dense?: boolean
+  /** Le tableau REMPLIT la hauteur de son parent (une colonne flex bornée) :
+   *  seules les lignes défilent, les intitulés et les filtres restent en
+   *  haut. */
+  remplir?: boolean
   className?: string
 }
 
@@ -144,6 +171,15 @@ export function DataTable<T>({
   celluleEntete,
   sousEntete,
   ligneActive,
+  onRowContextMenu,
+  onRowDoubleClick,
+  onRowDragStart,
+  lignes: lignesImposees,
+  avantLignes,
+  intercalaire,
+  apresLignes,
+  dense,
+  remplir,
   className,
 }: DataTableProps<T>) {
   const grille = table.options.enableColumnResizing === true
@@ -154,7 +190,7 @@ export function DataTable<T>({
       grille ? piste(c, reglages[c.id] != null) : (c.columnDef.meta?.largeur ?? 'minmax(0, 1fr)'),
     )
     .join(' ')
-  const lignes = table.getRowModel().rows
+  const lignes = lignesImposees ?? table.getRowModel().rows
   const style: Record<string, string> = { '--zv-cols': gabarit }
   if (grille) {
     style['--zv-cols-somme'] = `${colonnes.reduce((s, c) => s + c.getSize(), 0)}px`
@@ -163,9 +199,10 @@ export function DataTable<T>({
 
   return (
     <div
-      className={cx('zv-table', className)}
+      className={cx('zv-table', dense && 'zv-table--dense', remplir && 'zv-table--remplir', className)}
       style={style as CSSProperties}
     >
+      <Haut actif={remplir}>
       {table.getHeaderGroups().map((groupe) => (
         <div className="zv-table__head" key={groupe.id}>
           {groupe.headers.map((entete) => {
@@ -218,12 +255,16 @@ export function DataTable<T>({
       ))}
 
       {sousEntete}
+      </Haut>
+
+      {avantLignes}
 
       {lignes.length === 0
         ? vide
-        : lignes.map((ligne) => (
+        : lignes.map((ligne, i) => (
+            <Fragment key={ligne.id}>
+            {intercalaire?.(ligne, lignes[i - 1])}
             <div
-              key={ligne.id}
               className={cx(
                 'zv-row',
                 ligne.getIsSelected() && 'zv-row--selected',
@@ -236,6 +277,25 @@ export function DataTable<T>({
               tabIndex={onRowClick ? 0 : undefined}
               style={onRowClick ? undefined : { cursor: 'default' }}
               onClick={onRowClick ? () => onRowClick(ligne.original) : undefined}
+              onContextMenu={
+                onRowContextMenu
+                  ? (e) => {
+                      e.preventDefault()
+                      onRowContextMenu(ligne.original, e.clientX, e.clientY)
+                    }
+                  : undefined
+              }
+              onDoubleClick={
+                onRowDoubleClick
+                  ? (e) => {
+                      e.preventDefault()
+                      e.currentTarget.ownerDocument.defaultView?.getSelection()?.removeAllRanges()
+                      onRowDoubleClick(ligne.original)
+                    }
+                  : undefined
+              }
+              draggable={onRowDragStart ? true : undefined}
+              onDragStart={onRowDragStart ? (e) => onRowDragStart(ligne.original, e) : undefined}
               onKeyDown={
                 onRowClick
                   ? (e) => {
@@ -269,7 +329,18 @@ export function DataTable<T>({
                 )
               })}
             </div>
+            </Fragment>
           ))}
+
+      {apresLignes}
     </div>
   )
 }
+
+/** L'en-tête et les filtres, groupés dans un bloc COLLANT quand le tableau
+ *  remplit son parent : sans ce bloc, chaque rangée collerait au même
+ *  endroit et la seconde recouvrirait la première. Sinon, rien n'enveloppe :
+ *  le balisage reste celui d'avant. */
+function Haut({ actif, children }: { actif?: boolean; children: ReactNode }) {
+  return actif ? <div className="zv-table__haut">{children}</div> : <>{children}</>
+}