Vue d'arborescence

Utilisation

Disponible bientôt.

Code

<TreeView>
  <TreeNode
    id="1"
    label="Fruit">
    <TreeNode
      id="2"
      label="Banana"
    />
    <TreeNode
      id="3"
      label="Apple"
    />
  </TreeNode>
  <TreeNode
    id="4"
    label="Vegetables (coming soon!)"
  />
</TreeView>

Instruction d'importation

import { TreeView, TreeNode, TreeNodeHeader } from '@jutro/components';

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

Propriétés de la vue d’arborescence

children: Type
React.ReactNode[]
Description
React nodes to be rendered in a tree view. This is usually tree node components wrapped by the tree view component. Either nodes or children is required.
nodes: Type
TreeNodeData[]
Description
React nodes to be rendered in a tree view. This is usually an array of objects with the same properties as tree node components. Either nodes or children is required.
className: Type
string
Description
CSS class name for this component.
defaultEndIcon: Type
string | Icon
Description
Default icon to be rendered on the last node of the tree. The value is an Icon component or an icon name. For example, CheckIcon or 'gw-check'.
defaultExpandIcon: Type
string | Icon
Description
Default icon to be rendered when a tree node can be expanded. The value is an Icon component or an icon name. For example, CheckIcon or 'gw-check'.
defaultIcon: Type
string | Icon
Description
Default icon component. The value is an Icon component or an icon name. For example, CheckIcon or 'gw-check'.
defaultParentIcon: Type
string | Icon
Description
Default icon to be rendered when node is a parent. The value is an Icon component or an icon name. For example, CheckIcon or 'gw-check'.
defaultRenderChildren: Type
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Description
Default children render function.
defaultRenderHeader: Type
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Description
Default header render function or component.
filterCallback: Type
(value: string, query: string) => Array<{ start: number, end: number }> | undefined;
Description
Custom comparison function, which takes translated label value as first argument and filtering query as second. It must return null if value is not matched to query, otherwise it returns an array of matching parts indices.
filterProps: Type
object
Description
Properties passed to filter input.
hideCollapseAll: Type
boolean
Description
If set to true, the 'Collapse/Expand all' button will be hidden.
onClick: Type
function (React.MouseEvent<HTMLElement>)
Description
On click event handler.
renderCollapseAll: Type
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean; }>
Description
Function or component used to render a custom 'Collapse/Expand all' button.
renderFilter: Type
(onChange: TreeViewFilterProps['onChange']) => ReactNode
Description
Custom function for rendering the filter component.
renderNodes: Type
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Description
The nodes render function. This is only used when using nodes config.
showFilter: Type
boolean
Description
If set to true, a filter input will be visible.
defaultRenderExpandIconobsolète: Type
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Description
Default expand icon render function or component. Deprecated: since 10.9.0, please use defaultExpandIcon prop instead.
defaultRenderIconobsolète: Type
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Description
Default icon render function or component. Deprecated: since 10.9.0, please use defaultIcon prop instead.

Propriétés des nœuds d’arborescence

idobligatoire: Type
string
Description
Unique identifier for the component.
labelobligatoire: Type
IntlMessageShape
Description
Text label for the node.
className: Type
string
Description
CSS class name for this component.
disabled: Type
boolean
Description
If set to true, the node is disabled.
expandIcon: Type
JSXElementConstructor<{ 'data-nodeid': string, expanded: boolean, isEndNode: boolean }>
Description
Render function for the expand icon header render function or component.
hideIcon: Type
boolean
Description
If set to true, the icon will be hidden.
icon: Type
string | Icon
Description
An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.
nodeHeaderClassName: Type
string
Description
CSS class name for the node header.
onClick: Type
(args: { id: string, hasNodes: boolean, expanded?: boolean | undefined }) => void
Description
The tree node's handler for click events.
renderChildren: Type
JSXElementConstructor<{ nodeId: string, children: ReactNode, expanded: boolean }>
Description
The tree node's render function or component. Used only when using nodes config.
renderHeader: Type
JSXElementConstructor<TreeNodeHeader>
Description
The tree node's header render function or component. .
renderExpandIconobsolète: Type
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;
Description
The node's expand icon render function or component. Deprecated since 10.9.0, please use the icon prop instead.
renderIconobsolète: Type
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;
Description
The node's header icon render function or component. Will be passed to the renderHeader property. Deprecated since 10.9.0, please use the icon prop instead.

Propriétés des en-têtes de nœud d’arborescence

idobligatoire: Type
string
Description
Unique identifier for the component.
labelobligatoire: Type
string
Description
The header's translated label.
nodeIdobligatoire: Type
string
Description
The ID for the current node.
hideIcon: Type
boolean
Description
If set to true, the icon will be hidden.
icon: Type
string | Icon
Description
An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.
labelMatches: Type
Array<{ start: number, end: number }>
Description
Array of indices to highlight.
renderIconobsolète: Type
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;
Description
The node's header icon render function or component. Will be passed to the renderHeader property. Deprecated since 10.9.0, please use the icon prop instead.

Crochets

Aucun crochet n'est disponible pour tree view.

Clés de traduction

Six clés de traduction sont associées au composant d’arborescence :

Clé	Utilisée pour
jutro-components.TreeView.filterLabel	Valeur `aria-label` pour le filtre de vue d’arborescence.
jutro-components.TreeView.filterPlaceholder	Texte d’espace réservé pour le filtre de vue d’arborescence.
jutro-components.TreeView.collapseAll	Étiquette de texte pour le bouton Réduire tout.
jutro-components.TreeView.expandAll	Étiquette de texte pour le bouton Développer tout.
jutro-components.TreeView.noMatchesFound	Texte affiché lorsque le filtre ne trouve aucune correspondance.
jutro-components.TreeView.clearFilter	Valeur `aria-label` pour le bouton Effacer le filtre.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une arborescence et connaître les différentes options de configuration que nous proposons.

Exemple d’arborescence de base

Une arborescence de base est un composant TreeView qui englobe un ou plusieurs composants TreeNode. Chaque nœud de l’arborescence peut également contenir ses propres composants TreeNode imbriqués.

<TreeView>
  <TreeNode
    id="1"
    label="Fruit">
    <TreeNode
      id="2"
      label="Banana"
    />
    <TreeNode
      id="3"
      label="Apple"
    />
  </TreeNode>
  <TreeNode
    id="4"
    label="Vegetables (coming soon!)"
  />
</TreeView>

Exemple de propriété de nœud

Vous pouvez utiliser la propriété nodes pour transmettre les nœuds de l’arborescence sous la forme d'une série d’objets. Consultez la table des propriétés de nœud d’arborescence pour en savoir plus sur les valeurs qui peuvent être transmises à cette propriété.

const foods = [
  {
    id: 'fruit',
    label: { id: 'foods.Fruit', defaultMessage: 'Fruit' },
    nodes: [
      {
        id: 'banana',
        label: { id: 'foods.Banana', defaultMessage: 'Banana' },
      },
      {
        id: 'apple',
        label: { id: 'foods.Apple', defaultMessage: 'Apple' },
      },
    ],
  },
  {
    id: 'vegetables',
    label: {
      id: 'foods.Vegetables',
      defaultMessage: 'Vegetables (coming soon!)',
    },
  },
];

<TreeView nodes={foods} />;

Exemple de nœuds de rendu

Si vous souhaitez remplacer quelque chose dans vos nœuds lors de l'utilisation des propriétés nodes, vous pouvez le faire avec la propriété renderNodes.

L'objet props de renderNodes contient les éléments suivants :

nodeId : l'id attribué au nœud de l'arborescence
nodes : l'objet de nœud transmis au nœud de l'arborescence

L'objet nodes contient des nœuds d'arborescence imbriqués. Vous devez donc effectuer une itération récursive pour afficher l'arborescence entière.

Par exemple, si vous souhaitez appliquer des styles à chaque nœud, vous pouvez créer un composant personnalisé qui prend la liste des nœuds et les affiche en tant que nœuds d'arborescence de manière récursive lors de l'application du style à chacun d'eux.

const foods = [ ... ]

const TomatoNodes = ({ nodes }) => {
  return (
    <>
      {nodes.map(({ id, label, nodes: childNodes }) => (
        <TreeNode
          id={id}
          label={label}
          style={{
            backgroundColor: 'tomato',
            color: 'blue',
            border: '1px solid yellow',
          }}>
          {childNodes && <TomatoNodes nodes={childNodes} />}
        </TreeNode>
      ))}
    </>
  );
};

<TreeView
  nodes={foods}
  renderNodes={TomatoNodes}
/>

Exemple de filtre

Si vous souhaitez inclure un champ de filtre dans votre vue d'arborescence, ajoutez la propriété showFilter. Le champ utilise une fonction de filtrage par défaut que vous pouvez remplacer à l'aide de la propriété filterCallback.

La fonction filterCallback utilise deux arguments :

l'étiquette traduite de l'élément de l'arborescence
la requête de filtrage saisie par l'utilisateur dans le champ de filtre

La fonction doit renvoyer une série d'indices qui affichent des plages où l'étiquette correspond à la requête, par exemple [{ start: 2, end: 4 }, { start: 7, end: 9 }].

Si la requête ne correspond pas, la fonction doit renvoyer null.

L'exemple ci-dessous ne correspond aux éléments que si l'étiquette commence par la requête (sensible à la casse).

const foods = [ ... ]

const filterFunction (value, query) => {
    if (value.startsWith(query)) {
      return [{ start: 0, end: query.length }];
    }

    return null;
  }

<TreeView
  showFilter
  nodes={foods}
  filterCallback={filterFunction}
/>

Exemple de filtre avec propriétés

Le champ de filtre correspond à un champ de saisie de texte Jutro standard. Vous pouvez transmettre des propriétés supplémentaires à l’aide de la propriété filterProps.

const foods = [ ... ]

const filterFunction (value, query) => { ... }

<TreeView
  showFilter
  filterCallback={filterFunction}
  filterProps={{
    placeholder: 'Item starts with...',
  }}
/>

Utilisation​

Code​

Instruction d'importation​

Cahier des charges du composant​

Propriétés​

Propriétés de la vue d’arborescence​

children​

nodes​

className​

defaultEndIcon​

defaultExpandIcon​

defaultIcon​

defaultParentIcon​

defaultRenderChildren​

defaultRenderHeader​

filterCallback​

filterProps​

hideCollapseAll​

onClick​

renderCollapseAll​

renderFilter​

renderNodes​

showFilter​

defaultRenderExpandIconobsolète​

defaultRenderIconobsolète​

Propriétés des nœuds d’arborescence​

idobligatoire​

labelobligatoire​

className​

disabled​

expandIcon​

hideIcon​

icon​

nodeHeaderClassName​

onClick​

renderChildren​

renderHeader​

renderExpandIconobsolète​

renderIconobsolète​

Propriétés des en-têtes de nœud d’arborescence​

idobligatoire​

labelobligatoire​

nodeIdobligatoire​

hideIcon​

icon​

labelMatches​

renderIconobsolète​

Crochets​

Clés de traduction​

Portes de sortie​

Exemples​

Exemple d’arborescence de base​

Exemple de propriété de nœud​

Exemple de nœuds de rendu​

Exemple de filtre​

Exemple de filtre avec propriétés​

Journal des modifications​

10.9.0​

Types de propriétés d'icône étendus​

Obsolescences​

Utilisation

Code

Instruction d'importation

Cahier des charges du composant

Propriétés

Propriétés de la vue d’arborescence

`children`

`nodes`

`className`

`defaultEndIcon`

`defaultExpandIcon`

`defaultIcon`

`defaultParentIcon`

`defaultRenderChildren`

`defaultRenderHeader`

`filterCallback`

`filterProps`

`hideCollapseAll`

`onClick`

`renderCollapseAll`

`renderFilter`

`renderNodes`

`showFilter`

`defaultRenderExpandIcon`obsolète

`defaultRenderIcon`obsolète

Propriétés des nœuds d’arborescence

`id`obligatoire

`label`obligatoire

`className`

`disabled`

`expandIcon`

`hideIcon`

`icon`

`nodeHeaderClassName`

`onClick`

`renderChildren`

`renderHeader`

`renderExpandIcon`obsolète

`renderIcon`obsolète