@wordpress/dataviews 0.2.0

package/src/filter-summary.js

@@ -0,0 +1,221 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+	Icon,
+} from '@wordpress/components';
+import { chevronDown, chevronRightSmall, check } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { Children, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { unlock } from './lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+} = unlock( componentsPrivateApis );
+
+const FilterText = ( { activeElement, filterInView, filter } ) => {
+	if ( activeElement === undefined ) {
+		return filter.name;
+	}
+
+	if (
+		activeElement !== undefined &&
+		filterInView?.operator === OPERATOR_IN
+	) {
+		return sprintf(
+			/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is Admin". */
+			__( '%1$s is %2$s' ),
+			filter.name,
+			activeElement.label
+		);
+	}
+
+	if (
+		activeElement !== undefined &&
+		filterInView?.operator === OPERATOR_NOT_IN
+	) {
+		return sprintf(
+			/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not Admin". */
+			__( '%1$s is not %2$s' ),
+			filter.name,
+			activeElement.label
+		);
+	}
+
+	return sprintf(
+		/* translators: 1: Filter name e.g.: "Unknown status for Author". */
+		__( 'Unknown status for %1$s' ),
+		filter.name
+	);
+};
+
+function WithSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparator /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
+export default function FilterSummary( { filter, view, onChangeView } ) {
+	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const activeElement = filter.elements.find(
+		( element ) => element.value === filterInView?.value
+	);
+
+	return (
+		<DropdownMenu
+			key={ filter.field }
+			trigger={
+				<Button variant="tertiary" size="compact" label={ filter.name }>
+					<FilterText
+						activeElement={ activeElement }
+						filterInView={ filterInView }
+						filter={ filter }
+					/>
+					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
+				</Button>
+			}
+		>
+			<WithSeparators>
+				<DropdownMenuGroup>
+					{ filter.elements.map( ( element ) => {
+						return (
+							<DropdownMenuItem
+								key={ element.value }
+								role="menuitemradio"
+								aria-checked={
+									activeElement?.value === element.value
+								}
+								prefix={
+									activeElement?.value === element.value && (
+										<Icon icon={ check } />
+									)
+								}
+								onSelect={ () =>
+									onChangeView( ( currentView ) => ( {
+										...currentView,
+										page: 1,
+										filters: [
+											...view.filters.filter(
+												( f ) =>
+													f.field !== filter.field
+											),
+											{
+												field: filter.field,
+												operator:
+													filterInView?.operator ||
+													filter.operators[ 0 ],
+												value:
+													activeElement?.value ===
+													element.value
+														? undefined
+														: element.value,
+											},
+										],
+									} ) )
+								}
+							>
+								{ element.label }
+							</DropdownMenuItem>
+						);
+					} ) }
+				</DropdownMenuGroup>
+				{ filter.operators.length > 1 && (
+					<DropdownSubMenu
+						trigger={
+							<DropdownSubMenuTrigger
+								suffix={
+									<>
+										{ filterInView.operator === OPERATOR_IN
+											? __( 'Is' )
+											: __( 'Is not' ) }
+										<Icon icon={ chevronRightSmall } />{ ' ' }
+									</>
+								}
+							>
+								{ __( 'Conditions' ) }
+							</DropdownSubMenuTrigger>
+						}
+					>
+						<DropdownMenuItem
+							key="in-filter"
+							role="menuitemradio"
+							aria-checked={
+								filterInView?.operator === OPERATOR_IN
+							}
+							prefix={
+								filterInView?.operator === OPERATOR_IN && (
+									<Icon icon={ check } />
+								)
+							}
+							onSelect={ () =>
+								onChangeView( ( currentView ) => ( {
+									...currentView,
+									page: 1,
+									filters: [
+										...view.filters.filter(
+											( f ) => f.field !== filter.field
+										),
+										{
+											field: filter.field,
+											operator: OPERATOR_IN,
+											value: filterInView?.value,
+										},
+									],
+								} ) )
+							}
+						>
+							{ __( 'Is' ) }
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							key="not-in-filter"
+							role="menuitemradio"
+							aria-checked={
+								filterInView?.operator === OPERATOR_NOT_IN
+							}
+							prefix={
+								filterInView?.operator === OPERATOR_NOT_IN && (
+									<Icon icon={ check } />
+								)
+							}
+							onSelect={ () =>
+								onChangeView( ( currentView ) => ( {
+									...currentView,
+									page: 1,
+									filters: [
+										...view.filters.filter(
+											( f ) => f.field !== filter.field
+										),
+										{
+											field: filter.field,
+											operator: OPERATOR_NOT_IN,
+											value: filterInView?.value,
+										},
+									],
+								} ) )
+							}
+						>
+							{ __( 'Is not' ) }
+						</DropdownMenuItem>
+					</DropdownSubMenu>
+				) }
+			</WithSeparators>
+		</DropdownMenu>
+	);
+}

package/src/filters.js

@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import FilterSummary from './filter-summary';
+import AddFilter from './add-filter';
+import ResetFilters from './reset-filters';
+import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+
+const operatorsFromField = ( field ) => {
+	let operators = field.filterBy?.operators;
+	if ( ! operators || ! Array.isArray( operators ) ) {
+		operators = [ OPERATOR_IN, OPERATOR_NOT_IN ];
+	}
+	return operators.filter( ( operator ) =>
+		[ OPERATOR_IN, OPERATOR_NOT_IN ].includes( operator )
+	);
+};
+
+export default function Filters( { fields, view, onChangeView } ) {
+	const filters = [];
+	fields.forEach( ( field ) => {
+		if ( ! field.type ) {
+			return;
+		}
+
+		const operators = operatorsFromField( field );
+		if ( operators.length === 0 ) {
+			return;
+		}
+
+		switch ( field.type ) {
+			case ENUMERATION_TYPE:
+				filters.push( {
+					field: field.id,
+					name: field.header,
+					elements: field.elements || [],
+					operators,
+					isVisible: view.filters.some(
+						( f ) =>
+							f.field === field.id &&
+							[ OPERATOR_IN, OPERATOR_NOT_IN ].includes(
+								f.operator
+							)
+					),
+				} );
+		}
+	} );
+
+	const filterComponents = filters.map( ( filter ) => {
+		if ( ! filter.isVisible ) {
+			return null;
+		}
+
+		return (
+			<FilterSummary
+				key={ filter.field + '.' + filter.operator }
+				filter={ filter }
+				view={ view }
+				onChangeView={ onChangeView }
+			/>
+		);
+	} );
+
+	filterComponents.push(
+		<AddFilter
+			key="add-filter"
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
+
+	if ( filterComponents.length > 1 ) {
+		filterComponents.push(
+			<ResetFilters
+				key="reset-filters"
+				view={ view }
+				onChangeView={ onChangeView }
+			/>
+		);
+	}
+
+	return filterComponents;
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export { default as DataViews } from './dataviews';
+export { VIEW_LAYOUTS } from './constants';

package/src/item-actions.js

@@ -0,0 +1,211 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const {
+	DropdownMenuV2Ariakit: DropdownMenu,
+	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
+	DropdownMenuItemV2Ariakit: DropdownMenuItem,
+	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+function ButtonTrigger( { action, onClick } ) {
+	return (
+		<Button
+			label={ action.label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+function DropdownMenuItemTrigger( { action, onClick } ) {
+	return (
+		<DropdownMenuItem
+			onClick={ onClick }
+			hideOnClick={ ! action.RenderModal }
+		>
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
+	);
+}
+
+function ActionWithModal( { action, item, ActionTrigger } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ ! hideModalHeader && action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="dataviews-action-modal"
+				>
+					<RenderModal
+						item={ item }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( !! action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( item ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}
+
+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: [] }
+		);
+	}, [ actions, item ] );
+	if ( ! primaryActions.length && ! secondaryActions.length ) {
+		return null;
+	}
+	if ( isCompact ) {
+		return (
+			<CompactItemActions
+				item={ item }
+				primaryActions={ primaryActions }
+				secondaryActions={ secondaryActions }
+			/>
+		);
+	}
+	return (
+		<HStack
+			spacing={ 1 }
+			justify="flex-end"
+			style={ {
+				flexShrink: '0',
+				width: 'auto',
+			} }
+		>
+			{ !! primaryActions.length &&
+				primaryActions.map( ( action ) => {
+					if ( !! action.RenderModal ) {
+						return (
+							<ActionWithModal
+								key={ action.id }
+								action={ action }
+								item={ item }
+								ActionTrigger={ ButtonTrigger }
+							/>
+						);
+					}
+					return (
+						<ButtonTrigger
+							key={ action.id }
+							action={ action }
+							onClick={ () => action.callback( item ) }
+						/>
+					);
+				} ) }
+			{ !! secondaryActions.length && (
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+						/>
+					}
+					placement="bottom-end"
+				>
+					<ActionsDropdownMenuGroup
+						actions={ secondaryActions }
+						item={ item }
+					/>
+				</DropdownMenu>
+			) }
+		</HStack>
+	);
+}
+
+function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+				/>
+			}
+			placement="bottom-end"
+		>
+			{ !! primaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ primaryActions }
+					item={ item }
+				/>
+			) }
+			{ !! secondaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ secondaryActions }
+					item={ item }
+				/>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'@wordpress/dataviews'
+	);

package/src/pagination.js

@@ -0,0 +1,144 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf, __, _x, _n } from '@wordpress/i18n';
+import { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';
+
+function Pagination( {
+	view,
+	onChangeView,
+	paginationInfo: { totalItems = 0, totalPages },
+} ) {
+	if ( ! totalItems || ! totalPages ) {
+		return null;
+	}
+	return (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			justify="space-between"
+			className="dataviews-pagination"
+		>
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of entries.
+					sprintf(
+						// translators: %s: Total number of entries.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</Text>
+			{ !! totalItems && totalPages !== 1 && (
+				<HStack expanded={ false } spacing={ 3 }>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 1 }
+					>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: 1 } )
+							}
+							disabled={ view.page === 1 }
+							__experimentalIsFocusable
+							label={ __( 'First page' ) }
+							icon={ previous }
+							showTooltip
+							size="compact"
+						/>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: view.page - 1 } )
+							}
+							disabled={ view.page === 1 }
+							__experimentalIsFocusable
+							label={ __( 'Previous page' ) }
+							icon={ chevronLeft }
+							showTooltip
+							size="compact"
+						/>
+					</HStack>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 2 }
+					>
+						{ createInterpolateElement(
+							sprintf(
+								// translators: %1$s: Current page number, %2$s: Total number of pages.
+								_x( '<CurrenPageControl /> of %2$s', 'paging' ),
+								view.page,
+								totalPages
+							),
+							{
+								CurrenPageControl: (
+									<NumberControl
+										aria-label={ __( 'Current page' ) }
+										min={ 1 }
+										max={ totalPages }
+										onChange={ ( value ) => {
+											const _value = +value;
+											if (
+												! _value ||
+												_value < 1 ||
+												_value > totalPages
+											) {
+												return;
+											}
+											onChangeView( {
+												...view,
+												page: _value,
+											} );
+										} }
+										step="1"
+										value={ view.page }
+										isDragEnabled={ false }
+										spinControls="none"
+									/>
+								),
+							}
+						) }
+					</HStack>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 1 }
+					>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: view.page + 1 } )
+							}
+							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
+							label={ __( 'Next page' ) }
+							icon={ chevronRight }
+							showTooltip
+							size="compact"
+						/>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: totalPages } )
+							}
+							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
+							label={ __( 'Last page' ) }
+							icon={ next }
+							showTooltip
+							size="compact"
+						/>
+					</HStack>
+				</HStack>
+			) }
+		</HStack>
+	);
+}
+
+export default Pagination;

package/src/reset-filters.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default ( { view, onChangeView } ) => {
+	return (
+		<Button
+			disabled={ view.search === '' && view.filters?.length === 0 }
+			__experimentalIsFocusable
+			size="compact"
+			variant="tertiary"
+			onClick={ () => {
+				onChangeView( ( currentView ) => ( {
+					...currentView,
+					page: 1,
+					search: '',
+					filters: [],
+				} ) );
+			} }
+		>
+			{ __( 'Reset filters' ) }
+		</Button>
+	);
+};