Drop zone: avoid media query on mount

WordPress · Apr 23, 2024 · baae06e · baae06e
1 parent fadd9e0
commit baae06e
Showing 1 changed file with 66 additions and 66 deletions.
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
@@ -25,6 +25,71 @@ import {
 import type { DropType, DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
+function DropIndicator( { label }: { label?: string } ) {
+	const disableMotion = useReducedMotion();
+	const backdrop = {
+		hidden: { opacity: 0 },
+		show: {
+			opacity: 1,
+			transition: {
+				type: 'tween',
+				duration: 0.2,
+				delay: 0,
+				delayChildren: 0.1,
+			},
+		},
+		exit: {
+			opacity: 0,
+			transition: {
+				duration: 0.2,
+				delayChildren: 0,
+			},
+		},
+	};
+
+	const foreground = {
+		hidden: { opacity: 0, scale: 0.9 },
+		show: {
+			opacity: 1,
+			scale: 1,
+			transition: {
+				duration: 0.1,
+			},
+		},
+		exit: { opacity: 0, scale: 0.9 },
+	};
+
+	const children = (
+		<motion.div
+			variants={ backdrop }
+			initial={ disableMotion ? 'show' : 'hidden' }
+			animate="show"
+			exit={ disableMotion ? 'show' : 'exit' }
+			className="components-drop-zone__content"
+			// Without this, when this div is shown,
+			// Safari calls a onDropZoneLeave causing a loop because of this bug
+			// https://bugs.webkit.org/show_bug.cgi?id=66547
+			style={ { pointerEvents: 'none' } }
+		>
+			<motion.div variants={ foreground }>
+				<Icon
+					icon={ upload }
+					className="components-drop-zone__content-icon"
+				/>
+				<span className="components-drop-zone__content-text">
+					{ label ? label : __( 'Drop files to upload' ) }
+				</span>
+			</motion.div>
+		</motion.div>
+	);
+
+	if ( disableMotion ) {
+		return children;
+	}
+
+	return <AnimatePresence>{ children }</AnimatePresence>;
+}
+
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
  *
@@ -116,67 +181,6 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const disableMotion = useReducedMotion();
-
-	let children;
-	const backdrop = {
-		hidden: { opacity: 0 },
-		show: {
-			opacity: 1,
-			transition: {
-				type: 'tween',
-				duration: 0.2,
-				delay: 0,
-				delayChildren: 0.1,
-			},
-		},
-		exit: {
-			opacity: 0,
-			transition: {
-				duration: 0.2,
-				delayChildren: 0,
-			},
-		},
-	};
-
-	const foreground = {
-		hidden: { opacity: 0, scale: 0.9 },
-		show: {
-			opacity: 1,
-			scale: 1,
-			transition: {
-				duration: 0.1,
-			},
-		},
-		exit: { opacity: 0, scale: 0.9 },
-	};
-
-	if ( isDraggingOverElement ) {
-		children = (
-			<motion.div
-				variants={ backdrop }
-				initial={ disableMotion ? 'show' : 'hidden' }
-				animate="show"
-				exit={ disableMotion ? 'show' : 'exit' }
-				className="components-drop-zone__content"
-				// Without this, when this div is shown,
-				// Safari calls a onDropZoneLeave causing a loop because of this bug
-				// https://bugs.webkit.org/show_bug.cgi?id=66547
-				style={ { pointerEvents: 'none' } }
-			>
-				<motion.div variants={ foreground }>
-					<Icon
-						icon={ upload }
-						className="components-drop-zone__content-icon"
-					/>
-					<span className="components-drop-zone__content-text">
-						{ label ? label : __( 'Drop files to upload' ) }
-					</span>
-				</motion.div>
-			</motion.div>
-		);
-	}
-
 	const classes = classnames( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
@@ -190,11 +194,7 @@ export function DropZoneComponent( {
 
 	return (
 		<div { ...restProps } ref={ ref } className={ classes }>
-			{ disableMotion ? (
-				children
-			) : (
-				<AnimatePresence>{ children }</AnimatePresence>
-			) }
+			{ isDraggingOverElement && <DropIndicator label={ label } /> }
 		</div>
 	);
 }