@patternfly/react-data-view 6.1.0-prerelease.1 → 7.0.0-prerelease.2

package/src/DataViewTable/DataViewTable.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable, DataViewTrTree } from './DataViewTable';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  children?: Repository[];
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rows = repositories.map(repo => ({ row: Object.values(repo) }));
+
+const repositoriesTree: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+      { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+    ]
+  },
+  { 
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four',
+    children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
+  },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+
+
+const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(repo.children
+    ? { 
+      children: buildRows(repo.children) // build rows for children
+    }
+    : {})
+}));
+
+const treeRows = buildRows(repositoriesTree);
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+describe('DataViewTable component', () => {
+  test('should render a basic table correctly', () => {
+    const { container } = render(
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render a tree table correctly', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTable/DataViewTable.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import {
+  TdProps,
+  ThProps,
+  TrProps
+} from '@patternfly/react-table';
+import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+
+// Table head typings
+export type DataViewTh = ReactNode | { cell: ReactNode; props?: ThProps };
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+
+// Basic table typings
+export interface DataViewTrObject { row: DataViewTd[], id?: string, props?: TrProps }
+export type DataViewTd = ReactNode | { cell: ReactNode; props?: TdProps };
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
+
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+
+// Tree table typings
+export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+
+export type DataViewTableProps =
+  | ({
+      isTreeTable: true;
+    } & DataViewTableTreeProps)
+  | ({
+      isTreeTable?: false;
+    } & DataViewTableBasicProps);
+
+export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
+);
+
+export default DataViewTable;