@elementor/editor-components 3.35.0-378 → 3.35.0-380

package/src/store/actions/reorder-group-props.ts

@@ -0,0 +1,43 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+type ReorderGroupPropsParams = {
+	componentId: ComponentId;
+	groupId: string;
+	newPropsOrder: string[];
+};
+
+export function reorderGroupProps( { componentId, groupId, newPropsOrder }: ReorderGroupPropsParams ): void {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const group = overridableProps.groups.items[ groupId ];
+
+	if ( ! group ) {
+		return;
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: {
+					...overridableProps.groups,
+					items: {
+						...overridableProps.groups.items,
+						[ groupId ]: {
+							...group,
+							props: newPropsOrder,
+						},
+					},
+				},
+			},
+		} )
+	);
+}

package/src/store/actions/reorder-overridable-groups.ts

@@ -0,0 +1,30 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+type ReorderGroupsParams = {
+	componentId: ComponentId;
+	newOrder: string[];
+};
+
+export function reorderOverridableGroups( { componentId, newOrder }: ReorderGroupsParams ): void {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: {
+					...overridableProps.groups,
+					order: newOrder,
+				},
+			},
+		} )
+	);
+}

package/src/store/actions/set-overridable-prop.ts

@@ -1,10 +1,16 @@
 import { type PropValue } from '@elementor/editor-props';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 import { generateUniqueId } from '@elementor/utils';
-import { __ } from '@wordpress/i18n';
 
-import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../../types';
+import { type OverridableProp } from '../../types';
 import { selectOverridableProps, slice } from '../store';
+import {
+	addPropToGroup,
+	ensureGroupInOrder,
+	removePropFromGroup,
+	removePropsFromState,
+	resolveOrCreateGroup,
+} from '../utils/groups-transformers';
 
 type Props = {
 	componentId: number;
@@ -17,6 +23,7 @@ type Props = {
 	widgetType: string;
 	originValue: PropValue;
 };
+
 export function setOverridableProp( {
 	componentId,
 	overrideKey,
@@ -39,14 +46,12 @@ export function setOverridableProp( {
 		( prop ) => prop.elementId === elementId && prop.propKey === propKey && prop !== existingOverridableProp
 	);
 
-	const { props: prevProps, groups: prevGroups } = { ...overridableProps };
-
-	const { groups: updatedGroups, currentGroupId } = getUpdatedGroups(
-		prevGroups,
-		groupId || existingOverridableProp?.groupId
+	const { groups: groupsAfterResolve, groupId: currentGroupId } = resolveOrCreateGroup(
+		overridableProps.groups,
+		groupId || existingOverridableProp?.groupId || undefined
 	);
 
-	const overridableProp = {
+	const overridableProp: OverridableProp = {
 		overrideKey: existingOverridableProp?.overrideKey || generateUniqueId( 'prop' ),
 		label,
 		elementId,
@@ -57,35 +62,23 @@ export function setOverridableProp( {
 		groupId: currentGroupId,
 	};
 
-	const { props: propsWithoutDuplicates, groups: groupsWithoutDuplicates } = removeProps( {
-		props: prevProps,
-		groups: updatedGroups,
-		propsToRemove: duplicatedTargetProps,
-	} );
+	const stateAfterRemovingDuplicates = removePropsFromState(
+		{ ...overridableProps, groups: groupsAfterResolve },
+		duplicatedTargetProps
+	);
 
 	const props = {
-		...propsWithoutDuplicates,
+		...stateAfterRemovingDuplicates.props,
 		[ overridableProp.overrideKey ]: overridableProp,
 	};
 
-	const groups = {
-		items: {
-			...groupsWithoutDuplicates.items,
-			[ currentGroupId ]: getGroupWithProp( groupsWithoutDuplicates, currentGroupId, overridableProp ),
-		},
-		order: groupsWithoutDuplicates.order.includes( currentGroupId )
-			? groupsWithoutDuplicates.order
-			: [ ...groupsWithoutDuplicates.order, currentGroupId ],
-	};
+	let groups = addPropToGroup( stateAfterRemovingDuplicates.groups, currentGroupId, overridableProp.overrideKey );
+	groups = ensureGroupInOrder( groups, currentGroupId );
 
 	const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
 
 	if ( isChangingGroups ) {
-		groups.items[ existingOverridableProp.groupId ] = getGroupWithoutProp(
-			groupsWithoutDuplicates,
-			existingOverridableProp.groupId,
-			overridableProp
-		);
+		groups = removePropFromGroup( groups, existingOverridableProp.groupId, overridableProp.overrideKey );
 	}
 
 	dispatch(
@@ -100,101 +93,3 @@ export function setOverridableProp( {
 
 	return overridableProp;
 }
-
-type UpdatedGroups = { groups: OverridableProps[ 'groups' ]; currentGroupId: string };
-
-function getUpdatedGroups( groups: OverridableProps[ 'groups' ], groupId: string | undefined ): UpdatedGroups {
-	if ( ! groupId ) {
-		// use first existing group
-		if ( groups.order.length > 0 ) {
-			return { groups, currentGroupId: groups.order[ 0 ] };
-		}
-
-		// create the first group (default)
-		return addNewGroup( groups );
-	}
-
-	if ( ! groups.items[ groupId ] ) {
-		// fallback - if for any reason there's no such group - create it
-		return addNewGroup( groups, groupId );
-	}
-
-	// use the existing group
-	return { groups, currentGroupId: groupId };
-}
-
-function addNewGroup( groups: OverridableProps[ 'groups' ], groupId?: string | undefined ): UpdatedGroups {
-	const currentGroupId = groupId || generateUniqueId( 'group' );
-	const updatedGroups = {
-		...groups,
-		items: {
-			...groups.items,
-			[ currentGroupId ]: {
-				id: currentGroupId,
-				label: __( 'Default', 'elementor' ),
-				props: [],
-			},
-		},
-		order: [ ...groups.order, currentGroupId ],
-	};
-
-	return { groups: updatedGroups, currentGroupId };
-}
-
-function getGroupWithProp(
-	groups: OverridableProps[ 'groups' ],
-	groupId: string,
-	overridableProp: OverridableProp
-): OverridablePropsGroup {
-	const group: OverridablePropsGroup = { ...groups.items[ groupId ] };
-
-	if ( ! group.props.includes( overridableProp.overrideKey ) ) {
-		group.props = [ ...group.props, overridableProp.overrideKey ];
-	}
-
-	return group;
-}
-
-function getGroupWithoutProp(
-	groups: OverridableProps[ 'groups' ],
-	groupId: string,
-	overridableProp: OverridableProp
-): OverridablePropsGroup {
-	const group = { ...groups.items[ groupId ] };
-
-	if ( group ) {
-		group.props = group.props.filter( ( key ) => key !== overridableProp.overrideKey );
-	}
-
-	return group;
-}
-
-function removeProps( {
-	props,
-	groups,
-	propsToRemove,
-}: OverridableProps & { propsToRemove: OverridableProp[] } ): OverridableProps {
-	const allProps = Object.fromEntries(
-		Object.entries( props ).filter( ( [ , prop ] ) => ! propsToRemove.includes( prop ) )
-	);
-
-	const overrideKeysToRemove = propsToRemove.map( ( prop ) => prop.overrideKey );
-
-	const allGroupItems = Object.fromEntries(
-		Object.entries( groups.items ).map( ( [ groupId, group ]: [ string, OverridablePropsGroup ] ) => [
-			groupId,
-			{
-				...group,
-				props: group.props.filter( ( prop ) => ! overrideKeysToRemove.includes( prop ) ),
-			},
-		] )
-	);
-
-	return {
-		props: allProps,
-		groups: {
-			items: allGroupItems,
-			order: groups.order.filter( ( groupId ) => ! overrideKeysToRemove.includes( groupId ) ),
-		},
-	};
-}

package/src/store/actions/update-overridable-prop.ts

@@ -0,0 +1,58 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId, type OverridableProp } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+import { movePropBetweenGroups } from '../utils/groups-transformers';
+
+type UpdatePropParams = {
+	componentId: ComponentId;
+	propKey: string;
+	label: string;
+	groupId: string | null;
+};
+
+export function updateOverridableProp( {
+	componentId,
+	propKey,
+	label,
+	groupId,
+}: UpdatePropParams ): OverridableProp | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const prop = overridableProps.props[ propKey ];
+
+	if ( ! prop ) {
+		return;
+	}
+
+	const oldGroupId = prop.groupId;
+	const newGroupId = groupId ?? oldGroupId;
+
+	const updatedProp: OverridableProp = {
+		...prop,
+		label,
+		groupId: newGroupId,
+	};
+
+	const updatedGroups = movePropBetweenGroups( overridableProps.groups, propKey, oldGroupId, newGroupId );
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				props: {
+					...overridableProps.props,
+					[ propKey ]: updatedProp,
+				},
+				groups: updatedGroups,
+			},
+		} )
+	);
+
+	return updatedProp;
+}

package/src/store/utils/groups-transformers.ts

@@ -0,0 +1,185 @@
+import { generateUniqueId } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../../types';
+
+type Groups = OverridableProps[ 'groups' ];
+
+export function removePropFromAllGroups( groups: Groups, propKey: string ): Groups {
+	return {
+		...groups,
+		items: Object.fromEntries(
+			Object.entries( groups.items ).map( ( [ groupId, group ] ) => [
+				groupId,
+				{
+					...group,
+					props: group.props.filter( ( p ) => p !== propKey ),
+				},
+			] )
+		),
+	};
+}
+
+export function addPropToGroup( groups: Groups, groupId: string, propKey: string ): Groups {
+	const group = groups.items[ groupId ];
+
+	if ( ! group ) {
+		return groups;
+	}
+
+	if ( group.props.includes( propKey ) ) {
+		return groups;
+	}
+
+	return {
+		...groups,
+		items: {
+			...groups.items,
+			[ groupId ]: {
+				...group,
+				props: [ ...group.props, propKey ],
+			},
+		},
+	};
+}
+
+export function movePropBetweenGroups(
+	groups: Groups,
+	propKey: string,
+	fromGroupId: string,
+	toGroupId: string
+): Groups {
+	if ( fromGroupId === toGroupId ) {
+		return groups;
+	}
+
+	const withoutProp = removePropFromGroup( groups, fromGroupId, propKey );
+	return addPropToGroup( withoutProp, toGroupId, propKey );
+}
+
+export function removePropFromGroup( groups: Groups, groupId: string, propKey: string ): Groups {
+	const group = groups.items[ groupId ];
+
+	if ( ! group ) {
+		return groups;
+	}
+
+	return {
+		...groups,
+		items: {
+			...groups.items,
+			[ groupId ]: {
+				...group,
+				props: group.props.filter( ( p ) => p !== propKey ),
+			},
+		},
+	};
+}
+
+type ResolvedGroup = {
+	groups: Groups;
+	groupId: string;
+};
+
+export function resolveOrCreateGroup( groups: Groups, requestedGroupId?: string ): ResolvedGroup {
+	if ( requestedGroupId && groups.items[ requestedGroupId ] ) {
+		return { groups, groupId: requestedGroupId };
+	}
+
+	if ( ! requestedGroupId && groups.order.length > 0 ) {
+		return { groups, groupId: groups.order[ 0 ] };
+	}
+
+	return createGroup( groups, requestedGroupId );
+}
+
+export function createGroup( groups: Groups, groupId?: string, label?: string ): ResolvedGroup {
+	const newGroupId = groupId || generateUniqueId( 'group' );
+	const newLabel = label || __( 'Default', 'elementor' );
+
+	return {
+		groups: {
+			...groups,
+			items: {
+				...groups.items,
+				[ newGroupId ]: {
+					id: newGroupId,
+					label: newLabel,
+					props: [],
+				},
+			},
+			order: [ ...groups.order, newGroupId ],
+		},
+		groupId: newGroupId,
+	};
+}
+
+export function removePropsFromState(
+	overridableProps: OverridableProps,
+	propsToRemove: OverridableProp[]
+): OverridableProps {
+	const overrideKeysToRemove = propsToRemove.map( ( prop ) => prop.overrideKey );
+
+	const remainingProps = Object.fromEntries(
+		Object.entries( overridableProps.props ).filter( ( [ , prop ] ) => ! propsToRemove.includes( prop ) )
+	);
+
+	const updatedGroupItems = Object.fromEntries(
+		Object.entries( overridableProps.groups.items ).map(
+			( [ groupId, group ]: [ string, OverridablePropsGroup ] ) => [
+				groupId,
+				{
+					...group,
+					props: group.props.filter( ( prop ) => ! overrideKeysToRemove.includes( prop ) ),
+				},
+			]
+		)
+	);
+
+	return {
+		props: remainingProps,
+		groups: {
+			items: updatedGroupItems,
+			order: overridableProps.groups.order.filter( ( groupId ) => ! overrideKeysToRemove.includes( groupId ) ),
+		},
+	};
+}
+
+export function ensureGroupInOrder( groups: Groups, groupId: string ): Groups {
+	if ( groups.order.includes( groupId ) ) {
+		return groups;
+	}
+
+	return {
+		...groups,
+		order: [ ...groups.order, groupId ],
+	};
+}
+
+export function deleteGroup( groups: Groups, groupId: string ): Groups {
+	const { [ groupId ]: removed, ...remainingItems } = groups.items;
+
+	return {
+		items: remainingItems,
+		order: groups.order.filter( ( id ) => id !== groupId ),
+	};
+}
+
+export function renameGroup( groups: Groups, groupId: string, newLabel: string ): Groups {
+	const group = groups.items[ groupId ];
+
+	if ( ! group ) {
+		return groups;
+	}
+
+	return {
+		...groups,
+		items: {
+			...groups.items,
+			[ groupId ]: {
+				...group,
+				label: newLabel,
+			},
+		},
+	};
+}