@wordpress/edit-site 5.24.1 → 5.25.0

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"
-		/>
-	);
-}

package/src/components/dataviews/style.scss

@@ -1,131 +0,0 @@
-.dataviews-wrapper {
-	width: 100%;
-	height: calc(100% - #{$grid-unit-40} * 2);
-	overflow: auto;
-	padding: $grid-unit-40 $grid-unit-40 0;
-
-	> div {
-		min-height: 100%;
-	}
-}
-
-.dataviews-pagination {
-	margin-top: auto;
-	position: sticky;
-	bottom: 0;
-	background-color: $white;
-	padding: $grid-unit-20 0;
-	border-top: $border-width solid $gray-200;
-}
-
-.dataviews-filters-options {
-	margin: $grid-unit-40 0 $grid-unit-20;
-}
-
-.dataviews-list-view {
-	width: 100%;
-	text-indent: 0;
-	border-color: inherit;
-	border-collapse: collapse;
-	position: relative;
-
-	a {
-		text-decoration: none;
-	}
-	th {
-		text-align: left;
-		font-weight: normal;
-		padding: 0 $grid-unit-20 $grid-unit-20;
-		color: $gray-700;
-	}
-	td,
-	th {
-		padding: $grid-unit-15;
-		&[data-field-id="actions"] {
-			text-align: right;
-		}
-	}
-	tr {
-		border-bottom: 1px solid $gray-100;
-
-		&:last-child {
-			border-bottom: 0;
-		}
-	}
-	thead {
-		tr {
-			border: 0;
-		}
-		th {
-			position: sticky;
-			top: - #{$grid-unit-40}; // Offset the container padding
-			background-color: $white;
-			box-shadow: inset 0 -#{$border-width} 0 $gray-200;
-		}
-	}
-}
-
-.dataviews-grid-view {
-	margin-bottom: $grid-unit-30;
-	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	.dataviews-view-grid__card {
-		h3 { // Todo: A better way to target this
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.dataviews-view-grid__media {
-		width: 100%;
-		min-height: 200px;
-		aspect-ratio: 1/1;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-		border-radius: $radius-block-ui * 2;
-		overflow: hidden;
-
-		> * {
-			object-fit: cover;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.dataviews-view-grid__title {
-		min-height: $grid-unit-30;
-
-		a {
-			color: $gray-900;
-			text-decoration: none;
-			font-weight: 500;
-		}
-	}
-
-	.dataviews-view-grid__fields {
-		position: relative;
-		font-size: 12px;
-		line-height: 16px;
-
-		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-header {
-				color: $gray-700;
-			}
-			.dataviews-view-grid__field-value {
-				color: $gray-900;
-			}
-		}
-	}
-}
-
-.dataviews-action-modal {
-	z-index: z-index(".dataviews-action-modal");
-}