@wordpress/dataviews 1.0.0 → 1.2.0

package/src/view-list.tsx

@@ -0,0 +1,421 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+// Import CompositeStore type, which is not exported from @wordpress/components.
+// eslint-disable-next-line no-restricted-imports
+import type { CompositeStore } from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	privateApis as componentsPrivateApis,
+	Spinner,
+	VisuallyHidden,
+} from '@wordpress/components';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import type {
+	Action,
+	AnyItem,
+	NormalizedField,
+	ViewList as ViewListType,
+} from './types';
+
+import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
+
+interface ListViewProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	data: Item[];
+	fields: NormalizedField< Item >[];
+	getItemId: ( item: Item ) => string;
+	id: string;
+	isLoading: boolean;
+	onSelectionChange: ( selection: Item[] ) => void;
+	selection: string[];
+	view: ViewListType;
+}
+
+interface ListViewItemProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	id?: string;
+	isSelected: boolean;
+	item: Item;
+	mediaField?: NormalizedField< Item >;
+	onSelect: ( item: Item ) => void;
+	primaryField?: NormalizedField< Item >;
+	store: CompositeStore;
+	visibleFields: NormalizedField< Item >[];
+}
+
+const {
+	useCompositeStoreV2: useCompositeStore,
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	CompositeRowV2: CompositeRow,
+	DropdownMenuV2: DropdownMenu,
+} = unlock( componentsPrivateApis );
+
+function ListItem< Item extends AnyItem >( {
+	actions,
+	id,
+	isSelected,
+	item,
+	mediaField,
+	onSelect,
+	primaryField,
+	store,
+	visibleFields,
+}: ListViewItemProps< Item > ) {
+	const itemRef = useRef< HTMLElement >( null );
+	const labelId = `${ id }-label`;
+	const descriptionId = `${ id }-description`;
+
+	const [ isHovered, setIsHovered ] = useState( false );
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	useEffect( () => {
+		if ( isSelected ) {
+			itemRef.current?.scrollIntoView( {
+				behavior: 'auto',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
+		}
+	}, [ isSelected ] );
+
+	const { primaryAction, 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 {
+			primaryAction: _primaryActions?.[ 0 ],
+			eligibleActions: _eligibleActions,
+		};
+	}, [ actions, item ] );
+
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	return (
+		<CompositeRow
+			ref={ itemRef }
+			render={ <li /> }
+			role="row"
+			className={ clsx( {
+				'is-selected': isSelected,
+				'is-hovered': isHovered,
+			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+		>
+			<HStack
+				className="dataviews-view-list__item-wrapper"
+				alignment="top"
+			>
+				<div role="gridcell">
+					<CompositeItem
+						store={ store }
+						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>
+				{ actions?.length > 0 && (
+					<HStack
+						spacing={ 1 }
+						justify="flex-end"
+						className="dataviews-view-list__item-actions"
+						style={ {
+							flexShrink: '0',
+							width: 'auto',
+						} }
+					>
+						{ primaryAction && 'RenderModal' in primaryAction && (
+							<div role="gridcell">
+								<CompositeItem
+									store={ store }
+									render={
+										<Button
+											label={ primaryAction.label }
+											icon={ primaryAction.icon }
+											isDestructive={
+												primaryAction.isDestructive
+											}
+											size="compact"
+											onClick={ () =>
+												setIsModalOpen( true )
+											}
+										/>
+									}
+								>
+									{ isModalOpen && (
+										<ActionModal< Item >
+											action={ primaryAction }
+											items={ [ item ] }
+											closeModal={ () =>
+												setIsModalOpen( false )
+											}
+										/>
+									) }
+								</CompositeItem>
+							</div>
+						) }
+						{ primaryAction &&
+							! ( 'RenderModal' in primaryAction ) && (
+								<div role="gridcell" key={ primaryAction.id }>
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												label={ primaryAction.label }
+												icon={ primaryAction.icon }
+												isDestructive={
+													primaryAction.isDestructive
+												}
+												size="compact"
+												onClick={ () =>
+													primaryAction.callback( [
+														item,
+													] )
+												}
+											/>
+										}
+									/>
+								</div>
+							) }
+						<div role="gridcell">
+							<DropdownMenu
+								trigger={
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												size="compact"
+												icon={ moreVertical }
+												label={ __( 'Actions' ) }
+												disabled={ ! actions.length }
+												onKeyDown={ ( event: {
+													key: string;
+													preventDefault: () => void;
+												} ) => {
+													if (
+														event.key ===
+														'ArrowDown'
+													) {
+														// Prevent the default behaviour (open dropdown menu) and go down.
+														event.preventDefault();
+														store.move(
+															store.down()
+														);
+													}
+													if (
+														event.key === 'ArrowUp'
+													) {
+														// Prevent the default behavior (open dropdown menu) and go up.
+														event.preventDefault();
+														store.move(
+															store.up()
+														);
+													}
+												} }
+											/>
+										}
+									/>
+								}
+								placement="bottom-end"
+							>
+								<ActionsDropdownMenuGroup
+									actions={ eligibleActions }
+									item={ item }
+								/>
+							</DropdownMenu>
+						</div>
+					</HStack>
+				) }
+			</HStack>
+		</CompositeRow>
+	);
+}
+
+export default function ViewList< Item extends AnyItem >(
+	props: ListViewProps< Item >
+) {
+	const {
+		actions,
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		onSelectionChange,
+		selection,
+		view,
+	} = props;
+	const baseId = useInstanceId( ViewList, 'view-list' );
+	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: Item ) => onSelectionChange( [ item ] ),
+		[ onSelectionChange ]
+	);
+
+	const getItemDomId = useCallback(
+		( item?: Item ) =>
+			item ? `${ baseId }-${ getItemId( item ) }` : undefined,
+		[ baseId, getItemId ]
+	);
+
+	const store = useCompositeStore( {
+		defaultActiveId: getItemDomId( selectedItem ),
+	} );
+
+	// Manage focused item, when the active one is removed from the list.
+	const isActiveIdInList = store.useState(
+		( state: { items: any[]; activeId: any } ) =>
+			state.items.some(
+				( item: { id: any } ) => item.id === state.activeId
+			)
+	);
+	useEffect( () => {
+		if ( ! isActiveIdInList ) {
+			// Prefer going down, except if there is no item below (last item), then go up (last item in list).
+			if ( store.down() ) {
+				store.move( store.down() );
+			} else if ( store.up() ) {
+				store.move( store.up() );
+			}
+		}
+	}, [ isActiveIdInList ] );
+
+	const hasData = data?.length;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( {
+					'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 }
+						actions={ actions }
+						item={ item }
+						isSelected={ item === selectedItem }
+						onSelect={ onSelect }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						store={ store }
+						visibleFields={ visibleFields }
+					/>
+				);
+			} ) }
+		</Composite>
+	);
+}

package/src/view-table.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -257,7 +257,7 @@ function TableRow( {
 
 	return (
 		<tr
-			className={ classnames( 'dataviews-view-table__row', {
+			className={ clsx( 'dataviews-view-table__row', {
 				'is-selected': hasPossibleBulkAction && isSelected,
 				'is-hovered': isHovered,
 				'has-bulk-actions': hasPossibleBulkAction,
@@ -327,7 +327,7 @@ function TableRow( {
 					} }
 				>
 					<div
-						className={ classnames(
+						className={ clsx(
 							'dataviews-view-table__cell-content-wrapper',
 							{
 								'dataviews-view-table__primary-field':
@@ -362,16 +362,16 @@ function TableRow( {
 }
 
 function ViewTable( {
-	view,
-	onChangeView,
-	fields,
 	actions,
 	data,
+	fields,
 	getItemId,
 	isLoading = false,
-	selection,
+	onChangeView,
 	onSelectionChange,
+	selection,
 	setOpenedFilter,
+	view,
 } ) {
 	const headerMenuRefs = useRef( new Map() );
 	const headerMenuToFocusRef = useRef();
@@ -516,7 +516,7 @@ function ViewTable( {
 				</tbody>
 			</table>
 			<div
-				className={ classnames( {
+				className={ clsx( {
 					'dataviews-loading': isLoading,
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"skipLibCheck": true,
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../element" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../keycodes" },
+		{ "path": "../primitives" },
+		{ "path": "../private-apis" }
+	],
+	"include": [ "src" ]
+}