Control Grid visibility from component root

Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Aug 25, 2022 · 4f99530 · 4f99530
1 parent 5634276
commit 4f99530
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 44 deletions.
diff --git a/packages/components/src/focal-point-picker/grid.js b/packages/components/src/focal-point-picker/grid.js
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -11,21 +6,16 @@ import {
 	GridLineX,
 	GridLineY,
 } from './styles/focal-point-picker-style';
-import { useUpdateEffect } from '../utils/hooks';
-
-export default function FocalPointPickerGrid( { bounds, value, ...props } ) {
-	const animationProps = useRevealAnimation( value );
-	const style = {
-		width: bounds.width,
-		height: bounds.height,
-	};
 
+export default function FocalPointPickerGrid( { bounds, ...props } ) {
 	return (
 		<GridView
 			{ ...props }
-			{ ...animationProps }
 			className="components-focal-point-picker__grid"
-			style={ style }
+			style={ {
+				width: bounds.width,
+				height: bounds.height,
+			} }
 		>
 			<GridLineX style={ { top: '33%' } } />
 			<GridLineX style={ { top: '66%' } } />
@@ -34,25 +24,3 @@ export default function FocalPointPickerGrid( { bounds, value, ...props } ) {
 		</GridView>
 	);
 }
-
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-function useRevealAnimation( value ) {
-	const [ isActive, setIsActive ] = useState( false );
-
-	useUpdateEffect( () => {
-		setIsActive( true );
-		const timeout = window.setTimeout( () => {
-			setIsActive( false );
-		}, 600 );
-
-		return () => window.clearTimeout( timeout );
-	}, [ value ] );
-
-	return {
-		isActive,
-	};
-}
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
@@ -27,6 +27,9 @@ import {
 	MediaContainer,
 } from './styles/focal-point-picker-style';
 import { INITIAL_BOUNDS } from './utils';
+import { useUpdateEffect } from '../utils/hooks';
+
+const GRID_OVERLAY_TIMEOUT = 600;
 
 export default function FocalPointPicker( {
 	autoPlay = true,
@@ -45,6 +48,7 @@ export default function FocalPointPicker( {
 	},
 } ) {
 	const [ point, setPoint ] = useState( valueProp );
+	const [ showGridOverlay, setShowGridOverlay ] = useState( false );
 
 	const { startDrag, endDrag, isDragging } = useDragging( {
 		onDragStart: ( event ) => {
@@ -146,6 +150,15 @@ export default function FocalPointPicker( {
 	const instanceId = useInstanceId( FocalPointPicker );
 	const id = `inspector-focal-point-picker-control-${ instanceId }`;
 
+	useUpdateEffect( () => {
+		setShowGridOverlay( true );
+		const timeout = window.setTimeout( () => {
+			setShowGridOverlay( false );
+		}, GRID_OVERLAY_TIMEOUT );
+
+		return () => window.clearTimeout( timeout );
+	}, [ x, y ] );
+
 	return (
 		<BaseControl
 			label={ label }
@@ -165,7 +178,7 @@ export default function FocalPointPicker( {
 					role="button"
 					tabIndex="-1"
 				>
-					<Grid bounds={ bounds } value={ `${ x }${ y }` } />
+					<Grid bounds={ bounds } showOverlay={ showGridOverlay } />
 					<Media
 						alt={ __( 'Media preview' ) }
 						autoPlay={ autoPlay }

diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -61,7 +61,6 @@ export const ControlWrapper = styled( Flex )`
 
 export const GridView = styled.div`
 	left: 50%;
-	opacity: 0;
 	overflow: hidden;
 	pointer-events: none;
 	position: absolute;
@@ -70,11 +69,7 @@ export const GridView = styled.div`
 	transition: opacity 120ms linear;
 	z-index: 1;
 
-	${ ( { isActive } ) =>
-		isActive &&
-		`
-		opacity: 1;
-	` }
+	opacity: ${ ( { showOverlay } ) => ( showOverlay ? 1 : 0 ) };
 `;
 
 export const GridLine = styled.div`