@patternfly/react-table 4.44.11 → 4.44.15

package/src/components/Table/examples/LegacyTableSortableCustom.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { TableProps, sortable, info, Table, TableBody, TableHeader } from '@patternfly/react-table';
+import {
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  OptionsMenu,
+  OptionsMenuItemGroup,
+  OptionsMenuItem,
+  OptionsMenuSeparator,
+  OptionsMenuToggle
+} from '@patternfly/react-core';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const LegacyTableSortableCustom: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },
+    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  // Index of the currently sorted column
+  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
+  // as the identifier of the sorted column. See the "Compound expandable" example.
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+
+  // Sort direction of the currently sorted column
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+
+  // Sort dropdown expansion
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+
+  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
+  // This example is trivial since our data objects just contain strings, but if the data was more complex
+  // this would be a place to return simplified string or number versions of each column to sort by.
+  const getSortableRowValues = (repo: Repository): (string | number)[] => {
+    const { name, branches, prs, workspaces, lastCommit } = repo;
+    return [name, branches, prs, workspaces, lastCommit];
+  };
+
+  // Note that we perform the sort as part of the component's render logic and not in onSort.
+  // We shouldn't store the list of data in state because we don't want to have to sync that with props.
+  let sortedRepositories = repositories;
+  if (activeSortIndex !== null) {
+    sortedRepositories = repositories.sort((a, b) => {
+      const aValue = getSortableRowValues(a)[activeSortIndex];
+      const bValue = getSortableRowValues(b)[activeSortIndex];
+      if (typeof aValue === 'number') {
+        // Numeric sort
+        if (activeSortDirection === 'asc') {
+          return (aValue as number) - (bValue as number);
+        }
+        return (bValue as number) - (aValue as number);
+      } else {
+        // String sort
+        if (activeSortDirection === 'asc') {
+          return (aValue as string).localeCompare(bValue as string);
+        }
+        return (bValue as string).localeCompare(aValue as string);
+      }
+    });
+  }
+
+  const columns: TableProps['cells'] = [
+    { title: 'Repositories', transforms: [sortable] },
+    {
+      title: 'Branches',
+      transforms: [
+        info({
+          tooltip: 'More information about branches'
+        }),
+        sortable
+      ]
+    },
+    { title: 'Pull requests', transforms: [sortable] },
+    {
+      title: 'Workspaces',
+      transforms: [sortable]
+    },
+    {
+      title: 'Last commit',
+      transforms: [
+        info({
+          tooltip: 'More information about commits'
+        }),
+        sortable
+      ]
+    }
+  ];
+  const rows: TableProps['rows'] = sortedRepositories.map(repo => [
+    repo.name,
+    repo.branches,
+    repo.prs,
+    repo.workspaces,
+    repo.lastCommit
+  ]);
+
+  return (
+    <React.Fragment>
+      <Toolbar id="toolbar">
+        <ToolbarContent>
+          <ToolbarItem>
+            <OptionsMenu
+              id="options-menu-multiple-options-example"
+              menuItems={[
+                <OptionsMenuItemGroup key="first group" aria-label="Sort column">
+                  {Object.values(columnNames).map((columnName, columnIndex) => (
+                    <OptionsMenuItem
+                      key={columnName}
+                      isSelected={activeSortIndex === columnIndex}
+                      onSelect={() => {
+                        setActiveSortIndex(columnIndex);
+                        setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');
+                      }}
+                    >
+                      {columnName}
+                    </OptionsMenuItem>
+                  ))}
+                </OptionsMenuItemGroup>,
+                <OptionsMenuSeparator key="separator" />,
+                <OptionsMenuItemGroup key="second group" aria-label="Sort direction">
+                  <OptionsMenuItem
+                    onSelect={() => setActiveSortDirection('asc')}
+                    isSelected={activeSortDirection === 'asc'}
+                    id="ascending"
+                    key="ascending"
+                  >
+                    Ascending
+                  </OptionsMenuItem>
+                  <OptionsMenuItem
+                    onSelect={() => setActiveSortDirection('desc')}
+                    isSelected={activeSortDirection === 'desc'}
+                    id="descending"
+                    key="descending"
+                  >
+                    Descending
+                  </OptionsMenuItem>
+                </OptionsMenuItemGroup>
+              ]}
+              isOpen={isSortDropdownOpen}
+              toggle={
+                <OptionsMenuToggle
+                  hideCaret
+                  onToggle={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
+                  toggleTemplate={<SortAmountDownIcon />}
+                />
+              }
+              isPlain
+              isGrouped
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Table
+        aria-label="Sortable Table with Custom Toolbar"
+        sortBy={{
+          index: activeSortIndex,
+          direction: activeSortDirection
+        }}
+        onSort={(_event, index, direction) => {
+          setActiveSortIndex(index);
+          setActiveSortDirection(direction);
+        }}
+        cells={columns}
+        rows={rows}
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+    </React.Fragment>
+  );
+};

package/src/components/Table/examples/LegacyTableTextModifiers.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Table, TableHeader, TableBody, cellWidth, TableText, TableProps } from '@patternfly/react-table';
+
+// This example has been simplified to focus on the text modifier props. In real usage,
+// you may want to derive your rows from typed underlying data and minimal state. See other examples.
+
+export const LegacyTableTextModifiers: React.FunctionComponent = () => {
+  const columns: TableProps['cells'] = [
+    { title: 'Truncating text', transforms: [cellWidth(30)] },
+    { title: 'Wrapping table header text. This th text will wrap instead of truncate.' }
+  ];
+  const rows: TableProps['rows'] = [
+    [
+      { title: <TableText wrapModifier="truncate">This text will truncate instead of wrap.</TableText> },
+      {
+        title: (
+          <TableText wrapModifier="nowrap">
+            <a href="#">This is a link that needs to be on one line and fully readable.</a>
+          </TableText>
+        )
+      }
+    ]
+  ];
+
+  return (
+    <Table aria-label="Table text with modifiers" cells={columns} rows={rows}>
+      <TableHeader />
+      <TableBody />
+    </Table>
+  );
+};

package/src/components/Table/examples/LegacyTableTree.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  treeRow,
+  IRow,
+  OnTreeRowCollapse,
+  OnCheckChange,
+  OnToggleRowDetails
+} from '@patternfly/react-table';
+import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
+
+interface RepositoriesTreeNode {
+  name: string;
+  branches: string;
+  pullRequests: string;
+  workspaces: string;
+  children?: RepositoriesTreeNode[];
+}
+
+export const LegacyTableTree: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const data: RepositoriesTreeNode[] = [
+    {
+      name: 'Repositories one',
+      branches: 'Branch one',
+      pullRequests: 'Pull request one',
+      workspaces: 'Workplace one',
+      children: [
+        {
+          name: 'Repositories two',
+          branches: 'Branch two',
+          pullRequests: 'Pull request two',
+          workspaces: 'Workplace two',
+          children: [
+            {
+              name: 'Repositories three',
+              branches: 'Branch three',
+              pullRequests: 'Pull request three',
+              workspaces: 'Workplace three'
+            },
+            {
+              name: 'Repositories four',
+              branches: 'Branch four',
+              pullRequests: 'Pull request four',
+              workspaces: 'Workplace four'
+            }
+          ]
+        },
+        {
+          name: 'Repositories five',
+          branches: 'Branch five',
+          pullRequests: 'Pull request five',
+          workspaces: 'Workplace five'
+        },
+        {
+          name: 'Repositories six',
+          branches: 'Branch six',
+          pullRequests: 'Pull request six',
+          workspaces: 'Workplace six'
+        }
+      ]
+    },
+    {
+      name: 'Repositories seven',
+      branches: 'Branch seven',
+      pullRequests: 'Pull request seven',
+      workspaces: 'Workplace seven',
+      children: [
+        {
+          name: 'Repositories eight',
+          branches: 'Branch eight',
+          pullRequests: 'Pull request eight',
+          workspaces: 'Workplace eight'
+        }
+      ]
+    },
+    {
+      name: 'Repositories nine',
+      branches: 'Branch nine',
+      pullRequests: 'Pull request nine',
+      workspaces: 'Workplace nine'
+    }
+  ];
+
+  const [expandedNodeNames, setExpandedNodeNames] = React.useState<string[]>(['Repositories one']);
+  const [expandedDetailsNodeNames, setExpandedDetailsNodeNames] = React.useState<string[]>([]);
+  const [selectedNodeNames, setSelectedNodeNames] = React.useState<string[]>([]);
+
+  const getDescendants = (node: RepositoriesTreeNode): RepositoriesTreeNode[] =>
+    [node].concat(...(node.children ? node.children.map(getDescendants) : []));
+  const areAllDescendantsSelected = (node: RepositoriesTreeNode) =>
+    getDescendants(node).every(n => selectedNodeNames.includes(n.name));
+  const areSomeDescendantsSelected = (node: RepositoriesTreeNode) =>
+    getDescendants(node).some(n => selectedNodeNames.includes(n.name));
+
+  const isNodeChecked = (node: RepositoriesTreeNode) => {
+    if (areAllDescendantsSelected(node)) {
+      return true;
+    }
+    if (areSomeDescendantsSelected(node)) {
+      return null;
+    }
+    return false;
+  };
+
+  // We index the tree nodes in the order of the table rows, for looking up by rowIndex
+  const flattenedNodes: RepositoriesTreeNode[] = [];
+
+  /** 
+    Recursive function which flattens the data into an array of flattened IRow objects
+    params: 
+      - nodes - array of a single level of tree nodes
+      - level - number representing how deeply nested the current row is
+      - posinset - position of the row relative to this row's siblings
+      - isHidden - defaults to false, true if this row's parent is expanded
+      - currentRowIndex - position of the row relative to the entire table
+  */
+  const buildRows = (
+    [node, ...remainingNodes]: RepositoriesTreeNode[],
+    level = 1,
+    posinset = 1,
+    rowIndex = 0,
+    isHidden = false
+  ): IRow[] => {
+    if (!node) {
+      return [];
+    }
+    const isExpanded = expandedNodeNames.includes(node.name);
+    const isDetailsExpanded = expandedDetailsNodeNames.includes(node.name);
+    const isChecked = isNodeChecked(node);
+    let icon = <LeafIcon />;
+    if (node.children) {
+      icon = isExpanded ? <FolderOpenIcon aria-hidden /> : <FolderIcon aria-hidden />;
+    }
+    flattenedNodes.push(node);
+    return [
+      {
+        cells: [node.name, node.branches, node.pullRequests, node.workspaces],
+        props: {
+          isExpanded,
+          isDetailsExpanded,
+          isHidden,
+          'aria-level': level,
+          'aria-posinset': posinset,
+          'aria-setsize': node.children ? node.children.length : 0,
+          isChecked,
+          icon
+        }
+      },
+      ...(node.children && node.children.length
+        ? buildRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
+        : []),
+      ...buildRows(
+        remainingNodes,
+        level,
+        posinset + 1,
+        rowIndex + 1 + ((node.children && node.children.length) || 0),
+        isHidden
+      )
+    ];
+  };
+
+  const onCollapse: OnTreeRowCollapse = (_event, rowIndex) => {
+    const node = flattenedNodes[rowIndex];
+    const isExpanded = expandedNodeNames.includes(node.name);
+    setExpandedNodeNames(prevExpanded => {
+      const otherExpandedNodeNames = prevExpanded.filter(name => name !== node.name);
+      return isExpanded ? otherExpandedNodeNames : [...otherExpandedNodeNames, node.name];
+    });
+  };
+
+  const onCheck: OnCheckChange = (_event, isChecking, rowIndex) => {
+    const node = flattenedNodes[rowIndex];
+    const nodeNamesToCheck = getDescendants(node).map(n => n.name);
+    setSelectedNodeNames(prevSelected => {
+      const otherSelectedNodeNames = prevSelected.filter(name => !nodeNamesToCheck.includes(name));
+      return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, ...nodeNamesToCheck];
+    });
+  };
+
+  const onToggleRowDetails: OnToggleRowDetails = (_event, rowIndex) => {
+    const node = flattenedNodes[rowIndex];
+    const isDetailsExpanded = expandedDetailsNodeNames.includes(node.name);
+    setExpandedDetailsNodeNames(prevDetailsExpanded => {
+      const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter(name => name !== node.name);
+      return isDetailsExpanded ? otherDetailsExpandedNodeNames : [...otherDetailsExpandedNodeNames, node.name];
+    });
+  };
+
+  return (
+    <Table
+      isTreeTable
+      aria-label="Tree table"
+      cells={[
+        {
+          title: 'Repositories',
+          cellTransforms: [treeRow(onCollapse, onCheck, onToggleRowDetails)]
+        },
+        'Branches',
+        'Pull requests',
+        'Workspaces'
+      ]}
+      rows={buildRows(data)}
+    >
+      <TableHeader />
+      <TableBody />
+    </Table>
+  );
+};