Refactor FocalPointPicker to function component (#39168)

* pregame cleanup * Rewrite as function component, decruftify, update tests * Keep a ref of point value to obviate effect hook * Simplify media placeholder to obviate layout effect hook * Fix reset on blur * Update bounds unconditionally from single-run layout effect * Update example code in README * Simplify state handling * Control `Grid` visibility from component root Co-authored-by: Marco Ciampini <[email protected]> * Add changelog entry Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Aug 25, 2022 · 9d72739 · 9d72739
1 parent 8d98737
commit 9d72739
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 405 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Refactor `FocalPointPicker` to function component ([#39168](https://github.com/WordPress/gutenberg/pull/39168)).
+
 ## 20.0.0 (2022-08-24)
 
 ### Breaking Changes

diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
@@ -18,10 +18,6 @@ const Example = () => {
 	} );
 
 	const url = '/path/to/image';
-	const dimensions = {
-		width: 400,
-		height: 100,
-	};
 
 	/* Example function to render the CSS styles based on Focal Point Picker value */
 	const style = {
@@ -33,9 +29,10 @@ const Example = () => {
 		<>
 			<FocalPointPicker
 				url={ url }
-				dimensions={ dimensions }
 				value={ focalPoint }
-				onChange={ ( focalPoint ) => setFocalPoint( { focalPoint } ) }
+				onDragStart={ setFocalPoint }
+				onDrag={ setFocalPoint }
+				onChange={ setFocalPoint }
 			/>
 			<div style={ style } />
 		</>

diff --git a/packages/components/src/focal-point-picker/controls.js b/packages/components/src/focal-point-picker/controls.js
@@ -18,19 +18,19 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	onChange = noop,
-	percentages = {
+	point = {
 		x: 0.5,
 		y: 0.5,
 	},
 } ) {
-	const valueX = fractionToPercentage( percentages.x );
-	const valueY = fractionToPercentage( percentages.y );
+	const valueX = fractionToPercentage( point.x );
+	const valueY = fractionToPercentage( point.y );
 
 	const handleChange = ( value, axis ) => {
 		const num = parseInt( value, 10 );
 
 		if ( ! isNaN( num ) ) {
-			onChange( { ...percentages, [ axis ]: num / 100 } );
+			onChange( { ...point, [ axis ]: num / 100 } );
 		}
 	};
 

diff --git a/packages/components/src/focal-point-picker/focal-point.js b/packages/components/src/focal-point-picker/focal-point.js
@@ -13,18 +13,12 @@ import {
  */
 import classnames from 'classnames';
 
-export default function FocalPoint( {
-	coordinates = { left: '50%', top: '50%' },
-	...props
-} ) {
+export default function FocalPoint( { left = '50%', top = '50%', ...props } ) {
 	const classes = classnames(
 		'components-focal-point-picker__icon_container'
 	);
 
-	const style = {
-		left: coordinates.left,
-		top: coordinates.top,
-	};
+	const style = { left, top };
 
 	return (
 		<FocalPointWrapper { ...props } className={ classes } style={ style }>

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,25 +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%' } } />
@@ -38,25 +24,3 @@ export default function FocalPointPickerGrid( {
 		</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,
-	};
-}