Make DropZoneProvider use the new context API (#11100)

WordPress · Oct 26, 2018 · a548961 · a548961
1 parent ac3d50e
commit a548961
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 125 deletions.
diff --git a/packages/components/src/drop-zone/index.js b/packages/components/src/drop-zone/index.js
@@ -2,25 +2,43 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Dashicon from '../dashicon';
+import { DropZoneConsumer } from './provider';
 
-class DropZone extends Component {
+const DropZone = ( props ) => (
+	<DropZoneConsumer>
+		{ ( { addDropZone, removeDropZone } ) => (
+			<DropZoneComponent
+				addDropZone={ addDropZone }
+				removeDropZone={ removeDropZone }
+				{ ...props }
+			/>
+		) }
+	</DropZoneConsumer>
+);
+
+class DropZoneComponent extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.setZoneNode = this.setZoneNode.bind( this );
-
+		this.dropZoneElement = createRef();
+		this.dropZone = {
+			element: null,
+			onDrop: this.props.onDrop,
+			onFilesDrop: this.props.onFilesDrop,
+			onHTMLDrop: this.props.onHTMLDrop,
+			setState: this.setState.bind( this ),
+		};
 		this.state = {
 			isDraggingOverDocument: false,
 			isDraggingOverElement: false,
@@ -30,21 +48,13 @@ class DropZone extends Component {
 	}
 
 	componentDidMount() {
-		this.context.dropzones.add( {
-			element: this.zone,
-			updateState: this.setState.bind( this ),
-			onDrop: this.props.onDrop,
-			onFilesDrop: this.props.onFilesDrop,
-			onHTMLDrop: this.props.onHTMLDrop,
-		} );
+		// Set element after the component has a node assigned in the DOM
+		this.dropZone.element = this.dropZoneElement.current;
+		this.props.addDropZone( this.dropZone );
 	}
 
 	componentWillUnmount() {
-		this.context.dropzones.remove( this.zone );
-	}
-
-	setZoneNode( node ) {
-		this.zone = node;
+		this.props.removeDropZone( this.dropZone );
 	}
 
 	render() {
@@ -62,7 +72,7 @@ class DropZone extends Component {
 		} );
 
 		return (
-			<div ref={ this.setZoneNode } className={ classes }>
+			<div ref={ this.dropZoneElement } className={ classes }>
 				<div className="components-drop-zone__content">
 					{ [
 						<Dashicon
@@ -84,9 +94,4 @@ class DropZone extends Component {
 	}
 }
 
-DropZone.contextTypes = {
-	dropzones: noop,
-};
-
 export default DropZone;
-