Strukturansicht

Verwendung

Demnächst verfügbar.

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>

Importanweisung

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

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

Eigenschaften für Strukturansicht

children: Typ
React.ReactNode[]
Beschreibung
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: Typ
TreeNodeData[]
Beschreibung
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: Typ
string
Beschreibung
CSS class name for this component.
defaultEndIcon: Typ
string | Icon
Beschreibung
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: Typ
string | Icon
Beschreibung
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: Typ
string | Icon
Beschreibung
Default icon component. The value is an Icon component or an icon name. For example, CheckIcon or 'gw-check'.
defaultParentIcon: Typ
string | Icon
Beschreibung
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: Typ
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Beschreibung
Default children render function.
defaultRenderHeader: Typ
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Beschreibung
Default header render function or component.
filterCallback: Typ
(value: string, query: string) => Array<{ start: number, end: number }> | undefined;
Beschreibung
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: Typ
object
Beschreibung
Properties passed to filter input.
hideCollapseAll: Typ
boolean
Beschreibung
If set to true, the 'Collapse/Expand all' button will be hidden.
onClick: Typ
function (React.MouseEvent<HTMLElement>)
Beschreibung
On click event handler.
renderCollapseAll: Typ
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean; }>
Beschreibung
Function or component used to render a custom 'Collapse/Expand all' button.
renderFilter: Typ
(onChange: TreeViewFilterProps['onChange']) => ReactNode
Beschreibung
Custom function for rendering the filter component.
renderNodes: Typ
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Beschreibung
The nodes render function. This is only used when using nodes config.
showFilter: Typ
boolean
Beschreibung
If set to true, a filter input will be visible.
defaultRenderExpandIconVerworfen: Typ
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Beschreibung
Default expand icon render function or component. Deprecated: since 10.9.0, please use defaultExpandIcon prop instead.
defaultRenderIconVerworfen: Typ
JSXElementConstructor<{ nodeId: string, expanded: boolean, isEndNode: boolean }>
Beschreibung
Default icon render function or component. Deprecated: since 10.9.0, please use defaultIcon prop instead.

Eigenschaften für Strukturknoten

iderforderlich: Typ
string
Beschreibung
Unique identifier for the component.
labelerforderlich: Typ
IntlMessageShape
Beschreibung
Text label for the node.
className: Typ
string
Beschreibung
CSS class name for this component.
disabled: Typ
boolean
Beschreibung
If set to true, the node is disabled.
expandIcon: Typ
JSXElementConstructor<{ 'data-nodeid': string, expanded: boolean, isEndNode: boolean }>
Beschreibung
Render function for the expand icon header render function or component.
hideIcon: Typ
boolean
Beschreibung
If set to true, the icon will be hidden.
icon: Typ
string | Icon
Beschreibung
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: Typ
string
Beschreibung
CSS class name for the node header.
onClick: Typ
(args: { id: string, hasNodes: boolean, expanded?: boolean | undefined }) => void
Beschreibung
The tree node's handler for click events.
renderChildren: Typ
JSXElementConstructor<{ nodeId: string, children: ReactNode, expanded: boolean }>
Beschreibung
The tree node's render function or component. Used only when using nodes config.
renderHeader: Typ
JSXElementConstructor<TreeNodeHeader>
Beschreibung
The tree node's header render function or component. .
renderExpandIconVerworfen: Typ
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;
Beschreibung
The node's expand icon render function or component. Deprecated since 10.9.0, please use the icon prop instead.
renderIconVerworfen: Typ
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;
Beschreibung
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.

Eigenschaften für Kopfzeilen von Strukturknoten

iderforderlich: Typ
string
Beschreibung
Unique identifier for the component.
labelerforderlich: Typ
string
Beschreibung
The header's translated label.
nodeIderforderlich: Typ
string
Beschreibung
The ID for the current node.
hideIcon: Typ
boolean
Beschreibung
If set to true, the icon will be hidden.
icon: Typ
string | Icon
Beschreibung
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: Typ
Array<{ start: number, end: number }>
Beschreibung
Array of indices to highlight.
renderIconVerworfen: Typ
JSXElementConstructor<{ icon?: string | Icon, nodeId: string }>;
Beschreibung
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.

Hooks

Für tree view sind keine Hooks verfügbar.

Übersetzungsschlüssel

Der TreeView-Komponente sind sechs Übersetzungsschlüssel zugeordnet:

Schlüssel	Verwendet für
jutro-components.TreeView.filterLabel	`aria-label`-Wert für den Strukturansichtsfilter.
jutro-components.TreeView.filterPlaceholder	Platzhaltertext für den Strukturansichtsfilter.
jutro-components.TreeView.collapseAll	Textbeschriftung für die Schaltfläche Alle reduzieren.
jutro-components.TreeView.expandAll	Textbeschriftung für die Schaltfläche Alle erweitern.
jutro-components.TreeView.noMatchesFound	Angezeigter Text, wenn mit dem Filter keine Übereinstimmungen gefunden werden.
jutro-components.TreeView.clearFilter	`aria-label`-Wert für die Schaltfläche Filter löschen.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Strukturansicht und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für eine einfache Strukturansicht

Eine einfache Strukturansicht ist eine TreeView-Komponente, die eine oder mehrere TreeNode-Komponenten umschließt. Jeder Knoten der Baumstruktur kann auch eigene verschachtelte TreeNode-Komponenten enthalten.

<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>

Beispiel für die nodes-Eigenschaft

Sie können die nodes-Eigenschaft verwenden, um die Knoten für die Strukturansicht als Array von Objekten zu übergeben. Weitere Informationen zu den Werten, die an diese Eigenschaft übergeben werden können, finden Sie in der Aufstellung der Eigenschaften für Strukturknoten.

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} />;

Beispiel für das Rendern von Knoten

Wenn Sie bei der Verwendung der nodes-Eigenschaften bestimmte Werte der Knoten überschreiben möchten, können Sie dazu die renderNodes-Eigenschaft verwenden.

Das props-Objekt von renderNodes enthält Folgendes:

nodeId – die dem Knoten der Baumstruktur zugewiesene id
nodes – das an den Knoten der Baumstruktur übergebene Knotenobjekt

Das nodes-Objekt enthält verschachtelte Knoten, sodass Sie rekursiv vorgehen müssen, um die gesamte Baumstruktur darzustellen.

Wenn Sie beispielsweise bestimmte Stile auf jeden Knoten anwenden möchten, können Sie eine benutzerdefinierte Komponente erstellen, die die Liste der Knoten enthält und diese rekursiv als Strukturknoten rendert, während die Stile auf jeden einzelnen Knoten angewendet werden.

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}
/>

Beispiel für einen Filter

Wenn Sie ein Filterfeld in Ihre Strukturansicht aufnehmen wollen, fügen Sie die showFilter-Eigenschaft hinzu. Das Feld verwendet eine Standardfilterfunktion. Wenn Sie diese überschreiben möchten, verwenden Sie die filterCallback-Eigenschaft.

Die filterCallback-Funktion benötigt zwei Argumente:

die übersetzte Beschriftung des Elements der Baumstruktur
die Filterabfrage, die der Benutzer in das Filterfeld eingegeben hat

Die Funktion muss ein Array von Indizes zurückgeben, die Bereiche anzeigen, in denen die Bezeichnung mit der Abfrage übereinstimmt, z. B. [{ start: 2, end: 4 }, { start: 7, end: 9 }].

Wenn die Abfrage nicht übereinstimmt, muss die Funktion null zurückgeben.

Im folgenden Beispiel werden nur Einträge gefunden, deren Beschriftung mit der Abfrage beginnt (Groß- und Kleinschreibung wird berücksichtigt).

const foods = [ ... ]

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

    return null;
  }

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

Beispiel für einen Filter mit Eigenschaften

Das Filterfeld ist ein standardmäßiges Jutro-Texteingabefeld. Mit der Eigenschaft filterProps können Sie zusätzliche Eigenschaften übergeben.

const foods = [ ... ]

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

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

Verwendung​

Code​

Importanweisung​

Komponentenvertrag​

Eigenschaften​

Eigenschaften für Strukturansicht​

children​

nodes​

className​

defaultEndIcon​

defaultExpandIcon​

defaultIcon​

defaultParentIcon​

defaultRenderChildren​

defaultRenderHeader​

filterCallback​

filterProps​

hideCollapseAll​

onClick​

renderCollapseAll​

renderFilter​

renderNodes​

showFilter​

defaultRenderExpandIconVerworfen​

defaultRenderIconVerworfen​

Eigenschaften für Strukturknoten​

iderforderlich​

labelerforderlich​

className​

disabled​

expandIcon​

hideIcon​

icon​

nodeHeaderClassName​

onClick​

renderChildren​

renderHeader​

renderExpandIconVerworfen​

renderIconVerworfen​

Eigenschaften für Kopfzeilen von Strukturknoten​

iderforderlich​

labelerforderlich​

nodeIderforderlich​

hideIcon​

icon​

labelMatches​

renderIconVerworfen​

Hooks​

Übersetzungsschlüssel​

Escape Hatches​

Beispiele​

Beispiel für eine einfache Strukturansicht​

Beispiel für die nodes-Eigenschaft​

Beispiel für das Rendern von Knoten​

Beispiel für einen Filter​

Beispiel für einen Filter mit Eigenschaften​

Änderungsprotokoll​

10.9.0​

Symbol-Eigenschaftstypen erweitert​

Abkündigungen​

Verwendung

Code

Importanweisung

Komponentenvertrag

Eigenschaften

Eigenschaften für Strukturansicht

`children`

`nodes`

`className`

`defaultEndIcon`

`defaultExpandIcon`

`defaultIcon`

`defaultParentIcon`

`defaultRenderChildren`

`defaultRenderHeader`

`filterCallback`

`filterProps`

`hideCollapseAll`

`onClick`

`renderCollapseAll`

`renderFilter`

`renderNodes`

`showFilter`

`defaultRenderExpandIcon`Verworfen

`defaultRenderIcon`Verworfen

Eigenschaften für Strukturknoten

`id`erforderlich

`label`erforderlich

`className`

`disabled`

`expandIcon`

`hideIcon`

`icon`

`nodeHeaderClassName`

`onClick`

`renderChildren`

`renderHeader`

`renderExpandIcon`Verworfen

`renderIcon`Verworfen