Introduce enableMoving

WordPress · Aug 20, 2024 · 006a616 · 006a616
1 parent ebc9865
commit 006a616
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 73 deletions.
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
@@ -131,6 +131,7 @@ Each field is an object with the following properties:
 -   `type`: the type of the field. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
+-   `enableMoving`: whether the field can be moved in the table layout. True by default.
 -   `enableGlobalSearch`: whether the field is searchable. False by default.
 -   `filterBy`: configuration for the filters enabled by the `elements` property.
     -   `operators`: the list of [operators](#operators) supported by the field.

diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -80,6 +80,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}
 	const isHidable = field.enableHiding !== false;
 	const isSortable = field.enableSorting !== false;
+	const isMovable = field.enableMoving !== false;
 	const isSorted = view.sort?.field === field.id;
 	const operators = sanitizeOperators( field );
 	// Filter can be added:
@@ -91,7 +92,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		!! field.elements?.length &&
 		!! operators.length &&
 		! field.filterBy?.isPrimary;
-	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
+	if ( ! isSortable && ! isHidable && ! isMovable && ! canAddFilter ) {
 		return field.label;
 	}
 	return (
@@ -182,78 +183,91 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 						</DropdownMenuItem>
 					</DropdownMenuGroup>
 				) }
-				<DropdownMenuGroup>
-					<DropdownMenuItem
-						prefix={ <Icon icon={ arrowLeft } /> }
-						disabled={ index < 1 }
-						onClick={ () => {
-							if ( ! view.fields || index < 1 ) {
-								return;
-							}
-							onChangeView( {
-								...view,
-								fields: [
-									...( view.fields.slice( 0, index - 1 ) ??
-										[] ),
-									field.id,
-									view.fields[ index - 1 ],
-									...view.fields.slice( index + 1 ),
-								],
-							} );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ __( 'Move left' ) }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-					<DropdownMenuItem
-						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={
-							! view.fields || index >= view.fields.length - 1
-						}
-						onClick={ () => {
-							if (
-								! view.fields ||
-								index >= view.fields.length - 1
-							) {
-								return;
-							}
-							onChangeView( {
-								...view,
-								fields: [
-									...( view.fields.slice( 0, index ) ?? [] ),
-									view.fields[ index + 1 ],
-									field.id,
-									...view.fields.slice( index + 2 ),
-								],
-							} );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ __( 'Move right' ) }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-					{ isHidable && (
-						<DropdownMenuItem
-							prefix={ <Icon icon={ unseen } /> }
-							onClick={ () => {
-								const viewFields =
-									view.fields || fields.map( ( f ) => f.id );
-								onHide( field );
-								onChangeView( {
-									...view,
-									fields: viewFields.filter(
-										( id ) => id !== field.id
-									),
-								} );
-							} }
-						>
-							<DropdownMenuItemLabel>
-								{ __( 'Hide column' ) }
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
-					) }
-				</DropdownMenuGroup>
+				{ ( isMovable || isHidable ) && (
+					<DropdownMenuGroup>
+						{ isMovable && (
+							<DropdownMenuItem
+								prefix={ <Icon icon={ arrowLeft } /> }
+								disabled={ index < 1 }
+								onClick={ () => {
+									if ( ! view.fields || index < 1 ) {
+										return;
+									}
+									onChangeView( {
+										...view,
+										fields: [
+											...( view.fields.slice(
+												0,
+												index - 1
+											) ?? [] ),
+											field.id,
+											view.fields[ index - 1 ],
+											...view.fields.slice( index + 1 ),
+										],
+									} );
+								} }
+							>
+								<DropdownMenuItemLabel>
+									{ __( 'Move left' ) }
+								</DropdownMenuItemLabel>
+							</DropdownMenuItem>
+						) }
+						{ isMovable && (
+							<DropdownMenuItem
+								prefix={ <Icon icon={ arrowRight } /> }
+								disabled={
+									! view.fields ||
+									index >= view.fields.length - 1
+								}
+								onClick={ () => {
+									if (
+										! view.fields ||
+										index >= view.fields.length - 1
+									) {
+										return;
+									}
+									onChangeView( {
+										...view,
+										fields: [
+											...( view.fields.slice(
+												0,
+												index
+											) ?? [] ),
+											view.fields[ index + 1 ],
+											field.id,
+											...view.fields.slice( index + 2 ),
+										],
+									} );
+								} }
+							>
+								<DropdownMenuItemLabel>
+									{ __( 'Move right' ) }
+								</DropdownMenuItemLabel>
+							</DropdownMenuItem>
+						) }
+						{ isHidable && (
+							<DropdownMenuItem
+								prefix={ <Icon icon={ unseen } /> }
+								onClick={ () => {
+									const viewFields =
+										view.fields ||
+										fields.map( ( f ) => f.id );
+									onHide( field );
+									onChangeView( {
+										...view,
+										fields: viewFields.filter(
+											( id ) => id !== field.id
+										),
+									} );
+								} }
+							>
+								<DropdownMenuItemLabel>
+									{ __( 'Hide column' ) }
+								</DropdownMenuItemLabel>
+							</DropdownMenuItem>
+						) }
+					</DropdownMenuGroup>
+				) }
 			</WithDropDownMenuSeparators>
 		</DropdownMenu>
 	);

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -132,6 +132,11 @@ export type Field< Item > = {
 	 */
 	enableHiding?: boolean;
 
+	/**
+	 * Whether the field is movable.
+	 */
+	enableMoving?: boolean;
+
 	/**
 	 * The list of options to pick from when using the field as a filter.
 	 */