@patternfly/react-table 4.44.10 → 4.44.14

package/src/components/TableComposable/examples/ComposableTableTree.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } 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 ComposableTableTree: 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 columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces'
+  };
+
+  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;
+  };
+
+  /** 
+    Recursive function which flattens the data into an array of flattened TreeRowWrapper components
+    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 renderRows = (
+    [node, ...remainingNodes]: RepositoriesTreeNode[],
+    level = 1,
+    posinset = 1,
+    rowIndex = 0,
+    isHidden = false
+  ): React.ReactNode[] => {
+    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 />;
+    }
+
+    const treeRow: TdProps['treeRow'] = {
+      onCollapse: () =>
+        setExpandedNodeNames(prevExpanded => {
+          const otherExpandedNodeNames = prevExpanded.filter(name => name !== node.name);
+          return isExpanded ? otherExpandedNodeNames : [...otherExpandedNodeNames, node.name];
+        }),
+      onToggleRowDetails: () =>
+        setExpandedDetailsNodeNames(prevDetailsExpanded => {
+          const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter(name => name !== node.name);
+          return isDetailsExpanded ? otherDetailsExpandedNodeNames : [...otherDetailsExpandedNodeNames, node.name];
+        }),
+      onCheckChange: (_event, isChecking) => {
+        const nodeNamesToCheck = getDescendants(node).map(n => n.name);
+        setSelectedNodeNames(prevSelected => {
+          const otherSelectedNodeNames = prevSelected.filter(name => !nodeNamesToCheck.includes(name));
+          return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, ...nodeNamesToCheck];
+        });
+      },
+      rowIndex,
+      props: {
+        isExpanded,
+        isDetailsExpanded,
+        isHidden,
+        'aria-level': level,
+        'aria-posinset': posinset,
+        'aria-setsize': node.children ? node.children.length : 0,
+        isChecked,
+        icon
+      }
+    };
+
+    return [
+      <TreeRowWrapper key={node.name} row={{ props: treeRow.props }}>
+        <Td dataLabel={columnNames.name} treeRow={treeRow}>
+          {node.name}
+        </Td>
+        <Td dataLabel={columnNames.branches}>{node.branches}</Td>
+        <Td dataLabel={columnNames.prs}>{node.pullRequests}</Td>
+        <Td dataLabel={columnNames.workspaces}>{node.workspaces}</Td>
+      </TreeRowWrapper>,
+      ...(node.children && node.children.length
+        ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
+        : []),
+      ...renderRows(
+        remainingNodes,
+        level,
+        posinset + 1,
+        rowIndex + 1 + ((node.children && node.children.length) || 0),
+        isHidden
+      )
+    ];
+  };
+
+  return (
+    <TableComposable isTreeTable aria-label="Tree table">
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>{renderRows(data)}</Tbody>
+    </TableComposable>
+  );
+};

package/src/demos/Table.md

@@ -333,17 +333,18 @@ class ExpandCollapseAllTableDemo extends React.Component {
     this.toggleSelectAll = this.toggleSelectAll.bind(this);
   }
 
-  onCollapse(event, rowKey, isOpen) {
+  onCollapse(event, rowIndex, isOpen) {
     const { rows, expandedRows, expandCollapseToggle } = this.state;
     const expandableRowLength = this.state.rows.filter(row => row.isOpen !== undefined).length;
     /**
      * Please do not use rowKey as row index for more complex tables.
      * Rather use some kind of identifier like ID passed with each row.
      */
-    rows[rowKey].isOpen = isOpen;
+    const newRows = Array.from(rows);
+    newRows[rowIndex] = { ...newRows[rowIndex], isOpen };
     const updatedExpandedRows = isOpen ? expandedRows + 1 : expandedRows - 1;
     this.setState({
-      rows,
+      rows: newRows,
       expandedRows: updatedExpandedRows,
       expandCollapseToggle:
         updatedExpandedRows === expandableRowLength
@@ -385,7 +386,7 @@ class ExpandCollapseAllTableDemo extends React.Component {
       selectedRows = isSelected ? selectableRowLength : 0;
     } else {
       rows = [...this.state.rows];
-      rows[rowId].selected = isSelected;
+      rows[rowId] = { ...rows[rowId], selected: isSelected };
       selectedRows = isSelected ? selectedRows + 1 : selectedRows - 1;
       isChecked = selectedRows === 0 ? false : selectedRows === selectableRowLength ? true : null;
     }
@@ -864,7 +865,7 @@ class ColumnManagementAction extends React.Component {
       });
     } else {
       rows = [...this.state.rows];
-      rows[rowId].selected = isSelected;
+      rows[rowId] = { ...rows[rowId], selected: isSelected };
     }
     this.setState({
       rows
@@ -1576,7 +1577,7 @@ class ColumnManagementAction extends React.Component {
       });
     } else {
       rows = [...this.state.rows];
-      rows[rowId].selected = isSelected;
+      rows[rowId] = { ...rows[rowId], selected: isSelected };
     }
     this.setState({
       rows

package/src/components/Table/examples/DemoSortableTable.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody, TableVariant, sortable, SortByDirection } from '@patternfly/react-table';
-
-export default class DemoSortableTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      columns: [
-        { title: 'Repositories', transforms: [sortable] },
-        'Branches',
-        { title: 'Pull requests', transforms: [sortable] },
-        'Workspaces',
-        'Last Commit'
-      ],
-      rows: [props.firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']],
-      sortBy: {}
-    };
-    this.onSort = this.onSort.bind(this);
-  }
-
-  onSort(_event, index, direction) {
-    const sortedRows = this.state.rows.sort((a, b) => {
-      if (a[index] < b[index]) {
-        return -1;
-      }
-      return a[index] > b[index] ? 1 : 0;
-    });
-
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      },
-      rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()
-    });
-  }
-
-  render() {
-    const { id } = this.props;
-    const { columns, rows, sortBy } = this.state;
-
-    return (
-      <Table
-        aria-label="Sortable Table"
-        variant={TableVariant.compact}
-        sortBy={sortBy}
-        onSort={this.onSort}
-        cells={columns}
-        rows={rows}
-        className="pf-m-no-border-rows"
-        id={id}
-        isNested
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>
-    );
-  }
-}
-
-DemoSortableTable.propTypes = {
-  firstColumnRows: PropTypes.array.isRequired,
-  id: PropTypes.string.isRequired
-};

package/src/components/TableComposable/examples/DemoSortableTable.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody, TableVariant, sortable, SortByDirection } from '@patternfly/react-table';
-
-export default class DemoSortableTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      columns: [
-        { title: 'Repositories', transforms: [sortable] },
-        'Branches',
-        { title: 'Pull requests', transforms: [sortable] },
-        'Workspaces',
-        'Last Commit'
-      ],
-      rows: [props.firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']],
-      sortBy: {}
-    };
-    this.onSort = this.onSort.bind(this);
-  }
-
-  onSort(_event, index, direction) {
-    const sortedRows = this.state.rows.sort((a, b) => {
-      if (a[index] < b[index]) {
-        return -1;
-      }
-      return a[index] > b[index] ? 1 : 0;
-    });
-
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      },
-      rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()
-    });
-  }
-
-  render() {
-    const { id } = this.props;
-    const { columns, rows, sortBy } = this.state;
-
-    return (
-      <Table
-        aria-label="Sortable Table"
-        variant={TableVariant.compact}
-        sortBy={sortBy}
-        onSort={this.onSort}
-        cells={columns}
-        rows={rows}
-        className="pf-m-no-border-rows"
-        id={id}
-        isNested
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>
-    );
-  }
-}
-
-DemoSortableTable.propTypes = {
-  firstColumnRows: PropTypes.array.isRequired,
-  id: PropTypes.string.isRequired
-};