@wordpress/dataviews 0.8.0 → 1.0.0

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

@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+} from './constants';
+import { normalizeFields } from './normalize-fields';
+
+function normalizeSearchInput( input = '' ) {
+	return removeAccents( input.trim().toLowerCase() );
+}
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
+ *
+ * @param {any[]}    data   Raw data.
+ * @param {Object}   view   View config.
+ * @param {Object[]} fields Fields config.
+ *
+ * @return {Object} { data: any[], paginationInfo: { totalItems: number, totalPages: number } }
+ */
+export function filterSortAndPaginate( data, view, fields ) {
+	if ( ! data ) {
+		return {
+			data: EMPTY_ARRAY,
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		};
+	}
+	const _fields = normalizeFields( fields );
+	let filteredData = [ ...data ];
+	// Handle global search.
+	if ( view.search ) {
+		const normalizedSearch = normalizeSearchInput( view.search );
+		filteredData = filteredData.filter( ( item ) => {
+			return _fields
+				.filter( ( field ) => field.enableGlobalSearch )
+				.map( ( field ) => {
+					return normalizeSearchInput( field.getValue( { item } ) );
+				} )
+				.some( ( field ) => field.includes( normalizedSearch ) );
+		} );
+	}
+
+	if ( view.filters.length > 0 ) {
+		view.filters.forEach( ( filter ) => {
+			const field = _fields.find(
+				( _field ) => _field.id === filter.field
+			);
+			if (
+				filter.operator === OPERATOR_IS_ANY &&
+				filter?.value?.length > 0
+			) {
+				filteredData = filteredData.filter( ( item ) => {
+					const fieldValue = field.getValue( { item } );
+					if ( Array.isArray( fieldValue ) ) {
+						return filter.value.some( ( filterValue ) =>
+							fieldValue.includes( filterValue )
+						);
+					} else if ( typeof fieldValue === 'string' ) {
+						return filter.value.includes( fieldValue );
+					}
+					return false;
+				} );
+			} else if (
+				filter.operator === OPERATOR_IS_NONE &&
+				filter?.value?.length > 0
+			) {
+				filteredData = filteredData.filter( ( item ) => {
+					const fieldValue = field.getValue( { item } );
+					if ( Array.isArray( fieldValue ) ) {
+						return ! filter.value.some( ( filterValue ) =>
+							fieldValue.includes( filterValue )
+						);
+					} else if ( typeof fieldValue === 'string' ) {
+						return ! filter.value.includes( fieldValue );
+					}
+					return false;
+				} );
+			} else if (
+				filter.operator === OPERATOR_IS_ALL &&
+				filter?.value?.length > 0
+			) {
+				filteredData = filteredData.filter( ( item ) => {
+					return filter.value.every( ( value ) => {
+						return field.getValue( { item } ).includes( value );
+					} );
+				} );
+			} else if (
+				filter.operator === OPERATOR_IS_NOT_ALL &&
+				filter?.value?.length > 0
+			) {
+				filteredData = filteredData.filter( ( item ) => {
+					return filter.value.every( ( value ) => {
+						return ! field.getValue( { item } ).includes( value );
+					} );
+				} );
+			} else if ( filter.operator === OPERATOR_IS ) {
+				filteredData = filteredData.filter( ( item ) => {
+					return filter.value === field.getValue( { item } );
+				} );
+			} else if ( filter.operator === OPERATOR_IS_NOT ) {
+				filteredData = filteredData.filter( ( item ) => {
+					return filter.value !== field.getValue( { item } );
+				} );
+			}
+		} );
+	}
+
+	// Handle sorting.
+	if ( view.sort ) {
+		const fieldId = view.sort.field;
+		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 hasPagination = view.page && view.perPage;
+	const start = hasPagination ? ( view.page - 1 ) * view.perPage : 0;
+	const totalItems = filteredData?.length || 0;
+	const totalPages = hasPagination
+		? Math.ceil( totalItems / view.perPage )
+		: 1;
+	filteredData = hasPagination
+		? filteredData?.slice( start, start + view.perPage )
+		: filteredData;
+
+	return {
+		data: filteredData,
+		paginationInfo: {
+			totalItems,
+			totalPages,
+		},
+	};
+}

package/src/filter-summary.js

@@ -18,7 +18,9 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef, createInterpolateElement } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
-import { ENTER, SPACE } from '@wordpress/keycodes';
+
+const ENTER = 'Enter';
+const SPACE = ' ';
 
 /**
  * Internal dependencies
@@ -229,9 +231,7 @@ export default function FilterSummary( {
 							tabIndex={ 0 }
 							onClick={ onToggle }
 							onKeyDown={ ( event ) => {
-								if (
-									[ ENTER, SPACE ].includes( event.keyCode )
-								) {
+								if ( [ ENTER, SPACE ].includes( event.key ) ) {
 									onToggle();
 									event.preventDefault();
 								}

package/src/filters.js

@@ -10,12 +10,7 @@ import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
-import {
-	ENUMERATION_TYPE,
-	ALL_OPERATORS,
-	OPERATOR_IS,
-	OPERATOR_IS_NOT,
-} from './constants';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 
 const Filters = memo( function Filters( {
@@ -28,7 +23,7 @@ const Filters = memo( function Filters( {
 	const addFilterRef = useRef();
 	const filters = [];
 	fields.forEach( ( field ) => {
-		if ( ! field.type ) {
+		if ( ! field.elements?.length ) {
 			return;
 		}
 
@@ -37,31 +32,24 @@ const Filters = memo( function Filters( {
 			return;
 		}
 
-		switch ( field.type ) {
-			case ENUMERATION_TYPE:
-				if ( ! field.elements?.length ) {
-					return;
-				}
-
-				const isPrimary = !! field.filterBy?.isPrimary;
-				filters.push( {
-					field: field.id,
-					name: field.header,
-					elements: field.elements,
-					singleSelection: operators.some( ( op ) =>
-						[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
-					),
-					operators,
-					isVisible:
-						isPrimary ||
-						view.filters.some(
-							( f ) =>
-								f.field === field.id &&
-								ALL_OPERATORS.includes( f.operator )
-						),
-					isPrimary,
-				} );
-		}
+		const isPrimary = !! field.filterBy?.isPrimary;
+		filters.push( {
+			field: field.id,
+			name: field.header,
+			elements: field.elements,
+			singleSelection: operators.some( ( op ) =>
+				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
+			),
+			operators,
+			isVisible:
+				isPrimary ||
+				view.filters.some(
+					( f ) =>
+						f.field === field.id &&
+						ALL_OPERATORS.includes( f.operator )
+				),
+			isPrimary,
+		} );
 	} );
 	// Sort filters by primary property. We need the primary filters to be first.
 	// Then we sort by name.

package/src/index.js

@@ -1,3 +1,3 @@
 export { default as DataViews } from './dataviews';
-export { sortByTextFields, getPaginationResults } from './utils';
 export { VIEW_LAYOUTS } from './constants';
+export { filterSortAndPaginate } from './filter-and-sort-data-view';

package/src/normalize-fields.js

@@ -0,0 +1,17 @@
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param {Object[]} fields Raw Fields.
+ * @return {Object[]} Normalized fields.
+ */
+export function normalizeFields( fields ) {
+	return fields.map( ( field ) => {
+		const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
+
+		return {
+			...field,
+			getValue,
+			render: field.render || getValue,
+		};
+	} );
+}

package/src/search-widget.js

@@ -39,6 +39,7 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
+const EMPTY_ARRAY = [];
 const getCurrentValue = ( filterDefinition, currentFilter ) => {
 	if ( filterDefinition.singleSelection ) {
 		return currentFilter?.value;
@@ -52,7 +53,7 @@ const getCurrentValue = ( filterDefinition, currentFilter ) => {
 		return [ currentFilter.value ];
 	}
 
-	return [];
+	return EMPTY_ARRAY;
 };
 
 const getNewValue = ( filterDefinition, currentFilter, value ) => {
@@ -73,7 +74,7 @@ function ListBox( { view, filter, onChangeView } ) {
 	const compositeStore = useCompositeStore( {
 		virtualFocus: true,
 		focusLoop: true,
-		// When we have no or just one operators, we can set the first item as active.
+		// When we have no or just one operator, we can set the first item as active.
 		// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
 		// so the first item is not selected, since the focus is on the operators control.
 		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
@@ -198,7 +199,7 @@ function ComboboxList( { view, filter, onChangeView } ) {
 	}, [ filter.elements, deferredSearchValue ] );
 	return (
 		<Ariakit.ComboboxProvider
-			value={ searchValue }
+			resetValueOnSelect={ false }
 			selectedValue={ currentValue }
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter

package/src/single-selection-checkbox.js

@@ -32,7 +32,7 @@ export default function SingleSelectionCheckbox( {
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
-			label={ selectionLabel }
+			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
 			checked={ isSelected }
 			onChange={ () => {

package/src/stories/fixtures.js

@@ -21,6 +21,7 @@ export const data = [
 		description: 'Apollo description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Not a planet',
+		categories: [ 'Space', 'NASA' ],
 	},
 	{
 		id: 2,
@@ -28,6 +29,7 @@ export const data = [
 		description: 'Space description',
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
 		type: 'Not a planet',
+		categories: [ 'Space' ],
 	},
 	{
 		id: 3,
@@ -35,6 +37,7 @@ export const data = [
 		description: 'NASA photo',
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
 		type: 'Not a planet',
+		categories: [ 'NASA' ],
 	},
 	{
 		id: 4,
@@ -42,6 +45,7 @@ export const data = [
 		description: 'Neptune description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 5,
@@ -49,13 +53,15 @@ export const data = [
 		description: 'Mercury description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 6,
 		title: 'Venus',
-		description: 'Venus description',
+		description: 'La planète Vénus',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 7,
@@ -63,6 +69,7 @@ export const data = [
 		description: 'Earth description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 8,
@@ -70,6 +77,7 @@ export const data = [
 		description: 'Mars description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 9,
@@ -77,6 +85,7 @@ export const data = [
 		description: 'Jupiter description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 10,
@@ -84,6 +93,7 @@ export const data = [
 		description: 'Saturn description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 11,
@@ -91,6 +101,7 @@ export const data = [
 		description: 'Uranus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
+		categories: [ 'Space', 'Ice giant', 'Solar system' ],
 	},
 ];
 
@@ -135,3 +146,66 @@ export const actions = [
 		callback() {},
 	},
 ];
+
+export 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,
+		enableGlobalSearch: true,
+	},
+	{
+		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,
+		enableGlobalSearch: true,
+	},
+	{
+		header: 'Categories',
+		id: 'categories',
+		type: 'enumeration',
+		elements: [
+			{ value: 'Space', label: 'Space' },
+			{ value: 'NASA', label: 'NASA' },
+			{ value: 'Planet', label: 'Planet' },
+			{ value: 'Solar system', label: 'Solar system' },
+			{ value: 'Ice giant', label: 'Ice giant' },
+		],
+		filterBy: {
+			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
+		},
+		getValue: ( { item } ) => {
+			return item.categories;
+		},
+		render: ( { item } ) => {
+			return item.categories.join( ',' );
+		},
+		enableSorting: false,
+	},
+];

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 ) => {