@wordpress/edit-site 5.20.1 → 5.21.1-next.f8d8eceb.0

package/src/components/dataviews/search.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useDebouncedInput from '../../utils/use-debounced-input';
+
+export default function Search( { label, view, onChangeView } ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
+		view.search
+	);
+	useEffect( () => {
+		setSearch( view.search );
+	}, [ view ] );
+	const onChangeViewRef = useRef( onChangeView );
+	useEffect( () => {
+		onChangeViewRef.current = onChangeView;
+	}, [ onChangeView ] );
+	useEffect( () => {
+		onChangeViewRef.current( ( currentView ) => ( {
+			...currentView,
+			page: 1,
+			search: debouncedSearch,
+		} ) );
+	}, [ debouncedSearch ] );
+	const searchLabel = label || __( 'Filter list' );
+	return (
+		<SearchControl
+			onChange={ setSearch }
+			value={ search }
+			label={ searchLabel }
+			placeholder={ searchLabel }
+			size="compact"
+		/>
+	);
+}

package/src/components/dataviews/style.scss

@@ -1,6 +1,16 @@
 .dataviews-wrapper {
 	width: 100%;
+	height: 100%;
+	overflow: auto;
 	padding: $grid-unit-40;
+
+	> div {
+		min-height: 100%;
+	}
+}
+
+.dataviews-pagination {
+	margin-top: auto;
 }
 
 .dataviews-list-view {
@@ -30,7 +40,12 @@
 	}
 }
 
-.dataviews__per-page-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/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,65 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexBlock,
+	Placeholder,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ItemActions from './item-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>
+							<FlexBlock>
+								<ItemActions
+									item={ item }
+									actions={ actions }
+								/>
+							</FlexBlock>
+						</HStack>
+					</VStack>
+				);
+			} ) }
+		</Grid>
+	);
+}