@wordpress/dataviews 2.1.0 → 3.0.0

package/src/types.ts

@@ -3,6 +3,11 @@
  */
 import type { ReactElement, ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { SetSelection } from './private-types';
+
 export type SortDirection = 'asc' | 'desc';
 
 /**
@@ -37,12 +42,19 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type AnyItem = Record< string, any >;
+export type ItemRecord = Record< string, unknown >;
+
+export type FieldType = 'text';
 
 /**
  * A dataview field for a specific property of a data type.
  */
-export interface Field< Item extends AnyItem > {
+export type Field< Item > = {
+	/**
+	 * Type of the fields.
+	 */
+	type?: FieldType;
+
 	/**
 	 * The unique identifier of the field.
 	 */
@@ -54,10 +66,9 @@ export interface Field< Item extends AnyItem > {
 	header?: string;
 
 	/**
-	 * Callback used to retrieve the value of the field from the item.
-	 * Defaults to `item[ field.id ]`.
+	 * Placeholder for the field.
 	 */
-	getValue?: ( args: { item: Item } ) => any;
+	placeholder?: string;
 
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
@@ -103,17 +114,41 @@ export interface Field< Item extends AnyItem > {
 	 * Filter config for the field.
 	 */
 	filterBy?: FilterByConfig | undefined;
-}
-
-export type NormalizedField< Item extends AnyItem > = Field< Item > &
-	Required< Pick< Field< Item >, 'header' | 'getValue' | 'render' > >;
+} & ( Item extends ItemRecord
+	? {
+			/**
+			 * Callback used to retrieve the value of the field from the item.
+			 * Defaults to `item[ field.id ]`.
+			 */
+			getValue?: ( args: { item: Item } ) => any;
+	  }
+	: {
+			/**
+			 * Callback used to retrieve the value of the field from the item.
+			 * Defaults to `item[ field.id ]`.
+			 */
+			getValue: ( args: { item: Item } ) => any;
+	  } );
+
+export type NormalizedField< Item > = Field< Item > & {
+	header: string;
+	getValue: ( args: { item: Item } ) => any;
+	render: ( args: { item: Item } ) => ReactNode;
+};
 
 /**
  * A collection of dataview fields for a data type.
  */
-export type Fields< Item extends AnyItem > = Field< Item >[];
+export type Fields< Item > = Field< Item >[];
 
-export type Data< Item extends AnyItem > = Item[];
+export type Data< Item > = Item[];
+
+/**
+ * The form configuration.
+ */
+export type Form = {
+	visibleFields?: string[];
+};
 
 /**
  * The filters applied to the dataset.
@@ -186,7 +221,7 @@ interface ViewBase {
 	/**
 	 * The filters to apply.
 	 */
-	filters: Filter[];
+	filters?: Filter[];
 
 	/**
 	 * The sorting configuration.
@@ -216,13 +251,13 @@ interface ViewBase {
 	/**
 	 * The hidden fields.
 	 */
-	hiddenFields: string[];
+	fields?: string[];
 }
 
 export interface ViewTable extends ViewBase {
 	type: 'table';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -238,7 +273,7 @@ export interface ViewTable extends ViewBase {
 export interface ViewList extends ViewBase {
 	type: 'list';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -254,7 +289,7 @@ export interface ViewList extends ViewBase {
 export interface ViewGrid extends ViewBase {
 	type: 'grid';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -279,7 +314,7 @@ export interface ViewGrid extends ViewBase {
 
 export type View = ViewList | ViewGrid | ViewTable;
 
-interface ActionBase< Item extends AnyItem > {
+interface ActionBase< Item > {
 	/**
 	 * The unique identifier of the action.
 	 */
@@ -325,30 +360,17 @@ interface ActionBase< Item extends AnyItem > {
 	supportsBulk?: boolean;
 }
 
-export interface ActionModal< Item extends AnyItem >
-	extends ActionBase< Item > {
-	/**
-	 * The callback to execute when the action has finished.
-	 */
-	onActionPerformed: ( ( items: Item[] ) => void ) | undefined;
-
-	/**
-	 * The callback to execute when the action is triggered.
-	 */
-	onActionStart: ( ( items: Item[] ) => void ) | undefined;
-
+export interface ActionModal< Item > extends ActionBase< Item > {
 	/**
 	 * Modal to render when the action is triggered.
 	 */
 	RenderModal: ( {
 		items,
 		closeModal,
-		onActionStart,
 		onActionPerformed,
 	}: {
 		items: Item[];
 		closeModal?: () => void;
-		onActionStart?: ( items: Item[] ) => void;
 		onActionPerformed?: ( items: Item[] ) => void;
 	} ) => ReactElement;
 
@@ -363,47 +385,53 @@ export interface ActionModal< Item extends AnyItem >
 	modalHeader?: string;
 }
 
-export interface ActionButton< Item extends AnyItem >
-	extends ActionBase< AnyItem > {
+export interface ActionButton< Item > extends ActionBase< Item > {
 	/**
 	 * The callback to execute when the action is triggered.
 	 */
-	callback: ( items: Item[] ) => void;
+	callback: (
+		items: Item[],
+		context: {
+			registry: any;
+			onActionPerformed?: ( items: Item[] ) => void;
+		}
+	) => void;
 }
 
-export type Action< Item extends AnyItem > =
-	| ActionModal< Item >
-	| ActionButton< Item >;
+export type Action< Item > = ActionModal< Item > | ActionButton< Item >;
 
-export interface ViewBaseProps< Item extends AnyItem > {
+export interface ViewBaseProps< Item > {
 	actions: Action< Item >[];
 	data: Item[];
 	fields: NormalizedField< Item >[];
 	getItemId: ( item: Item ) => string;
 	isLoading?: boolean;
-	onChangeView( view: View ): void;
-	onSelectionChange: ( items: Item[] ) => void;
+	onChangeView: ( view: View ) => void;
+	onSelectionChange: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
 }
 
-export interface ViewTableProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
 	view: ViewTable;
 }
 
-export interface ViewListProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewListProps< Item > extends ViewBaseProps< Item > {
 	view: ViewList;
 }
 
-export interface ViewGridProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewGridProps< Item > extends ViewBaseProps< Item > {
 	view: ViewGrid;
 }
 
-export type ViewProps< Item extends AnyItem > =
+export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
+
+export interface SupportedLayouts {
+	list?: Omit< ViewList, 'type' >;
+	grid?: Omit< ViewGrid, 'type' >;
+	table?: Omit< ViewTable, 'type' >;
+}

package/src/utils.ts

@@ -8,11 +8,9 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 } from './constants';
-import type { AnyItem, NormalizedField } from './types';
+import type { NormalizedField } from './types';
 
-export function sanitizeOperators< Item extends AnyItem >(
-	field: NormalizedField< Item >
-) {
+export function sanitizeOperators< Item >( field: NormalizedField< Item > ) {
 	let operators = field.filterBy?.operators;
 
 	// Assign default values.

package/src/view-actions.tsx

@@ -9,10 +9,11 @@ import type { ChangeEvent } from 'react';
 import {
 	Button,
 	privateApis as componentsPrivateApis,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { memo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
+import { cog } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +21,7 @@ import { settings } from '@wordpress/icons';
 import { unlock } from './lock-unlock';
 import { SORTING_DIRECTIONS, sortLabels } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
-import type { AnyItem, NormalizedField, View } from './types';
+import type { NormalizedField, View, SupportedLayouts } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -34,7 +35,7 @@ const {
 interface ViewTypeMenuProps {
 	view: View;
 	onChangeView: ( view: View ) => void;
-	supportedLayouts?: string[];
+	defaultLayouts?: SupportedLayouts;
 }
 
 interface PageSizeMenuProps {
@@ -42,84 +43,64 @@ interface PageSizeMenuProps {
 	onChangeView: ( view: View ) => void;
 }
 
-interface FieldsVisibilityMenuProps< Item extends AnyItem > {
+interface FieldsVisibilityMenuProps< Item > {
 	view: View;
 	onChangeView: ( view: View ) => void;
 	fields: NormalizedField< Item >[];
 }
 
-interface SortMenuProps< Item extends AnyItem > {
+interface SortMenuProps< Item > {
 	fields: NormalizedField< Item >[];
 	view: View;
 	onChangeView: ( view: View ) => void;
 }
 
-interface ViewActionsProps< Item extends AnyItem > {
+interface ViewActionsProps< Item > {
 	fields: NormalizedField< Item >[];
 	view: View;
 	onChangeView: ( view: View ) => void;
-	supportedLayouts?: string[];
+	defaultLayouts?: SupportedLayouts;
 }
 
 function ViewTypeMenu( {
 	view,
 	onChangeView,
-	supportedLayouts,
+	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
-	let _availableViews = VIEW_LAYOUTS;
-	if ( supportedLayouts ) {
-		_availableViews = _availableViews.filter( ( _view ) =>
-			supportedLayouts.includes( _view.type )
-		);
-	}
-	if ( _availableViews.length === 1 ) {
+	const availableLayouts = Object.keys( defaultLayouts );
+	if ( availableLayouts.length <= 1 ) {
 		return null;
 	}
-	const activeView = _availableViews.find( ( v ) => view.type === v.type );
-	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem
-					suffix={
-						<span aria-hidden="true">{ activeView?.label }</span>
+	return availableLayouts.map( ( layout ) => {
+		const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+		if ( ! config ) {
+			return null;
+		}
+		return (
+			<DropdownMenuRadioItem
+				key={ layout }
+				value={ layout }
+				name="view-actions-available-view"
+				checked={ layout === view.type }
+				hideOnClick
+				onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+					switch ( e.target.value ) {
+						case 'list':
+						case 'grid':
+						case 'table':
+							return onChangeView( {
+								...view,
+								type: e.target.value,
+								...defaultLayouts[ e.target.value ],
+							} );
 					}
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Layout' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
-			{ _availableViews.map( ( availableView ) => {
-				return (
-					<DropdownMenuRadioItem
-						key={ availableView.type }
-						value={ availableView.type }
-						name="view-actions-available-view"
-						checked={ availableView.type === view.type }
-						hideOnClick
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
-							switch ( e.target.value ) {
-								case 'list':
-								case 'grid':
-								case 'table':
-									return onChangeView( {
-										...view,
-										type: e.target.value,
-										layout: {},
-									} );
-							}
-							throw new Error( 'Invalid dataview' );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ availableView.label }
-						</DropdownMenuItemLabel>
-					</DropdownMenuRadioItem>
-				);
-			} ) }
-		</DropdownMenu>
-	);
+					throw new Error( 'Invalid dataview' );
+				} }
+			>
+				<DropdownMenuItemLabel>{ config.label }</DropdownMenuItemLabel>
+			</DropdownMenuRadioItem>
+		);
+	} );
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
@@ -161,15 +142,17 @@ function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
 	);
 }
 
-function FieldsVisibilityMenu< Item extends AnyItem >( {
+function FieldsVisibilityMenu< Item >( {
 	view,
 	onChangeView,
 	fields,
 }: FieldsVisibilityMenuProps< Item > ) {
 	const hidableFields = fields.filter(
 		( field ) =>
-			field.enableHiding !== false && field.id !== view.layout.mediaField
+			field.enableHiding !== false &&
+			field.id !== view?.layout?.mediaField
 	);
+	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	if ( ! hidableFields?.length ) {
 		return null;
 	}
@@ -188,20 +171,15 @@ function FieldsVisibilityMenu< Item extends AnyItem >( {
 					<DropdownMenuCheckboxItem
 						key={ field.id }
 						value={ field.id }
-						checked={ ! view.hiddenFields?.includes( field.id ) }
+						checked={ viewFields.includes( field.id ) }
 						onChange={ () => {
 							onChangeView( {
 								...view,
-								hiddenFields: view.hiddenFields?.includes(
-									field.id
-								)
-									? view.hiddenFields.filter(
+								fields: viewFields.includes( field.id )
+									? viewFields.filter(
 											( id ) => id !== field.id
 									  )
-									: [
-											...( view.hiddenFields || [] ),
-											field.id,
-									  ],
+									: [ ...viewFields, field.id ],
 							} );
 						} }
 					>
@@ -215,7 +193,7 @@ function FieldsVisibilityMenu< Item extends AnyItem >( {
 	);
 }
 
-function SortMenu< Item extends AnyItem >( {
+function SortMenu< Item >( {
 	fields,
 	view,
 	onChangeView,
@@ -303,41 +281,66 @@ function SortMenu< Item extends AnyItem >( {
 	);
 }
 
-function _ViewActions< Item extends AnyItem >( {
+function _ViewActions< Item >( {
 	fields,
 	view,
 	onChangeView,
-	supportedLayouts,
+	defaultLayouts,
 }: ViewActionsProps< Item > ) {
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					size="compact"
-					icon={ settings }
-					label={ __( 'View options' ) }
-				/>
-			}
-		>
-			<DropdownMenuGroup>
-				<ViewTypeMenu
-					view={ view }
-					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
-				/>
-				<SortMenu
-					fields={ fields }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-				<FieldsVisibilityMenu
-					fields={ fields }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
-			</DropdownMenuGroup>
-		</DropdownMenu>
+		<>
+			<HStack
+				spacing={ 1 }
+				expanded={ false }
+				style={ { flexShrink: 0 } }
+			>
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ activeView?.icon }
+							label={ __( 'Layout' ) }
+						/>
+					}
+				>
+					<ViewTypeMenu
+						view={ view }
+						onChangeView={ onChangeView }
+						defaultLayouts={ defaultLayouts }
+					/>
+				</DropdownMenu>
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ cog }
+							label={ _x(
+								'View options',
+								'View is used as a noun'
+							) }
+						/>
+					}
+				>
+					<DropdownMenuGroup>
+						<SortMenu
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+						<FieldsVisibilityMenu
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+						<PageSizeMenu
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</DropdownMenuGroup>
+				</DropdownMenu>
+			</HStack>
+		</>
 	);
 }
 

package/src/view-grid.tsx

@@ -22,12 +22,12 @@ import { __ } from '@wordpress/i18n';
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
 import { useHasAPossibleBulkAction } from './bulk-actions';
-import type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';
+import type { Action, NormalizedField, ViewGridProps } from './types';
+import type { SetSelection } from './private-types';
 
-interface GridItemProps< Item extends AnyItem > {
+interface GridItemProps< Item > {
 	selection: string[];
-	data: Item[];
-	onSelectionChange: ( items: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	getItemId: ( item: Item ) => string;
 	item: Item;
 	actions: Action< Item >[];
@@ -38,9 +38,8 @@ interface GridItemProps< Item extends AnyItem > {
 	columnFields?: string[];
 }
 
-function GridItem< Item extends AnyItem >( {
+function GridItem< Item >( {
 	selection,
-	data,
 	onSelectionChange,
 	getItemId,
 	item,
@@ -68,27 +67,11 @@ function GridItem< Item extends AnyItem >( {
 					if ( ! hasBulkAction ) {
 						return;
 					}
-					if ( ! isSelected ) {
-						onSelectionChange(
-							data.filter( ( _item ) => {
-								const itemId = getItemId?.( _item );
-								return (
-									itemId === id ||
-									selection.includes( itemId )
-								);
-							} )
-						);
-					} else {
-						onSelectionChange(
-							data.filter( ( _item ) => {
-								const itemId = getItemId?.( _item );
-								return (
-									itemId !== id &&
-									selection.includes( itemId )
-								);
-							} )
-						);
-					}
+					onSelectionChange(
+						selection.includes( id )
+							? selection.filter( ( itemId ) => id !== itemId )
+							: [ ...selection, id ]
+					);
 				}
 			} }
 		>
@@ -104,7 +87,6 @@ function GridItem< Item extends AnyItem >( {
 					selection={ selection }
 					onSelectionChange={ onSelectionChange }
 					getItemId={ getItemId }
-					data={ data }
 					primaryField={ primaryField }
 					disabled={ ! hasBulkAction }
 				/>
@@ -187,7 +169,7 @@ function GridItem< Item extends AnyItem >( {
 	);
 }
 
-export default function ViewGrid< Item extends AnyItem >( {
+export default function ViewGrid< Item >( {
 	actions,
 	data,
 	fields,
@@ -198,24 +180,26 @@ export default function ViewGrid< Item extends AnyItem >( {
 	view,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
-		( field ) => field.id === view.layout.mediaField
+		( field ) => field.id === view.layout?.mediaField
 	);
 	const primaryField = fields.find(
-		( field ) => field.id === view.layout.primaryField
+		( field ) => field.id === view.layout?.primaryField
 	);
+	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	const { visibleFields, badgeFields } = fields.reduce(
 		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
 			if (
-				view.hiddenFields.includes( field.id ) ||
-				[ view.layout.mediaField, view.layout.primaryField ].includes(
-					field.id
-				)
+				! viewFields.includes( field.id ) ||
+				[
+					view.layout?.mediaField,
+					view?.layout?.primaryField,
+				].includes( field.id )
 			) {
 				return accumulator;
 			}
 			// If the field is a badge field, add it to the badgeFields array
 			// otherwise add it to the rest visibleFields array.
-			const key = view.layout.badgeFields?.includes( field.id )
+			const key = view.layout?.badgeFields?.includes( field.id )
 				? 'badgeFields'
 				: 'visibleFields';
 			accumulator[ key ].push( field );
@@ -239,7 +223,6 @@ export default function ViewGrid< Item extends AnyItem >( {
 							<GridItem
 								key={ getItemId( item ) }
 								selection={ selection }
-								data={ data }
 								onSelectionChange={ onSelectionChange }
 								getItemId={ getItemId }
 								item={ item }
@@ -248,7 +231,7 @@ export default function ViewGrid< Item extends AnyItem >( {
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
 								badgeFields={ badgeFields }
-								columnFields={ view.layout.columnFields }
+								columnFields={ view.layout?.columnFields }
 							/>
 						);
 					} ) }