@wordpress/dataviews 2.2.0 → 4.0.0

package/src/{stories → components/dataviews/stories}/fixtures.js

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { LAYOUT_TABLE } from '../constants';
+import { LAYOUT_TABLE } from '../../../constants';
 
 export const data = [
 	{
@@ -22,6 +22,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Not a planet',
 		categories: [ 'Space', 'NASA' ],
+		satellites: 0,
 	},
 	{
 		id: 2,
@@ -30,6 +31,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
 		type: 'Not a planet',
 		categories: [ 'Space' ],
+		satellites: 0,
 	},
 	{
 		id: 3,
@@ -38,6 +40,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
 		type: 'Not a planet',
 		categories: [ 'NASA' ],
+		satellites: 0,
 	},
 	{
 		id: 4,
@@ -46,6 +49,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 14,
 	},
 	{
 		id: 5,
@@ -54,6 +58,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 0,
 	},
 	{
 		id: 6,
@@ -62,6 +67,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 0,
 	},
 	{
 		id: 7,
@@ -70,6 +76,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 1,
 	},
 	{
 		id: 8,
@@ -78,6 +85,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 2,
 	},
 	{
 		id: 9,
@@ -86,6 +94,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 95,
 	},
 	{
 		id: 10,
@@ -94,6 +103,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 146,
 	},
 	{
 		id: 11,
@@ -102,6 +112,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
 		categories: [ 'Space', 'Ice giant', 'Solar system' ],
+		satellites: 28,
 	},
 ];
 
@@ -110,7 +121,7 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	hiddenFields: [ 'image', 'type' ],
+	fields: [ 'title', 'description', 'categories' ],
 	layout: {},
 	filters: [],
 };
@@ -149,27 +160,24 @@ export const actions = [
 
 export const fields = [
 	{
-		header: 'Image',
+		label: 'Image',
 		id: 'image',
 		render: ( { item } ) => {
 			return (
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		width: 50,
 		enableSorting: false,
 	},
 	{
-		header: 'Title',
+		label: 'Title',
 		id: 'title',
-		maxWidth: 400,
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Type',
+		label: 'Type',
 		id: 'type',
-		maxWidth: 400,
 		enableHiding: false,
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
@@ -179,14 +187,18 @@ export const fields = [
 		],
 	},
 	{
-		header: 'Description',
+		label: 'Satellites',
+		id: 'satellites',
+		enableSorting: true,
+	},
+	{
+		label: 'Description',
 		id: 'description',
-		maxWidth: 200,
 		enableSorting: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Categories',
+		label: 'Categories',
 		id: 'categories',
 		elements: [
 			{ value: 'Space', label: 'Space' },

package/src/components/dataviews/stories/index.story.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../index';
+import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
+
+const meta = {
+	title: 'DataViews/DataViews',
+	component: DataViews,
+};
+export default meta;
+
+export const Default = ( props ) => {
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+	return (
+		<DataViews
+			{ ...props }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+		/>
+	);
+};
+Default.args = {
+	actions,
+	defaultLayouts: {
+		[ LAYOUT_TABLE ]: {
+			layout: {
+				primaryField: 'title',
+				styles: {
+					image: {
+						width: 50,
+					},
+					title: {
+						maxWidth: 400,
+					},
+					type: {
+						maxWidth: 400,
+					},
+					description: {
+						maxWidth: 200,
+					},
+				},
+			},
+		},
+		[ LAYOUT_GRID ]: {
+			layout: {
+				mediaField: 'image',
+				primaryField: 'title',
+			},
+		},
+	},
+};

package/src/components/dataviews/style.scss

@@ -0,0 +1,97 @@
+.dataviews-wrapper {
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
+}
+
+.dataviews__view-actions {
+	box-sizing: border-box;
+	padding: $grid-unit-20 $grid-unit-60;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+	.components-search-control {
+		.components-base-control__field {
+			max-width: 240px;
+		}
+	}
+}
+
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-700;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		flex-grow: 0;
+		color: $gray-900;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+		@include link-reset();
+	}
+
+	button.components-button.is-link {
+		text-decoration: none;
+		font-weight: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions {
+		padding: $grid-unit-15 $grid-unit-30;
+
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
+
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}

package/src/{bulk-actions.tsx → components/dataviews-bulk-actions/index.tsx}

@@ -7,14 +7,16 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal, AnyItem } from './types';
+import DataViewsContext from '../dataviews-context';
+import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -23,34 +25,26 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-interface ActionWithModalProps< Item extends AnyItem > {
+interface ActionWithModalProps< Item > {
 	action: ActionModal< Item >;
 	selectedItems: Item[];
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 	onMenuOpenChange: ( isOpen: boolean ) => void;
 }
 
-interface BulkActionsItemProps< Item extends AnyItem > {
+interface BulkActionsItemProps< Item > {
 	action: Action< Item >;
 	selectedItems: Item[];
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface ActionsMenuGroupProps< Item extends AnyItem > {
+interface ActionsMenuGroupProps< Item > {
 	actions: Action< Item >[];
 	selectedItems: Item[];
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface BulkActionsProps< Item extends AnyItem > {
-	data: Item[];
-	actions: Action< Item >[];
-	selection: string[];
-	onSelectionChange: ( selection: Item[] ) => void;
-	getItemId: ( item: Item ) => string;
-}
-
-export function useHasAPossibleBulkAction< Item extends AnyItem >(
+export function useHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	item: Item
 ) {
@@ -64,7 +58,7 @@ export function useHasAPossibleBulkAction< Item extends AnyItem >(
 	}, [ actions, item ] );
 }
 
-export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
+export function useSomeItemHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	data: Item[]
 ) {
@@ -80,7 +74,7 @@ export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
 	}, [ actions, data ] );
 }
 
-function ActionWithModal< Item extends AnyItem >( {
+function ActionWithModal< Item >( {
 	action,
 	selectedItems,
 	setActionWithModal,
@@ -104,7 +98,7 @@ function ActionWithModal< Item extends AnyItem >( {
 			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
-			overlayClassName="dataviews-action-modal"
+			overlayClassName="dataviews-bulk-actions__modal"
 		>
 			<RenderModal
 				items={ eligibleItems }
@@ -115,7 +109,7 @@ function ActionWithModal< Item extends AnyItem >( {
 	);
 }
 
-function BulkActionItem< Item extends AnyItem >( {
+function BulkActionItem< Item >( {
 	action,
 	selectedItems,
 	setActionWithModal,
@@ -132,7 +126,6 @@ function BulkActionItem< Item extends AnyItem >( {
 	return (
 		<DropdownMenuItem
 			key={ action.id }
-			disabled={ eligibleItems.length === 0 }
 			hideOnClick={ ! shouldShowModal }
 			onClick={ async () => {
 				if ( shouldShowModal ) {
@@ -141,24 +134,32 @@ function BulkActionItem< Item extends AnyItem >( {
 					action.callback( eligibleItems, { registry } );
 				}
 			} }
-			suffix={
-				eligibleItems.length > 0 ? eligibleItems.length : undefined
-			}
+			suffix={ eligibleItems.length }
 		>
 			{ action.label }
 		</DropdownMenuItem>
 	);
 }
 
-function ActionsMenuGroup< Item extends AnyItem >( {
+function ActionsMenuGroup< Item >( {
 	actions,
 	selectedItems,
 	setActionWithModal,
 }: ActionsMenuGroupProps< Item > ) {
+	const elligibleActions = useMemo( () => {
+		return actions.filter( ( action ) => {
+			return selectedItems.some(
+				( item ) => ! action.isEligible || action.isEligible( item )
+			);
+		} );
+	}, [ actions, selectedItems ] );
+	if ( ! elligibleActions.length ) {
+		return null;
+	}
 	return (
 		<>
 			<DropdownMenuGroup>
-				{ actions.map( ( action ) => (
+				{ elligibleActions.map( ( action ) => (
 					<BulkActionItem
 						key={ action.id }
 						action={ action }
@@ -172,20 +173,21 @@ function ActionsMenuGroup< Item extends AnyItem >( {
 	);
 }
 
-export default function BulkActions< Item extends AnyItem >( {
-	data,
-	actions,
-	selection,
-	onSelectionChange,
-	getItemId,
-}: BulkActionsProps< Item > ) {
+function _BulkActions() {
+	const {
+		data,
+		actions = [],
+		selection,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
 	const [ actionWithModal, setActionWithModal ] = useState<
-		ActionModal< Item > | undefined
+		ActionModal< any > | undefined
 	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
@@ -219,7 +221,7 @@ export default function BulkActions< Item extends AnyItem >( {
 				style={ { minWidth: '240px' } }
 				trigger={
 					<Button
-						className="dataviews-bulk-edit-button"
+						className="dataviews-bulk-actions__edit-button"
 						__next40pxDefaultSize
 						variant="tertiary"
 						size="compact"
@@ -248,7 +250,11 @@ export default function BulkActions< Item extends AnyItem >( {
 						disabled={ areAllSelected }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( selectableItems );
+							onChangeSelection(
+								selectableItems.map( ( item ) =>
+									getItemId( item )
+								)
+							);
 						} }
 						suffix={ numberSelectableItems }
 					>
@@ -258,7 +264,7 @@ export default function BulkActions< Item extends AnyItem >( {
 						disabled={ selection.length === 0 }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( [] );
+							onChangeSelection( [] );
 						} }
 					>
 						{ __( 'Deselect' ) }
@@ -276,3 +282,19 @@ export default function BulkActions< Item extends AnyItem >( {
 		</>
 	);
 }
+
+export default function BulkActions() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActions />;
+}

package/src/components/dataviews-bulk-actions/style.scss

@@ -0,0 +1,7 @@
+.dataviews-bulk-actions__modal {
+	z-index: z-index(".dataviews-bulk-actions__modal");
+}
+
+.dataviews-bulk-actions__edit-button.components-button {
+	flex-shrink: 0;
+}