chore(TreeView): converted examples to TS

packages/react-core/src/components/TreeView/examples/TreeViewCompact.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewCompact: React.FunctionComponent = () => {
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
+      title: 'apiVersion',
+      id: 'example9-apiVersion'
+    },
+    {
+      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
+      title: 'kind',
+      id: 'example9-kind'
+    },
+    {
+      name: 'Standard metadata object',
+      title: 'metadata',
+      id: 'example9-metadata'
+    },
+    {
+      name: 'Standard metadata object',
+      title: 'spec',
+      id: 'example9-spec',
+      children: [
+        {
+          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
+          title: 'minReadySeconds',
+          id: 'example9-minReadySeconds'
+        },
+        {
+          name: 'Indicates that the deployment is paused',
+          title: 'paused',
+          id: 'example9-paused'
+        },
+        {
+          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
+          title: 'progressDeadlineSeconds',
+          id: 'example9-progressDeadlineSeconds',
+          children: [
+            {
+              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
+              title: 'revisionHistoryLimit',
+              id: 'example9-revisionHistoryLimit',
+              children: [
+                {
+                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
+                  title: 'matchLabels',
+                  id: 'example9-matchLabels'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ];
+  return <TreeView data={options} variant="compact" />;
+};

packages/react-core/src/components/TreeView/examples/TreeViewCompactNoBackground.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewCompactNoBackground: React.FunctionComponent = () => {
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
+      title: 'apiVersion',
+      id: 'example10-apiVersion'
+    },
+    {
+      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
+      title: 'kind',
+      id: 'example10-kind'
+    },
+    {
+      name: 'Standard metadata object',
+      title: 'metadata',
+      id: 'example10-metadata'
+    },
+    {
+      name: 'Standard metadata object',
+      title: 'spec',
+      id: 'example10-spec',
+      children: [
+        {
+          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
+          title: 'minReadySeconds',
+          id: 'example10-minReadySeconds'
+        },
+        {
+          name: 'Indicates that the deployment is paused',
+          title: 'paused',
+          id: 'example10-paused'
+        },
+        {
+          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
+          title: 'progressDeadlineSeconds',
+          id: 'example10-progressDeadlineSeconds',
+          children: [
+            {
+              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
+              title: 'revisionHistoryLimit',
+              id: 'example10-revisionHistoryLimit',
+              children: [
+                {
+                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
+                  title: 'matchLabels',
+                  id: 'example10-matchLabels'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ];
+  return <TreeView data={options} variant="compactNoBackground" />;
+};

packages/react-core/src/components/TreeView/examples/TreeViewDefault.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewDefault: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = React.useState<boolean>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+
+  const onToggle = (_event: React.MouseEvent) => {
+    setAllExpanded((prevAllExpanded) => !prevAllExpanded);
+  };
+
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example1-AppLaunch',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example1-App1',
+          children: [
+            { name: 'Settings', id: 'example1-App1Settings' },
+            { name: 'Current', id: 'example1-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example1-App2',
+          children: [
+            { name: 'Settings', id: 'example1-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'example1-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'example1-LoadApp1' },
+                { name: 'Loading App 2', id: 'example1-LoadApp2' },
+                { name: 'Loading App 3', id: 'example1-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example1-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example1-App3',
+          children: [
+            { name: 'Settings', id: 'example1-App3Settings' },
+            { name: 'Current', id: 'example1-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example1-Sources',
+      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',
+      id: 'example1-Long',
+      children: [{ name: 'Application 5', id: 'example1-App5' }]
+    }
+  ];
+  return (
+    <React.Fragment>
+      <Button variant="link" onClick={onToggle}>
+        {allExpanded && 'Collapse all'}
+        {!allExpanded && 'Expand all'}
+      </Button>
+      <TreeView data={options} activeItems={activeItems} onSelect={onSelect} allExpanded={allExpanded} />
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/TreeView/examples/TreeViewGuides.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const GuidesTreeView: React.FunctionComponent = () => {
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'Application launcher',
+      id: 'example8-AppLaunch',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example8-App1',
+          children: [
+            { name: 'Settings', id: 'example8-App1Settings' },
+            { name: 'Current', id: 'example8-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example8-App2',
+          children: [
+            { name: 'Settings', id: 'example8-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'example8-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'example8-LoadApp1' },
+                { name: 'Loading App 2', id: 'example8-LoadApp2' },
+                { name: 'Loading App 3', id: 'example8-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example8-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example8-App3',
+          children: [
+            { name: 'Settings', id: 'example8-App3Settings' },
+            { name: 'Current', id: 'example8-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example8-Sources',
+      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',
+      id: 'example8-Long',
+      children: [{ name: 'Application 5', id: 'example8-App5' }]
+    }
+  ];
+  return <TreeView data={options} hasGuides={true} />;
+};

packages/react-core/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewSelectableNodes: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    setActiveItems([treeViewItem]);
+  };
+
+  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={onSelect} />;
+};