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

package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md

@@ -1,31 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Data view
-# Sidenav secondary level section
-# should be the same for all markdown files
-id: Components
-# 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: 4
-propComponents: ['DataViewToolbar']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
----
-import { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-## Data view toolbar
-
-The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
-
-Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
-
-### Basic example
-
-```js file="./DataViewToolbarExample.tsx"
-
-```
-

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-import { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-
-export const BasicExample: React.FunctionComponent = () => (
-  <DataViewToolbar 
-    pagination={
-      <Pagination page={1} perPage={10} />
-    }
-    bulkSelect={
-      <BulkSelect
-        selectedCount={0}
-        pageCount={5}
-        onSelect={() => null}
-      />  
-    } 
-  />
-)

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

@@ -1,77 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Data view
-# Sidenav secondary level section
-# should be the same for all markdown files
-id: Functionality
-# 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: 3
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
----
-import { useMemo } from 'react';
-import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
-import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
-import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
-import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-This is a list of functionality you can use to manage data displayed in the **data view**.
-
-# Pagination
-Allows to display data records on multiple pages and display the pagination state.
-
-### Toolbar usage
-Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
-
-### Pagination state
-
-The `useDataViewPagination` hook manages the pagination state of the data view. 
-
-**Initial values:**
-- `perPage` initial value
-- (optional) `page` initial value
-
-The retrieved values are named to match the PatternFly [pagination](/components/pagination) component props, so you can easily spread them.
-
-**Return values:**
-- current `page` number
-- `onSetPage` to modify current page
-- items `perPage` value
-- `onPerPageSelect` to modify per page value
-
-### Pagination example
-```js file="./PaginationExample.tsx"
-
-```
-
-# Selection
-Allows to select data records inside the data view and show the selection state.
-
-### Toolbar usage
-Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
-
-### Selection state
-
-The `useDataViewSelection` hook manages the selection state of the data view. 
-
-**Initial values:**
-- (optional) `initialSelected` array of record's identifiers selected by default 
-- (optional) `matchOption` function to check if given record is selected
-
-*When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.*
-
-**Return values:**
-- `selected` array of currently selected records
-- `isSelected` function returning the selection state for given record
-- `onSelect` callback to modify the selection state and accepting `isSelecting` flag indicating if records are changing to selected or deselected and `items` containing affected records 
-
-### Selection example
-
-```js file="./SelectionExample.tsx"
-
-```
-

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

@@ -1,65 +0,0 @@
-import React, { useMemo } from 'react';
-import { Pagination } from '@patternfly/react-core';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
-import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
-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 data = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
-
-  return (
-    <DataView>
-      <DataViewToolbar ouiaId='DataViewHeader' 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`}>
-            {Object.values(cols).map((column, index) => <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>)}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {data.map((repo, rowIndex) => (
-            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
-              {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='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
-    </DataView>
-  )}

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

@@ -1,88 +0,0 @@
-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/Layout/Layout.md

@@ -1,39 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Data view
-# Sidenav secondary level section
-# should be the same for all markdown files
-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/Layout/Layout.md
----
-import { useMemo } from 'react';
-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';
-
-The **data view** component renders record data in a configured layout.
-
-### Layout example
-
-Data view is expected to consist of header, data part and footer stacked below each other and passed as `children`.
-
-```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](/extensions/data-view/components#dataviewtoolbar) for more information 
-
-```js file="./PredefinedLayoutExample.tsx"
-
-```

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

@@ -1,120 +0,0 @@
-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>
-  );
-}