add selection label functionality

WordPress · Nov 29, 2023 · 68cc432 · 68cc432
1 parent 5450cac
commit 68cc432
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -48,6 +48,7 @@ export default function DataViews( {
 	supportedLayouts,
 	selection,
 	setSelection,
+	getSelectionLabel,
 } ) {
 	const ViewComponent = viewTypeMap[ view.type ];
 	const _fields = useMemo( () => {
@@ -92,6 +93,7 @@ export default function DataViews( {
 					isLoading={ isLoading }
 					selection={ selection }
 					setSelection={ setSelection }
+					getSelectionLabel={ getSelectionLabel }
 				/>
 
 				<div>

diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
@@ -241,6 +241,7 @@ function ViewList( {
 	paginationInfo,
 	selection,
 	setSelection,
+	getSelectionLabel,
 } ) {
 	const areAllSelected = selection && selection.length === data.length;
 	const columns = useMemo( () => {
@@ -280,15 +281,19 @@ function ViewList( {
 					const item = props.row.original;
 					const isSelected = selection.includes( item.id );
 					//console.log({ item, isSelected });
+					let selectionLabel;
+					if ( getSelectionLabel ) {
+						selectionLabel = getSelectionLabel( isSelected, item );
+					} else {
+						selectionLabel = isSelected
+							? __( 'Deselect item' )
+							: __( 'Select a new item' );
+					}
 					return (
 						<CheckboxControl
 							__nextHasNoMarginBottom
 							checked={ isSelected }
-							label={
-								isSelected
-									? __( 'Deselect item' )
-									: __( 'Select a new item' )
-							}
+							label={ selectionLabel }
 							onChange={ () => {
 								if ( ! isSelected ) {
 									const newSelection = [
@@ -309,7 +314,7 @@ function ViewList( {
 				},
 				enableHiding: false,
 				width: 40,
-				className: 'dataviews-list-view__selection-column'
+				className: 'dataviews-list-view__selection-column',
 			} );
 		}
 		if ( actions?.length ) {

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -5,7 +5,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
@@ -326,6 +326,19 @@ export default function PagePages() {
 					onChangeView={ onChangeView }
 					selection={ selection }
 					setSelection={ setSelection }
+					getSelectionLabel={ ( isSelected, item ) =>
+						isSelected
+							? sprintf(
+									// translators: %s: The title of the page.
+									__( 'Deselect page: %s' ),
+									item.title?.rendered || item.slug
+							  )
+							: sprintf(
+									// translators: %s: The title of the page.
+									__( 'Select page: %s' ),
+									item.title?.rendered || item.slug
+							  )
+					}
 				/>
 			</Page>
 			{ viewTypeSupportsMap[ view.type ].preview && (