Small refactoring per review

WordPress · Nov 6, 2018 · 3f15f77 · 3f15f77
1 parent f66427c
commit 3f15f77
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, reduce, size, first, last, over } from 'lodash';
+import { get, reduce, size, first, last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from '../ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
-import WithHoverAreas from './with-hover-areas';
+import HoverArea from './hover-area';
 import { isInsideRootBlock } from '../../utils/dom';
 
 export class BlockListBlock extends Component {
@@ -104,6 +104,11 @@ export class BlockListBlock extends Component {
 	setBlockListRef( node ) {
 		this.wrapperNode = node;
 		this.props.blockRef( node, this.props.clientId );
+
+		// We need to rerender to trigger a rerendering of HoverArea
+		// it depents on this.wrapperNode but we can't keep this.wrapperNode in state
+		// Because we need it to be immediately availeble for `focusableTabbable` to work.
+		this.forceUpdate();
 	}
 
 	bindBlockNode( node ) {
@@ -354,8 +359,8 @@ export class BlockListBlock extends Component {
 
 	render() {
 		return (
-			<WithHoverAreas>
-				{ ( { bindContainer, hoverArea } ) => {
+			<HoverArea container={ this.wrapperNode }>
+				{ ( { hoverArea } ) => {
 					const {
 						block,
 						order,
@@ -468,7 +473,7 @@ export class BlockListBlock extends Component {
 					return (
 						<IgnoreNestedEvents
 							id={ blockElementId }
-							ref={ over( this.setBlockListRef, bindContainer ) }
+							ref={ this.setBlockListRef }
 							onMouseOver={ this.maybeHover }
 							onMouseOverHandled={ this.hideHoverEffects }
 							onMouseLeave={ this.hideHoverEffects }
@@ -570,7 +575,7 @@ export class BlockListBlock extends Component {
 					);
 					/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 				} }
-			</WithHoverAreas>
+			</HoverArea>
 		);
 	}
 }

diff --git a/...components/block-list/with-hover-areas.js → ...r/src/components/block-list/hover-area.js b/...components/block-list/with-hover-areas.js → ...r/src/components/block-list/hover-area.js
@@ -4,37 +4,44 @@
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 
-class WithHoverAreas extends Component {
+class HoverArea extends Component {
 	constructor() {
 		super( ...arguments );
 		this.state = {
 			hoverArea: null,
 		};
-		this.bindContainer = this.bindContainer.bind( this );
 		this.onMouseLeave = this.onMouseLeave.bind( this );
 		this.onMouseMove = this.onMouseMove.bind( this );
 	}
 
 	componentWillUnmount() {
-		this.toggleListeners( true );
+		if ( this.props.container ) {
+			this.toggleListeners( this.props.container, false );
+		}
 	}
 
-	bindContainer( ref ) {
-		this.toggleListeners( true );
-
-		if ( ref ) {
-			this.container = ref;
-			this.toggleListeners();
+	componentDidMount() {
+		if ( this.props.container ) {
+			this.toggleListeners( this.props.container );
 		}
 	}
 
-	toggleListeners( shouldRemoveEvents ) {
-		if ( ! this.container ) {
+	componentDidUpdate( prevProps ) {
+		if ( prevProps.container === this.props.container ) {
 			return;
 		}
-		const method = shouldRemoveEvents ? 'removeEventListener' : 'addEventListener';
-		this.container[ method ]( 'mousemove', this.onMouseMove );
-		this.container[ method ]( 'mouseleave', this.onMouseLeave );
+		if ( prevProps.container ) {
+			this.toggleListeners( prevProps.container, false );
+		}
+		if ( this.props.container ) {
+			this.toggleListeners( this.props.container, true );
+		}
+	}
+
+	toggleListeners( container, shouldListnerToEvents = true ) {
+		const method = shouldListnerToEvents ? 'addEventListener' : 'removeEventListener';
+		container[ method ]( 'mousemove', this.onMouseMove );
+		container[ method ]( 'mouseleave', this.onMouseLeave );
 	}
 
 	onMouseLeave() {
@@ -44,8 +51,8 @@ class WithHoverAreas extends Component {
 	}
 
 	onMouseMove( event ) {
-		const { isRTL } = this.props;
-		const { width, left, right } = this.container.getBoundingClientRect();
+		const { isRTL, container } = this.props;
+		const { width, left, right } = container.getBoundingClientRect();
 
 		let hoverArea = null;
 		if ( ( event.clientX - left ) < width / 3 ) {
@@ -63,13 +70,13 @@ class WithHoverAreas extends Component {
 		const { hoverArea } = this.state;
 		const { children } = this.props;
 
-		return children( { hoverArea, bindContainer: this.bindContainer } );
+		return children( { hoverArea } );
 	}
 }
 
 export default withSelect( ( select ) => {
 	return {
 		isRTL: select( 'core/editor' ).getEditorSettings().isRTL,
 	};
-} )( WithHoverAreas );
+} )( HoverArea );