@wordpress/dataviews 0.8.0 → 0.9.0

package/src/stories/index.story.js

@@ -7,13 +7,9 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { DataViews } from '../index';
-import { DEFAULT_VIEW, actions, data } from './fixtures';
-import {
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	OPERATOR_IS_NONE,
-	OPERATOR_IS_ANY,
-} from '../constants';
+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',
@@ -31,114 +27,10 @@ const defaultConfigPerViewType = {
 	},
 };
 
-function normalizeSearchInput( input = '' ) {
-	return input.trim().toLowerCase();
-}
-
-const fields = [
-	{
-		header: 'Image',
-		id: 'image',
-		render: ( { item } ) => {
-			return (
-				<img src={ item.image } alt="" style={ { width: '100%' } } />
-			);
-		},
-		width: 50,
-		enableSorting: false,
-	},
-	{
-		header: 'Title',
-		id: 'title',
-		maxWidth: 400,
-		enableHiding: false,
-	},
-	{
-		header: 'Type',
-		id: 'type',
-		maxWidth: 400,
-		enableHiding: false,
-		type: 'enumeration',
-		elements: [
-			{ value: 'Not a planet', label: 'Not a planet' },
-			{ value: 'Ice giant', label: 'Ice giant' },
-			{ value: 'Terrestrial', label: 'Terrestrial' },
-			{ value: 'Gas giant', label: 'Gas giant' },
-		],
-	},
-	{
-		header: 'Description',
-		id: 'description',
-		maxWidth: 200,
-		enableSorting: false,
-	},
-];
-
 export const Default = ( props ) => {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { shownData, paginationInfo } = useMemo( () => {
-		let filteredData = [ ...data ];
-		// Handle global search.
-		if ( view.search ) {
-			const normalizedSearch = normalizeSearchInput( view.search );
-			filteredData = filteredData.filter( ( item ) => {
-				return [
-					normalizeSearchInput( item.title ),
-					normalizeSearchInput( item.description ),
-				].some( ( field ) => field.includes( normalizedSearch ) );
-			} );
-		}
-
-		if ( view.filters.length > 0 ) {
-			view.filters.forEach( ( filter ) => {
-				if (
-					filter.field === 'type' &&
-					filter.operator === OPERATOR_IS_ANY &&
-					filter?.value?.length > 0
-				) {
-					filteredData = filteredData.filter( ( item ) => {
-						return filter.value.includes( item.type );
-					} );
-				} else if (
-					filter.field === 'type' &&
-					filter.operator === OPERATOR_IS_NONE &&
-					filter?.value?.length > 0
-				) {
-					filteredData = filteredData.filter( ( item ) => {
-						return ! filter.value.includes( item.type );
-					} );
-				}
-			} );
-		}
-
-		// Handle sorting.
-		if ( view.sort ) {
-			const stringSortingFields = [ 'title' ];
-			const fieldId = view.sort.field;
-			if ( stringSortingFields.includes( fieldId ) ) {
-				const fieldToSort = fields.find( ( field ) => {
-					return field.id === fieldId;
-				} );
-				filteredData.sort( ( a, b ) => {
-					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-					return view.sort.direction === 'asc'
-						? valueA.localeCompare( valueB )
-						: valueB.localeCompare( valueA );
-				} );
-			}
-		}
-		// Handle pagination.
-		const start = ( view.page - 1 ) * view.perPage;
-		const totalItems = filteredData?.length || 0;
-		filteredData = filteredData?.slice( start, start + view.perPage );
-		return {
-			shownData: filteredData,
-			paginationInfo: {
-				totalItems,
-				totalPages: Math.ceil( totalItems / view.perPage ),
-			},
-		};
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
 	const onChangeView = useCallback(
 		( newView ) => {

package/src/style.scss

@@ -190,6 +190,12 @@
 			> * {
 				flex-grow: 1;
 			}
+
+			&.dataviews-view-table__primary-field {
+				a {
+					flex-grow: 0;
+				}
+			}
 		}
 	}
 	.dataviews-view-table-header-button {
@@ -244,10 +250,10 @@
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
-		width: 100%;
+		flex-grow: 0;
 
 		&:hover {
-			color: $gray-900;
+			color: var(--wp-admin-theme-color);
 		}
 		@include link-reset();
 	}
@@ -327,7 +333,24 @@
 		}
 
 		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-value {
+			align-items: flex-start;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
 				color: $gray-700;
 			}
 		}
@@ -340,6 +363,7 @@
 
 	li {
 		margin: 0;
+		cursor: pointer;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
@@ -355,14 +379,21 @@
 				background: $gray-100;
 				height: 1px;
 			}
-		}
 
-		&:not(.is-selected):hover {
-			color: var(--wp-admin-theme-color);
+			> * {
+				width: 100%;
+			}
+		}
 
-			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields {
+		&:not(.is-selected) {
+			&:hover,
+			&:focus-within {
 				color: var(--wp-admin-theme-color);
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}
@@ -388,8 +419,9 @@
 	.dataviews-view-list__item {
 		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
 		width: 100%;
-		cursor: pointer;
-		&:focus {
+		scroll-margin: $grid-unit-10 0;
+
+		&:focus-visible {
 			&::before {
 				position: absolute;
 				content: "";
@@ -404,6 +436,7 @@
 		}
 		.dataviews-view-list__primary-field {
 			min-height: $grid-unit-05 * 5;
+			overflow: hidden;
 		}
 	}
 
@@ -449,7 +482,7 @@
 		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			&:empty {
+			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}
 		}

package/src/test/filter-and-sort-data-view.js

@@ -0,0 +1,276 @@
+/**
+ * Internal dependencies
+ */
+import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { data, fields } from '../stories/fixtures';
+
+describe( 'filters', () => {
+	it( 'should return empty if the data is empty', () => {
+		expect( filterSortAndPaginate( null, {}, [] ) ).toStrictEqual( {
+			data: [],
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		} );
+	} );
+
+	it( 'should return the same data if no filters are applied', () => {
+		expect(
+			filterSortAndPaginate(
+				data,
+				{
+					filters: [],
+				},
+				[]
+			)
+		).toStrictEqual( {
+			data,
+			paginationInfo: { totalItems: data.length, totalPages: 1 },
+		} );
+	} );
+
+	it( 'should search using searchable fields (title)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'Neptu',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should search using searchable fields (description)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'photo',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'NASA photo' );
+	} );
+
+	it( 'should perform case-insensitive and accent-insensitive search', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'nete ven',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'La planète Vénus' );
+	} );
+
+	it( 'should search using IS filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'is',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NOT filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNot',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 9 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 3 ].title ).toBe( 'Mercury' );
+		expect( result[ 4 ].title ).toBe( 'Venus' );
+		expect( result[ 5 ].title ).toBe( 'Earth' );
+		expect( result[ 6 ].title ).toBe( 'Mars' );
+		expect( result[ 7 ].title ).toBe( 'Jupiter' );
+		expect( result[ 8 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS ANY filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NONE filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNone',
+						value: [ 'Ice giant', 'Gas giant', 'Terrestrial' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ANY filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAny',
+						value: [ 'NASA' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS NONE filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNone',
+						value: [ 'Space' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 7 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Mercury' );
+		expect( result[ 2 ].title ).toBe( 'Venus' );
+		expect( result[ 3 ].title ).toBe( 'Earth' );
+		expect( result[ 4 ].title ).toBe( 'Mars' );
+		expect( result[ 5 ].title ).toBe( 'Jupiter' );
+		expect( result[ 6 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS NOT ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNotAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+} );
+
+describe( 'sorting', () => {
+	it( 'should sort', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
+} );
+
+describe( 'pagination', () => {
+	it( 'should paginate', () => {
+		const { data: result, paginationInfo } = filterSortAndPaginate(
+			data,
+			{
+				perPage: 2,
+				page: 2,
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+		expect( paginationInfo ).toStrictEqual( {
+			totalItems: data.length,
+			totalPages: 6,
+		} );
+	} );
+} );

package/src/utils.js

@@ -9,58 +9,6 @@ import {
 	OPERATOR_IS_NONE,
 } from './constants';
 
-/**
- * Helper util to sort data by text fields, when sorting is done client side.
- *
- * @param {Object}   params            Function params.
- * @param {Object[]} params.data       Data to sort.
- * @param {Object}   params.view       Current view object.
- * @param {Object[]} params.fields     Array of available fields.
- * @param {string[]} params.textFields Array of the field ids to sort.
- *
- * @return {Object[]} Sorted data.
- */
-export const sortByTextFields = ( { data, view, fields, textFields } ) => {
-	const sortedData = [ ...data ];
-	const fieldId = view.sort.field;
-	if ( textFields.includes( fieldId ) ) {
-		const fieldToSort = fields.find( ( field ) => {
-			return field.id === fieldId;
-		} );
-		sortedData.sort( ( a, b ) => {
-			const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-			const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-			return view.sort.direction === 'asc'
-				? valueA.localeCompare( valueB )
-				: valueB.localeCompare( valueA );
-		} );
-	}
-	return sortedData;
-};
-
-/**
- * Helper util to get the paginated data and the paginateInfo needed,
- * when pagination is done client side.
- *
- * @param {Object}   params      Function params.
- * @param {Object[]} params.data Available data.
- * @param {Object}   params.view Current view object.
- *
- * @return {Object} Paginated data and paginationInfo.
- */
-export function getPaginationResults( { data, view } ) {
-	const start = ( view.page - 1 ) * view.perPage;
-	const totalItems = data?.length || 0;
-	data = data?.slice( start, start + view.perPage );
-	return {
-		data,
-		paginationInfo: {
-			totalItems,
-			totalPages: Math.ceil( totalItems / view.perPage ),
-		},
-	};
-}
-
 export const sanitizeOperators = ( field ) => {
 	let operators = field.filterBy?.operators;
 

package/src/view-grid.js

@@ -10,8 +10,9 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Tooltip,
 	Spinner,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
@@ -34,6 +35,7 @@ function GridItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
+	displayAsColumnFields,
 } ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -107,17 +109,34 @@ function GridItem( {
 						return null;
 					}
 					return (
-						<VStack
-							className="dataviews-view-grid__field"
+						<Flex
+							className={ classnames(
+								'dataviews-view-grid__field',
+								displayAsColumnFields?.includes( field.id )
+									? 'is-column'
+									: 'is-row'
+							) }
 							key={ field.id }
-							spacing={ 1 }
+							gap={ 1 }
+							justify="flex-start"
+							expanded
+							style={ { height: 'auto' } }
+							direction={
+								displayAsColumnFields?.includes( field.id )
+									? 'column'
+									: 'row'
+							}
 						>
-							<Tooltip text={ field.header } placement="left">
-								<div className="dataviews-view-grid__field-value">
-									{ renderedValue }
-								</div>
-							</Tooltip>
-						</VStack>
+							<FlexItem className="dataviews-view-grid__field-name">
+								{ field.header }
+							</FlexItem>
+							<FlexItem
+								className="dataviews-view-grid__field-value"
+								style={ { maxHeight: 'none' } }
+							>
+								{ renderedValue }
+							</FlexItem>
+						</Flex>
 					);
 				} ) }
 			</VStack>
@@ -175,6 +194,9 @@ export default function ViewGrid( {
 								mediaField={ mediaField }
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
+								displayAsColumnFields={
+									view.layout.displayAsColumnFields
+								}
 							/>
 						);
 					} ) }