@wordpress/dataviews 10.2.0 → 10.3.0

package/src/stories/dataviews-picker.story.tsx

@@ -7,12 +7,17 @@ import type { Meta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import {
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import DataViewsPicker from '../components/dataviews-picker/index';
-import { LAYOUT_PICKER_GRID } from '../constants';
+import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { ActionButton, View } from '../types';
 import { data, fields, type SpaceObject } from './dataviews.fixtures';
@@ -24,19 +29,51 @@ const meta = {
 
 export default meta;
 
-export const Default = ( {
-	perPageSizes = [ 10, 25, 50, 100 ],
-	isMultiselectable,
-	isGrouped,
-	infiniteScrollEnabled,
-}: {
+const storyArgs = {
+	perPageSizes: [ 10, 25, 50, 100 ],
+	isMultiselectable: false,
+	isGrouped: false,
+	infiniteScrollEnabled: false,
+};
+
+const storyArgTypes = {
+	isMultiselectable: {
+		control: 'boolean',
+		description: 'Whether multiselection is supported',
+	},
+	perPageSizes: {
+		control: 'object',
+		description: 'Array of available page sizes',
+	},
+	isGrouped: {
+		control: 'boolean',
+		description: 'Whether the items are grouped or ungrouped',
+	},
+	infiniteScrollEnabled: {
+		control: 'boolean',
+		description:
+			'Whether the infinite scroll is enabled. Enabling this disables the "Is grouped" option',
+	},
+};
+
+interface PickerContentProps {
 	perPageSizes: number[];
 	isMultiselectable: boolean;
 	isGrouped: boolean;
 	infiniteScrollEnabled: boolean;
-} ) => {
+	actions?: ActionButton< SpaceObject >[];
+	selection?: string[];
+}
+
+const DataViewsPickerContent = ( {
+	perPageSizes = [ 10, 25, 50, 100 ],
+	isMultiselectable,
+	isGrouped,
+	infiniteScrollEnabled,
+	actions: customActions,
+	selection: customSelection,
+}: PickerContentProps ) => {
 	const [ view, setView ] = useState< View >( {
-		type: LAYOUT_PICKER_GRID,
 		fields: [],
 		titleField: 'title',
 		mediaField: 'image',
@@ -44,6 +81,7 @@ export const Default = ( {
 		page: 1,
 		perPage: 10,
 		filters: [],
+		type: LAYOUT_PICKER_GRID,
 		groupByField: isGrouped ? 'type' : undefined,
 		infiniteScrollEnabled,
 	} );
@@ -61,9 +99,11 @@ export const Default = ( {
 		} ) );
 	}, [ isGrouped, infiniteScrollEnabled ] );
 
-	const [ selection, setSelection ] = useState< string[] >( [] );
+	const [ selection, setSelection ] = useState< string[] >(
+		customSelection || []
+	);
 
-	const actions: ActionButton< SpaceObject >[] = [
+	const actions: ActionButton< SpaceObject >[] = customActions || [
 		{
 			id: 'cancel',
 			label: 'Cancel',
@@ -99,13 +139,14 @@ export const Default = ( {
 		setView,
 		data: shownData,
 		getItemId: ( item ) => item.id.toString(),
+		totalDataLength: data.length,
 	} );
 
 	return (
 		<>
 			{ infiniteScrollEnabled && (
 				<style>{ `
-					.dataviews-wrapper {
+					.dataviews-picker-wrapper {
 						height: 600px;
 						overflow: auto;
 					}
@@ -132,48 +173,135 @@ export const Default = ( {
 				itemListLabel="Galactic Bodies"
 				defaultLayouts={ {
 					[ LAYOUT_PICKER_GRID ]: {},
+					[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
 				} }
 			/>
 		</>
 	);
 };
 
-Default.args = {
-	perPageSizes: [ 10, 25, 50, 100 ],
-	isMultiselectable: false,
-	isGrouped: false,
-};
+export const Default = ( {
+	perPageSizes = [ 10, 25, 50, 100 ],
+	isMultiselectable,
+	isGrouped,
+	infiniteScrollEnabled,
+}: {
+	perPageSizes: number[];
+	isMultiselectable: boolean;
+	isGrouped: boolean;
+	infiniteScrollEnabled: boolean;
+} ) => (
+	<DataViewsPickerContent
+		perPageSizes={ perPageSizes }
+		isMultiselectable={ isMultiselectable }
+		isGrouped={ isGrouped }
+		infiniteScrollEnabled={ infiniteScrollEnabled }
+	/>
+);
 
-Default.argTypes = {
-	isMultiselectable: {
-		control: 'boolean',
-		description: 'Whether multiselection is supported',
-	},
-	perPageSizes: {
-		control: 'object',
-		description: 'Array of available page sizes',
-	},
-	isGrouped: {
-		control: 'boolean',
-		description: 'Whether the items are grouped or ungrouped',
-	},
-	infiniteScrollEnabled: {
-		control: 'boolean',
-		description:
-			'Whether the infinite scroll is enabled. Enabling this disables the "Is grouped" option',
-	},
+Default.args = storyArgs;
+Default.argTypes = storyArgTypes;
+
+export const WithModal = ( {
+	perPageSizes = [ 10, 25, 50, 100 ],
+	isMultiselectable,
+	isGrouped,
+	infiniteScrollEnabled,
+}: {
+	perPageSizes: number[];
+	isMultiselectable: boolean;
+	isGrouped: boolean;
+	infiniteScrollEnabled: boolean;
+} ) => {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ selectedItems, setSelectedItems ] = useState< SpaceObject[] >( [] );
+
+	const modalActions: ActionButton< SpaceObject >[] = [
+		{
+			id: 'cancel',
+			label: 'Cancel',
+			supportsBulk: isMultiselectable,
+			callback() {
+				setIsModalOpen( false );
+			},
+		},
+		{
+			id: 'confirm',
+			label: 'Confirm',
+			isPrimary: true,
+			supportsBulk: isMultiselectable,
+			callback( items ) {
+				setSelectedItems( items );
+				setIsModalOpen( false );
+			},
+		},
+	];
+
+	return (
+		<>
+			<HStack justify="left">
+				<Button
+					variant="primary"
+					onClick={ () => setIsModalOpen( true ) }
+				>
+					Open Picker Modal
+				</Button>
+				<Button
+					onClick={ () => setSelectedItems( [] ) }
+					disabled={ ! selectedItems.length }
+					accessibleWhenDisabled
+				>
+					Clear Selection
+				</Button>
+			</HStack>
+			{ selectedItems.length > 0 && (
+				<p>
+					Selected:{ ' ' }
+					{ selectedItems
+						.map( ( item ) => item.name.title )
+						.join( ', ' ) }
+				</p>
+			) }
+			{ isModalOpen && (
+				<Modal
+					title="Select Items"
+					onRequestClose={ () => setIsModalOpen( false ) }
+					isFullScreen={ false }
+					size="fill"
+				>
+					<div style={ { padding: '16px' } }>
+						<DataViewsPickerContent
+							perPageSizes={ perPageSizes }
+							isMultiselectable={ isMultiselectable }
+							isGrouped={ isGrouped }
+							infiniteScrollEnabled={ infiniteScrollEnabled }
+							actions={ modalActions }
+							selection={ selectedItems.map( ( item ) =>
+								String( item.id )
+							) }
+						/>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
 };
 
+WithModal.args = storyArgs;
+WithModal.argTypes = storyArgTypes;
+
 function useInfiniteScroll( {
 	view,
 	setView,
 	data: shownData,
 	getItemId,
+	totalDataLength,
 }: {
 	view: View;
 	setView: ( view: View ) => void;
 	data: SpaceObject[];
 	getItemId: ( item: SpaceObject ) => string;
+	totalDataLength: number;
 } ): {
 	data: SpaceObject[];
 	paginationInfo: {
@@ -190,8 +318,8 @@ function useInfiniteScroll( {
 	);
 	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
 
-	const totalItems = data.length;
-	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
+	const totalItems = totalDataLength;
+	const totalPages = Math.ceil( totalItems / ( view.perPage || 10 ) );
 	const currentPage = view.page || 1;
 	const hasMoreData = currentPage < totalPages;
 
@@ -206,7 +334,7 @@ function useInfiniteScroll( {
 			...view,
 			page: currentPage + 1,
 		} );
-	}, [ isLoadingMore, currentPage, totalPages, view ] );
+	}, [ isLoadingMore, currentPage, totalPages, view, setView ] );
 
 	// Initialize data on first load or when view changes significantly
 	useEffect( () => {

package/src/stories/dataviews.fixtures.tsx

@@ -805,7 +805,10 @@ export const actions: Action< SpaceObject >[] = [
 	{
 		id: 'secondary',
 		label: 'Secondary action',
-		callback() {},
+		callback() {
+			// eslint-disable-next-line no-console
+			console.log( 'Perform secondary action.' );
+		},
 	},
 ];
 

package/src/stories/dataviews.story.tsx

@@ -70,7 +70,10 @@ const defaultLayouts = {
 	[ LAYOUT_LIST ]: {},
 };
 
-export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
+export const Default = ( {
+	perPageSizes = [ 10, 25, 50, 100 ],
+	hasClickableItems = true,
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'categories' ],
@@ -100,7 +103,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 					{ ...props }
 				/>
 			) }
-			isItemClickable={ () => true }
+			isItemClickable={ () => hasClickableItems }
 			defaultLayouts={ defaultLayouts }
 			config={ { perPageSizes } }
 		/>
@@ -109,6 +112,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 
 Default.args = {
 	perPageSizes: [ 10, 25, 50, 100 ],
+	hasClickableItems: true,
 };
 
 Default.argTypes = {
@@ -116,6 +120,10 @@ Default.argTypes = {
 		control: 'object',
 		description: 'Array of available page sizes',
 	},
+	hasClickableItems: {
+		control: 'boolean',
+		description: 'Are the items clickable',
+	},
 };
 
 export const Empty = () => {

package/src/stories/field-types.story.tsx

@@ -142,7 +142,7 @@ const data: DataType[] = [
 		booleanWithToggle: true,
 		booleanWithElements: true,
 		datetime: '2021-01-01T14:30:00Z',
-		datetimeWithElements: '2021-01-01T14:30:00Z',
+		datetimeWithElements: '1982-05-10T20:30:00Z',
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
 		email: 'hi@example.com',
@@ -285,16 +285,16 @@ const fields: Field< DataType >[] = [
 		description: 'Help for datetime with elements.',
 		elements: [
 			{
-				value: '2021-01-01T14:30:00Z',
-				label: 'January 1st, 2021. 14:30UTC',
+				value: '1973-02-01T14:30:00Z',
+				label: 'February 1st, 1973. 14:30UTC',
 			},
 			{
-				value: '2021-02-01T14:30:00Z',
-				label: 'February 1st, 2021. 14:30UTC',
+				value: '1982-05-10T20:30:00Z',
+				label: 'May 10th, 1982. 20:30UTC',
 			},
 			{
-				value: '2021-03-01T14:30:00Z',
-				label: 'March 1st, 2021. 14:30UTC',
+				value: '1994-03-01T14:30:00Z',
+				label: 'March 1st, 1994. 14:30UTC',
 			},
 		],
 	},

package/src/style.scss

@@ -12,10 +12,12 @@
 @use "./dataviews-layouts/list/style.scss" as *;
 @use "./dataviews-layouts/table/style.scss" as *;
 @use "./dataviews-layouts/picker-grid/style.scss" as *;
+@use "./dataviews-layouts/picker-table/style.scss" as *;
 
 @use "./dataform-controls/style.scss" as *;
 @use "./dataform-layouts/panel/style.scss" as *;
 @use "./dataform-layouts/regular/style.scss" as *;
 @use "./dataform-layouts/card/style.scss" as *;
+@use "./dataform-layouts/details/style.scss" as *;
 @use "./dataform-layouts/row/style.scss" as *;
 @use "./dataform-layouts/style.scss" as *;