@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.0

package/src/components/dataviews-picker/footer.tsx

@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	CheckboxControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useRegistry } from '@wordpress/data';
+import { useContext, useMemo, useState } from '@wordpress/element';
+import { __, sprintf, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsPagination from '../dataviews-pagination';
+import DataViewsContext from '../dataviews-context';
+import type { SetSelection } from '../../private-types';
+import type { Action } from '../../types';
+
+const EMPTY_ARRAY: [] = [];
+
+export function useIsMultiselectPicker< Item >(
+	actions: Action< Item >[] | undefined
+) {
+	return useMemo( () => {
+		return actions?.every( ( action ) => action.supportsBulk );
+	}, [ actions ] );
+}
+
+function BulkSelectionCheckbox< Item >( {
+	selection,
+	selectedItems,
+	onChangeSelection,
+	data,
+	getItemId,
+}: {
+	selection: string[];
+	selectedItems: Item[];
+	onChangeSelection: SetSelection;
+	data: Item[];
+	getItemId: ( item: Item ) => string;
+} ) {
+	const areAllSelected = selectedItems.length === data.length;
+
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ areAllSelected }
+			indeterminate={ ! areAllSelected && !! selectedItems.length }
+			onChange={ () => {
+				if ( areAllSelected ) {
+					// Deselect all - remove the current page from the total selection.
+					onChangeSelection(
+						selection.filter(
+							( id ) =>
+								! data.some(
+									( item ) => id === getItemId( item )
+								)
+						)
+					);
+				} else {
+					// Select all - merge the current page into the total selection.
+					const selectionSet = new Set( [
+						...selection,
+						...data.map( ( item ) => getItemId( item ) ),
+					] );
+					onChangeSelection( Array.from( selectionSet ) );
+				}
+			} }
+			aria-label={
+				areAllSelected ? __( 'Deselect all' ) : __( 'Select all' )
+			}
+		/>
+	);
+}
+
+function ActionButtons< Item >( {
+	actions,
+	items,
+	selection,
+}: {
+	actions: Action< Item >[];
+	items: Item[];
+	selection: string[];
+} ) {
+	const registry = useRegistry();
+	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
+		null
+	);
+
+	return (
+		<HStack expanded={ false } spacing={ 1 }>
+			{ actions.map( ( action ) => {
+				// Only support actions with callbacks for DataViewsPicker.
+				// This is because many use cases of the picker will be already within modals.
+				if ( ! ( 'callback' in action ) ) {
+					return null;
+				}
+
+				const { id, label, icon, isPrimary, isDestructive, callback } =
+					action;
+
+				const _label =
+					typeof label === 'string' ? label : label( items );
+				const variant = isPrimary ? 'primary' : 'tertiary';
+				const isInProgress = id === actionInProgress;
+
+				return (
+					<Button
+						key={ id }
+						accessibleWhenDisabled
+						icon={ icon }
+						disabled={ isInProgress || ! selection?.length }
+						isBusy={ isInProgress }
+						onClick={ async () => {
+							setActionInProgress( id );
+							await callback( items, {
+								registry,
+							} );
+							setActionInProgress( null );
+						} }
+						size="compact"
+						isDestructive={ isDestructive }
+						variant={ variant }
+					>
+						{ _label }
+					</Button>
+				);
+			} ) }
+		</HStack>
+	);
+}
+
+export function DataViewsPickerFooter() {
+	const {
+		data,
+		selection,
+		onChangeSelection,
+		getItemId,
+		actions = EMPTY_ARRAY,
+	} = useContext( DataViewsContext );
+
+	const selectionCount = selection.length;
+	const isMultiselect = useIsMultiselectPicker( actions );
+
+	const message =
+		selectionCount > 0
+			? sprintf(
+					/* translators: %d: number of items. */
+					_n(
+						'%d Item selected',
+						'%d Items selected',
+						selectionCount
+					),
+					selectionCount
+			  )
+			: sprintf(
+					/* translators: %d: number of items. */
+					_n( '%d Item', '%d Items', data.length ),
+					data.length
+			  );
+
+	const selectedItems = useMemo(
+		() =>
+			data.filter( ( item ) => selection.includes( getItemId( item ) ) ),
+		[ selection, getItemId, data ]
+	);
+
+	return (
+		<HStack
+			expanded={ false }
+			justify="space-between"
+			className="dataviews-footer"
+		>
+			<HStack
+				className="dataviews-picker-footer__bulk-selection"
+				expanded={ false }
+				spacing={ 3 }
+			>
+				{ isMultiselect && (
+					<BulkSelectionCheckbox
+						selection={ selection }
+						selectedItems={ selectedItems }
+						onChangeSelection={ onChangeSelection }
+						data={ data }
+						getItemId={ getItemId }
+					/>
+				) }
+				<span className="dataviews-bulk-actions-footer__item-count">
+					{ message }
+				</span>
+			</HStack>
+			<DataViewsPagination />
+			{ Boolean( actions?.length ) && (
+				<div className="dataviews-picker-footer__actions">
+					<ActionButtons
+						actions={ actions }
+						items={ selectedItems }
+						selection={ selection }
+					/>
+				</div>
+			) }
+		</HStack>
+	);
+}

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

@@ -0,0 +1,284 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { useResizeObserver, throttle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
+import {
+	default as DataViewsFilters,
+	useFilters,
+	FiltersToggle,
+} from '../dataviews-filters';
+import DataViewsLayout from '../dataviews-layout';
+import { DataViewsPickerFooter } from './footer';
+import DataViewsSearch from '../dataviews-search';
+import { DataViewsPagination } from '../dataviews-pagination';
+import DataViewsViewConfig, {
+	DataviewsViewConfigDropdown,
+	ViewTypeMenu,
+} from '../dataviews-view-config';
+import { normalizeFields } from '../../normalize-fields';
+import type { ActionButton, Field, View, SupportedLayouts } from '../../types';
+import type { SelectionOrUpdater } from '../../private-types';
+type ItemWithId = { id: string };
+
+const isItemClickable = () => false;
+
+const dataViewsPickerLayouts = VIEW_LAYOUTS.filter(
+	( viewLayout ) => viewLayout.isPicker
+);
+
+type DataViewsPickerProps< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	actions?: ActionButton< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+		infiniteScrollHandler?: () => void;
+	};
+	defaultLayouts: SupportedLayouts;
+	selection: string[];
+	onChangeSelection: ( items: string[] ) => void;
+	children?: ReactNode;
+	config?: {
+		perPageSizes: number[];
+	};
+	itemListLabel?: string;
+	empty?: ReactNode;
+} & ( Item extends ItemWithId
+	? { getItemId?: ( item: Item ) => string }
+	: { getItemId: ( item: Item ) => string } );
+
+const defaultGetItemId = ( item: ItemWithId ) => item.id;
+const EMPTY_ARRAY: any[] = [];
+
+type DefaultUIProps = Pick<
+	DataViewsPickerProps< any >,
+	'search' | 'searchLabel'
+>;
+
+function DefaultUI( {
+	search = true,
+	searchLabel = undefined,
+}: DefaultUIProps ) {
+	const { isShowingFilter } = useContext( DataViewsContext );
+	return (
+		<>
+			<HStack
+				alignment="top"
+				justify="space-between"
+				className="dataviews__view-actions"
+				spacing={ 1 }
+			>
+				<HStack
+					justify="start"
+					expanded={ false }
+					className="dataviews__search"
+				>
+					{ search && <DataViewsSearch label={ searchLabel } /> }
+					<FiltersToggle />
+				</HStack>
+				<HStack
+					spacing={ 1 }
+					expanded={ false }
+					style={ { flexShrink: 0 } }
+				>
+					<DataViewsViewConfig />
+				</HStack>
+			</HStack>
+			{ isShowingFilter && (
+				<DataViewsFilters className="dataviews-filters__container" />
+			) }
+			<DataViewsLayout />
+			<DataViewsPickerFooter />
+		</>
+	);
+}
+
+function DataViewsPicker< Item >( {
+	view,
+	onChangeView,
+	fields,
+	search = true,
+	searchLabel = undefined,
+	actions = EMPTY_ARRAY,
+	data,
+	getItemId = defaultGetItemId,
+	isLoading = false,
+	paginationInfo,
+	defaultLayouts: defaultLayoutsProperty,
+	selection,
+	onChangeSelection,
+	children,
+	config = { perPageSizes: [ 10, 20, 50, 100 ] },
+	itemListLabel,
+	empty,
+}: DataViewsPickerProps< Item > ) {
+	const { infiniteScrollHandler } = paginationInfo;
+	const containerRef = useRef< HTMLDivElement | null >( null );
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+	const resizeObserverRef = useResizeObserver(
+		( resizeObserverEntries: any ) => {
+			setContainerWidth(
+				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
+			);
+		},
+		{ box: 'border-box' }
+	);
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		if ( onChangeSelection ) {
+			onChangeSelection( newValue );
+		}
+	}
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
+	const filters = useFilters( _fields, view );
+	const hasPrimaryOrLockedFilters = useMemo(
+		() =>
+			( filters || [] ).some(
+				( filter ) => filter.isPrimary || filter.isLocked
+			),
+		[ filters ]
+	);
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(
+		hasPrimaryOrLockedFilters
+	);
+
+	useEffect( () => {
+		if ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {
+			setIsShowingFilter( true );
+		}
+	}, [ 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 ] );
+
+	// Filter out DataViewsPicker layouts.
+	const defaultLayouts = useMemo(
+		() =>
+			Object.fromEntries(
+				Object.entries( defaultLayoutsProperty ).filter(
+					( [ layoutType ] ) => {
+						return dataViewsPickerLayouts.some(
+							( viewLayout ) => viewLayout.type === layoutType
+						);
+					}
+				)
+			),
+		[ defaultLayoutsProperty ]
+	);
+
+	if ( ! defaultLayouts[ view.type ] ) {
+		return null;
+	}
+
+	return (
+		<DataViewsContext.Provider
+			value={ {
+				view,
+				onChangeView,
+				fields: _fields,
+				actions,
+				data,
+				isLoading,
+				paginationInfo,
+				isItemClickable,
+				selection,
+				onChangeSelection: setSelectionWithChange,
+				openedFilter,
+				setOpenedFilter,
+				getItemId,
+				containerWidth,
+				containerRef,
+				resizeObserverRef,
+				defaultLayouts,
+				filters,
+				isShowingFilter,
+				setIsShowingFilter,
+				config,
+				itemListLabel,
+				empty,
+				hasInfiniteScrollHandler: !! infiniteScrollHandler,
+			} }
+		>
+			<div className="dataviews-picker-wrapper" ref={ containerRef }>
+				{ children ?? (
+					<DefaultUI search={ search } searchLabel={ searchLabel } />
+				) }
+			</div>
+		</DataViewsContext.Provider>
+	);
+}
+
+// Populate the DataViews sub components
+const DataViewsPickerSubComponents =
+	DataViewsPicker as typeof DataViewsPicker & {
+		BulkActionToolbar: typeof DataViewsPickerFooter;
+		Filters: typeof DataViewsFilters;
+		FiltersToggle: typeof FiltersToggle;
+		Layout: typeof DataViewsLayout;
+		LayoutSwitcher: typeof ViewTypeMenu;
+		Pagination: typeof DataViewsPagination;
+		Search: typeof DataViewsSearch;
+		ViewConfig: typeof DataviewsViewConfigDropdown;
+	};
+
+DataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;
+DataViewsPickerSubComponents.Filters = DataViewsFilters;
+DataViewsPickerSubComponents.FiltersToggle = FiltersToggle;
+DataViewsPickerSubComponents.Layout = DataViewsLayout;
+DataViewsPickerSubComponents.LayoutSwitcher = ViewTypeMenu;
+DataViewsPickerSubComponents.Pagination = DataViewsPagination;
+DataViewsPickerSubComponents.Search = DataViewsSearch;
+DataViewsPickerSubComponents.ViewConfig = DataviewsViewConfigDropdown;
+
+export default DataViewsPickerSubComponents;