@patternfly/react-core 4.227.9 → 4.228.0

package/src/components/TreeView/examples/TreeView.md

@@ -88,7 +88,9 @@ class DefaultTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example1-Sources',
-        children: [{ name: 'Application 4', id: 'example1-App4', children: [{ name: 'Settings', id: 'example1-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example1-App4', children: [{ name: 'Settings', id: 'example1-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -109,6 +111,106 @@ class DefaultTreeView extends React.Component {
 }
 ```
 
+### With separate selection and expansion
+
+The `hasSelectableNodes` modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected with toggling its expansion.
+
+```js
+import React from 'react';
+import { TreeView, Button } from '@patternfly/react-core';
+
+class SelectableNodesTreeView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { activeItems: {} };
+
+    this.onSelect = (evt, treeViewItem) => {
+      this.setState({
+        activeItems: [treeViewItem]
+      });
+    };
+  }
+
+  render() {
+    const { activeItems, allExpanded } = this.state;
+
+    const options = [
+      {
+        name: 'Application launcher',
+        id: 'SelNodesTreeView-AppLaunch',
+        children: [
+          {
+            name: 'Application 1',
+            id: 'SelNodesTreeView-App1',
+            children: [
+              { name: 'Settings', id: 'SelNodesTreeView-App1Settings' },
+              { name: 'Current', id: 'SelNodesTreeView-App1Current' }
+            ]
+          },
+          {
+            name: 'Application 2',
+            id: 'SelNodesTreeView-App2',
+            children: [
+              { name: 'Settings', id: 'SelNodesTreeView-App2Settings' },
+              {
+                name: 'Loader',
+                id: 'SelNodesTreeView-App2Loader',
+                children: [
+                  { name: 'Loading App 1', id: 'SelNodesTreeView-LoadApp1' },
+                  { name: 'Loading App 2', id: 'SelNodesTreeView-LoadApp2' },
+                  { name: 'Loading App 3', id: 'SelNodesTreeView-LoadApp3' }
+                ]
+              }
+            ]
+          }
+        ],
+        defaultExpanded: true
+      },
+      {
+        name: 'Cost management',
+        id: 'SelNodesTreeView-Cost',
+        children: [
+          {
+            name: 'Application 3',
+            id: 'SelNodesTreeView-App3',
+            children: [
+              { name: 'Settings', id: 'SelNodesTreeView-App3Settings' },
+              { name: 'Current', id: 'SelNodesTreeView-App3Current' }
+            ]
+          }
+        ]
+      },
+      {
+        name: 'Sources',
+        id: 'SelNodesTreeView-Sources',
+        children: [
+          {
+            name: 'Application 4',
+            id: 'SelNodesTreeView-App4',
+            children: [{ name: 'Settings', id: 'SelNodesTreeView-App4Settings' }]
+          }
+        ]
+      },
+      {
+        name: 'Really really really long folder name that overflows the container it is in',
+        id: 'SelNodesTreeView-Long',
+        children: [{ name: 'Application 5', id: 'SelNodesTreeView-App5' }]
+      }
+    ];
+    return (
+      <TreeView
+        hasSelectableNodes
+        data={options}
+        activeItems={activeItems}
+        onSelect={this.onSelect}
+        allExpanded={allExpanded}
+      />
+    );
+  }
+}
+```
+
 ### With search
 
 ```js
@@ -168,7 +270,13 @@ class SearchTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example2-Sources',
-        children: [{ name: 'Application 4', id: 'example2-App4', children: [{ name: 'Settingexample2-s', id: 'example2-App4Settings' }] }]
+        children: [
+          {
+            name: 'Application 4',
+            id: 'example2-App4',
+            children: [{ name: 'Settingexample2-s', id: 'example2-App4Settings' }]
+          }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -357,7 +465,9 @@ class CheckboxTreeView extends React.Component {
         name: 'Really really really long folder name that overflows the container it is in',
         id: 'example3-Long',
         checkProps: { 'aria-label': 'long-check', checked: false },
-        children: [{ name: 'Application 5', id: 'example3-App5', checkProps: { 'aria-label': 'app-5-check', checked: false } }]
+        children: [
+          { name: 'Application 5', id: 'example3-App5', checkProps: { 'aria-label': 'app-5-check', checked: false } }
+        ]
       }
     ];
 
@@ -522,7 +632,9 @@ class IconTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example4-Sources',
-        children: [{ name: 'Application 4', id: 'example4-App4', children: [{ name: 'Settings', id: 'example4-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example4-App4', children: [{ name: 'Settings', id: 'example4-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -613,7 +725,9 @@ class BadgesTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example5-Sources',
-        children: [{ name: 'Application 4', id: 'example5-App4', children: [{ name: 'Settings', id: 'example5-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example5-App4', children: [{ name: 'Settings', id: 'example5-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -842,7 +956,9 @@ class IconTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example7-Sources',
-        children: [{ name: 'Application 4', id: 'example7-App4', children: [{ name: 'Settings', id: 'example7-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example7-App4', children: [{ name: 'Settings', id: 'example7-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -911,7 +1027,9 @@ const GuidesTreeView: React.FunctionComponent = () => {
     {
       name: 'Sources',
       id: 'example8-Sources',
-      children: [{ name: 'Application 4', id: 'example8-App4', children: [{ name: 'Settings', id: 'example8-App4Settings' }] }]
+      children: [
+        { name: 'Application 4', id: 'example8-App4', children: [{ name: 'Settings', id: 'example8-App4Settings' }] }
+      ]
     },
     {
       name: 'Really really really long folder name that overflows the container it is in',