@wordpress/dataviews 6.0.0 → 7.0.0

package/src/components/dataviews/index.tsx

@@ -9,12 +9,12 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import {
 	useContext,
+	useEffect,
 	useMemo,
 	useRef,
 	useState,
-	useEffect,
 } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
+import { useResizeObserver, throttle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -51,6 +51,7 @@ type DataViewsProps< Item > = {
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
+		infiniteScrollHandler?: () => void;
 	};
 	defaultLayouts: SupportedLayouts;
 	selection?: string[];
@@ -65,7 +66,11 @@ type DataViewsProps< Item > = {
 	header?: ReactNode;
 	getItemLevel?: ( item: Item ) => number;
 	children?: ReactNode;
-	perPageSizes?: number[];
+	config?:
+		| false
+		| {
+				perPageSizes: number[];
+		  };
 	empty?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
@@ -85,7 +90,7 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
-	const { isShowingFilter } = useContext( DataViewsContext );
+	const { isShowingFilter, config } = useContext( DataViewsContext );
 	return (
 		<>
 			<HStack
@@ -102,14 +107,16 @@ function DefaultUI( {
 					{ search && <DataViewsSearch label={ searchLabel } /> }
 					<FiltersToggle />
 				</HStack>
-				<HStack
-					spacing={ 1 }
-					expanded={ false }
-					style={ { flexShrink: 0 } }
-				>
-					<DataViewsViewConfig />
-					{ header }
-				</HStack>
+				{ ( config || header ) && (
+					<HStack
+						spacing={ 1 }
+						expanded={ false }
+						style={ { flexShrink: 0 } }
+					>
+						config && <DataViewsViewConfig />
+						{ header }
+					</HStack>
+				) }
 			</HStack>
 			{ isShowingFilter && (
 				<DataViewsFilters className="dataviews-filters__container" />
@@ -140,9 +147,10 @@ function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 	children,
-	perPageSizes = [ 10, 20, 50, 100 ],
+	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	empty,
 }: DataViewsProps< Item > ) {
+	const { infiniteScrollHandler } = paginationInfo;
 	const containerRef = useRef< HTMLDivElement | null >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
@@ -193,6 +201,33 @@ function DataViews< Item >( {
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
+	// Attach scroll event listener for infinite scroll
+	useEffect( () => {
+		if ( ! view.infiniteScrollEnabled || ! containerRef.current ) {
+			return;
+		}
+
+		const handleScroll = throttle( ( event: unknown ) => {
+			const target = ( event as Event ).target as HTMLElement;
+			const scrollTop = target.scrollTop;
+			const scrollHeight = target.scrollHeight;
+			const clientHeight = target.clientHeight;
+
+			// Check if user has scrolled near the bottom
+			if ( scrollTop + clientHeight >= scrollHeight - 100 ) {
+				infiniteScrollHandler?.();
+			}
+		}, 100 ); // Throttle to 100ms
+
+		const container = containerRef.current;
+		container.addEventListener( 'scroll', handleScroll );
+
+		return () => {
+			container.removeEventListener( 'scroll', handleScroll );
+			handleScroll.cancel(); // Cancel any pending throttled calls
+		};
+	}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );
+
 	return (
 		<DataViewsContext.Provider
 			value={ {
@@ -219,8 +254,9 @@ function DataViews< Item >( {
 				filters,
 				isShowingFilter,
 				setIsShowingFilter,
-				perPageSizes,
+				config,
 				empty,
+				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>
 			<div className="dataviews-wrapper" ref={ containerRef }>

package/src/components/dataviews/stories/fixtures.tsx

@@ -80,6 +80,58 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 4,
+		title: 'Ganymede',
+		description: 'Largest moon of Jupiter',
+		image: 'https://live.staticflickr.com/7816/33436473218_a836235935_k.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
+		satellites: 0,
+		date: '2022-01-04',
+		datetime: '2022-01-04T12:30:00Z',
+		email: 'ganymede@example.com',
+	},
+	{
+		id: 5,
+		title: 'Callisto',
+		description: 'Outermost Galilean moon of Jupiter',
+		image: 'https://live.staticflickr.com/804/27604150528_4512448a9c_c.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
+		satellites: 0,
+		date: '2021-01-05',
+		datetime: '2021-01-05T14:15:30Z',
+		email: 'callisto@example.com',
+	},
+	{
+		id: 6,
+		title: 'Amalthea',
+		description: 'Small irregular moon of Jupiter',
+		image: 'https://upload.wikimedia.org/wikipedia/commons/6/62/Amalthea.gif',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
+		satellites: 0,
+		date: '2020-01-06',
+		datetime: '2020-01-06T10:45:15Z',
+		email: 'amalthea@example.com',
+	},
+	{
+		id: 7,
+		title: 'Himalia',
+		description: 'Largest irregular moon of Jupiter',
+		image: 'https://upload.wikimedia.org/wikipedia/commons/c/c2/Cassini-Huygens_Image_of_Himalia.png',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
+		satellites: 0,
+		date: '2019-01-07',
+		datetime: '2019-01-07T16:20:45Z',
+		email: 'himalia@example.com',
+	},
+	{
+		id: 8,
 		title: 'Neptune',
 		description: 'Ice giant in the Solar system',
 		image: 'https://live.staticflickr.com/65535/29523683990_000ff4720c_z.jpg',
@@ -92,7 +144,46 @@ export const data: SpaceObject[] = [
 		email: 'neptune@example.com',
 	},
 	{
-		id: 5,
+		id: 9,
+		title: 'Triton',
+		description: 'Largest moon of Neptune',
+		image: 'https://live.staticflickr.com/65535/50728384241_02c5126c30_h.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Neptune', 'Moon' ],
+		satellites: 0,
+		date: '2021-02-01',
+		datetime: '2021-02-01T11:30:00Z',
+		email: 'triton@example.com',
+	},
+	{
+		id: 10,
+		title: 'Nereid',
+		description: 'Irregular moon of Neptune',
+		image: 'https://upload.wikimedia.org/wikipedia/commons/b/b0/Nereid-Voyager2.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Neptune', 'Moon' ],
+		satellites: 0,
+		date: '2020-02-02',
+		datetime: '2020-02-02T15:45:30Z',
+		email: 'nereid@example.com',
+	},
+	{
+		id: 11,
+		title: 'Proteus',
+		description: 'Second-largest moon of Neptune',
+		image: 'https://live.staticflickr.com/65535/50727825808_bf427e007b_c.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Neptune', 'Moon' ],
+		satellites: 0,
+		date: '2019-02-03',
+		datetime: '2019-02-03T09:20:15Z',
+		email: 'proteus@example.com',
+	},
+	{
+		id: 12,
 		title: 'Mercury',
 		description: 'Terrestrial planet in the Solar system',
 		image: 'https://live.staticflickr.com/813/40199101735_e5e92ffd11_z.jpg',
@@ -105,7 +196,7 @@ export const data: SpaceObject[] = [
 		email: 'mercury@example.com',
 	},
 	{
-		id: 6,
+		id: 13,
 		title: 'Venus',
 		description: 'La planète Vénus',
 		image: 'https://live.staticflickr.com/8025/7544560662_900e717727_z.jpg',
@@ -118,7 +209,7 @@ export const data: SpaceObject[] = [
 		email: 'venus@example.com',
 	},
 	{
-		id: 7,
+		id: 14,
 		title: 'Earth',
 		description: 'Terrestrial planet in the Solar system',
 		image: 'https://live.staticflickr.com/3762/9460163562_964fe6af07_z.jpg',
@@ -131,7 +222,7 @@ export const data: SpaceObject[] = [
 		email: 'earth@example.com',
 	},
 	{
-		id: 8,
+		id: 15,
 		title: 'Mars',
 		description: 'Terrestrial planet in the Solar system',
 		image: 'https://live.staticflickr.com/8151/7651156426_e047f4d219_z.jpg',
@@ -144,7 +235,7 @@ export const data: SpaceObject[] = [
 		email: 'mars@example.com',
 	},
 	{
-		id: 9,
+		id: 16,
 		title: 'Jupiter',
 		description: 'Gas giant in the Solar system',
 		image: 'https://staging-jubilee.flickr.com/2853/9458010071_6e6fc41408_z.jpg',
@@ -157,7 +248,7 @@ export const data: SpaceObject[] = [
 		email: 'jupiter@example.com',
 	},
 	{
-		id: 10,
+		id: 17,
 		title: 'Saturn',
 		description: 'Gas giant in the Solar system',
 		image: 'https://live.staticflickr.com/5524/9464658509_fc2d83dff5_z.jpg',
@@ -170,7 +261,7 @@ export const data: SpaceObject[] = [
 		email: 'saturn@example.com',
 	},
 	{
-		id: 11,
+		id: 18,
 		title: 'Uranus',
 		description: 'Ice giant in the Solar system',
 		image: 'https://live.staticflickr.com/65535/5553350875_3072df91e2_c.jpg',

package/src/components/dataviews/stories/index.story.tsx

@@ -9,6 +9,8 @@ import type { Meta } from '@storybook/react';
 import {
 	useState,
 	useMemo,
+	useCallback,
+	useEffect,
 	createInterpolateElement,
 } from '@wordpress/element';
 import {
@@ -37,7 +39,7 @@ import {
 } from './fixtures';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { View } from '../../../types';
+import type { Field, View } from '../../../types';
 
 import './style.css';
 
@@ -87,7 +89,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 			) }
 			isItemClickable={ () => true }
 			defaultLayouts={ defaultLayouts }
-			perPageSizes={ perPageSizes }
+			config={ { perPageSizes } }
 		/>
 	);
 };
@@ -144,19 +146,23 @@ export const CustomEmpty = () => {
 	);
 };
 
-export const FieldsNoSortableNoHidable = () => {
+export const MinimalUI = () => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'title', 'description', 'categories' ],
+		layout: {
+			enableMoving: false,
+		},
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
 
-	const _fields = fields.map( ( field ) => ( {
+	const _fields: Field< SpaceObject >[] = fields.map( ( field ) => ( {
 		...field,
 		enableSorting: false,
 		enableHiding: false,
+		filterBy: false,
 	} ) );
 
 	return (
@@ -166,6 +172,8 @@ export const FieldsNoSortableNoHidable = () => {
 			data={ shownData }
 			view={ view }
 			fields={ _fields }
+			config={ false }
+			search={ false }
 			onChangeView={ setView }
 			defaultLayouts={ {
 				table: {},
@@ -383,3 +391,128 @@ export const GroupByLayout = () => {
 		/>
 	);
 };
+
+export const InfiniteScroll = () => {
+	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_GRID,
+		search: '',
+		page: 1,
+		perPage: 6, // Start with a small number to demonstrate pagination
+		filters: [],
+		fields: [ 'satellites' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+		infiniteScrollEnabled: true, // Enable infinite scroll by default
+	} );
+	const { data: shownData } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+
+	// Custom pagination handler that simulates server-side pagination
+	const [ allLoadedRecords, setAllLoadedRecords ] = useState< SpaceObject[] >(
+		[]
+	);
+	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
+
+	const totalItems = data.length;
+	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
+	const currentPage = view.page || 1;
+	const hasMoreData = currentPage < totalPages;
+	const getItemId = ( item: {
+		id: any;
+		title?: string;
+		description?: string;
+		image?: string;
+		type?: string;
+		isPlanet?: boolean;
+		categories?: string[];
+		satellites?: number;
+		date?: string;
+		datetime?: string;
+		email?: string;
+	} ) => item.id.toString();
+
+	const infiniteScrollHandler = useCallback( () => {
+		if ( isLoadingMore || currentPage >= totalPages ) {
+			return;
+		}
+
+		setIsLoadingMore( true );
+
+		setView( {
+			...view,
+			page: currentPage + 1,
+		} );
+	}, [ isLoadingMore, currentPage, totalPages, view ] );
+
+	// Initialize data on first load or when view changes significantly
+	useEffect( () => {
+		if ( currentPage === 1 || ! view.infiniteScrollEnabled ) {
+			// First page - replace all data
+			setAllLoadedRecords( shownData );
+		} else {
+			// Subsequent pages - append to existing data
+			setAllLoadedRecords( ( prev ) => {
+				const existingIds = new Set( prev.map( getItemId ) );
+				const newRecords = shownData.filter(
+					( record ) => ! existingIds.has( getItemId( record ) )
+				);
+				return [ ...prev, ...newRecords ];
+			} );
+		}
+		setIsLoadingMore( false );
+	}, [
+		view.search,
+		view.filters,
+		view.perPage,
+		currentPage,
+		view.infiniteScrollEnabled,
+	] );
+
+	const paginationInfo = {
+		totalItems,
+		totalPages,
+		infiniteScrollHandler,
+	};
+
+	return (
+		<>
+			<style>{ `
+			.dataviews-wrapper {
+				height: 600px;
+				overflow: auto;
+			}
+		` }</style>
+			<Text
+				style={ {
+					marginBottom: '16px',
+					padding: '8px',
+					background: '#f0f0f0',
+					borderRadius: '4px',
+					display: 'block',
+				} }
+			>
+				{ __( 'Infinite Scroll Demo' ) }: { allLoadedRecords.length } of{ ' ' }
+				{ totalItems } items loaded.
+				{ isLoadingMore && __( 'Loading more…' ) }
+				{ ! hasMoreData && __( 'All items loaded!' ) }
+			</Text>
+			<DataViews
+				getItemId={ ( item ) => item.id.toString() }
+				paginationInfo={ paginationInfo }
+				data={ allLoadedRecords }
+				view={ view }
+				fields={ fields }
+				onChangeView={ setView }
+				actions={ actions }
+				isLoading={ isLoadingMore }
+				defaultLayouts={ {
+					[ LAYOUT_GRID ]: {},
+					[ LAYOUT_LIST ]: {},
+					[ LAYOUT_TABLE ]: {},
+				} }
+			/>
+		</>
+	);
+};

package/src/components/dataviews/style.scss

@@ -37,6 +37,10 @@
 	}
 }
 
+.dataviews-loading-more {
+	text-align: center;
+}
+
 @container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {

package/src/components/dataviews-context/index.ts

@@ -54,8 +54,9 @@ type DataViewsContextType< Item > = {
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
-	perPageSizes: number[];
+	config: false | { perPageSizes: number[] };
 	empty?: ReactNode;
+	hasInfiniteScrollHandler: boolean;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -81,7 +82,10 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	filters: [],
 	isShowingFilter: false,
 	setIsShowingFilter: () => {},
-	perPageSizes: [],
+	hasInfiniteScrollHandler: false,
+	config: {
+		perPageSizes: [],
+	},
 } );
 
 export default DataViewsContext;

package/src/components/dataviews-item-actions/index.tsx

@@ -179,17 +179,6 @@ export default function ItemActions< Item >( {
 		);
 	}
 
-	// If all actions are primary, there is no need to render the dropdown.
-	if ( primaryActions.length === eligibleActions.length ) {
-		return (
-			<PrimaryActions
-				item={ item }
-				actions={ primaryActions }
-				registry={ registry }
-			/>
-		);
-	}
-
 	return (
 		<HStack
 			spacing={ 1 }
@@ -205,11 +194,13 @@ export default function ItemActions< Item >( {
 				actions={ primaryActions }
 				registry={ registry }
 			/>
-			<CompactItemActions
-				item={ item }
-				actions={ eligibleActions }
-				registry={ registry }
-			/>
+			{ primaryActions.length < eligibleActions.length && (
+				<CompactItemActions
+					item={ item }
+					actions={ eligibleActions }
+					registry={ registry }
+				/>
+			) }
 		</HStack>
 	);
 }

package/src/components/dataviews-pagination/index.tsx

@@ -22,7 +22,7 @@ export function DataViewsPagination() {
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
 
-	if ( ! totalItems || ! totalPages ) {
+	if ( ! totalItems || ! totalPages || view.infiniteScrollEnabled ) {
 		return null;
 	}
 

package/src/components/dataviews-view-config/index.tsx

@@ -47,6 +47,7 @@ import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { NormalizedField, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
+import InfiniteScrollToggle from './infinite-scroll-toggle';
 import { unlock } from '../../lock-unlock';
 
 const { Menu } = unlock( componentsPrivateApis );
@@ -102,12 +103,11 @@ export function ViewTypeMenu() {
 										if ( 'layout' in viewWithoutLayout ) {
 											delete viewWithoutLayout.layout;
 										}
-										// @ts-expect-error
 										return onChangeView( {
 											...viewWithoutLayout,
 											type: e.target.value,
 											...defaultLayouts[ e.target.value ],
-										} );
+										} as View );
 								}
 								warning( 'Invalid dataview' );
 							} }
@@ -214,8 +214,15 @@ function SortDirectionControl() {
 }
 
 function ItemsPerPageControl() {
-	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
-	if ( perPageSizes.length < 2 || perPageSizes.length > 6 ) {
+	const { view, config, onChangeView } = useContext( DataViewsContext );
+	const { infiniteScrollEnabled } = view;
+	if (
+		! config ||
+		! config.perPageSizes ||
+		config.perPageSizes.length < 2 ||
+		config.perPageSizes.length > 6 ||
+		infiniteScrollEnabled
+	) {
 		return null;
 	}
 
@@ -240,7 +247,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ perPageSizes.map( ( value ) => {
+			{ config.perPageSizes.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }
@@ -801,6 +808,7 @@ export function DataviewsViewConfigDropdown() {
 							{ !! activeLayout?.viewConfigOptions && (
 								<activeLayout.viewConfigOptions />
 							) }
+							<InfiniteScrollToggle />
 							<ItemsPerPageControl />
 						</SettingsSection>
 						<SettingsSection title={ __( 'Properties' ) }>

package/src/components/dataviews-view-config/infinite-scroll-toggle.tsx

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+
+export default function InfiniteScrollToggle() {
+	const context = useContext( DataViewsContext );
+	const { view, onChangeView } = context;
+	const infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;
+
+	// Only render the toggle if an infinite scroll handler is available
+	if ( ! context.hasInfiniteScrollHandler ) {
+		return null;
+	}
+
+	return (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			label={ __( 'Enable infinite scroll' ) }
+			help={ __(
+				'Automatically load more content as you scroll, instead of showing pagination links.'
+			) }
+			checked={ infiniteScrollEnabled }
+			onChange={ ( newValue ) => {
+				onChangeView( {
+					...view,
+					infiniteScrollEnabled: newValue,
+				} );
+			} }
+		/>
+	);
+}