@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

package/src/components/dataviews/dataviews.js

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ViewList from './view-list';
-import Pagination from './pagination';
-import ViewActions from './view-actions';
-import Filters from './filters';
-import Search from './search';
-import { ViewGrid } from './view-grid';
-import { ViewSideBySide } from './view-side-by-side';
-
-// To do: convert to view type registry.
-export const viewTypeSupportsMap = {
-	list: {},
-	grid: {},
-	'side-by-side': {
-		preview: true,
-	},
-};
-
-const viewTypeMap = {
-	list: ViewList,
-	grid: ViewGrid,
-	'side-by-side': ViewSideBySide,
-};
-
-export default function DataViews( {
-	view,
-	onChangeView,
-	fields,
-	search = true,
-	searchLabel = undefined,
-	actions,
-	data,
-	getItemId,
-	isLoading = false,
-	paginationInfo,
-	supportedLayouts,
-} ) {
-	const ViewComponent = viewTypeMap[ view.type ];
-	const _fields = useMemo( () => {
-		return fields.map( ( field ) => ( {
-			...field,
-			render: field.render || field.getValue,
-		} ) );
-	}, [ fields ] );
-	return (
-		<div className="dataviews-wrapper">
-			<VStack spacing={ 4 } justify="flex-start">
-				<HStack alignment="flex-start">
-					<HStack justify="start" wrap>
-						{ search && (
-							<Search
-								label={ searchLabel }
-								view={ view }
-								onChangeView={ onChangeView }
-							/>
-						) }
-						<Filters
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					</HStack>
-					<ViewActions
-						fields={ fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						supportedLayouts={ supportedLayouts }
-					/>
-				</HStack>
-				<ViewComponent
-					fields={ _fields }
-					view={ view }
-					onChangeView={ onChangeView }
-					paginationInfo={ paginationInfo }
-					actions={ actions }
-					data={ data }
-					getItemId={ getItemId }
-					isLoading={ isLoading }
-				/>
-				<Pagination
-					view={ view }
-					onChangeView={ onChangeView }
-					paginationInfo={ paginationInfo }
-				/>
-			</VStack>
-		</div>
-	);
-}

package/src/components/dataviews/filter-summary.js

@@ -1,79 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-	Icon,
-} from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { OPERATOR_IN } from './constants';
-import { unlock } from '../../lock-unlock';
-
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
-} = unlock( componentsPrivateApis );
-
-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 }>
-					{ activeElement !== undefined
-						? sprintf(
-								/* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
-								__( '%1$s is %2$s' ),
-								filter.name,
-								activeElement.label
-						  )
-						: filter.name }
-					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
-				</Button>
-			}
-		>
-			{ filter.elements.map( ( element ) => {
-				return (
-					<DropdownMenuCheckboxItem
-						key={ element.value }
-						value={ element.value }
-						checked={ activeElement?.value === element.value }
-						onSelect={ () =>
-							onChangeView( ( currentView ) => ( {
-								...currentView,
-								page: 1,
-								filters: [
-									...view.filters.filter(
-										( f ) => f.field !== filter.field
-									),
-									{
-										field: filter.field,
-										operator: OPERATOR_IN,
-										value:
-											activeElement?.value ===
-											element.value
-												? undefined
-												: element.value,
-									},
-								],
-							} ) )
-						}
-					>
-						{ element.label }
-					</DropdownMenuCheckboxItem>
-				);
-			} ) }
-		</DropdownMenu>
-	);
-}

package/src/components/dataviews/filters.js

@@ -1,65 +0,0 @@
-/**
- * Internal dependencies
- */
-import FilterSummary from './filter-summary';
-import AddFilter from './add-filter';
-import ResetFilters from './reset-filters';
-import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
-
-export default function Filters( { fields, view, onChangeView } ) {
-	const filters = [];
-	fields.forEach( ( field ) => {
-		if ( ! field.type ) {
-			return;
-		}
-
-		switch ( field.type ) {
-			case ENUMERATION_TYPE:
-				filters.push( {
-					field: field.id,
-					name: field.header,
-					elements: field.elements || [],
-					isVisible: view.filters.some(
-						( f ) =>
-							f.field === field.id && f.operator === OPERATOR_IN
-					),
-				} );
-		}
-	} );
-
-	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/components/dataviews/index.js

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

package/src/components/dataviews/item-actions.js

@@ -1,208 +0,0 @@
-/**
- * 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 }>
-			<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/components/dataviews/pagination.js

@@ -1,144 +0,0 @@
-/**
- * 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 && (
-				<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/components/dataviews/reset-filters.js

@@ -1,26 +0,0 @@
-/**
- * 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>
-	);
-};

package/src/components/dataviews/search.js

@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
-import { SearchControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useDebouncedInput from '../../utils/use-debounced-input';
-
-export default function Search( { label, view, onChangeView } ) {
-	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
-		view.search
-	);
-	useEffect( () => {
-		setSearch( view.search );
-	}, [ view ] );
-	const onChangeViewRef = useRef( onChangeView );
-	useEffect( () => {
-		onChangeViewRef.current = onChangeView;
-	}, [ onChangeView ] );
-	useEffect( () => {
-		onChangeViewRef.current( ( currentView ) => ( {
-			...currentView,
-			page: 1,
-			search: debouncedSearch,
-		} ) );
-	}, [ debouncedSearch ] );
-	const searchLabel = label || __( 'Filter list' );
-	return (
-		<SearchControl
-			__nextHasNoMarginBottom
-			onChange={ setSearch }
-			value={ search }
-			label={ searchLabel }
-			placeholder={ searchLabel }
-			size="compact"
-		/>
-	);
-}