Vista de árbol
Uso
Próximamente.
Código
<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>
Instrucción de importación
import { TreeView, TreeNode, TreeNodeHeader } from '@jutro/components';
Contrato de componentes
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Propiedades
Propiedades de la vista de árbol
children- Tipo
React.ReactNode[]DescripciónReact nodes to be rendered in a tree view. This is usually tree node components wrapped by the tree view component. Either
nodesorchildrenis required. nodes- Tipo
TreeNodeData[]DescripciónReact nodes to be rendered in a tree view. This is usually an array of objects with the same properties as tree node components. Either
nodesorchildrenis required. className- Tipo
stringDescripciónCSS class name for this component.
defaultEndIcon- Tipo
string | IconDescripciónDefault icon to be rendered on the last node of the tree. The value is an Icon component or an icon name. For example,
CheckIconor'gw-check'. defaultExpandIcon- Tipo
string | IconDescripciónDefault icon to be rendered when a tree node can be expanded. The value is an Icon component or an icon name. For example,
CheckIconor'gw-check'. defaultIcon- Tipo
string | IconDescripciónDefault icon component. The value is an Icon component or an icon name. For example,
CheckIconor'gw-check'. defaultParentIcon- Tipo
string | IconDescripciónDefault icon to be rendered when node is a parent. The value is an Icon component or an icon name. For example,
CheckIconor'gw-check'. defaultRenderChildren- Tipo
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>DescripciónDefault children render function.
defaultRenderHeader- Tipo
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>DescripciónDefault header render function or component.
filterCallback- Tipo
(value: string, query: string) => Array<{ start: number, end: number }> | undefined;DescripciónCustom 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- Tipo
objectDescripciónProperties passed to filter input.
hideCollapseAll- Tipo
booleanDescripciónIf set to
true, the 'Collapse/Expand all' button will be hidden. onClick- Tipo
function (React.MouseEvent<HTMLElement>)DescripciónOn click event handler.
renderCollapseAll- Tipo
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean; }>DescripciónFunction or component used to render a custom 'Collapse/Expand all' button.
renderFilter- Tipo
(onChange: TreeViewFilterProps['onChange']) => ReactNodeDescripciónCustom function for rendering the filter component.
renderNodes- Tipo
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>DescripciónThe nodes render function. This is only used when using nodes config.
showFilter- Tipo
booleanDescripciónIf set to
true, a filter input will be visible. defaultRenderExpandIconobsoleto- Tipo
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>DescripciónDefault expand icon render function or component. Deprecated: since 10.9.0, please use
defaultExpandIconprop instead. defaultRenderIconobsoleto- Tipo
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>DescripciónDefault icon render function or component. Deprecated: since 10.9.0, please use
defaultIconprop instead.
Propiedades del nodo de árbol
idobligatorio- Tipo
stringDescripciónUnique identifier for the component.
labelobligatorio- TipoDescripción
Text label for the node.
className- Tipo
stringDescripciónCSS class name for this component.
disabled- Tipo
booleanDescripciónIf set to
true, the node is disabled. expandIcon- Tipo
JSXElementConstructor<{ 'data-nodeid': string, expanded: boolean, isEndNode: boolean }>DescripciónRender function for the expand icon header render function or component.
hideIcon- Tipo
booleanDescripciónIf set to
true, the icon will be hidden. icon- Tipo
string | IconDescripciónAn Icon component to render on the component. The value must be an
Iconcomponent or the icon's name. For example,CheckIconor'gw-check'. nodeHeaderClassName- Tipo
stringDescripciónCSS class name for the node header.
onClick- Tipo
(args: { id: string, hasNodes: boolean, expanded?: boolean | undefined }) => voidDescripciónThe tree node's handler for click events.
renderChildren- Tipo
JSXElementConstructor<{ nodeId: string, children: ReactNode, expanded: boolean }>DescripciónThe tree node's render function or component. Used only when using nodes config.
renderHeader- Descripción
The tree node's header render function or component. .
renderExpandIconobsoleto- Tipo
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;DescripciónThe node's expand icon render function or component. Deprecated since 10.9.0, please use the
iconprop instead. renderIconobsoleto- Tipo
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;DescripciónThe node's header icon render function or component. Will be passed to the
renderHeaderproperty. Deprecated since 10.9.0, please use theiconprop instead.
Propiedades del encabezado del nodo de árbol
idobligatorio- Tipo
stringDescripciónUnique identifier for the component.
labelobligatorio- Tipo
stringDescripciónThe header's translated label.
nodeIdobligatorio- Tipo
stringDescripciónThe ID for the current node.
hideIcon- Tipo
booleanDescripciónIf set to
true, the icon will be hidden. icon- Tipo
string | IconDescripciónAn Icon component to render on the component. The value must be an
Iconcomponent or the icon's name. For example,CheckIconor'gw-check'. labelMatches- Tipo
Array<{ start: number, end: number }>DescripciónArray of indices to highlight.
renderIconobsoleto- Tipo
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;DescripciónThe node's header icon render function or component. Will be passed to the
renderHeaderproperty. Deprecated since 10.9.0, please use theiconprop instead.
Ganchos
No hay ganchos para vista de árbol.
Claves de traducción
Hay seis claves de traducción asociadas al componente vista de árbol:
| Clave | Se usa para |
|---|---|
| jutro-components.TreeView.filterLabel | Valor aria-label para el filtro de vista de árbol. |
| jutro-components.TreeView.filterPlaceholder | Texto marcador de posición para el filtro de vista de árbol. |
| jutro-components.TreeView.collapseAll | Rótulo de texto para el botón Contraer todo. |
| jutro-components.TreeView.expandAll | Rótulo de texto para el botón Expandir todo. |
| jutro-components.TreeView.noMatchesFound | Texto que se muestra cuando el filtro no encuentra coincidencias. |
| jutro-components.TreeView.clearFilter | Valor aria-label para el botón Borrar filtro. |
Escotillas de escape
Para obtener más información, consulte nuestra documentación sobre escotillas de escape.
Ejemplos
Consulte la sección Uso para obtener detalles sobre cómo diseñar una vista de árbol correctamente y las diferentes opciones de configuración que ofrecemos.
Ejemplo de vista de árbol básica
Una vista de árbol básica es un componente TreeView que encapsula uno o más componentes TreeNode. Cada nodo de árbol también puede contener sus propios componentes TreeNode anidados.
<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>
Ejemplo de propiedad de nodos
Puede utilizar la propiedad nodes para pasar los nodos a la vista de árbol como una matriz de objetos. Consulte la tabla de propiedades del nodo de árbol para obtener más información sobre los valores que se pueden pasar a esta propiedad.
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} />;
Ejemplo de nodos de renderizado
Si desea invalidar algo de sus nodos al usar las propiedades nodes, puede hacerlo con la propiedad renderNodes.
El objeto props de renderNodes contiene lo siguiente:
nodeId,idasignado al nodo del árbol.nodes, objeto del nodo pasado al nodo del árbol.
El objeto nodes contiene nodos de árbol anidados, por eso, debe iterar de forma recurrente para renderizar todo el árbol.
Por ejemplo, si desea aplicar algunos estilos a cada nodo, puede crear un componente personalizado que tome la lista de nodos y los renderice como nodos de árbol de forma recurrente mientras aplica el estilo a cada uno.
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}
/>
Ejemplo de filtro
Si desea incluir un campo de filtro en la vista de árbol, agregue la propiedad showFilter. El campo utiliza una función de filtrado predeterminada y, si desea invalidarla, utilice la propiedad filterCallback.
La función filterCallback toma dos argumentos:
- el rótulo traducido del elemento de árbol;
- la consulta de filtrado que el usuario haya ingresado en el campo de filtro.
La función debe devolver una matriz de índices que muestre intervalos en los que el rótulo coincida con la consulta, por ejemplo [{ start: 2, end: 4 }, { start: 7, end: 9 }].
Si la consulta no coincide, la función debe devolver null.
El siguiente ejemplo hace coincidir los elementos solo si el rótulo comienza con la consulta (distingue entre mayúsculas y minúsculas).
const foods = [ ... ]
const filterFunction (value, query) => {
if (value.startsWith(query)) {
return [{ start: 0, end: query.length }];
}
return null;
}
<TreeView
showFilter
nodes={foods}
filterCallback={filterFunction}
/>
Ejemplo de filtro con propiedades
El campo de filtro es una entrada de texto estándar de Jutro. Puede pasar propiedades adicionales usando la propiedad filterProps.
const foods = [ ... ]
const filterFunction (value, query) => { ... }
<TreeView
showFilter
filterCallback={filterFunction}
filterProps={{
placeholder: 'Item starts with...',
}}
/>
Registro de cambios
10.9.0
-
Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente TreeView. Puede habilitar esta función agregando
JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=trueal archivo.enven la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.
Tipos de propiedades de ícono ampliadas
El tipo de propiedades 'defaultParentIcon' y 'defaultEndIcon' para TreeView y la propiedad icon para TreeNode se han extendido a string | React.ComponentType.
Elementos obsoletos
El pasaje de un string como valor a las propiedades 'defaultParentIcon' y 'defaultEndIcon' para TreeView y la propiedad icon para TreeNode han quedado obsoletos.