BjTreeview

Arborescence React récursive : la prop nodes décrit id, label, icon, enfants et checked optionnel. L’état ouvert est interne ; onToggle signale les changements d’expansion. Avec checkbox activé, onCheck signale les bascules et l’état initial reprend les nœuds marqués checked.

Utilisation

import { BjTreeview } from '@flrxnt/dsbj/react'

const nodes = [
  {
    id: '1',
    label: 'Documents',
    icon: 'ri-folder-line',
    children: [{ id: '1-1', label: 'Rapport.pdf', icon: 'ri-file-text-line' }],
  },
]

export function Example() {
  return <BjTreeview nodes={nodes} checkbox={false} compact={false} />
}

checkbox : true avec cases à cocher

Dossier
- Fichier A
- Fichier B

import { BjTreeview } from '@flrxnt/dsbj/react'

const nodes = [
  {
    id: 'root',
    label: 'Dossier',
    children: [
      { id: 'a', label: 'Fichier A' },
      { id: 'b', label: 'Fichier B', checked: true },
    ],
  },
]

export function TreeWithBoxes() {
  return <BjTreeview nodes={nodes} checkbox />
}

compact : densité réduite

Compact

import { BjTreeview } from '@flrxnt/dsbj/react'

export function CompactTree({ nodes }: { nodes: Parameters<typeof BjTreeview>[0]['nodes'] }) {
  return <BjTreeview nodes={nodes} compact className="my-tree" />
}

Callback onCheck

import { useCallback } from 'react'
import { BjTreeview } from '@flrxnt/dsbj/react'

export function TreeLoggedCheck({ nodes }: { nodes: Parameters<typeof BjTreeview>[0]['nodes'] }) {
  const onCheck = useCallback((id: string, checked: boolean) => {
    console.log('check', id, checked)
  }, [])

  return <BjTreeview nodes={nodes} checkbox onCheck={onCheck} />
}

Callback onToggle

import { useCallback } from 'react'
import { BjTreeview } from '@flrxnt/dsbj/react'

export function TreeLoggedToggle({ nodes }: { nodes: Parameters<typeof BjTreeview>[0]['nodes'] }) {
  const onToggle = useCallback((id: string, expanded: boolean) => {
    console.log('toggle', id, expanded)
  }, [])

  return <BjTreeview nodes={nodes} onToggle={onToggle} />
}

État initial : nœuds avec checked: true

const nodes = [
  {
    id: 'p',
    label: 'Parent',
    children: [
      { id: 'c1', label: 'Coché au chargement', checked: true },
      { id: 'c2', label: 'Non coché' },
    ],
  },
]

export function Preselected() {
  return <BjTreeview nodes={nodes} checkbox />
}

Combinaison : checkbox + compact + callbacks

import { useCallback } from 'react'
import { BjTreeview } from '@flrxnt/dsbj/react'

export function FullTree({ nodes }: { nodes: Parameters<typeof BjTreeview>[0]['nodes'] }) {
  const onCheck = useCallback((id: string, checked: boolean) => {
    /* persistance, analytics… */
  }, [])
  const onToggle = useCallback((id: string, expanded: boolean) => {
    /* journalisation */
  }, [])

  return (
    <BjTreeview
      nodes={nodes}
      checkbox
      compact
      className="my-tree"
      onCheck={onCheck}
      onToggle={onToggle}
    />
  )
}

Aperçu

Documents
- Rapport.pdf
- Note de service.docx

Props

Prop	Description
`nodes`	Tableau de TreeNode : id, label, icon, children et checked optionnels.
`checkbox`	Affiche une case par nœud (défaut : false).
`compact`	Densité réduite (défaut : false).
`onCheck`	Callback après bascule : id du nœud et nouveau booléen coché.
`onToggle`	Callback après expansion : id du nœud et booléen expanded.
`className`	Classe sur la racine ul.bj-tree.