@elementor/editor-interactions 3.35.0-453 → 3.35.0-454

package/src/components/interactions-list.tsx

@@ -1,44 +1,52 @@
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Repeater } from '@elementor/editor-controls';
 import { InfoCircleFilledIcon, PlayerPlayIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import type { ElementInteractions, InteractionItemPropValue, InteractionItemValue } from '../types';
-import { buildAnimationIdString, buildDisplayLabel, createDefaultInteractionItem } from '../utils/prop-value-utils';
+import { buildDisplayLabel, createDefaultInteractionItem, extractString } from '../utils/prop-value-utils';
 import { InteractionDetails } from './interaction-details';
-
 export const MAX_NUMBER_OF_INTERACTIONS = 5;
 
 export type InteractionListProps = {
 	onSelectInteractions: ( interactions: ElementInteractions ) => void;
 	interactions: ElementInteractions;
-	onPlayInteraction: ( animationId: string ) => void;
+	onPlayInteraction: ( interactionId: string ) => void;
 	triggerCreateOnShowEmpty?: boolean;
 };
 
 export function InteractionsList( props: InteractionListProps ) {
 	const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
 
-	const [ interactionsState, setInteractionsState ] = useState< ElementInteractions >( interactions );
+	const hasInitializedRef = useRef( false );
+
+	const handleUpdateInteractions = useCallback(
+		( newInteractions: ElementInteractions ) => {
+			onSelectInteractions( newInteractions );
+		},
+		[ onSelectInteractions ]
+	);
 
 	useEffect( () => {
-		if ( JSON.stringify( interactions ) !== JSON.stringify( interactionsState ) ) {
-			onSelectInteractions( interactionsState );
+		if (
+			triggerCreateOnShowEmpty &&
+			! hasInitializedRef.current &&
+			( ! interactions.items || interactions.items?.length === 0 )
+		) {
+			hasInitializedRef.current = true;
+			const newState: ElementInteractions = {
+				version: 1,
+				items: [ createDefaultInteractionItem() ],
+			};
+			handleUpdateInteractions( newState );
 		}
-	}, [ interactions, interactionsState, onSelectInteractions ] );
+	}, [ triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions ] );
 
 	const isMaxNumberOfInteractionsReached = useMemo( () => {
-		return interactionsState.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
-	}, [ interactionsState.items ] );
-
-	if ( triggerCreateOnShowEmpty && ( ! interactionsState.items || interactionsState.items?.length === 0 ) ) {
-		setInteractionsState( {
-			version: 1,
-			items: [ createDefaultInteractionItem() ],
-		} );
-	}
+		return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
+	}, [ interactions.items?.length ] );
 
 	const infotipContent = isMaxNumberOfInteractionsReached ? (
 		<Alert color="secondary" icon={ <InfoCircleFilledIcon /> } size="small">
@@ -52,18 +60,38 @@ export function InteractionsList( props: InteractionListProps ) {
 		</Alert>
 	) : undefined;
 
+	const handleRepeaterChange = useCallback(
+		( newItems: ElementInteractions[ 'items' ] ) => {
+			handleUpdateInteractions( {
+				...interactions,
+				items: newItems,
+			} );
+		},
+		[ interactions, handleUpdateInteractions ]
+	);
+
+	const handleInteractionChange = useCallback(
+		( index: number, newInteractionValue: InteractionItemValue ) => {
+			const newItems = structuredClone( interactions.items );
+			newItems[ index ] = {
+				$$type: 'interaction-item',
+				value: newInteractionValue,
+			};
+			handleUpdateInteractions( {
+				...interactions,
+				items: newItems,
+			} );
+		},
+		[ interactions, handleUpdateInteractions ]
+	);
+
 	return (
 		<Repeater
 			openOnAdd
 			openItem={ triggerCreateOnShowEmpty ? 0 : undefined }
 			label={ __( 'Interactions', 'elementor' ) }
-			values={ interactionsState.items }
-			setValues={ ( newValue: ElementInteractions[ 'items' ] ) => {
-				setInteractionsState( {
-					...interactionsState,
-					items: newValue,
-				} );
-			} }
+			values={ interactions.items }
+			setValues={ handleRepeaterChange }
 			showDuplicate={ false }
 			showToggle={ false }
 			isSortable={ false }
@@ -78,13 +106,9 @@ export function InteractionsList( props: InteractionListProps ) {
 						key={ index }
 						interaction={ value.value }
 						onChange={ ( newInteractionValue: InteractionItemValue ) => {
-							const newItems = structuredClone( interactionsState.items );
-							newItems[ index ] = {
-								$$type: 'interaction-item',
-								value: newInteractionValue,
-							};
-							setInteractionsState( { ...interactionsState, items: newItems } );
+							handleInteractionChange( index, newInteractionValue );
 						} }
+						onPlayInteraction={ onPlayInteraction }
 					/>
 				),
 				actions: ( value: InteractionItemPropValue ) => (
@@ -92,7 +116,7 @@ export function InteractionsList( props: InteractionListProps ) {
 						<IconButton
 							aria-label={ __( 'Play interaction', 'elementor' ) }
 							size="tiny"
-							onClick={ () => onPlayInteraction( buildAnimationIdString( value.value ) ) }
+							onClick={ () => onPlayInteraction( extractString( value.value.interaction_id ) ) }
 						>
 							<PlayerPlayIcon fontSize="tiny" />
 						</IconButton>

package/src/contexts/interactions-context.tsx

@@ -10,7 +10,7 @@ import {
 type InteractionsContextValue = {
 	interactions: ElementInteractions;
 	setInteractions: ( value: ElementInteractions | undefined ) => void;
-	playInteractions: ( animationId: string ) => void;
+	playInteractions: ( interactionId: string ) => void;
 };
 
 const InteractionsContext = createContext< InteractionsContextValue | null >( null );
@@ -31,14 +31,16 @@ export const InteractionsProvider = ( { children, elementId }: { children: React
 		( rawInteractions as unknown as ElementInteractions ) ?? DEFAULT_INTERACTIONS;
 
 	const setInteractions = ( value: ElementInteractions | undefined ) => {
+		const normalizedValue = value && value.items?.length === 0 ? undefined : value;
+
 		updateElementInteractions( {
 			elementId,
-			interactions: value as unknown as ElementInteractions,
+			interactions: normalizedValue,
 		} );
 	};
 
-	const playInteractions = ( animationId: string ) => {
-		playElementInteractions( elementId, animationId );
+	const playInteractions = ( interactionId: string ) => {
+		playElementInteractions( elementId, interactionId );
 	};
 
 	const contextValue: InteractionsContextValue = {

package/src/hooks/on-duplicate.ts

@@ -2,6 +2,8 @@ import { type ElementID, getAllDescendants, getContainer, type V1Element } from
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
 import type { ElementInteractions } from '../types';
+import { createString } from '../utils/prop-value-utils';
+import { generateTempInteractionId } from '../utils/temp-id-utils';
 
 export function initCleanInteractionIdsOnDuplicate() {
 	registerDataHook( 'after', 'document/elements/duplicate', ( _args, result: V1Element | V1Element[] ) => {
@@ -41,8 +43,8 @@ function cleanInteractionIds( elementId: ElementID ) {
 	const updatedInteractions = structuredClone( interactions ) as ElementInteractions;
 
 	updatedInteractions?.items?.forEach( ( interaction ) => {
-		if ( interaction.$$type === 'interaction-item' && interaction.value?.interaction_id ) {
-			delete interaction.value.interaction_id;
+		if ( interaction.$$type === 'interaction-item' && interaction.value ) {
+			interaction.value.interaction_id = createString( generateTempInteractionId() );
 		}
 	} );
 

package/src/utils/prop-value-utils.ts

@@ -9,6 +9,7 @@ import type {
 	StringPropValue,
 	TimingConfigPropValue,
 } from '../types';
+import { generateTempInteractionId } from './temp-id-utils';
 
 export const createString = ( value: string ): StringPropValue => ( {
 	$$type: 'string',
@@ -104,6 +105,7 @@ export const createDefaultInteractionItem = (): InteractionItemPropValue => {
 		duration: 300,
 		delay: 0,
 		replay: false,
+		interactionId: generateTempInteractionId(),
 	} );
 };
 

package/src/utils/temp-id-utils.ts

@@ -0,0 +1,10 @@
+const TEMP_ID_PREFIX = 'temp-';
+const TEMP_ID_REGEX = /^temp-[a-z0-9]+$/i;
+
+export function generateTempInteractionId(): string {
+	return `${ TEMP_ID_PREFIX }${ Math.random().toString( 36 ).substring( 2, 11 ) }`;
+}
+
+export function isTempId( id: string | undefined ): boolean {
+	return !! id && TEMP_ID_REGEX.test( id );
+}