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

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

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

@@ -1,319 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Icon,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import {
-	chevronRightSmall,
-	check,
-	blockTable,
-	arrowUp,
-	arrowDown,
-	grid,
-	columns,
-} from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownSubMenuV2: DropdownSubMenu,
-	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
-} = unlock( componentsPrivateApis );
-
-const availableViews = [
-	{
-		id: 'list',
-		label: __( 'List' ),
-	},
-	{
-		id: 'grid',
-		label: __( 'Grid' ),
-	},
-	{
-		id: 'side-by-side',
-		label: __( 'Side by side' ),
-	},
-];
-
-function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
-	let _availableViews = availableViews;
-	if ( supportedLayouts ) {
-		_availableViews = _availableViews.filter( ( _view ) =>
-			supportedLayouts.includes( _view.id )
-		);
-	}
-	if ( _availableViews.length === 1 ) {
-		return null;
-	}
-	const activeView = _availableViews.find( ( v ) => view.type === v.id );
-	return (
-		<DropdownSubMenu
-			trigger={
-				<DropdownSubMenuTrigger
-					suffix={
-						<>
-							{ activeView.label }
-							<Icon icon={ chevronRightSmall } />
-						</>
-					}
-				>
-					{ __( 'Layout' ) }
-				</DropdownSubMenuTrigger>
-			}
-		>
-			{ _availableViews.map( ( availableView ) => {
-				return (
-					<DropdownMenuItem
-						key={ availableView.id }
-						prefix={
-							availableView.id === view.type && (
-								<Icon icon={ check } />
-							)
-						}
-						onSelect={ ( event ) => {
-							// We need to handle this on DropDown component probably..
-							event.preventDefault();
-							onChangeView( { ...view, type: availableView.id } );
-						} }
-						// TODO: check about role and a11y.
-						role="menuitemcheckbox"
-					>
-						{ availableView.label }
-					</DropdownMenuItem>
-				);
-			} ) }
-		</DropdownSubMenu>
-	);
-}
-
-const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView } ) {
-	return (
-		<DropdownSubMenu
-			trigger={
-				<DropdownSubMenuTrigger
-					suffix={
-						<>
-							{ view.perPage }
-							<Icon icon={ chevronRightSmall } />
-						</>
-					}
-				>
-					{ /* TODO: probably label per view type. */ }
-					{ __( 'Rows per page' ) }
-				</DropdownSubMenuTrigger>
-			}
-		>
-			{ PAGE_SIZE_VALUES.map( ( size ) => {
-				return (
-					<DropdownMenuItem
-						key={ size }
-						prefix={
-							view.perPage === size && <Icon icon={ check } />
-						}
-						onSelect={ ( event ) => {
-							// We need to handle this on DropDown component probably..
-							event.preventDefault();
-							onChangeView( { ...view, perPage: size, page: 1 } );
-						} }
-						// TODO: check about role and a11y.
-						role="menuitemcheckbox"
-					>
-						{ size }
-					</DropdownMenuItem>
-				);
-			} ) }
-		</DropdownSubMenu>
-	);
-}
-
-function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
-	const hidableFields = fields.filter(
-		( field ) => field.enableHiding !== false
-	);
-	if ( ! hidableFields?.length ) {
-		return null;
-	}
-	return (
-		<DropdownSubMenu
-			trigger={
-				<DropdownSubMenuTrigger
-					suffix={ <Icon icon={ chevronRightSmall } /> }
-				>
-					{ __( 'Fields' ) }
-				</DropdownSubMenuTrigger>
-			}
-		>
-			{ hidableFields?.map( ( field ) => {
-				return (
-					<DropdownMenuItem
-						key={ field.id }
-						prefix={
-							! view.hiddenFields?.includes( field.id ) && (
-								<Icon icon={ check } />
-							)
-						}
-						onSelect={ ( event ) => {
-							event.preventDefault();
-							onChangeView( {
-								...view,
-								hiddenFields: view.hiddenFields?.includes(
-									field.id
-								)
-									? view.hiddenFields.filter(
-											( id ) => id !== field.id
-									  )
-									: [ ...view.hiddenFields, field.id ],
-							} );
-						} }
-						role="menuitemcheckbox"
-					>
-						{ field.header }
-					</DropdownMenuItem>
-				);
-			} ) }
-		</DropdownSubMenu>
-	);
-}
-
-// This object is used to construct the sorting options per sortable field.
-const sortingItemsInfo = {
-	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
-	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
-};
-function SortMenu( { fields, view, onChangeView } ) {
-	const sortableFields = fields.filter(
-		( field ) => field.enableSorting !== false
-	);
-	if ( ! sortableFields?.length ) {
-		return null;
-	}
-	const currentSortedField = fields.find(
-		( field ) => field.id === view.sort?.field
-	);
-	return (
-		<DropdownSubMenu
-			trigger={
-				<DropdownSubMenuTrigger
-					suffix={
-						<>
-							{ currentSortedField?.header }
-							<Icon icon={ chevronRightSmall } />
-						</>
-					}
-				>
-					{ __( 'Sort by' ) }
-				</DropdownSubMenuTrigger>
-			}
-		>
-			{ sortableFields?.map( ( field ) => {
-				const sortedDirection = view.sort?.direction;
-				return (
-					<DropdownSubMenu
-						key={ field.id }
-						trigger={
-							<DropdownSubMenuTrigger
-								suffix={ <Icon icon={ chevronRightSmall } /> }
-							>
-								{ field.header }
-							</DropdownSubMenuTrigger>
-						}
-						side="left"
-					>
-						{ Object.entries( sortingItemsInfo ).map(
-							( [ direction, info ] ) => {
-								const isActive =
-									currentSortedField &&
-									sortedDirection === direction &&
-									field.id === currentSortedField.id;
-								return (
-									<DropdownMenuItem
-										key={ direction }
-										prefix={ <Icon icon={ info.icon } /> }
-										suffix={
-											isActive && <Icon icon={ check } />
-										}
-										onSelect={ ( event ) => {
-											event.preventDefault();
-											if (
-												sortedDirection === direction
-											) {
-												onChangeView( {
-													...view,
-													sort: undefined,
-												} );
-											} else {
-												onChangeView( {
-													...view,
-													sort: {
-														field: field.id,
-														direction,
-													},
-												} );
-											}
-										} }
-									>
-										{ info.label }
-									</DropdownMenuItem>
-								);
-							}
-						) }
-					</DropdownSubMenu>
-				);
-			} ) }
-		</DropdownSubMenu>
-	);
-}
-
-const VIEW_TYPE_ICONS = { list: blockTable, grid, 'side-by-side': columns };
-
-export default function ViewActions( {
-	fields,
-	view,
-	onChangeView,
-	supportedLayouts,
-} ) {
-	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					variant="tertiary"
-					size="compact"
-					icon={
-						VIEW_TYPE_ICONS[ view.type ] || VIEW_TYPE_ICONS.list
-					}
-					label={ __( 'View options' ) }
-				/>
-			}
-		>
-			<DropdownMenuGroup>
-				<ViewTypeMenu
-					view={ view }
-					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
-				/>
-				<SortMenu
-					fields={ fields }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-				<FieldsVisibilityMenu
-					fields={ fields }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
-			</DropdownMenuGroup>
-		</DropdownMenu>
-	);
-}

package/src/components/dataviews/view-grid.js

@@ -1,90 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalGrid as Grid,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import ItemActions from './item-actions';
-
-export function ViewGrid( { data, fields, view, actions, getItemId } ) {
-	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.mediaField, view.layout.primaryField ].includes(
-				field.id
-			)
-	);
-	const shownData = useAsyncList( data, { step: 3 } );
-	return (
-		<Grid
-			gap={ 8 }
-			columns={ 2 }
-			alignment="top"
-			className="dataviews-grid-view"
-		>
-			{ shownData.map( ( item, index ) => (
-				<VStack
-					spacing={ 3 }
-					key={ getItemId?.( item ) || index }
-					className="dataviews-view-grid__card"
-				>
-					<div className="dataviews-view-grid__media">
-						{ mediaField?.render( { item, view } ) }
-					</div>
-					<HStack
-						className="dataviews-view-grid__title"
-						justify="space-between"
-					>
-						{ primaryField?.render( { item, view } ) }
-						<ItemActions
-							item={ item }
-							actions={ actions }
-							isCompact
-						/>
-					</HStack>
-					<VStack
-						className="dataviews-view-grid__fields"
-						spacing={ 3 }
-					>
-						{ visibleFields.map( ( field ) => {
-							const renderedValue = field.render( {
-								item,
-								view,
-							} );
-							if ( ! renderedValue ) {
-								return null;
-							}
-							return (
-								<VStack
-									className="dataviews-view-grid__field"
-									key={ field.id }
-									spacing={ 1 }
-								>
-									<div className="dataviews-view-grid__field-header">
-										{ field.header }
-									</div>
-									<div className="dataviews-view-grid__field-value">
-										{ field.render( { item, view } ) }
-									</div>
-								</VStack>
-							);
-						} ) }
-					</VStack>
-				</VStack>
-			) ) }
-		</Grid>
-	);
-}