Rewrite as function component, decruftify, update tests

WordPress · Mar 16, 2022 · f38772b · f38772b
1 parent 4855823
commit f38772b
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 352 deletions.
diff --git a/packages/components/src/focal-point-picker/controls.js b/packages/components/src/focal-point-picker/controls.js
@@ -22,19 +22,19 @@ const TEXTCONTROL_MAX = 100;
 
 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,15 +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 = { ...coordinates };
+	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
@@ -16,11 +16,7 @@ import { useUpdateEffect } from '../utils/hooks';
 const { clearTimeout, setTimeout } =
 	typeof window !== 'undefined' ? window : {};
 
-export default function FocalPointPickerGrid( {
-	bounds = {},
-	value,
-	...props
-} ) {
+export default function FocalPointPickerGrid( { bounds, value, ...props } ) {
 	const animationProps = useRevealAnimation( value );
 	const style = {
 		width: bounds.width,