Arbres

Arbre réordonnable (glisser verticalement pour réordonner, horizontalement pour indenter)

Glissez une ligne vers le haut ou le bas pour la réordonner parmi ses voisines, vers la gauche ou la droite pour changer sa profondeur : la position horizontale du pointeur projette le parent visé. Glisser un dossier déplace tout son sous-arbre (replié pendant le glissement), de sorte qu'un nœud ne peut jamais être déposé dans ses propres enfants.

<SortableTree

    defaultItems={ [ { id , label , children : [...] } ] }

    renderNode={ node => <SortableTreeItem>{ node.label }</SortableTreeItem> }

/>

Arbre piloté (structure en direct)

[
  {
    "src": [
      {
        "components": [
          "Button.jsx",
          "Input.jsx"
        ]
      },
      {
        "hooks": [
          "useValue.js"
        ]
      },
      "index.js"
    ]
  },
  {
    "public": [
      "logo.svg"
    ]
  },
  "README.md"
]

<SortableTree

    items={ tree }

    onChange={ ( next , change ) => setTree( next ) }

/>

// change = { item , fromParent , toParent , fromIndex , toIndex }

Changement asynchrone avec appel d’API (retour en arrière optimiste en cas d’échec)

<SortableTree

    defaultItems={ tree }

    onChange={ ( next , change ) => api.save( next ) }

/>

// onChange peut rendre une promesse : un rejet restaure l’arbre précédent

Profondeur maximale (maxDepth = 2) et indicateur de dépôt

L'imbrication est plafonnée à 2 niveaux : glisser une ligne plus profond la ramène à la limite. Le trait bleu est l'indicateur de dépôt — il montre le point d'insertion exact et, par son indentation, la profondeur où le nœud atterrira. Un dossier compte son propre sous-arbre dans la limite.

<SortableTree maxDepth={ 2 } defaultItems={ tree } renderNode={ ... } />

Liste plate (maxDepth = 0 — un seul niveau racine, aucune imbrication)

Avec maxDepth à 0, chaque nœud reste à la profondeur 0 : glisser une ligne latéralement ne l'indente jamais, et l'arbre se comporte comme une simple liste réordonnable — seul l'ordre vertical change. collapsible à false va avec, puisqu'il ne reste aucun sous-arbre à replier.

<SortableTree

    maxDepth={ 0 }

    collapsible={ false }

    defaultItems={ [ { id , label } , ... ] }

    renderNode={ node => <SortableTreeItem>{ node.label }</SortableTreeItem> }

/>

Règle d’imbrication (canNest — seuls les dossiers acceptent des enfants)

Les fichiers se réordonnent mais ne reçoivent jamais d'enfants : glisser un nœud sous un fichier fait remonter le dépôt au niveau de ce fichier (son dossier parent). L'indicateur de dépôt passe au rouge quand aucun parent valide n'existe à cette position.

<SortableTree

    canNest={ ( item , parent ) => !parent || parent.type === 'folder' }

    defaultItems={ tree }

    renderNode={ ... }

/>

Tout déplier / tout replier (repli piloté)

L'état replié est piloté par collapsed et onCollapsedChange, donc le parent peut le commander — ici deux boutons le mettent à tous les identifiants de dossier (tout replier) ou à une liste vide (tout déplier).

<SortableTree

    collapsed={ collapsedIds }

    onCollapsedChange={ setCollapsedIds }

    defaultItems={ tree } renderNode={ ... }

/>

Arbre gelé (disabled et collapsible à false)

disabled coupe tout glissement et collapsible à false retire les chevrons en gardant chaque nœud déplié — un arbre en lecture seule, entièrement statique.

<SortableTree disabled collapsible={ false } defaultItems={ tree } renderNode={ ... } />

Ajouter et retirer des nœuds (insertion dans un sous-dossier)

L'arbre est une valeur imbriquée pilotée, donc ajouter et retirer sont de simples mises à jour d'état. Chaque dossier porte un bouton « + » qui insère un enfant dans SES enfants (visé par son identifiant) — le dossier se déplie tout seul pour le montrer ; chaque nœud porte une « × » pour le supprimer avec son sous-arbre. Le réordonnancement au glisser continue de fonctionner à côté.

import insertNode from 'oihana-next-ui/helpers/trees/insertNode' ;

import removeNode from 'oihana-next-ui/helpers/trees/removeNode' ;

// insérer dans un sous-dossier (par identifiant) — ou null pour la racine

setTree( t => insertNode( t , folderId , newNode ) ) ;

// retirer un nœud et son sous-arbre

setTree( t => removeNode( t , nodeId ) ) ;