@wordpress/dataviews 0.8.0 → 0.9.0

package/build-style/style.css

@@ -272,6 +272,9 @@
 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper > * {
   flex-grow: 1;
 }
+.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__primary-field a {
+  flex-grow: 0;
+}
 .dataviews-view-table .dataviews-view-table-header-button {
   padding: 4px 8px;
   font-size: 11px;
@@ -317,12 +320,12 @@
   white-space: nowrap;
   overflow: hidden;
   display: block;
-  width: 100%;
+  flex-grow: 0;
 }
 .dataviews-view-list__primary-field a:hover,
 .dataviews-view-grid__primary-field a:hover,
 .dataviews-view-table__primary-field a:hover {
-  color: #1e1e1e;
+  color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list__primary-field a:focus,
 .dataviews-view-grid__primary-field a:focus,
@@ -401,7 +404,22 @@
   padding: 12px;
   padding-top: 0;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
+  align-items: flex-start;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) {
+  align-items: center;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-name {
+  width: 35%;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
   color: #757575;
 }
 
@@ -411,6 +429,7 @@
 }
 .dataviews-view-list li {
   margin: 0;
+  cursor: pointer;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
@@ -426,11 +445,15 @@
   background: #f0f0f0;
   height: 1px;
 }
-.dataviews-view-list li:not(.is-selected):hover {
+.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
+  width: 100%;
+}
+.dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
+.dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
@@ -453,9 +476,9 @@
 .dataviews-view-list .dataviews-view-list__item {
   padding: 12px 0 12px 24px;
   width: 100%;
-  cursor: pointer;
+  scroll-margin: 8px 0;
 }
-.dataviews-view-list .dataviews-view-list__item:focus::before {
+.dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
   top: -1px;
@@ -468,6 +491,7 @@
 }
 .dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
   min-height: 20px;
+  overflow: hidden;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 40px;
@@ -506,7 +530,7 @@
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:empty {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
   display: none;
 }
 .dataviews-view-list + .dataviews-pagination {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,15 +29,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.54.0",
-		"@wordpress/components": "^27.2.0",
-		"@wordpress/compose": "^6.31.0",
-		"@wordpress/element": "^5.31.0",
-		"@wordpress/i18n": "^4.54.0",
-		"@wordpress/icons": "^9.45.0",
-		"@wordpress/keycodes": "^3.54.0",
-		"@wordpress/primitives": "^3.52.0",
-		"@wordpress/private-apis": "^0.36.0",
+		"@wordpress/a11y": "^3.55.0",
+		"@wordpress/components": "^27.3.0",
+		"@wordpress/compose": "^6.32.0",
+		"@wordpress/element": "^5.32.0",
+		"@wordpress/i18n": "^4.55.0",
+		"@wordpress/icons": "^9.46.0",
+		"@wordpress/keycodes": "^3.55.0",
+		"@wordpress/primitives": "^3.53.0",
+		"@wordpress/private-apis": "^0.37.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
+	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
 }

package/src/constants.js

@@ -16,9 +16,6 @@ import ViewTable from './view-table';
 import ViewGrid from './view-grid';
 import ViewList from './view-list';
 
-// Field types.
-export const ENUMERATION_TYPE = 'enumeration';
-
 // Filter operators.
 export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';

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 = () => {};
@@ -76,18 +77,7 @@ export default function DataViews( {
 	const ViewComponent = VIEW_LAYOUTS.find(
 		( v ) => v.type === view.type
 	).component;
-	const _fields = useMemo( () => {
-		return fields.map( ( field ) => {
-			const getValue =
-				field.getValue || ( ( { item } ) => item[ field.id ] );
-
-			return {
-				...field,
-				getValue,
-				render: field.render || 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/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/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,
+	},
+];