@elementor/editor-app-bar 0.14.0 → 0.14.2

package/src/locations/menus.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef, ElementType, useMemo } from 'react';
+import { createLocation, Location } from '@elementor/locations';
+import Action from '../components/actions/action';
+import ToggleAction from '../components/actions/toggle-action';
+import Link from '../components/actions/link';
+import ActionsGroup from '../components/actions/actions-group';
+
+type GroupName = string;
+
+type MenuGroup<TGroup extends GroupName> = TGroup | 'default';
+
+export type ItemsArray = Array<{ id: string, MenuItem: ElementType }>;
+type GroupedItems<TGroup extends GroupName> = Record<MenuGroup<TGroup>, ItemsArray>;
+
+type GroupLocationMap<TGroup extends GroupName> = Record<MenuGroup<TGroup>, Location>;
+
+type ItemConfigProps<TComponent extends ElementType> = Omit<ComponentPropsWithoutRef<TComponent>, 'items'>;
+
+type MenuItem<
+	TGroup extends GroupName,
+	TComponent extends ElementType,
+> = {
+	id: string,
+	group?: TGroup,
+	priority?: number,
+	overwrite?: boolean,
+} & (
+	{ props: ItemConfigProps<TComponent>, useProps?: never } |
+	{ useProps: () => ItemConfigProps<TComponent>, props?: never }
+)
+
+export type MenuActions<TGroup extends GroupName> = {
+	registerAction: ( args: MenuItem<TGroup, typeof Action> ) => void,
+	registerToggleAction: ( args: MenuItem<TGroup, typeof ToggleAction> ) => void,
+	registerLink: ( args: MenuItem<TGroup, typeof Link> ) => void,
+	registerSubMenu: ( args: MenuItem<'default', typeof ActionsGroup> ) => MenuActions<'default'>,
+	useMenuItems: () => GroupedItems<TGroup>,
+}
+
+export function createMenu<
+	TGroup extends GroupName = 'default'
+>( groups: TGroup[] = [] ): MenuActions<MenuGroup<TGroup>> {
+	const menuGroups: MenuGroup<TGroup>[] = [
+		...groups,
+		'default' as const,
+	];
+
+	const locations = menuGroups.reduce(
+		( carry, group ) => ( {
+			...carry,
+			[ group ]: createLocation(),
+		} ),
+		{} as GroupLocationMap<TGroup>
+	);
+
+	const [
+		registerAction,
+		registerToggleAction,
+		registerLink,
+	] = [ Action, ToggleAction, Link ].map(
+		( Component ) => createRegisterMenuItem( {
+			locations,
+			menuGroups,
+			component: Component,
+		} )
+	);
+	const useMenuItems = createUseMenuItems( locations );
+
+	const registerSubMenu = createRegisterSubMenu( {
+		locations,
+		menuGroups,
+	} );
+
+	return {
+		registerAction,
+		registerToggleAction,
+		registerLink,
+		registerSubMenu,
+		useMenuItems,
+	};
+}
+
+function createRegisterMenuItem<
+	TGroup extends GroupName,
+	TComponent extends ElementType,
+>( { locations, menuGroups, component, useMenuItems }: {
+	locations: GroupLocationMap<TGroup>
+	menuGroups: MenuGroup<TGroup>[],
+	component: TComponent,
+	useMenuItems?: () => ItemsArray
+} ) {
+	return ( { group = 'default', id, overwrite, priority, ...args }: MenuItem<MenuGroup<TGroup>, TComponent> ) => {
+		if ( ! menuGroups.includes( group ) ) {
+			return;
+		}
+
+		const useProps = 'props' in args ? () => args.props : args.useProps;
+
+		const Component = component as ElementType;
+
+		const InjectedComponent = ( props: object ) => {
+			const componentProps = useProps();
+
+			/**
+			 * if passing useMenuItems - it's to use the menu item as a group parent
+			 * in such case we'd also pass the id in case it's needed to wrap the group by
+			 */
+			const items = useMenuItems?.();
+			if ( items?.length ) {
+				return <Component
+					{ ...props }
+					{ ...componentProps }
+					items={ items }
+				/>;
+			}
+			return <Component { ...props } { ...componentProps } />;
+		};
+
+		locations[ group ].inject( {
+			id,
+			component: InjectedComponent,
+			options: {
+				priority,
+				overwrite,
+			},
+		} );
+	};
+}
+
+function createRegisterSubMenu<
+	TGroup extends GroupName,
+>( { locations, menuGroups }: {
+	locations: GroupLocationMap<TGroup>
+	menuGroups: MenuGroup<TGroup>[],
+} ) {
+	return ( args: MenuItem<MenuGroup<'default'>, typeof ActionsGroup> ) => {
+		const menu = createMenu();
+
+		createRegisterMenuItem( {
+			locations,
+			menuGroups,
+			component: ActionsGroup,
+			useMenuItems: () => menu.useMenuItems().default,
+		} )( args );
+
+		return menu;
+	};
+}
+
+function createUseMenuItems<TGroup extends GroupName>( locations : GroupLocationMap<TGroup> ) {
+	return () => {
+		// Normalize the injections groups to an object with the groups as keys.
+		return useMemo( () => {
+			return Object.entries( locations ).reduce<GroupedItems<TGroup>>(
+				( carry, [ groupName, location ] ) => {
+					const items = location.getInjections()
+						.map( ( injection ) => ( {
+							id: injection.id,
+							MenuItem: injection.component,
+						} ) );
+
+					return {
+						...carry,
+						[ groupName ]: items,
+					};
+				},
+				{} as GroupedItems<TGroup>
+			);
+		}, [] );
+	};
+}

package/src/types.ts

@@ -14,3 +14,7 @@ export type ExtendedWindow = Window & {
 		}
 	}
 }
+
+export type { Props as ActionProps } from './components/actions/action';
+export type { Props as ToggleActionProps } from './components/actions/toggle-action';
+export type { Props as LinkProps } from './components/actions/link';