Clean up ToggleGroupControl and update utility from latest trunk version

WordPress · Oct 4, 2024 · 84fda4b · 84fda4b
1 parent 897109f
commit 84fda4b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 109 deletions.
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
@@ -76,7 +76,7 @@ export const TabList = forwardRef<
 	// Size, position, and animate the indicator.
 	useAnimatedOffsetRect( parent, selectedRect, {
 		prefix: 'selected',
-		attribute: 'indicator-animated',
+		dataAttribute: 'indicator-animated',
 		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
 	} );
 

diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -6,7 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,104 +20,9 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
-import type { ElementOffsetRect } from '../../utils/element-rect';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
-import { useOnValueUpdate } from '../../utils/hooks/use-on-value-update';
-import { useEvent, useMergeRefs } from '@wordpress/compose';
-
-/**
- * A utility used to animate something in a container component based on the "offset
- * rect" (position relative to the container and size) of a subelement. For example,
- * this is useful to render an indicator for the selected option of a component, and
- * to animate it when the selected option changes.
- *
- * Takes in a container element and the up-to-date "offset rect" of the target
- * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
- *
- * - Adds CSS variables with rect information to the container, so that the indicator
- *   can be rendered and animated with them. These are kept up-to-date, enabling CSS
- *   transitions on change.
- * - Sets an attribute (`data-subelement-animated` by default) when the tracked
- *   element changes, so that the target (e.g. the indicator) can be animated to its
- *   new size and position.
- * - Removes the attribute when the animation is done.
- *
- * The need for the attribute is due to the fact that the rect might update in
- * situations other than when the tracked element changes, e.g. the tracked element
- * might be resized. In such cases, there is no need to animate the indicator, and
- * the change in size or position of the indicator needs to be reflected immediately.
- */
-function useAnimatedOffsetRect(
-	/**
-	 * The container element.
-	 */
-	container: HTMLElement | undefined,
-	/**
-	 * The rect of the tracked element.
-	 */
-	rect: ElementOffsetRect,
-	{
-		prefix = 'subelement',
-		dataAttribute = `${ prefix }-animated`,
-		transitionEndFilter = () => true,
-	}: {
-		/**
-		 * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
-		 * CSS variables will be `--selected-top`, `--selected-left`, etc.
-		 * @default 'subelement'
-		 */
-		prefix?: string;
-		/**
-		 * The name of the data attribute used to indicate that the animation is in
-		 * progress. The `data-` prefix is added automatically.
-		 *
-		 * For example, if `dataAttribute` is `indicator-animated`, the attribute will
-		 * be `data-indicator-animated`.
-		 * @default `${ prefix }-animated`
-		 */
-		dataAttribute?: string;
-		/**
-		 * A function that is called with the transition event and returns a boolean
-		 * indicating whether the animation should be stopped. The default is a function
-		 * that always returns `true`.
-		 *
-		 * For example, if the animated element is the `::before` pseudo-element, the
-		 * function can be written as `( event ) => event.pseudoElement === '::before'`.
-		 * @default () => true
-		 */
-		transitionEndFilter?: ( event: TransitionEvent ) => boolean;
-	} = {}
-) {
-	const setProperties = useEvent( () => {
-		( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
-			( property ) =>
-				property !== 'element' &&
-				container?.style.setProperty(
-					`--${ prefix }-${ property }`,
-					String( rect[ property ] )
-				)
-		);
-	} );
-	useLayoutEffect( () => {
-		setProperties();
-	}, [ rect, setProperties ] );
-	useOnValueUpdate( rect.element, ( { previousValue } ) => {
-		// Only enable the animation when moving from one element to another.
-		if ( rect.element && previousValue ) {
-			container?.setAttribute( `data-${ dataAttribute }`, '' );
-		}
-	} );
-	useLayoutEffect( () => {
-		function onTransitionEnd( event: TransitionEvent ) {
-			if ( transitionEndFilter( event ) ) {
-				container?.removeAttribute( `data-${ dataAttribute }` );
-			}
-		}
-		container?.addEventListener( 'transitionend', onTransitionEnd );
-		return () =>
-			container?.removeEventListener( 'transitionend', onTransitionEnd );
-	}, [ dataAttribute, container, transitionEndFilter ] );
-}
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,

diff --git a/packages/components/src/utils/hooks/use-animated-offset-rect.ts b/packages/components/src/utils/hooks/use-animated-offset-rect.ts
@@ -44,8 +44,8 @@ export function useAnimatedOffsetRect(
 	rect: ElementOffsetRect,
 	{
 		prefix = 'subelement',
-		attribute = `${ prefix }-animated`,
-		transitionEndFilter,
+		dataAttribute = `${ prefix }-animated`,
+		transitionEndFilter = () => true,
 	}: {
 		/**
 		 * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
@@ -55,17 +55,21 @@ export function useAnimatedOffsetRect(
 		prefix?: string;
 		/**
 		 * The name of the data attribute used to indicate that the animation is in
-		 * progress.
+		 * progress. The `data-` prefix is added automatically.
+		 *
+		 * For example, if `dataAttribute` is `indicator-animated`, the attribute will
+		 * be `data-indicator-animated`.
 		 * @default `${ prefix }-animated`
 		 */
-		attribute?: string;
+		dataAttribute?: string;
 		/**
 		 * A function that is called with the transition event and returns a boolean
-		 * indicating whether the animation should be stopped. The default is to
-		 * always stop the animation.
+		 * indicating whether the animation should be stopped. The default is a function
+		 * that always returns `true`.
 		 *
 		 * For example, if the animated element is the `::before` pseudo-element, the
 		 * function can be written as `( event ) => event.pseudoElement === '::before'`.
+		 * @default () => true
 		 */
 		transitionEndFilter?: ( event: TransitionEvent ) => boolean;
 	} = {}
@@ -86,18 +90,18 @@ export function useAnimatedOffsetRect(
 	useOnValueUpdate( rect.element, ( { previousValue } ) => {
 		// Only enable the animation when moving from one element to another.
 		if ( rect.element && previousValue ) {
-			container?.setAttribute( `data-${ attribute }`, '' );
+			container?.setAttribute( `data-${ dataAttribute }`, '' );
 		}
 	} );
 	useLayoutEffect( () => {
 		function onTransitionEnd( event: TransitionEvent ) {
-			if ( transitionEndFilter?.( event ) ?? true ) {
-				container?.removeAttribute( `data-${ attribute }` );
+			if ( transitionEndFilter( event ) ) {
+				container?.removeAttribute( `data-${ dataAttribute }` );
 			}
 		}
 		container?.addEventListener( 'transitionend', onTransitionEnd );
 		return () =>
 			container?.removeEventListener( 'transitionend', onTransitionEnd );
-	}, [ attribute, container, transitionEndFilter ] );
+	}, [ dataAttribute, container, transitionEndFilter ] );
 }
 /* eslint-enable jsdoc/require-param */