@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/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" />;
+};

package/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" />;
+};

package/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>
+  );
+};

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

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

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import {
+  TreeView,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  TreeViewDataItem
+} from '@patternfly/react-core';
+import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
+import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const TreeViewWithActionItems: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [isOpen, setIsOpen] = React.useState<boolean>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+
+  const onToggle = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const onAppLaunchSelect = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example7-AppLaunch',
+      action: (
+        <Dropdown
+          onSelect={onAppLaunchSelect}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={isOpen}
+              onClick={onToggle}
+              variant="plain"
+              aria-label="Tree view with actions example kebab toggle"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem>Action</DropdownItem>
+            <DropdownItem
+              to="#default-link2"
+              // Prevent the default onClick functionality for example purposes
+              onClick={(ev) => ev.preventDefault()}
+            >
+              Link
+            </DropdownItem>
+            <DropdownItem isDisabled>Disabled Action</DropdownItem>
+            <DropdownItem isDisabled to="#default-link4">
+              Disabled Link
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
+      ),
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example7-App1',
+          action: (
+            <Button variant="plain" aria-label="Launch app 1">
+              <ClipboardIcon />
+            </Button>
+          ),
+          actionProps: {
+            'aria-label': 'Launch app 1'
+          },
+          children: [
+            { name: 'Settings', id: 'example7-App1Settings' },
+            { name: 'Current', id: 'example7-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example7-App2',
+          action: (
+            <Button variant="plain" aria-label="Launch app 1">
+              <HamburgerIcon />
+            </Button>
+          ),
+          children: [
+            { name: 'Settings', id: 'example7-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'example7-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'example7-LoadApp1' },
+                { name: 'Loading App 2', id: 'example7-LoadApp2' },
+                { name: 'Loading App 3', id: 'example7-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example7-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example7-App3',
+          children: [
+            { name: 'Settings', id: 'example7-App3Settings' },
+            { name: 'Current', id: 'example7-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example7-Sources',
+      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',
+      id: 'example7-Long',
+      children: [{ name: 'Application 5', id: 'example7-App5' }]
+    }
+  ];
+  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} />;
+};

package/src/components/TreeView/examples/TreeViewWithBadges.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 />;
+};