@wordpress/dataviews 1.0.0 → 1.2.0

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

@@ -1,154 +0,0 @@
-/**
- * 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/normalize-fields.js

@@ -1,17 +0,0 @@
-/**
- * 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/view-list.js

@@ -1,207 +0,0 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
-	Spinner,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const {
-	useCompositeStoreV2: useCompositeStore,
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	CompositeRowV2: CompositeRow,
-} = unlock( componentsPrivateApis );
-
-function ListItem( {
-	id,
-	item,
-	isSelected,
-	onSelect,
-	mediaField,
-	primaryField,
-	visibleFields,
-} ) {
-	const itemRef = useRef( null );
-	const labelId = `${ id }-label`;
-	const descriptionId = `${ id }-description`;
-
-	useEffect( () => {
-		if ( isSelected ) {
-			itemRef.current?.scrollIntoView( {
-				behavior: 'auto',
-				block: 'nearest',
-				inline: 'nearest',
-			} );
-		}
-	}, [ isSelected ] );
-
-	return (
-		<CompositeRow
-			ref={ itemRef }
-			render={ <li /> }
-			role="row"
-			className={ classNames( {
-				'is-selected': isSelected,
-			} ) }
-		>
-			<HStack className="dataviews-view-list__item-wrapper">
-				<div role="gridcell">
-					<CompositeItem
-						render={ <div /> }
-						role="button"
-						id={ id }
-						aria-pressed={ isSelected }
-						aria-labelledby={ labelId }
-						aria-describedby={ descriptionId }
-						className="dataviews-view-list__item"
-						onClick={ () => onSelect( item ) }
-					>
-						<HStack
-							spacing={ 3 }
-							justify="start"
-							alignment="flex-start"
-						>
-							<div className="dataviews-view-list__media-wrapper">
-								{ mediaField?.render( { item } ) || (
-									<div className="dataviews-view-list__media-placeholder"></div>
-								) }
-							</div>
-							<VStack spacing={ 1 }>
-								<span
-									className="dataviews-view-list__primary-field"
-									id={ labelId }
-								>
-									{ primaryField?.render( { item } ) }
-								</span>
-								<div
-									className="dataviews-view-list__fields"
-									id={ descriptionId }
-								>
-									{ visibleFields.map( ( field ) => (
-										<div
-											key={ field.id }
-											className="dataviews-view-list__field"
-										>
-											<VisuallyHidden
-												as="span"
-												className="dataviews-view-list__field-label"
-											>
-												{ field.header }
-											</VisuallyHidden>
-											<span className="dataviews-view-list__field-value">
-												{ field.render( { item } ) }
-											</span>
-										</div>
-									) ) }
-								</div>
-							</VStack>
-						</HStack>
-					</CompositeItem>
-				</div>
-			</HStack>
-		</CompositeRow>
-	);
-}
-
-export default function ViewList( {
-	view,
-	fields,
-	data,
-	isLoading,
-	getItemId,
-	onSelectionChange,
-	selection,
-	id: preferredId,
-} ) {
-	const baseId = useInstanceId( ViewList, 'view-list', preferredId );
-	const selectedItem = data?.findLast( ( item ) =>
-		selection.includes( item.id )
-	);
-
-	const mediaField = fields.find(
-		( field ) => field.id === view.layout.mediaField
-	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout.primaryField
-	);
-	const visibleFields = fields.filter(
-		( field ) =>
-			! view.hiddenFields.includes( field.id ) &&
-			! [ view.layout.primaryField, view.layout.mediaField ].includes(
-				field.id
-			)
-	);
-
-	const onSelect = useCallback(
-		( item ) => onSelectionChange( [ item ] ),
-		[ onSelectionChange ]
-	);
-
-	const getItemDomId = useCallback(
-		( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),
-		[ baseId, getItemId ]
-	);
-
-	const store = useCompositeStore( {
-		defaultActiveId: getItemDomId( selectedItem ),
-	} );
-
-	const hasData = data?.length;
-	if ( ! hasData ) {
-		return (
-			<div
-				className={ classNames( {
-					'dataviews-loading': isLoading,
-					'dataviews-no-results': ! hasData && ! isLoading,
-				} ) }
-			>
-				{ ! hasData && (
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				) }
-			</div>
-		);
-	}
-
-	return (
-		<Composite
-			id={ baseId }
-			render={ <ul /> }
-			className="dataviews-view-list"
-			role="grid"
-			store={ store }
-		>
-			{ data.map( ( item ) => {
-				const id = getItemDomId( item );
-				return (
-					<ListItem
-						key={ id }
-						id={ id }
-						item={ item }
-						isSelected={ item === selectedItem }
-						onSelect={ onSelect }
-						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
-					/>
-				);
-			} ) }
-		</Composite>
-	);
-}