DataViews: use DropdownMenuRadioItem component when possible (#57505)

* Use onChange instead of onClick when possible * Use actual radio item component for field operators, layout type, and page size radios * Use actual radio item component for sorting radios, tweaking radio names and values
WordPress · Jan 3, 2024 · 904325b · 904325b
1 parent a2644c0
commit 904325b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 25 deletions.
diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js
@@ -120,7 +120,7 @@ export default function AddFilter( { filters, view, onChangeView } ) {
 													name={ `add-filter-${ filter.field }` }
 													value={ element.value }
 													checked={ isActive }
-													onClick={ () => {
+													onChange={ ( e ) => {
 														onChangeView( {
 															...view,
 															page: 1,
@@ -132,7 +132,9 @@ export default function AddFilter( { filters, view, onChangeView } ) {
 																		activeOperator,
 																	value: isActive
 																		? undefined
-																		: element.value,
+																		: e
+																				.target
+																				.value,
 																},
 															],
 														} );

diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js
@@ -13,12 +13,12 @@ import { memo } from '@wordpress/element';
  */
 import { unlock } from './lock-unlock';
 import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants';
-import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
 
 const {
 	DropdownMenuV2: DropdownMenu,
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
 	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
@@ -50,7 +50,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 		>
 			{ _availableViews.map( ( availableView ) => {
 				return (
-					<DropdownMenuRadioItemCustom
+					<DropdownMenuRadioItem
 						key={ availableView.type }
 						value={ availableView.type }
 						name="view-actions-available-view"
@@ -66,7 +66,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						<DropdownMenuItemLabel>
 							{ availableView.label }
 						</DropdownMenuItemLabel>
-					</DropdownMenuRadioItemCustom>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
 		</DropdownMenu>
@@ -90,21 +90,23 @@ function PageSizeMenu( { view, onChangeView } ) {
 		>
 			{ PAGE_SIZE_VALUES.map( ( size ) => {
 				return (
-					<DropdownMenuRadioItemCustom
+					<DropdownMenuRadioItem
 						key={ size }
 						value={ size }
 						name="view-actions-page-size"
 						checked={ view.perPage === size }
-						onChange={ ( e ) => {
+						onChange={ () => {
 							onChangeView( {
 								...view,
-								perPage: e.target.value,
+								// `e.target.value` holds the same value as `size` but as a string,
+								// so we use `size` directly to avoid parsing to int.
+								perPage: size,
 								page: 1,
 							} );
 						} }
 					>
 						<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>
-					</DropdownMenuRadioItemCustom>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
 		</DropdownMenu>
@@ -210,26 +212,33 @@ function SortMenu( { fields, view, onChangeView } ) {
 									sortedDirection === direction &&
 									field.id === currentSortedField.id;
 
+								const value = `${ field.id }-${ direction }`;
+
 								return (
-									<DropdownMenuRadioItemCustom
-										key={ direction }
-										value={ direction }
-										name={ `view-actions-sorting-${ field.id }` }
+									<DropdownMenuRadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-actions-sorting"
+										value={ value }
 										checked={ isChecked }
-										onChange={ ( e ) => {
+										onChange={ () => {
 											onChangeView( {
 												...view,
 												sort: {
 													field: field.id,
-													direction: e.target.value,
+													direction,
 												},
 											} );
 										} }
 									>
 										<DropdownMenuItemLabel>
 											{ info.label }
 										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItemCustom>
+									</DropdownMenuRadioItem>
 								);
 							}
 						) }

diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -23,6 +23,7 @@ const {
 	DropdownMenuV2: DropdownMenu,
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
@@ -93,26 +94,34 @@ function HeaderMenu( { field, view, onChangeView } ) {
 								const isChecked =
 									isSorted &&
 									view.sort.direction === direction;
+
+								const value = `${ field.id }-${ direction }`;
+
 								return (
-									<DropdownMenuRadioItemCustom
-										key={ direction }
-										name={ `view-table-sort-${ field.id }` }
-										value={ direction }
+									<DropdownMenuRadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-table-sorting"
+										value={ value }
 										checked={ isChecked }
-										onChange={ ( e ) => {
+										onChange={ () => {
 											onChangeView( {
 												...view,
 												sort: {
 													field: field.id,
-													direction: e.target.value,
+													direction,
 												},
 											} );
 										} }
 									>
 										<DropdownMenuItemLabel>
 											{ info.label }
 										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItemCustom>
+									</DropdownMenuRadioItem>
 								);
 							}
 						) }
@@ -220,7 +229,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
 												operator,
 												{ label, key },
 											] ) => (
-												<DropdownMenuRadioItemCustom
+												<DropdownMenuRadioItem
 													key={ key }
 													name={ `view-table-${ filter.field }-conditions` }
 													value={ operator }
@@ -248,7 +257,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
 													<DropdownMenuItemLabel>
 														{ label }
 													</DropdownMenuItemLabel>
-												</DropdownMenuRadioItemCustom>
+												</DropdownMenuRadioItem>
 											)
 										) }
 									</DropdownMenu>