@patternfly/react-data-view 1.0.0-prerelease.4 → 1.0.0-prerelease.5

package/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const selection = useDataViewSelection({});
+  const { selected, onSelect, isSelected } = selection;
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, repositories);
+  };
+
+  return (
+    <DataView>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+      />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            <Th key="row-select"/>
+            {Object.values(cols).map((column, index) => (
+              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {repositories.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              <Td
+                key={`select-${rowIndex}`}
+                select={{
+                  rowIndex,
+                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
+                  isSelected: isSelected(repo),
+                  isDisabled: false
+                }}
+              />
+              {Object.keys(cols).map((column, colIndex) => (
+                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </DataView>
+  );
+}

package/patternfly-docs/content/extensions/data-view/examples/{DataView/DataView.md → Layout/Layout.md}

@@ -5,16 +5,18 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Data view layout
+id: Layout
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 2
 propComponents: ['DataView']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
 import { useMemo } from 'react';
-import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
@@ -24,14 +26,14 @@ The **data view** component renders record data in a configured layout.
 
 Data view is expected to consist of header, data part and footer stacked below each other and passed as `children`.
 
-```js file="./DataViewLayoutExample.tsx"
+```js file="./AbstractLayoutExample.tsx"
 
 ```
 
 ### Predefined layout components
 
-You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/data-view/data-view-toolbar) for more information 
+You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/extensions/data-view/components#dataviewtoolbar) for more information 
 
-```js file="./DataViewPredefinedLayoutExample.tsx"
+```js file="./PredefinedLayoutExample.tsx"
 
 ```

package/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+  const selection = useDataViewSelection({});
+  const { selected, onSelect, isSelected } = selection;
+
+  const pageData = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, repositories);
+    value === BulkSelectValue.nonePage && onSelect(false, pageData);
+    value === BulkSelectValue.page && onSelect(true, pageData);
+  };
+
+  return (
+    <DataView>
+      <DataViewToolbar 
+        ouiaId='LayoutExampleHeader' 
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            pageCount={pageData.length}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            pageSelected={pageData.every(item => isSelected(item))}
+            pagePartiallySelected={pageData.some(item => isSelected(item)) && !pageData.every(item => isSelected(item))}
+            onSelect={handleBulkSelect}
+          />
+        } 
+        pagination={
+          <Pagination 
+            perPageOptions={perPageOptions} 
+            itemCount={repositories.length} 
+            {...pagination} 
+          />
+        } 
+      />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            <Th key="row-select"/>
+            {Object.values(cols).map((column, index) => (
+              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {pageData.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              <Td
+                key={`select-${rowIndex}`}
+                select={{
+                  rowIndex,
+                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
+                  isSelected: isSelected(repo),
+                  isDisabled: false
+                }}
+              />
+              {Object.keys(cols).map((column, colIndex) => (
+                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      <DataViewToolbar
+        ouiaId='LayoutExampleFooter'
+        pagination={
+          <Pagination 
+            isCompact  
+            perPageOptions={perPageOptions} 
+            itemCount={repositories.length} 
+            {...pagination} 
+          />
+        } 
+      />
+    </DataView>
+  );
+}

package/src/DataView/DataView.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataView from './DataView';
+
+const layoutItemStyling = {
+  width: '100%',
+  height: '5rem',
+  padding: 'var(--pf-t--global--spacer--md)',
+  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+};
+
+describe('DataView component', () => {
+  test('should render correctly', () => {
+    expect(render(
+      <DataView>
+        <div style={layoutItemStyling}>Header</div>
+        <div style={layoutItemStyling}>Data representation</div>
+        <div style={layoutItemStyling}>Footer</div>
+      </DataView>)).toMatchSnapshot();
+  });
+});

package/src/DataView/__snapshots__/DataView.test.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataView component should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="pf-v6-l-stack"
+        data-ouia-component-id="DataView-stack}"
+      >
+        <div
+          class="pf-v6-l-stack__item"
+          data-ouia-component-id="DataView-stack-item-0"
+        >
+          <div
+            style="width: 100%; height: 5rem;"
+          >
+            Header
+          </div>
+        </div>
+        <div
+          class="pf-v6-l-stack__item"
+          data-ouia-component-id="DataView-stack-item-1"
+        >
+          <div
+            style="width: 100%; height: 5rem;"
+          >
+            Data representation
+          </div>
+        </div>
+        <div
+          class="pf-v6-l-stack__item"
+          data-ouia-component-id="DataView-stack-item-2"
+        >
+          <div
+            style="width: 100%; height: 5rem;"
+          >
+            Footer
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="pf-v6-l-stack"
+      data-ouia-component-id="DataView-stack}"
+    >
+      <div
+        class="pf-v6-l-stack__item"
+        data-ouia-component-id="DataView-stack-item-0"
+      >
+        <div
+          style="width: 100%; height: 5rem;"
+        >
+          Header
+        </div>
+      </div>
+      <div
+        class="pf-v6-l-stack__item"
+        data-ouia-component-id="DataView-stack-item-1"
+      >
+        <div
+          style="width: 100%; height: 5rem;"
+        >
+          Data representation
+        </div>
+      </div>
+      <div
+        class="pf-v6-l-stack__item"
+        data-ouia-component-id="DataView-stack-item-2"
+      >
+        <div
+          style="width: 100%; height: 5rem;"
+        >
+          Footer
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/DataViewToolbar/DataViewToolbar.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewToolbar from './DataViewToolbar';
+import { Pagination } from '@patternfly/react-core';
+
+describe('DataViewToolbar component', () => {
+  test('should render correctly', () => {
+    expect(render(
+      <DataViewToolbar pagination={<Pagination page={1} perPage={10} />} />)).toMatchSnapshot();
+  });
+});

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,21 +1,27 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 
-export interface DataViewToolbarProps {
+export interface DataViewToolbarProps extends PropsWithChildren {
   /** Toolbar className */
   className?: string;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** React component to display bulk select */
+  bulkSelect?: React.ReactNode;
   /** React component to display pagination */
   pagination?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>> = ({ className, ouiaId = 'DataViewToolbar', pagination, children, ...props }: React.PropsWithChildren<DataViewToolbarProps>) => (
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children, ...props }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className} {...props}>
     <ToolbarContent>
+      {bulkSelect && (
+        <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
+          {bulkSelect}
+        </ToolbarItem>
+      )}
       {pagination && (
-        <ToolbarItem variant={ToolbarItemVariant.pagination}>
-          { /* TO DO: Make the pagination work later */ }
+        <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
           {pagination}
         </ToolbarItem>
       )}
@@ -25,3 +31,4 @@ export const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarPr
 );
 
 export default DataViewToolbar;
+