chore(TreeView): converted examples to TypeScript

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

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

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

@@ -0,0 +1,191 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewCheckbox: React.FunctionComponent = () => {
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example3-AppLaunch',
+      checkProps: { 'aria-label': 'app-launcher-check', checked: false },
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example3-App1',
+          checkProps: { checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App1Settings',
+              checkProps: { checked: false }
+            },
+            {
+              name: 'Current',
+              id: 'example3-App1Current',
+              checkProps: { checked: false }
+            }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example3-App2',
+          checkProps: { checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App2Settings',
+              checkProps: { checked: false }
+            },
+            {
+              name: 'Loader',
+              id: 'example3-App2Loader',
+              checkProps: { checked: false },
+              children: [
+                {
+                  name: 'Loading App 1',
+                  id: 'example3-LoadApp1',
+                  checkProps: { checked: false }
+                },
+                {
+                  name: 'Loading App 2',
+                  id: 'example3-LoadApp2',
+                  checkProps: { checked: false }
+                },
+                {
+                  name: 'Loading App 3',
+                  id: 'example3-LoadApp3',
+                  checkProps: { checked: false }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example3-Cost',
+      checkProps: { 'aria-label': 'cost-check', checked: false },
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example3-App3',
+          checkProps: { 'aria-label': 'app-3-check', checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App3Settings',
+              checkProps: { 'aria-label': 'app-3-settings-check', checked: false }
+            },
+            {
+              name: 'Current',
+              id: 'example3-App3Current',
+              checkProps: { 'aria-label': 'app-3-current-check', checked: false }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example3-Sources',
+      checkProps: { 'aria-label': 'sources-check', checked: false },
+      children: [
+        {
+          name: 'Application 4',
+          id: 'example3-App4',
+          checkProps: { 'aria-label': 'app-4-check', checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App4Settings',
+              checkProps: { 'aria-label': 'app-4-settings-check', checked: false }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      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 } }
+      ]
+    }
+  ];
+
+  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
+
+  const onCheck = (event: React.ChangeEvent, treeViewItem: TreeViewDataItem) => {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    const checkedItemTree = options.map(opt => Object.assign({}, opt)).filter(item => filterItems(item, treeViewItem));
+    const flatCheckedItems = flattenTree(checkedItemTree);
+
+    setCheckedItems(
+      checked
+        ? checkedItems.concat(flatCheckedItems.filter(item => !checkedItems.some(i => i.id === item.id)))
+        : checkedItems.filter(item => !flatCheckedItems.some(i => i.id === item.id))
+    );
+  };
+
+  // Helper functions
+  const isChecked = (dataItem: TreeViewDataItem) => checkedItems.some(item => item.id === dataItem.id);
+  const areAllDescendantsChecked = (dataItem: TreeViewDataItem) =>
+    dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);
+  const areSomeDescendantsChecked = (dataItem: TreeViewDataItem) =>
+    dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);
+
+  const flattenTree = (tree: TreeViewDataItem[]) => {
+    let result: TreeViewDataItem[] = [];
+    tree.forEach(item => {
+      result.push(item);
+      if (item.children) {
+        result = result.concat(flattenTree(item.children));
+      }
+    });
+    return result;
+  };
+
+  const mapTree = (item: TreeViewDataItem) => {
+    const hasCheck = areAllDescendantsChecked(item);
+    // Reset checked properties to be updated
+    if (item.checkProps) {
+      item.checkProps.checked = false;
+
+      if (hasCheck) {
+        item.checkProps.checked = true;
+      } else {
+        const hasPartialCheck = areSomeDescendantsChecked(item);
+        if (hasPartialCheck) {
+          item.checkProps.checked = null;
+        }
+      }
+
+      if (item.children) {
+        return {
+          ...item,
+          children: item.children.map(child => mapTree(child))
+        };
+      }
+    }
+    return item;
+  };
+
+  const filterItems = (item: TreeViewDataItem, checkedItem: TreeViewDataItem) => {
+    if (item.id === checkedItem.id) {
+      return true;
+    }
+
+    if (item.children) {
+      return (
+        (item.children = item.children
+          .map(opt => Object.assign({}, opt))
+          .filter(child => filterItems(child, checkedItem))).length > 0
+      );
+    }
+  };
+  const mapped = options.map(item => mapTree(item));
+  return <TreeView data={mapped} onCheck={onCheck} hasChecks />;
+};

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

@@ -0,0 +1,65 @@
+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" />;
+};