@wordpress/edit-site 5.20.0 → 5.21.0

package/src/components/dataviews/pagination.js

@@ -6,26 +6,53 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
 	__experimentalNumberControl as NumberControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	SelectControl,
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _x, _n } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { PageSizeControl } from './view-actions';
+const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+function PageSizeControl( { view, onChangeView } ) {
+	const label = __( 'Rows per page:' );
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			label={ label }
+			hideLabelFromVision
+			// TODO: This should probably use a label based on the wanted design
+			// and we could remove InputControlPrefixWrapper usage.
+			prefix={
+				<InputControlPrefixWrapper
+					as="span"
+					className="dataviews__select-control-prefix"
+				>
+					{ label }
+				</InputControlPrefixWrapper>
+			}
+			value={ view.perPage }
+			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
+				value: pageSize,
+				label: pageSize,
+			} ) ) }
+			onChange={ ( value ) =>
+				onChangeView( { ...view, perPage: value, page: 1 } )
+			}
+		/>
+	);
+}
 
 // For now this is copied from the patterns list Pagination component, because
 // the datatable pagination starts from index zero(`0`). Eventually all lists will be
 // using this one.
-export function Pagination( {
-	dataView,
-	// If passed, use it, as it's for controlled pagination.
-	totalItems = 0,
+function Pagination( {
+	view,
+	onChangeView,
+	paginationInfo: { totalItems = 0, totalPages },
 } ) {
-	const currentPage = dataView.getState().pagination.pageIndex + 1;
-	const numPages = dataView.getPageCount();
-	const _totalItems = totalItems || dataView.getCoreRowModel().rows.length;
+	if ( ! totalItems || ! totalPages ) {
+		return null;
+	}
 	return (
 		<HStack
 			expanded={ false }
@@ -38,25 +65,27 @@ export function Pagination( {
 					// translators: %s: Total number of entries.
 					sprintf(
 						// translators: %s: Total number of entries.
-						_n( '%s item', '%s items', _totalItems ),
-						_totalItems
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
 					)
 				}
 			</Text>
-			{ !! _totalItems && (
+			{ !! totalItems && (
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
 						variant="tertiary"
-						onClick={ () => dataView.setPageIndex( 0 ) }
-						disabled={ ! dataView.getCanPreviousPage() }
+						onClick={ () => onChangeView( { ...view, page: 1 } ) }
+						disabled={ view.page === 1 }
 						aria-label={ __( 'First page' ) }
 					>
 						«
 					</Button>
 					<Button
 						variant="tertiary"
-						onClick={ () => dataView.previousPage() }
-						disabled={ ! dataView.getCanPreviousPage() }
+						onClick={ () =>
+							onChangeView( { ...view, page: view.page - 1 } )
+						}
+						disabled={ view.page === 1 }
 						aria-label={ __( 'Previous page' ) }
 					>
 						‹
@@ -70,21 +99,30 @@ export function Pagination( {
 							sprintf(
 								// translators: %1$s: Current page number, %2$s: Total number of pages.
 								_x( '<CurrenPageControl /> of %2$s', 'paging' ),
-								currentPage,
-								numPages
+								view.page,
+								totalPages
 							),
 							{
 								CurrenPageControl: (
 									<NumberControl
 										aria-label={ __( 'Current page' ) }
 										min={ 1 }
-										max={ numPages }
+										max={ totalPages }
 										onChange={ ( value ) => {
-											if ( value > numPages ) return;
-											dataView.setPageIndex( value - 1 );
+											if (
+												! value ||
+												value < 1 ||
+												value > totalPages
+											) {
+												return;
+											}
+											onChangeView( {
+												...view,
+												page: value,
+											} );
 										} }
 										step="1"
-										value={ currentPage }
+										value={ view.page }
 										isDragEnabled={ false }
 										spinControls="none"
 									/>
@@ -94,8 +132,10 @@ export function Pagination( {
 					</HStack>
 					<Button
 						variant="tertiary"
-						onClick={ () => dataView.nextPage() }
-						disabled={ ! dataView.getCanNextPage() }
+						onClick={ () =>
+							onChangeView( { ...view, page: view.page + 1 } )
+						}
+						disabled={ view.page >= totalPages }
 						aria-label={ __( 'Next page' ) }
 					>
 						›
@@ -103,16 +143,18 @@ export function Pagination( {
 					<Button
 						variant="tertiary"
 						onClick={ () =>
-							dataView.setPageIndex( dataView.getPageCount() - 1 )
+							onChangeView( { ...view, page: totalPages } )
 						}
-						disabled={ ! dataView.getCanNextPage() }
+						disabled={ view.page >= totalPages }
 						aria-label={ __( 'Last page' ) }
 					>
 						»
 					</Button>
 				</HStack>
 			) }
-			<PageSizeControl dataView={ dataView } />
+			<PageSizeControl view={ view } onChangeView={ onChangeView } />
 		</HStack>
 	);
 }
+
+export default Pagination;

package/src/components/dataviews/style.scss

@@ -30,7 +30,17 @@
 	}
 }
 
-.dataviews__per-page-control-prefix {
+.dataviews__select-control-prefix {
 	color: $gray-700;
 	text-wrap: nowrap;
 }
+
+.dataviews-view-grid__media {
+	width: 100%;
+	min-height: 200px;
+
+	> * {
+		max-width: 100%;
+		object-fit: cover;
+	}
+}

package/src/components/dataviews/text-filter.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 
 /**
@@ -15,18 +10,27 @@ import { SearchControl } from '@wordpress/components';
  */
 import useDebouncedInput from '../../utils/use-debounced-input';
 
-export default function TextFilter( {
-	className,
-	searchLabel = __( 'Filter list' ),
-	onChange,
-} ) {
-	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+export default function TextFilter( { id, view, onChangeView } ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
+		view.filters[ id ]
+	);
+	const onChangeViewRef = useRef( onChangeView );
+	useEffect( () => {
+		onChangeViewRef.current = onChangeView;
+	}, [ onChangeView ] );
 	useEffect( () => {
-		onChange( debouncedSearch );
-	}, [ debouncedSearch, onChange ] );
+		onChangeViewRef.current( ( currentView ) => ( {
+			...currentView,
+			page: 1,
+			filters: {
+				...currentView.filters,
+				[ id ]: debouncedSearch,
+			},
+		} ) );
+	}, [ debouncedSearch ] );
+	const searchLabel = __( 'Filter list' );
 	return (
 		<SearchControl
-			className={ classnames( 'dataviews__text-filter', className ) }
 			onChange={ setSearch }
 			value={ search }
 			label={ searchLabel }

package/src/components/dataviews/view-actions.js

@@ -4,9 +4,7 @@
 import {
 	Button,
 	Icon,
-	SelectControl,
 	privateApis as componentsPrivateApis,
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
 import {
 	chevronRightSmall,
@@ -31,44 +29,68 @@ const {
 	DropdownSubMenuTriggerV2,
 } = unlock( componentsPrivateApis );
 
-export const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+const availableViews = [
+	{
+		id: 'list',
+		label: __( 'List' ),
+	},
+	{
+		id: 'grid',
+		label: __( 'Grid' ),
+	},
+];
 
-export function PageSizeControl( { dataView } ) {
-	const label = __( 'Rows per page:' );
+function ViewTypeMenu( { view, onChangeView } ) {
+	const activeView = availableViews.find( ( v ) => view.type === v.id );
 	return (
-		<SelectControl
-			__nextHasNoMarginBottom
-			label={ label }
-			hideLabelFromVision
-			// TODO: This should probably use a label based on the wanted design
-			// and we could remove InputControlPrefixWrapper usage.
-			prefix={
-				<InputControlPrefixWrapper
-					as="span"
-					className="dataviews__per-page-control-prefix"
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={
+						<>
+							{ activeView.label }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
 				>
-					{ label }
-				</InputControlPrefixWrapper>
+					{ __( 'Layout' ) }
+				</DropdownSubMenuTriggerV2>
 			}
-			value={ dataView.getState().pagination.pageSize }
-			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
-				value: pageSize,
-				label: pageSize,
-			} ) ) }
-			onChange={ ( value ) => dataView.setPageSize( +value ) }
-		/>
+		>
+			{ availableViews.map( ( availableView ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ availableView.id }
+						prefix={
+							availableView.id === view.type && (
+								<Icon icon={ check } />
+							)
+						}
+						onSelect={ ( event ) => {
+							// We need to handle this on DropDown component probably..
+							event.preventDefault();
+							onChangeView( { ...view, type: availableView.id } );
+						} }
+						// TODO: check about role and a11y.
+						role="menuitemcheckbox"
+					>
+						{ availableView.label }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
 	);
 }
 
-function PageSizeMenu( { dataView } ) {
-	const currenPageSize = dataView.getState().pagination.pageSize;
+const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+function PageSizeMenu( { view, onChangeView } ) {
 	return (
 		<DropdownSubMenuV2
 			trigger={
 				<DropdownSubMenuTriggerV2
 					suffix={
 						<>
-							{ currenPageSize }
+							{ view.perPage }
 							<Icon icon={ chevronRightSmall } />
 						</>
 					}
@@ -83,12 +105,12 @@ function PageSizeMenu( { dataView } ) {
 					<DropdownMenuItemV2
 						key={ size }
 						prefix={
-							currenPageSize === size && <Icon icon={ check } />
+							view.perPage === size && <Icon icon={ check } />
 						}
 						onSelect={ ( event ) => {
 							// We need to handle this on DropDown component probably..
 							event.preventDefault();
-							dataView.setPageSize( size );
+							onChangeView( { ...view, perPage: size, page: 1 } );
 						} }
 						// TODO: check about role and a11y.
 						role="menuitemcheckbox"
@@ -101,11 +123,11 @@ function PageSizeMenu( { dataView } ) {
 	);
 }
 
-function FieldsVisibilityMenu( { dataView } ) {
-	const hideableFields = dataView
-		.getAllColumns()
-		.filter( ( columnn ) => columnn.getCanHide() );
-	if ( ! hideableFields?.length ) {
+function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
+	const hidableFields = fields.filter(
+		( field ) => field.enableHiding !== false
+	);
+	if ( ! hidableFields?.length ) {
 		return null;
 	}
 	return (
@@ -118,20 +140,31 @@ function FieldsVisibilityMenu( { dataView } ) {
 				</DropdownSubMenuTriggerV2>
 			}
 		>
-			{ hideableFields?.map( ( field ) => {
+			{ hidableFields?.map( ( field ) => {
 				return (
 					<DropdownMenuItemV2
 						key={ field.id }
 						prefix={
-							field.getIsVisible() && <Icon icon={ check } />
+							! view.hiddenFields?.includes( field.id ) && (
+								<Icon icon={ check } />
+							)
 						}
 						onSelect={ ( event ) => {
 							event.preventDefault();
-							field.getToggleVisibilityHandler()( event );
+							onChangeView( {
+								...view,
+								hiddenFields: view.hiddenFields?.includes(
+									field.id
+								)
+									? view.hiddenFields.filter(
+											( id ) => id !== field.id
+									  )
+									: [ ...view.hiddenFields, field.id ],
+							} );
 						} }
 						role="menuitemcheckbox"
 					>
-						{ field.columnDef.header }
+						{ field.header }
 					</DropdownMenuItemV2>
 				);
 			} ) }
@@ -144,15 +177,15 @@ const sortingItemsInfo = {
 	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
-function SortMenu( { dataView } ) {
-	const sortableFields = dataView
-		.getAllColumns()
-		.filter( ( columnn ) => columnn.getCanSort() );
+function SortMenu( { fields, view, onChangeView } ) {
+	const sortableFields = fields.filter(
+		( field ) => field.enableSorting !== false
+	);
 	if ( ! sortableFields?.length ) {
 		return null;
 	}
-	const currentSortedField = sortableFields.find( ( field ) =>
-		field.getIsSorted()
+	const currentSortedField = fields.find(
+		( field ) => field.id === view.sort?.field
 	);
 	return (
 		<DropdownSubMenuV2
@@ -160,7 +193,7 @@ function SortMenu( { dataView } ) {
 				<DropdownSubMenuTriggerV2
 					suffix={
 						<>
-							{ currentSortedField?.columnDef.header }
+							{ currentSortedField?.header }
 							<Icon icon={ chevronRightSmall } />
 						</>
 					}
@@ -170,7 +203,7 @@ function SortMenu( { dataView } ) {
 			}
 		>
 			{ sortableFields?.map( ( field ) => {
-				const sortedDirection = field.getIsSorted();
+				const sortedDirection = view.sort?.direction;
 				return (
 					<DropdownSubMenuV2
 						key={ field.id }
@@ -178,37 +211,41 @@ function SortMenu( { dataView } ) {
 							<DropdownSubMenuTriggerV2
 								suffix={ <Icon icon={ chevronRightSmall } /> }
 							>
-								{ field.columnDef.header }
+								{ field.header }
 							</DropdownSubMenuTriggerV2>
 						}
 						side="left"
 					>
 						{ Object.entries( sortingItemsInfo ).map(
 							( [ direction, info ] ) => {
+								const isActive =
+									currentSortedField &&
+									sortedDirection === direction &&
+									field.id === currentSortedField.id;
 								return (
 									<DropdownMenuItemV2
 										key={ direction }
 										prefix={ <Icon icon={ info.icon } /> }
 										suffix={
-											sortedDirection === direction && (
-												<Icon icon={ check } />
-											)
+											isActive && <Icon icon={ check } />
 										}
 										onSelect={ ( event ) => {
 											event.preventDefault();
 											if (
 												sortedDirection === direction
 											) {
-												dataView.resetSorting();
+												onChangeView( {
+													...view,
+													sort: undefined,
+												} );
 											} else {
-												dataView.setSorting( [
-													{
-														id: field.id,
-														desc:
-															direction ===
-															'desc',
+												onChangeView( {
+													...view,
+													sort: {
+														field: field.id,
+														direction,
 													},
-												] );
+												} );
 											}
 										} }
 									>
@@ -224,11 +261,10 @@ function SortMenu( { dataView } ) {
 	);
 }
 
-export default function ViewActions( { dataView, className } ) {
+export default function ViewActions( { fields, view, onChangeView } ) {
 	return (
 		<DropdownMenuV2
 			label={ __( 'Actions' ) }
-			className={ className }
 			trigger={
 				<Button variant="tertiary" icon={ blockTable }>
 					{ __( 'View' ) }
@@ -237,9 +273,18 @@ export default function ViewActions( { dataView, className } ) {
 			}
 		>
 			<DropdownMenuGroupV2>
-				<SortMenu dataView={ dataView } />
-				<FieldsVisibilityMenu dataView={ dataView } />
-				<PageSizeMenu dataView={ dataView } />
+				<ViewTypeMenu view={ view } onChangeView={ onChangeView } />
+				<SortMenu
+					fields={ fields }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+				<FieldsVisibilityMenu
+					fields={ fields }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
 			</DropdownMenuGroupV2>
 		</DropdownMenuV2>
 	);

package/src/components/dataviews/view-grid.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexBlock,
+	Placeholder,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FieldActions from './field-actions';
+
+export function ViewGrid( { data, fields, view, actions } ) {
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			field.id !== view.layout.mediaField
+	);
+	return (
+		<Grid gap={ 8 } columns={ 2 } alignment="top">
+			{ data.map( ( item, index ) => {
+				return (
+					<VStack key={ index }>
+						<div className="dataviews-view-grid__media">
+							{ mediaField?.render( { item, view } ) || (
+								<Placeholder
+									withIllustration
+									style={ {
+										width: '100%',
+										minHeight: '200px',
+									} }
+								/>
+							) }
+						</div>
+
+						<HStack justify="space-between" alignment="top">
+							<FlexBlock>
+								<VStack>
+									{ visibleFields.map( ( field ) => (
+										<div key={ field.id }>
+											{ field.render( { item, view } ) }
+										</div>
+									) ) }
+								</VStack>
+							</FlexBlock>
+							<FieldActions item={ item } actions={ actions } />
+						</HStack>
+					</VStack>
+				);
+			} ) }
+		</Grid>
+	);
+}