Refactor BlockMover to use React hooks (#24774)

WordPress · Oct 29, 2020 · e6a096e · e6a096e
1 parent d6ffd44
commit e6a096e
Showing 1 changed file with 46 additions and 72 deletions.
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -12,89 +12,63 @@ import {
 	__experimentalToolbarItem as ToolbarItem,
 } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 
-export class BlockMover extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			isFocused: false,
-		};
-		this.onFocus = this.onFocus.bind( this );
-		this.onBlur = this.onBlur.bind( this );
-	}
+function BlockMover( {
+	isFirst,
+	isLast,
+	clientIds,
+	isLocked,
+	isHidden,
+	rootClientId,
+	orientation,
+} ) {
+	const [ isFocused, setIsFocused ] = useState( false );
 
-	onFocus() {
-		this.setState( {
-			isFocused: true,
-		} );
-	}
+	const onFocus = () => setIsFocused( true );
+	const onBlur = () => setIsFocused( false );
 
-	onBlur() {
-		this.setState( {
-			isFocused: false,
-		} );
+	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+		return null;
 	}
 
-	render() {
-		const {
-			isFirst,
-			isLast,
-			clientIds,
-			isLocked,
-			isHidden,
-			rootClientId,
-			orientation,
-		} = this.props;
-		const { isFocused } = this.state;
-		if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
-			return null;
-		}
-
-		// We emulate a disabled state because forcefully applying the `disabled`
-		// attribute on the buttons while it has focus causes the screen to change
-		// to an unfocused state (body as active element) without firing blur on,
-		// the rendering parent, leaving it unable to react to focus out.
-		return (
-			<div
-				className={ classnames( 'block-editor-block-mover', {
-					'is-visible': isFocused || ! isHidden,
-					'is-horizontal': orientation === 'horizontal',
-				} ) }
-			>
-				<ToolbarGroup>
-					<ToolbarItem
-						onFocus={ this.onFocus }
-						onBlur={ this.onBlur }
-					>
-						{ ( itemProps ) => (
-							<BlockMoverUpButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-					<ToolbarItem
-						onFocus={ this.onFocus }
-						onBlur={ this.onBlur }
-					>
-						{ ( itemProps ) => (
-							<BlockMoverDownButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-				</ToolbarGroup>
-			</div>
-		);
-	}
+	// We emulate a disabled state because forcefully applying the `disabled`
+	// attribute on the buttons while it has focus causes the screen to change
+	// to an unfocused state (body as active element) without firing blur on,
+	// the rendering parent, leaving it unable to react to focus out.
+	return (
+		<div
+			className={ classnames( 'block-editor-block-mover', {
+				'is-visible': isFocused || ! isHidden,
+				'is-horizontal': orientation === 'horizontal',
+			} ) }
+		>
+			<ToolbarGroup>
+				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+					{ ( itemProps ) => (
+						<BlockMoverUpButton
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
+				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+					{ ( itemProps ) => (
+						<BlockMoverDownButton
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
+		</div>
+	);
 }
 
 export default withSelect( ( select, { clientIds } ) => {