Update dropzone context API

packages/components/src/drop-zone/provider.js

@@ -6,30 +6,41 @@ import { isEqual, find, some, filter, noop, throttle, includes } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, findDOMNode } from '@wordpress/element';
+import { Component, createContext, findDOMNode } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
+const Context = createContext( {
+	addDropZone: () => {},
+	removeDropZone: () => {},
+	isDraggingOverDocument: false,
+	isDraggingOverElement: false,
+	position: null,
+	type: null,
+} );
+
 class DropZoneProvider extends Component {
 	constructor() {
 		super( ...arguments );
 
+		// Event listeners
+		this.onDragOver = this.onDragOver.bind( this );
+		this.onDrop = this.onDrop.bind( this );
+		// Context methods so this component can receive data from consumers
+		this.addDropZone = this.addDropZone.bind( this );
+		this.removeDropZone = this.removeDropZone.bind( this );
+		// Utility methods
 		this.resetDragState = this.resetDragState.bind( this );
 		this.toggleDraggingOverDocument = throttle( this.toggleDraggingOverDocument.bind( this ), 200 );
-		this.dragOverListener = this.dragOverListener.bind( this );
 		this.isWithinZoneBounds = this.isWithinZoneBounds.bind( this );
-		this.onDrop = this.onDrop.bind( this );
 
+		this.dropzones = [];
 		this.state = {
+			addDropZone: this.addDropZone,
+			removeDropZone: this.removeDropZone,
 			isDraggingOverDocument: false,
 			hoveredDropZone: -1,
 			position: null,
 		};
-		this.dropzones = [];
-	}
-
-	dragOverListener( event ) {
-		this.toggleDraggingOverDocument( event, this.getDragEventType( event ) );
-		event.preventDefault();
 	}
 
 	getChildContext() {
@@ -46,7 +57,7 @@ class DropZoneProvider extends Component {
 	}
 
 	componentDidMount() {
-		window.addEventListener( 'dragover', this.dragOverListener );
+		window.addEventListener( 'dragover', this.onDragOver );
 		window.addEventListener( 'drop', this.onDrop );
 		window.addEventListener( 'mouseup', this.resetDragState );
 
@@ -56,11 +67,19 @@ class DropZoneProvider extends Component {
 	}
 
 	componentWillUnmount() {
-		window.removeEventListener( 'dragover', this.dragOverListener );
+		window.removeEventListener( 'dragover', this.onDragOver );
 		window.removeEventListener( 'drop', this.onDrop );
 		window.removeEventListener( 'mouseup', this.resetDragState );
 	}
 
+	addDropZone( dropZone ) {
+		this.dropzones.push( dropZone );
+	}
+
+	removeDropZone( dropZone ) {
+		this.dropzones = filter( this.dropzones, ( dz ) => dz !== dropZone );
+	}
+
 	resetDragState() {
 		// Avoid throttled drag over handler calls
 		this.toggleDraggingOverDocument.cancel();
@@ -204,6 +223,11 @@ class DropZoneProvider extends Component {
 		return isWithinElement( dropzone );
 	}
 
+	onDragOver( event ) {
+		this.toggleDraggingOverDocument( event, this.getDragEventType( event ) );
+		event.preventDefault();
+	}
+
 	onDrop( event ) {
 		// This seemingly useless line has been shown to resolve a Safari issue
 		// where files dragged directly from the dock are not recognized