@elementor/editor-interactions 4.0.0-537 → 4.0.0-539

package/src/providers/utils/normalize-interactions.ts

@@ -0,0 +1,65 @@
+import { type ElementInteractions } from '@elementor/editor-elements';
+import {
+	isTransformable,
+	numberPropTypeUtil,
+	type PropValue,
+	type SizePropValue,
+	type TransformablePropValue,
+} from '@elementor/editor-props';
+
+import { type TimeUnit } from '../../types';
+import { convertTimeUnit } from '../../utils/time-conversion';
+
+type Normalizer = ( value: TransformablePropValue< string, unknown > ) => PropValue;
+
+const FIELD_NORMALIZERS: Record< string, Normalizer > = {
+	size: ( value ) => {
+		const sizeProp = value as SizePropValue;
+		const { size, unit } = sizeProp.value;
+		const numberPropValue = convertTimeUnit( size as number, unit as TimeUnit, 'ms' );
+
+		return numberPropTypeUtil.create( numberPropValue );
+	},
+};
+
+export const normalizeInteractions = ( interactions?: ElementInteractions ): ElementInteractions | undefined => {
+	if ( ! interactions ) {
+		return;
+	}
+
+	if ( interactions.items.length === 0 ) {
+		return interactions;
+	}
+
+	return {
+		...interactions,
+		items: interactions.items.map( normalizeNode ),
+	} as ElementInteractions;
+};
+
+const normalizeNode = ( node: PropValue ): PropValue => {
+	if ( Array.isArray( node ) ) {
+		return node.map( normalizeNode );
+	}
+
+	if ( node !== null && typeof node === 'object' ) {
+		if ( isTransformable( node ) && node.value !== undefined ) {
+			const normalizer = FIELD_NORMALIZERS[ node.$$type ];
+
+			if ( normalizer ) {
+				return normalizer( node as TransformablePropValue< string > );
+			}
+		}
+
+		const typedNode = node as Record< string, unknown >;
+		const out: Record< string, PropValue > = {};
+
+		for ( const k in typedNode ) {
+			out[ k ] = normalizeNode( typedNode[ k ] as PropValue );
+		}
+
+		return out;
+	}
+
+	return node;
+};

package/src/types.ts

@@ -1,3 +1,4 @@
+import { type Unit } from '@elementor/editor-controls';
 import type {
 	AnimationPresetPropValue,
 	BooleanPropValue,
@@ -75,3 +76,7 @@ export type InteractionsProvider = {
 };
 
 export type InteractionItemValue = InteractionItemPropValue[ 'value' ];
+
+export type TimeUnit = Extract< Unit, 'ms' | 's' >;
+
+export type TimeValue = `${ number }${ TimeUnit }` | number;

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

@@ -1,16 +1,21 @@
-import type {
-	AnimationPresetPropValue,
-	BooleanPropValue,
-	ConfigPropValue,
-	ElementInteractions,
-	ExcludedBreakpointsPropValue,
-	InteractionBreakpointsPropValue,
-	InteractionItemPropValue,
-	InteractionItemValue,
-	NumberPropValue,
-	StringPropValue,
-	TimingConfigPropValue,
+import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+
+import { DEFAULT_TIME_UNIT, TIME_UNITS } from '../configs/time-constants';
+import {
+	type AnimationPresetPropValue,
+	type BooleanPropValue,
+	type ConfigPropValue,
+	type ElementInteractions,
+	type ExcludedBreakpointsPropValue,
+	type InteractionBreakpointsPropValue,
+	type InteractionItemPropValue,
+	type InteractionItemValue,
+	type NumberPropValue,
+	type StringPropValue,
+	type TimeValue,
+	type TimingConfigPropValue,
 } from '../types';
+import { formatSizeValue, parseSizeValue } from '../utils/size-transform-utils';
 import { generateTempInteractionId } from './temp-id-utils';
 
 export const createString = ( value: string ): StringPropValue => ( {
@@ -23,11 +28,11 @@ export const createNumber = ( value: number ): NumberPropValue => ( {
 	value,
 } );
 
-export const createTimingConfig = ( duration: number, delay: number ): TimingConfigPropValue => ( {
+export const createTimingConfig = ( duration: TimeValue, delay: TimeValue ): TimingConfigPropValue => ( {
 	$$type: 'timing-config',
 	value: {
-		duration: createNumber( duration ),
-		delay: createNumber( delay ),
+		duration: sizePropTypeUtil.create( parseSizeValue( duration, TIME_UNITS, undefined, DEFAULT_TIME_UNIT ) ),
+		delay: sizePropTypeUtil.create( parseSizeValue( delay, TIME_UNITS, undefined, DEFAULT_TIME_UNIT ) ),
 	},
 } );
 
@@ -94,8 +99,8 @@ export const createAnimationPreset = ( {
 	effect: string;
 	type: string;
 	direction?: string;
-	duration: number;
-	delay: number;
+	duration: TimeValue;
+	delay: TimeValue;
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
@@ -137,8 +142,8 @@ export const createInteractionItem = ( {
 	effect: string;
 	type: string;
 	direction?: string;
-	duration: number;
-	delay: number;
+	duration: TimeValue;
+	delay: TimeValue;
 	interactionId?: string;
 	replay: boolean;
 	easing?: string;
@@ -192,6 +197,10 @@ export const extractString = ( prop: StringPropValue | undefined, fallback = ''
 	return prop?.value ?? fallback;
 };
 
+export const extractSize = ( prop: SizePropValue ): TimeValue => {
+	return formatSizeValue( prop?.value );
+};
+
 export const extractNumber = ( prop: NumberPropValue | undefined, fallback = 0 ): number => {
 	return prop?.value ?? fallback;
 };

package/src/utils/size-transform-utils.ts

@@ -0,0 +1,67 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { type TimeUnit, type TimeValue } from '../types';
+
+type SizeValue = SizePropValue[ 'value' ];
+type SizeUnit = SizeValue[ 'unit' ];
+
+const SIZE_REGEX = /^(?:(-?\d*\.?\d+)([a-z%]+)|([a-z%]+))$/i;
+
+export const parseSizeValue = (
+	value: TimeValue,
+	allowedUnits: SizeUnit[],
+	defaultValue?: TimeValue,
+	defaultUnit?: TimeUnit
+): SizeValue => {
+	if ( typeof value === 'number' ) {
+		return {
+			size: value,
+			unit: defaultUnit as TimeUnit,
+		};
+	}
+
+	const sizeValue = tryParse( value, allowedUnits, defaultUnit );
+
+	if ( sizeValue ) {
+		return sizeValue;
+	}
+
+	if ( defaultValue ) {
+		const fallbackSize = tryParse( defaultValue, allowedUnits, defaultUnit );
+
+		if ( fallbackSize ) {
+			return fallbackSize;
+		}
+	}
+
+	return createSizeValue( null, defaultUnit );
+};
+
+const tryParse = ( value: TimeValue, allowedUnits: SizeUnit[], defaultUnit?: TimeUnit ): SizeValue | null => {
+	if ( typeof value === 'number' ) {
+		return createSizeValue( value, defaultUnit );
+	}
+
+	const match = value && value.match( SIZE_REGEX );
+
+	if ( ! match ) {
+		return null;
+	}
+
+	const size = match[ 1 ] ? parseFloat( match[ 1 ] ) : null;
+	const unit = ( match[ 2 ] || match[ 3 ] ) as SizeUnit;
+
+	if ( ! allowedUnits.includes( unit ) ) {
+		return null;
+	}
+
+	return createSizeValue( size, unit );
+};
+
+export const formatSizeValue = ( { size, unit }: SizeValue ): TimeValue => {
+	return `${ size ?? '' }${ unit }` as TimeValue;
+};
+
+const createSizeValue = ( size: number | null, unit?: SizeUnit ): SizeValue => {
+	return { size, unit } as SizeValue;
+};

package/src/utils/time-conversion.ts

@@ -0,0 +1,10 @@
+import { type TimeUnit } from '../types';
+
+const UNIT_TO_MS: Record< TimeUnit, number > = {
+	ms: 1,
+	s: 1000,
+};
+
+export const convertTimeUnit = ( value: number, from: TimeUnit, to: TimeUnit ): number => {
+	return ( value * UNIT_TO_MS[ from ] ) / UNIT_TO_MS[ to ];
+};