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

package/dist/cjs/Hooks/index.d.ts

@@ -1 +1 @@
-export * from './useDataViewPagination';
+export * from './pagination';

package/dist/cjs/Hooks/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useDataViewPagination"), exports);
+__exportStar(require("./pagination"), exports);

package/dist/cjs/Hooks/pagination.d.ts

@@ -0,0 +1,13 @@
+export interface UseDataViewPaginationProps {
+    page?: number;
+    perPage: number;
+}
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {
+    onPerPageSelect: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => void;
+    onSetPage: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => void;
+    page: number;
+    perPage: number;
+};

package/dist/cjs/Hooks/pagination.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewPagination = void 0;
+const react_1 = require("react");
+const useDataViewPagination = ({ page = 1, perPage }) => {
+    const [state, setState] = (0, react_1.useState)({ page, perPage });
+    const onPerPageSelect = (_event, newPerPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { perPage: newPerPage })));
+    };
+    const onSetPage = (_event, newPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { page: newPage })));
+    };
+    return Object.assign(Object.assign({}, state), { onPerPageSelect,
+        onSetPage });
+};
+exports.useDataViewPagination = useDataViewPagination;

package/dist/cjs/Hooks/pagination.test.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const pagination_1 = require("./pagination");
+describe('useDataViewPagination', () => {
+    it('should get initial state correctly - no page', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ perPage: 7 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 1,
+            perPage: 7
+        });
+    });
+    it('should get initial state correctly - page set', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ page: 3, perPage: 5 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 5
+        });
+    });
+    it('should set page correctly', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ page: 3, perPage: 5 }));
+        (0, react_1.act)(() => {
+            result.current.onSetPage(undefined, 8);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 8,
+            perPage: 5
+        });
+    });
+    it('should set perPage correctly', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ page: 3, perPage: 5 }));
+        (0, react_1.act)(() => {
+            result.current.onPerPageSelect(undefined, 50);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 50
+        });
+    });
+});

package/dist/esm/Hooks/index.d.ts

@@ -1 +1 @@
-export * from './useDataViewPagination';
+export * from './pagination';

package/dist/esm/Hooks/index.js

@@ -1 +1 @@
-export * from './useDataViewPagination';
+export * from './pagination';

package/dist/esm/Hooks/pagination.d.ts

@@ -0,0 +1,13 @@
+export interface UseDataViewPaginationProps {
+    page?: number;
+    perPage: number;
+}
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {
+    onPerPageSelect: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => void;
+    onSetPage: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => void;
+    page: number;
+    perPage: number;
+};

package/dist/esm/Hooks/pagination.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+export const useDataViewPagination = ({ page = 1, perPage }) => {
+    const [state, setState] = useState({ page, perPage });
+    const onPerPageSelect = (_event, newPerPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { perPage: newPerPage })));
+    };
+    const onSetPage = (_event, newPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { page: newPage })));
+    };
+    return Object.assign(Object.assign({}, state), { onPerPageSelect,
+        onSetPage });
+};

package/dist/esm/Hooks/pagination.test.js

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewPagination } from './pagination';
+describe('useDataViewPagination', () => {
+    it('should get initial state correctly - no page', () => {
+        const { result } = renderHook(() => useDataViewPagination({ perPage: 7 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 1,
+            perPage: 7
+        });
+    });
+    it('should get initial state correctly - page set', () => {
+        const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 5
+        });
+    });
+    it('should set page correctly', () => {
+        const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }));
+        act(() => {
+            result.current.onSetPage(undefined, 8);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 8,
+            perPage: 5
+        });
+    });
+    it('should set perPage correctly', () => {
+        const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }));
+        act(() => {
+            result.current.onPerPageSelect(undefined, 50);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 50
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "1.0.0-prerelease.3",
+  "version": "1.0.0-prerelease.4",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -13,7 +13,8 @@ source: react
 propComponents: ['DataView']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
 ---
-import { Pagination } from '@patternfly/react-core';
+import { useMemo } from 'react';
+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';
 

package/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx

@@ -1,24 +1,65 @@
-import React from 'react';
+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 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)'
-};
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+]
 
-const PAGINATION = {
-  page: 1,
-  perPage: 1
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
 }
 
-export const BasicExample: React.FunctionComponent = () => (
-  <DataView>
-    <DataViewToolbar pagination={<Pagination {...PAGINATION} />} />
-    <div style={layoutItemStyling}>Data representation</div>
-    <DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter" />} />
-  </DataView>
-)
+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 pagination={<Pagination ouiaId={`${ouiaId}Header-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 pagination={<Pagination isCompact ouiaId={`${ouiaId}Footer-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+    </DataView>
+  )}

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

@@ -17,7 +17,4 @@ Data view hooks provide a predefined solution to manage state of the data view.
 
 ### useDataViewPagination()
 
-The `useDataViewPagination` hook manages the pagination state of the data view. It retrieves the current `page` and `perPage` values together with functions to set them (`setPage`, `setPerPage`)
-
-Coming soon...
-
+The `useDataViewPagination` hook manages the pagination state of the data view. It retrieves the current `page` and `perPage` values together with functions to set them (`onSetPage`, `onPerPageSelect`). You can easily spread the retrieved values to the PatternFly [pagination](/components/pagination) component and make it live.

package/src/Hooks/index.ts

@@ -1 +1 @@
-export * from './useDataViewPagination';
+export * from './pagination';

package/src/Hooks/pagination.test.tsx

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewPagination } from './pagination';
+
+describe('useDataViewPagination', () => {
+
+  it('should get initial state correctly - no page', () => {
+    const { result } = renderHook(() => useDataViewPagination({ perPage: 7 }))
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 1,
+      perPage: 7
+    })
+  });
+
+  it('should get initial state correctly - page set', () => {
+    const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }))
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 3,
+      perPage: 5
+    })
+  });
+
+  it('should set page correctly', () => {
+    const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }))
+    
+    act(() => {
+      result.current.onSetPage(undefined, 8);
+    });
+    
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 8,
+      perPage: 5
+    })
+  });
+
+  it('should set perPage correctly', () => {
+    const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }))
+    
+    act(() => {
+      result.current.onPerPageSelect(undefined, 50);
+    });
+    
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 3,
+      perPage: 50
+    })
+  });
+
+});

package/src/Hooks/pagination.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+export interface UseDataViewPaginationProps {
+  page?: number;
+  perPage: number;
+}
+
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+
+export const useDataViewPagination = ({ page = 1, perPage }: UseDataViewPaginationProps) => { 
+  const [ state, setState ] = useState({ page, perPage });
+  
+  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => {
+    setState(prev => ({ ...prev, perPage: newPerPage }));
+  }
+  
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => {
+    setState(prev => ({ ...prev, page: newPage }));
+  }
+  
+  return {
+    ...state,
+    onPerPageSelect,
+    onSetPage
+  }
+}

package/dist/cjs/DataView/DataView.test.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-const DataView_1 = __importDefault(require("./DataView"));
-describe('DataView', () => {
-    it('should render data view', () => {
-        (0, react_2.render)(react_1.default.createElement(DataView_1.default, null,
-            react_1.default.createElement(react_1.default.Fragment, null, "Data view content")));
-        expect(react_2.screen.getByText('Data view content')).toBeInTheDocument();
-    });
-});

package/dist/cjs/Hooks/useDataViewPagination.d.ts

@@ -1,4 +0,0 @@
-export interface DataViewPaginationProps {
-    page: number;
-    perPage: number;
-}

package/dist/cjs/Hooks/useDataViewPagination.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/DataView/DataView.test.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import DataView from './DataView';
-describe('DataView', () => {
-    it('should render data view', () => {
-        render(React.createElement(DataView, null,
-            React.createElement(React.Fragment, null, "Data view content")));
-        expect(screen.getByText('Data view content')).toBeInTheDocument();
-    });
-});

package/dist/esm/Hooks/useDataViewPagination.d.ts

@@ -1,4 +0,0 @@
-export interface DataViewPaginationProps {
-    page: number;
-    perPage: number;
-}

package/dist/esm/Hooks/useDataViewPagination.js

@@ -1 +0,0 @@
-export {};

package/src/DataView/DataView.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom'
-import DataView from './DataView';
-
-describe('DataView', () => {
-
-  it('should render data view', () => {
-    render(<DataView><>Data view content</></DataView>);
-    expect(screen.getByText('Data view content')).toBeInTheDocument();
-  });
-
-});

package/src/Hooks/useDataViewPagination.ts

@@ -1,4 +0,0 @@
-export interface DataViewPaginationProps {
-    page: number;
-    perPage: number;
-}