Drop zone: rewrite with hooks and simplify (#26893)

* Drop zone: rewrite with hooks and simplify * Clean up
WordPress · Nov 11, 2020 · 2296afb · 2296afb
1 parent 5904051
commit 2296afb
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 239 deletions.
diff --git a/packages/block-editor/src/components/use-on-block-drop/index.js b/packages/block-editor/src/components/use-on-block-drop/index.js
@@ -7,6 +7,7 @@ import {
 	pasteHandler,
 } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 
 /** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
 
@@ -212,24 +213,41 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 	} = useDispatch( 'core/block-editor' );
 
 	return {
-		onDrop: onBlockDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			getBlockIndex,
-			getClientIdsOfDescendants,
-			moveBlocksToPosition
+		onDrop: useCallback(
+			onBlockDrop(
+				targetRootClientId,
+				targetBlockIndex,
+				getBlockIndex,
+				getClientIdsOfDescendants,
+				moveBlocksToPosition
+			),
+			[
+				targetRootClientId,
+				targetBlockIndex,
+				getBlockIndex,
+				getClientIdsOfDescendants,
+				moveBlocksToPosition,
+			]
 		),
-		onFilesDrop: onFilesDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			hasUploadPermissions,
-			updateBlockAttributes,
-			insertBlocks
+		onFilesDrop: useCallback(
+			onFilesDrop(
+				targetRootClientId,
+				targetBlockIndex,
+				hasUploadPermissions,
+				updateBlockAttributes,
+				insertBlocks
+			),
+			[
+				targetRootClientId,
+				targetBlockIndex,
+				hasUploadPermissions,
+				updateBlockAttributes,
+				insertBlocks,
+			]
 		),
-		onHTMLDrop: onHTMLDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			insertBlocks
+		onHTMLDrop: useCallback(
+			onHTMLDrop( targetRootClientId, targetBlockIndex, insertBlocks ),
+			[ targetRootClientId, targetBlockIndex, insertBlocks ]
 		),
 	};
 }
diff --git a/packages/components/src/drop-zone/index.js b/packages/components/src/drop-zone/index.js
@@ -13,7 +13,7 @@ import { upload, Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { DropZoneConsumer, Context } from './provider';
+import { Context } from './provider';
 
 export function useDropZone( {
 	element,
@@ -22,9 +22,9 @@ export function useDropZone( {
 	onDrop,
 	isDisabled,
 	withPosition,
-	__unstableIsRelative = false,
+	__unstableIsRelative: isRelative = false,
 } ) {
-	const { addDropZone, removeDropZone } = useContext( Context );
+	const dropZones = useContext( Context );
 	const [ state, setState ] = useState( {
 		isDraggingOverDocument: false,
 		isDraggingOverElement: false,
@@ -40,31 +40,26 @@ export function useDropZone( {
 				onHTMLDrop,
 				setState,
 				withPosition,
-				isRelative: __unstableIsRelative,
+				isRelative,
 			};
-			addDropZone( dropZone );
+			dropZones.add( dropZone );
 			return () => {
-				removeDropZone( dropZone );
+				dropZones.delete( dropZone );
 			};
 		}
-	}, [ isDisabled, onDrop, onFilesDrop, onHTMLDrop, withPosition ] );
+	}, [
+		isDisabled,
+		onDrop,
+		onFilesDrop,
+		onHTMLDrop,
+		withPosition,
+		isRelative,
+	] );
 
 	return state;
 }
 
-const DropZone = ( props ) => (
-	<DropZoneConsumer>
-		{ ( { addDropZone, removeDropZone } ) => (
-			<DropZoneComponent
-				addDropZone={ addDropZone }
-				removeDropZone={ removeDropZone }
-				{ ...props }
-			/>
-		) }
-	</DropZoneConsumer>
-);
-
-function DropZoneComponent( {
+export default function DropZoneComponent( {
 	className,
 	label,
 	onFilesDrop,
@@ -115,5 +110,3 @@ function DropZoneComponent( {
 		</div>
 	);
 }
-
-export default DropZone;