@wordpress/dataviews 10.2.0 → 10.3.1-next.2f1c7c01b.0

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

@@ -7,6 +7,11 @@ 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
@@ -24,17 +29,49 @@ 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,
+};
+
+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: [],
@@ -61,9 +98,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',
@@ -138,32 +177,116 @@ export const Default = ( {
 	);
 };
 
-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,

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/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',
 			},
 		],
 	},