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

package/src/Hooks/selection.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+
+export interface UseDataViewSelectionProps {
+  /** Array of initially selected entries */
+  initialSelected?: (any)[];
+  /** Function to compare items when checking if entry is selected */
+  matchOption?: (item: any, another: any) => boolean;
+}
+
+export const useDataViewSelection = (props: UseDataViewSelectionProps) => {
+  const [ selected, setSelected ] = useState<any[]>(props.initialSelected ?? []);
+  const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+
+  const onSelect = (isSelecting: boolean, items?: any[] | any) => {
+    isSelecting ?
+      setSelected(prev => {
+        const newSelectedItems = [ ...prev ];
+        (Array.isArray(items) ? items : [ items ]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
+        return newSelectedItems;
+      })
+      : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [ items ]).some(item => matchOption(item, prevSelected))) : []);
+  };
+  
+  const isSelected = (item: any): boolean => props?.matchOption ? Boolean(selected.find(selected => matchOption(selected, item))) : selected.includes(item);
+
+  return {
+    selected,
+    onSelect,
+    isSelected
+  };
+};

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/Hooks/useDataViewPagination.d.ts

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

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-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 PAGINATION = {
-  page: 1,
-  perPage: 1
-}
-
-export const BasicExample: React.FunctionComponent = () => (
-  <DataView>
-    <DataViewToolbar pagination={<Pagination {...PAGINATION} />} />
-    <div style={layoutItemStyling}>Data representation</div>
-    <DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter" />} />
-  </DataView>
-)

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-export const BasicExample: React.FunctionComponent = () => (
-  <DataViewToolbar pagination={<Pagination page={1} perPage={10} />} />
-)

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

@@ -1,23 +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: Hooks
-# 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
-propComponents: []
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md
----
-Data view hooks provide a predefined solution to manage state of the data view. This modular approach allows them to be easily replaced with a custom implementation in case of more specific needs.
-
-### 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...
-

package/src/Hooks/useDataViewPagination.ts

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