@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/src/focal-point-picker/index.js

@@ -7,9 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	__experimentalUseDragging as useDragging,
+	useInstanceId,
+	useIsomorphicLayoutEffect,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,317 +26,177 @@ import {
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
-import { roundClamp } from '../utils/math';
 import { INITIAL_BOUNDS } from './utils';
-
-export class FocalPointPicker extends Component {
-	constructor( props ) {
-		super( ...arguments );
-
-		this.state = {
-			isDragging: false,
-			bounds: INITIAL_BOUNDS,
-			percentages: props.value,
-		};
-
-		this.containerRef = createRef();
-		this.mediaRef = createRef();
-
-		this.onMouseDown = this.startDrag.bind( this );
-		this.onMouseUp = this.stopDrag.bind( this );
-		this.onKeyDown = this.onKeyDown.bind( this );
-		this.onMouseMove = this.doDrag.bind( this );
-		this.ifDraggingStop = () => {
-			if ( this.state.isDragging ) {
-				this.stopDrag();
-			}
-		};
-		this.onChangeAtControls = ( value ) => {
-			this.updateValue( value, () => {
-				this.props.onChange( this.state.percentages );
-			} );
-		};
-
-		this.updateBounds = this.updateBounds.bind( this );
-		this.updateValue = this.updateValue.bind( this );
-	}
-	componentDidMount() {
-		const { defaultView } = this.containerRef.current.ownerDocument;
-		defaultView.addEventListener( 'resize', this.updateBounds );
-
-		/*
-		 * Set initial bound values.
-		 *
-		 * This is necessary for Safari:
-		 * https://github.com/WordPress/gutenberg/issues/25814
-		 */
-		this.updateBounds();
-	}
-	componentDidUpdate( prevProps ) {
-		if ( prevProps.url !== this.props.url ) {
-			this.ifDraggingStop();
-		}
-		/*
-		 * Handles cases where the incoming value changes.
-		 * An example is the values resetting based on an UNDO action.
-		 */
-		const {
-			isDragging,
-			percentages: { x, y },
-		} = this.state;
-		const { value } = this.props;
-		if ( ! isDragging && ( value.x !== x || value.y !== y ) ) {
-			this.setState( { percentages: this.props.value } );
-		}
-	}
-	componentWillUnmount() {
-		const { defaultView } = this.containerRef.current.ownerDocument;
-		defaultView.removeEventListener( 'resize', this.updateBounds );
-		this.ifDraggingStop();
-	}
-	calculateBounds() {
-		const bounds = INITIAL_BOUNDS;
-
-		if ( ! this.mediaRef.current ) {
-			return bounds;
-		}
-
-		// Prevent division by zero when updateBounds runs in componentDidMount
-		if (
-			this.mediaRef.current.clientWidth === 0 ||
-			this.mediaRef.current.clientHeight === 0
-		) {
-			return bounds;
-		}
-
-		const dimensions = {
-			width: this.mediaRef.current.clientWidth,
-			height: this.mediaRef.current.clientHeight,
-		};
-
-		const pickerDimensions = this.pickerDimensions();
-
-		const widthRatio = pickerDimensions.width / dimensions.width;
-		const heightRatio = pickerDimensions.height / dimensions.height;
-
-		if ( heightRatio >= widthRatio ) {
-			bounds.width = bounds.right = pickerDimensions.width;
-			bounds.height = dimensions.height * widthRatio;
-			bounds.top = ( pickerDimensions.height - bounds.height ) / 2;
-			bounds.bottom = bounds.top + bounds.height;
-		} else {
-			bounds.height = bounds.bottom = pickerDimensions.height;
-			bounds.width = dimensions.width * heightRatio;
-			bounds.left = ( pickerDimensions.width - bounds.width ) / 2;
-			bounds.right = bounds.left + bounds.width;
-		}
-		return bounds;
-	}
-	updateValue( nextValue = {}, callback ) {
-		const resolvedValue =
-			this.props.resolvePoint?.( nextValue ) ?? nextValue;
-
-		const { x, y } = resolvedValue;
-
-		const nextPercentage = {
-			x: parseFloat( x ).toFixed( 2 ),
-			y: parseFloat( y ).toFixed( 2 ),
-		};
-
-		this.setState( { percentages: nextPercentage }, callback );
-	}
-	updateBounds() {
-		this.setState( {
-			bounds: this.calculateBounds(),
-		} );
-	}
-	startDrag( event ) {
-		event.persist();
-		this.containerRef.current.focus();
-		this.setState( { isDragging: true } );
-		const { ownerDocument } = this.containerRef.current;
-		ownerDocument.addEventListener( 'mouseup', this.onMouseUp );
-		ownerDocument.addEventListener( 'mousemove', this.onMouseMove );
-		const value = this.getValueFromPoint(
-			{ x: event.pageX, y: event.pageY },
-			event.shiftKey
-		);
-		this.updateValue( value );
-		this.props.onDragStart?.( value, event );
-	}
-	stopDrag( event ) {
-		const { ownerDocument } = this.containerRef.current;
-		ownerDocument.removeEventListener( 'mouseup', this.onMouseUp );
-		ownerDocument.removeEventListener( 'mousemove', this.onMouseMove );
-		this.setState( { isDragging: false }, () => {
-			this.props.onChange( this.state.percentages );
-		} );
-		this.props.onDragEnd?.( event );
-	}
-	onKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
-		if ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;
-
-		event.preventDefault();
-
-		const next = { ...this.state.percentages };
-		const step = shiftKey ? 0.1 : 0.01;
-		const delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;
-		const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
-		const value = parseFloat( next[ axis ] ) + delta;
-
-		next[ axis ] = roundClamp( value, 0, 1, step );
-
-		this.updateValue( next, () => {
-			this.props.onChange( this.state.percentages );
-		} );
-	}
-	doDrag( event ) {
-		// Prevents text-selection when dragging.
-		event.preventDefault();
-		const value = this.getValueFromPoint(
-			{ x: event.pageX, y: event.pageY },
-			event.shiftKey
-		);
-		this.updateValue( value );
-		this.props.onDrag?.( value, event );
-	}
-	getValueFromPoint( point, byTenths ) {
-		const { bounds } = this.state;
-
-		const pickerDimensions = this.pickerDimensions();
-		const relativePoint = {
-			left: point.x - pickerDimensions.left,
-			top: point.y - pickerDimensions.top,
-		};
-
-		const left = Math.max(
-			bounds.left,
-			Math.min( relativePoint.left, bounds.right )
-		);
-		const top = Math.max(
-			bounds.top,
-			Math.min( relativePoint.top, bounds.bottom )
+import { useUpdateEffect } from '../utils/hooks';
+
+const GRID_OVERLAY_TIMEOUT = 600;
+
+export default function FocalPointPicker( {
+	autoPlay = true,
+	className,
+	help,
+	label,
+	onChange,
+	onDrag,
+	onDragEnd,
+	onDragStart,
+	resolvePoint,
+	url,
+	value: valueProp = {
+		x: 0.5,
+		y: 0.5,
+	},
+} ) {
+	const [ point, setPoint ] = useState( valueProp );
+	const [ showGridOverlay, setShowGridOverlay ] = useState( false );
+
+	const { startDrag, endDrag, isDragging } = useDragging( {
+		onDragStart: ( event ) => {
+			dragAreaRef.current.focus();
+			const value = getValueWithinDragArea( event );
+			onDragStart?.( value, event );
+			setPoint( value );
+		},
+		onDragMove: ( event ) => {
+			// Prevents text-selection when dragging.
+			event.preventDefault();
+			const value = getValueWithinDragArea( event );
+			onDrag?.( value, event );
+			setPoint( value );
+		},
+		onDragEnd: ( event ) => {
+			onDragEnd?.( event );
+			onChange?.( point );
+		},
+	} );
+
+	// Uses the internal point while dragging or else the value from props.
+	const { x, y } = isDragging ? point : valueProp;
+
+	const dragAreaRef = useRef();
+	const [ bounds, setBounds ] = useState( INITIAL_BOUNDS );
+	const refUpdateBounds = useRef( () => {
+		const { clientWidth: width, clientHeight: height } =
+			dragAreaRef.current;
+		// Falls back to initial bounds if the ref has no size. Since styles
+		// give the drag area dimensions even when the media has not loaded
+		// this should only happen in unit tests (jsdom).
+		setBounds(
+			width > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }
 		);
-
-		let nextX =
-			( left - bounds.left ) /
-			( pickerDimensions.width - bounds.left * 2 );
-		let nextY =
-			( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );
-
-		// Enables holding shift to jump values by 10%
-		const step = byTenths ? 0.1 : 0.01;
-
-		nextX = roundClamp( nextX, 0, 1, step );
-		nextY = roundClamp( nextY, 0, 1, step );
-
-		return { x: nextX, y: nextY };
-	}
-	pickerDimensions() {
-		const containerNode = this.containerRef.current;
-
-		if ( ! containerNode ) {
-			return {
-				width: 0,
-				height: 0,
-				left: 0,
-				top: 0,
-			};
-		}
-
-		const { clientHeight, clientWidth } = containerNode;
-		const { top, left } = containerNode.getBoundingClientRect();
-
-		return {
-			width: clientWidth,
-			height: clientHeight,
-			top: top + document.body.scrollTop,
-			left,
-		};
-	}
-	iconCoordinates() {
-		const {
-			bounds,
-			percentages: { x, y },
-		} = this.state;
-
-		if ( bounds.left === undefined || bounds.top === undefined ) {
-			return {
-				left: '50%',
-				top: '50%',
-			};
+	} );
+
+	useEffect( () => {
+		const updateBounds = refUpdateBounds.current;
+		const { defaultView } = dragAreaRef.current.ownerDocument;
+		defaultView.addEventListener( 'resize', updateBounds );
+		return () => defaultView.removeEventListener( 'resize', updateBounds );
+	}, [] );
+
+	// Updates the bounds to cover cases of unspecified media or load failures.
+	useIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );
+
+	const getValueWithinDragArea = ( { clientX, clientY, shiftKey } ) => {
+		const { top, left } = dragAreaRef.current.getBoundingClientRect();
+		let nextX = ( clientX - left ) / bounds.width;
+		let nextY = ( clientY - top ) / bounds.height;
+		// Enables holding shift to jump values by 10%.
+		if ( shiftKey ) {
+			nextX = Math.round( nextX / 0.1 ) * 0.1;
+			nextY = Math.round( nextY / 0.1 ) * 0.1;
 		}
+		return getFinalValue( { x: nextX, y: nextY } );
+	};
 
-		const { width, height } = this.pickerDimensions();
+	const getFinalValue = ( value ) => {
+		const resolvedValue = resolvePoint?.( value ) ?? value;
+		resolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );
+		resolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );
 		return {
-			left: x * ( width - bounds.left * 2 ) + bounds.left,
-			top: y * ( height - bounds.top * 2 ) + bounds.top,
+			x: parseFloat( resolvedValue.x ).toFixed( 2 ),
+			y: parseFloat( resolvedValue.y ).toFixed( 2 ),
 		};
-	}
-	render() {
-		const { autoPlay, className, help, instanceId, label, url } =
-			this.props;
-		const { bounds, isDragging, percentages } = this.state;
-		const iconCoordinates = this.iconCoordinates();
-
-		const classes = classnames(
-			'components-focal-point-picker-control',
-			className
-		);
+	};
 
-		const id = `inspector-focal-point-picker-control-${ instanceId }`;
+	const arrowKeyStep = ( event ) => {
+		const { code, shiftKey } = event;
+		if (
+			! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(
+				code
+			)
+		)
+			return;
 
-		return (
-			<BaseControl
-				label={ label }
-				id={ id }
-				help={ help }
-				className={ classes }
-			>
-				<MediaWrapper className="components-focal-point-picker-wrapper">
-					<MediaContainer
-						className="components-focal-point-picker"
-						onKeyDown={ this.onKeyDown }
-						onMouseDown={ this.onMouseDown }
-						onBlur={ this.ifDraggingStop }
-						ref={ this.containerRef }
-						role="button"
-						tabIndex="-1"
-					>
-						<Grid
-							bounds={ bounds }
-							value={ percentages.x + percentages.y }
-						/>
-						<Media
-							alt={ __( 'Media preview' ) }
-							autoPlay={ autoPlay }
-							mediaRef={ this.mediaRef }
-							onLoad={ this.updateBounds }
-							src={ url }
-						/>
-						<FocalPoint
-							coordinates={ iconCoordinates }
-							isDragging={ isDragging }
-						/>
-					</MediaContainer>
-				</MediaWrapper>
-				<Controls
-					percentages={ percentages }
-					onChange={ this.onChangeAtControls }
-				/>
-			</BaseControl>
-		);
-	}
+		event.preventDefault();
+		const value = { x, y };
+		const step = shiftKey ? 0.1 : 0.01;
+		const delta =
+			code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
+		const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
+		value[ axis ] = parseFloat( value[ axis ] ) + delta;
+		onChange?.( getFinalValue( value ) );
+	};
+
+	const focalPointPosition = {
+		left: x * bounds.width,
+		top: y * bounds.height,
+	};
+
+	const classes = classnames(
+		'components-focal-point-picker-control',
+		className
+	);
+
+	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 }
+			id={ id }
+			help={ help }
+			className={ classes }
+		>
+			<MediaWrapper className="components-focal-point-picker-wrapper">
+				<MediaContainer
+					className="components-focal-point-picker"
+					onKeyDown={ arrowKeyStep }
+					onMouseDown={ startDrag }
+					onBlur={ () => {
+						if ( isDragging ) endDrag();
+					} }
+					ref={ dragAreaRef }
+					role="button"
+					tabIndex="-1"
+				>
+					<Grid bounds={ bounds } showOverlay={ showGridOverlay } />
+					<Media
+						alt={ __( 'Media preview' ) }
+						autoPlay={ autoPlay }
+						onLoad={ refUpdateBounds.current }
+						src={ url }
+					/>
+					<FocalPoint
+						{ ...focalPointPosition }
+						isDragging={ isDragging }
+					/>
+				</MediaContainer>
+			</MediaWrapper>
+			<Controls
+				point={ { x, y } }
+				onChange={ ( value ) => {
+					onChange?.( getFinalValue( value ) );
+				} }
+			/>
+		</BaseControl>
+	);
 }
-
-FocalPointPicker.defaultProps = {
-	autoPlay: true,
-	value: {
-		x: 0.5,
-		y: 0.5,
-	},
-	url: null,
-};
-
-export default withInstanceId( FocalPointPicker );

package/src/focal-point-picker/media.js

@@ -1,21 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useLayoutEffect } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import { MediaPlaceholder } from './styles/focal-point-picker-style';
 import { isVideoType } from './utils';
 
-const noop = () => {};
-
 export default function Media( {
 	alt,
 	autoPlay,
 	src,
-	onLoad = noop,
+	onLoad,
 	mediaRef,
 	// Exposing muted prop for test rendering purposes
 	// https://github.com/testing-library/react-testing-library/issues/470
@@ -24,10 +17,10 @@ export default function Media( {
 } ) {
 	if ( ! src ) {
 		return (
-			<MediaPlaceholderElement
+			<MediaPlaceholder
 				className="components-focal-point-picker__media components-focal-point-picker__media--placeholder"
-				onLoad={ onLoad }
-				mediaRef={ mediaRef }
+				ref={ mediaRef }
+				{ ...props }
 			/>
 		);
 	}
@@ -56,20 +49,3 @@ export default function Media( {
 		/>
 	);
 }
-
-function MediaPlaceholderElement( { mediaRef, onLoad = noop, ...props } ) {
-	const onLoadRef = useRef( onLoad );
-
-	/**
-	 * This async callback mimics the onLoad (img) / onLoadedData (video) callback
-	 * for media elements. It is used in the main <FocalPointPicker /> component
-	 * to calculate the dimensions + boundaries for positioning.
-	 */
-	useLayoutEffect( () => {
-		window.requestAnimationFrame( () => {
-			onLoadRef.current();
-		} );
-	}, [] );
-
-	return <MediaPlaceholder ref={ mediaRef } { ...props } />;
-}

package/src/focal-point-picker/styles/focal-point-picker-style.js

@@ -9,6 +9,7 @@ import styled from '@emotion/styled';
 import { Flex } from '../../flex';
 import BaseUnitControl from '../../unit-control';
 import { COLORS } from '../../utils';
+import { INITIAL_BOUNDS } from '../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
@@ -42,9 +43,10 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.lightGray[ 300 ] };
-	height: 170px;
+	box-sizing: border-box;
+	height: ${ INITIAL_BOUNDS.height }px;
 	max-width: 280px;
-	min-width: 200px;
+	min-width: ${ INITIAL_BOUNDS.width }px;
 	width: 100%;
 `;
 
@@ -59,7 +61,6 @@ export const ControlWrapper = styled( Flex )`
 
 export const GridView = styled.div`
 	left: 50%;
-	opacity: 0;
 	overflow: hidden;
 	pointer-events: none;
 	position: absolute;
@@ -68,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`

package/src/focal-point-picker/styles/focal-point-style.js

@@ -42,6 +42,5 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ COLORS.blue.wordpress[ 700 ] };
 	fill: ${ COLORS.ui.theme };
 `;