@wordpress/dataviews 0.7.0 → 0.9.0

package/src/dataviews.js

@@ -13,6 +13,7 @@ import Filters from './filters';
 import Search from './search';
 import { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import BulkActions from './bulk-actions';
+import { normalizeFields } from './normalize-fields';
 
 const defaultGetItemId = ( item ) => item.id;
 const defaultOnSelectionChange = () => {};
@@ -33,7 +34,7 @@ export default function DataViews( {
 	fields,
 	search = true,
 	searchLabel = undefined,
-	actions,
+	actions = [],
 	data,
 	getItemId = defaultGetItemId,
 	isLoading = false,
@@ -76,12 +77,7 @@ export default function DataViews( {
 	const ViewComponent = VIEW_LAYOUTS.find(
 		( v ) => v.type === view.type
 	).component;
-	const _fields = useMemo( () => {
-		return fields.map( ( field ) => ( {
-			...field,
-			render: field.render || field.getValue,
-		} ) );
-	}, [ fields ] );
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
 		actions,

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

@@ -24,43 +24,93 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import SearchWidget from './search-widget';
-import { OPERATOR_IN, OPERATOR_NOT_IN, OPERATORS } from './constants';
+import {
+	OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+} from './constants';
 
-const FilterText = ( { activeElement, filterInView, filter } ) => {
-	if ( activeElement === undefined ) {
+const FilterText = ( { activeElements, filterInView, filter } ) => {
+	if ( activeElements === undefined || activeElements.length === 0 ) {
 		return filter.name;
 	}
 
 	const filterTextWrappers = {
-		Span1: <span className="dataviews-filter-summary__filter-text-name" />,
-		Span2: <span className="dataviews-filter-summary__filter-text-value" />,
+		Name: <span className="dataviews-filter-summary__filter-text-name" />,
+		Value: <span className="dataviews-filter-summary__filter-text-value" />,
 	};
 
-	if (
-		activeElement !== undefined &&
-		filterInView?.operator === OPERATOR_IN
-	) {
+	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is any: Admin, Editor". */
+				__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NONE ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is none: Admin, Editor". */
+				__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_ALL ) {
 		return createInterpolateElement(
 			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is Admin". */
-				__( '<Span1>%1$s </Span1><Span2>is %2$s</Span2>' ),
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is all: Admin, Editor". */
+				__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),
 				filter.name,
-				activeElement.label
+				activeElements.map( ( element ) => element.label ).join( ', ' )
 			),
 			filterTextWrappers
 		);
 	}
 
-	if (
-		activeElement !== undefined &&
-		filterInView?.operator === OPERATOR_NOT_IN
-	) {
+	if ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {
 		return createInterpolateElement(
 			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not Admin". */
-				__( '<Span1>%1$s </Span1><Span2>is not %2$s</Span2>' ),
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not all: Admin, Editor". */
+				__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),
 				filter.name,
-				activeElement.label
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is: Admin". */
+				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NOT ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not: Admin". */
+				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
 			),
 			filterTextWrappers
 		);
@@ -140,9 +190,12 @@ export default function FilterSummary( {
 	const toggleRef = useRef();
 	const { filter, view, onChangeView } = commonProps;
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
-	const activeElement = filter.elements.find(
-		( element ) => element.value === filterInView?.value
-	);
+	const activeElements = filter.elements.filter( ( element ) => {
+		if ( filter.singleSelection ) {
+			return element.value === filterInView?.value;
+		}
+		return filterInView?.value?.includes( element.value );
+	} );
 	const isPrimary = filter.isPrimary;
 	const hasValues = filterInView?.value !== undefined;
 	const canResetOrRemove = ! isPrimary || hasValues;
@@ -188,7 +241,7 @@ export default function FilterSummary( {
 							ref={ toggleRef }
 						>
 							<FilterText
-								activeElement={ activeElement }
+								activeElements={ activeElements }
 								filterInView={ filterInView }
 								filter={ filter }
 							/>

package/src/filters.js

@@ -10,7 +10,7 @@ import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
-import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 
 const Filters = memo( function Filters( {
@@ -23,7 +23,7 @@ const Filters = memo( function Filters( {
 	const addFilterRef = useRef();
 	const filters = [];
 	fields.forEach( ( field ) => {
-		if ( ! field.type ) {
+		if ( ! field.elements?.length ) {
 			return;
 		}
 
@@ -32,30 +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,
-					operators,
-					isVisible:
-						isPrimary ||
-						view.filters.some(
-							( f ) =>
-								f.field === field.id &&
-								[ OPERATOR_IN, OPERATOR_NOT_IN ].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/item-actions.js

@@ -105,37 +105,28 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 }
 
 export default function ItemActions( { item, actions, isCompact } ) {
-	const { primaryActions, secondaryActions } = useMemo( () => {
-		return actions.reduce(
-			( accumulator, action ) => {
-				// If an action is eligible for all items, doesn't need
-				// to provide the `isEligible` function.
-				if ( action.isEligible && ! action.isEligible( item ) ) {
-					return accumulator;
-				}
-				if ( action.isPrimary && !! action.icon ) {
-					accumulator.primaryActions.push( action );
-				} else {
-					accumulator.secondaryActions.push( action );
-				}
-				return accumulator;
-			},
-			{ primaryActions: [], secondaryActions: [] }
+	const { primaryActions, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
 		);
+		return {
+			primaryActions: _primaryActions,
+			eligibleActions: _eligibleActions,
+		};
 	}, [ actions, item ] );
 	if ( isCompact ) {
-		return (
-			<CompactItemActions
-				item={ item }
-				primaryActions={ primaryActions }
-				secondaryActions={ secondaryActions }
-			/>
-		);
+		return <CompactItemActions item={ item } actions={ eligibleActions } />;
 	}
 	return (
 		<HStack
 			spacing={ 1 }
 			justify="flex-end"
+			className="dataviews-item-actions"
 			style={ {
 				flexShrink: '0',
 				width: 'auto',
@@ -161,27 +152,12 @@ export default function ItemActions( { item, actions, isCompact } ) {
 						/>
 					);
 				} ) }
-			<DropdownMenu
-				trigger={
-					<Button
-						size="compact"
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						disabled={ ! secondaryActions.length }
-					/>
-				}
-				placement="bottom-end"
-			>
-				<ActionsDropdownMenuGroup
-					actions={ secondaryActions }
-					item={ item }
-				/>
-			</DropdownMenu>
+			<CompactItemActions item={ item } actions={ eligibleActions } />
 		</HStack>
 	);
 }
 
-function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+function CompactItemActions( { item, actions } ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -189,25 +165,13 @@ function CompactItemActions( { item, primaryActions, secondaryActions } ) {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
-					disabled={
-						! primaryActions.length && ! secondaryActions.length
-					}
+					disabled={ ! actions.length }
+					className="dataviews-all-actions-button"
 				/>
 			}
 			placement="bottom-end"
 		>
-			{ !! primaryActions.length && (
-				<ActionsDropdownMenuGroup
-					actions={ primaryActions }
-					item={ item }
-				/>
-			) }
-			{ !! secondaryActions.length && (
-				<ActionsDropdownMenuGroup
-					actions={ secondaryActions }
-					item={ item }
-				/>
-			) }
+			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
 		</DropdownMenu>
 	);
 }

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/pagination.js

@@ -36,11 +36,11 @@ const Pagination = memo( function Pagination( {
 					{ createInterpolateElement(
 						sprintf(
 							// translators: %s: Total number of pages.
-							_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
+							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
 							totalPages
 						),
 						{
-							CurrenPageControl: (
+							CurrentPageControl: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
 									value={ view.page }