@elementor/editor-interactions 4.0.0-498 → 4.0.0-500

package/src/components/interactions-list.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createContext, useCallback, useContext, 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';
@@ -17,6 +17,13 @@ export type InteractionListProps = {
 	triggerCreateOnShowEmpty?: boolean;
 };
 
+type InteractionItemContextValue = {
+	onInteractionChange: ( index: number, newInteractionValue: InteractionItemValue ) => void;
+	onPlayInteraction: ( interactionId: string ) => void;
+};
+
+const InteractionItemContext = createContext< InteractionItemContextValue | null >( null );
+
 export function InteractionsList( props: InteractionListProps ) {
 	const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
 
@@ -85,44 +92,72 @@ export function InteractionsList( props: InteractionListProps ) {
 		[ interactions, handleUpdateInteractions ]
 	);
 
+	const contextValue = useMemo(
+		() => ( {
+			onInteractionChange: handleInteractionChange,
+			onPlayInteraction,
+		} ),
+		[ handleInteractionChange, onPlayInteraction ]
+	);
+
 	return (
-		<Repeater
-			openOnAdd
-			openItem={ triggerCreateOnShowEmpty ? 0 : undefined }
-			label={ __( 'Interactions', 'elementor' ) }
-			values={ interactions.items }
-			setValues={ handleRepeaterChange }
-			showDuplicate={ false }
-			showToggle={ false }
-			isSortable={ false }
-			disableAddItemButton={ isMaxNumberOfInteractionsReached }
-			addButtonInfotipContent={ infotipContent }
-			itemSettings={ {
-				initialValues: createDefaultInteractionItem(),
-				Label: ( { value }: { value: InteractionItemPropValue } ) => buildDisplayLabel( value.value ),
-				Icon: () => null,
-				Content: ( { index, value }: { index: number; value: InteractionItemPropValue } ) => (
-					<InteractionDetails
-						key={ index }
-						interaction={ value.value }
-						onChange={ ( newInteractionValue: InteractionItemValue ) => {
-							handleInteractionChange( index, newInteractionValue );
-						} }
-						onPlayInteraction={ onPlayInteraction }
-					/>
-				),
-				actions: ( value: InteractionItemPropValue ) => (
-					<Tooltip key="preview" placement="top" title={ __( 'Preview', 'elementor' ) }>
-						<IconButton
-							aria-label={ __( 'Play interaction', 'elementor' ) }
-							size="tiny"
-							onClick={ () => onPlayInteraction( extractString( value.value.interaction_id ) ) }
-						>
-							<PlayerPlayIcon fontSize="tiny" />
-						</IconButton>
-					</Tooltip>
-				),
-			} }
-		/>
+		<InteractionItemContext.Provider value={ contextValue }>
+			<Repeater
+				openOnAdd
+				openItem={ triggerCreateOnShowEmpty ? 0 : undefined }
+				label={ __( 'Interactions', 'elementor' ) }
+				values={ interactions.items }
+				setValues={ handleRepeaterChange }
+				showDuplicate={ false }
+				showToggle={ false }
+				isSortable={ false }
+				disableAddItemButton={ isMaxNumberOfInteractionsReached }
+				addButtonInfotipContent={ infotipContent }
+				itemSettings={ {
+					initialValues: createDefaultInteractionItem(),
+					Label: ( { value }: { value: InteractionItemPropValue } ) => buildDisplayLabel( value.value ),
+					Icon: () => null,
+					Content,
+					actions: ( value: InteractionItemPropValue ) => (
+						<Tooltip key="preview" placement="top" title={ __( 'Preview', 'elementor' ) }>
+							<IconButton
+								aria-label={ __( 'Play interaction', 'elementor' ) }
+								size="tiny"
+								onClick={ () => onPlayInteraction( extractString( value.value.interaction_id ) ) }
+							>
+								<PlayerPlayIcon fontSize="tiny" />
+							</IconButton>
+						</Tooltip>
+					),
+				} }
+			/>
+		</InteractionItemContext.Provider>
 	);
 }
+
+const Content = ( { index, value }: { index: number; value: InteractionItemPropValue } ) => {
+	const context = useContext( InteractionItemContext );
+
+	const handleChange = useCallback(
+		( newInteractionValue: InteractionItemValue ) => {
+			context?.onInteractionChange( index, newInteractionValue );
+		},
+		[ context, index ]
+	);
+
+	const handlePlayInteraction = useCallback(
+		( interactionId: string ) => {
+			context?.onPlayInteraction( interactionId );
+		},
+		[ context ]
+	);
+
+	return (
+		<InteractionDetails
+			key={ index }
+			interaction={ value.value }
+			onChange={ handleChange }
+			onPlayInteraction={ handlePlayInteraction }
+		/>
+	);
+};

package/src/init.ts

@@ -1,3 +1,4 @@
+import { Easing } from './components/controls/easing';
 import { Trigger } from './components/controls/trigger';
 import { initCleanInteractionIdsOnDuplicate } from './hooks/on-duplicate';
 import { registerInteractionsControl } from './interactions-controls-registry';
@@ -13,6 +14,12 @@ export function init() {
 			component: Trigger,
 			options: [ 'load', 'scrollIn' ],
 		} );
+
+		registerInteractionsControl( {
+			type: 'easing',
+			component: Easing,
+			options: [ 'easeIn' ],
+		} );
 	} catch ( error ) {
 		throw error;
 	}

package/src/interactions-controls-registry.ts

@@ -10,6 +10,7 @@ type InteractionsControlType =
 	| 'duration'
 	| 'delay'
 	| 'replay'
+	| 'easing'
 	| 'relativeTo'
 	| 'offsetTop'
 	| 'offsetBottom';
@@ -22,6 +23,7 @@ type InteractionsControlPropsMap = {
 	duration: FieldProps;
 	delay: FieldProps;
 	replay: ReplayFieldProps;
+	easing: FieldProps;
 	relativeTo: FieldProps;
 	offsetTop: FieldProps;
 	offsetBottom: FieldProps;

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

@@ -34,18 +34,26 @@ export const createBoolean = ( value: boolean ): BooleanPropValue => ( {
 	value,
 } );
 
-export const createConfig = (
-	replay: boolean,
-	relativeTo?: string,
-	offsetTop?: number,
-	offsetBottom?: number
-): ConfigPropValue => ( {
+export const createConfig = ( {
+	replay,
+	easing = 'easeIn',
+	relativeTo = '',
+	offsetTop = 0,
+	offsetBottom = 100,
+}: {
+	replay: boolean;
+	easing?: string;
+	relativeTo?: string;
+	offsetTop?: number;
+	offsetBottom?: number;
+} ): ConfigPropValue => ( {
 	$$type: 'config',
 	value: {
 		replay: createBoolean( replay ),
-		relativeTo: createString( relativeTo ?? '' ),
-		offsetTop: createNumber( offsetTop ?? 0 ),
-		offsetBottom: createNumber( offsetBottom ?? 100 ),
+		easing: createString( easing ),
+		relativeTo: createString( relativeTo ),
+		offsetTop: createNumber( offsetTop ),
+		offsetBottom: createNumber( offsetBottom ),
 	},
 } );
 
@@ -60,6 +68,7 @@ export const createAnimationPreset = ( {
 	duration,
 	delay,
 	replay = false,
+	easing = 'easeIn',
 	relativeTo,
 	offsetTop,
 	offsetBottom,
@@ -70,6 +79,7 @@ export const createAnimationPreset = ( {
 	duration: number;
 	delay: number;
 	replay: boolean;
+	easing?: string;
 	relativeTo?: string;
 	offsetTop?: number;
 	offsetBottom?: number;
@@ -80,7 +90,13 @@ export const createAnimationPreset = ( {
 		type: createString( type ),
 		direction: createString( direction ?? '' ),
 		timing_config: createTimingConfig( duration, delay ),
-		config: createConfig( replay, relativeTo, offsetTop, offsetBottom ),
+		config: createConfig( {
+			replay,
+			easing,
+			relativeTo,
+			offsetTop,
+			offsetBottom,
+		} ),
 	},
 } );
 
@@ -93,6 +109,7 @@ export const createInteractionItem = ( {
 	delay,
 	interactionId,
 	replay = false,
+	easing = 'easeIn',
 	relativeTo,
 	offsetTop,
 	offsetBottom,
@@ -105,6 +122,7 @@ export const createInteractionItem = ( {
 	delay: number;
 	interactionId?: string;
 	replay: boolean;
+	easing?: string;
 	relativeTo?: string;
 	offsetTop?: number;
 	offsetBottom?: number;
@@ -120,6 +138,7 @@ export const createInteractionItem = ( {
 			duration,
 			delay,
 			replay,
+			easing,
 			relativeTo,
 			offsetTop,
 			offsetBottom,
@@ -132,9 +151,10 @@ export const createDefaultInteractionItem = (): InteractionItemPropValue => {
 		trigger: 'load',
 		effect: 'fade',
 		type: 'in',
-		duration: 300,
+		duration: 600,
 		delay: 0,
 		replay: false,
+		easing: 'easeIn',
 		interactionId: generateTempInteractionId(),
 	} );
 };
@@ -152,17 +172,6 @@ export const extractNumber = ( prop: NumberPropValue | undefined, fallback = 0 )
 	return prop?.value ?? fallback;
 };
 
-export const buildAnimationIdString = ( item: InteractionItemValue ): string => {
-	const trigger = extractString( item.trigger );
-	const effect = extractString( item.animation.value.effect );
-	const type = extractString( item.animation.value.type );
-	const direction = extractString( item.animation.value.direction );
-	const duration = extractNumber( item.animation.value.timing_config.value.duration );
-	const delay = extractNumber( item.animation.value.timing_config.value.delay );
-
-	return [ trigger, effect, type, direction, duration, delay ].join( '-' );
-};
-
 const TRIGGER_LABELS: Record< string, string > = {
 	load: 'On page load',
 	scrollIn: 'Scroll into view',