components: Add mergeEventHandlers

packages/components/src/utils/events.ts

@@ -0,0 +1,51 @@
+type EventHandler< T extends Event > = ( event: T ) => void;
+
+/**
+ * Merges event handlers together.
+ *
+ * @template TEvent
+ * @param  handler
+ * @param  otherHandler
+ */
+function mergeEvent< TEvent extends Event >(
+	handler: EventHandler< TEvent >,
+	otherHandler: EventHandler< TEvent >
+): EventHandler< TEvent > {
+	return ( event: TEvent ) => {
+		if ( typeof handler === 'function' ) {
+			handler( event );
+		}
+		if ( typeof otherHandler === 'function' ) {
+			otherHandler( event );
+		}
+	};
+}
+
+/**
+ * Merges a set of event handlers together.
+ *
+ * @template TEvent
+ * @param  handlers
+ * @param  extraHandlers
+ */
+export function mergeEventHandlers<
+	TEvent extends Event,
+	TLeft extends Record< string, EventHandler< TEvent > >
+>(
+	handlers: TLeft,
+	extraHandlers: Record< string, EventHandler< TEvent > >
+): TLeft {
+	const mergedHandlers: TLeft = { ...handlers };
+
+	for ( const [ key, handler ] of Object.entries( mergedHandlers ) ) {
+		if ( typeof extraHandlers[ key ] === 'function' ) {
+			// @ts-ignore
+			mergedHandlers[ key as keyof TLeft ] = mergeEvent(
+				handler,
+				extraHandlers[ key ]
+			);
+		}
+	}
+
+	return mergedHandlers;
+}

packages/components/src/utils/test/events.js

@@ -0,0 +1,43 @@
+/**
+ * Internal dependencies
+ */
+import { mergeEventHandlers } from '../events';
+
+describe( 'mergeEventHandlers', () => {
+	it( 'should merge the two event handler objects', () => {
+		const left = {
+			onclick: jest.fn(),
+		};
+
+		const right = {
+			onclick: jest.fn(),
+		};
+
+		const merged = mergeEventHandlers( left, right );
+
+		merged.onclick();
+
+		expect( left.onclick ).toHaveBeenCalled();
+		expect( right.onclick ).toHaveBeenCalled();
+	} );
+
+	it( 'should preserve all handlers from the left hand side that do not overlap with the right', () => {
+		const left = {
+			ArrowUp: jest.fn(),
+			ArrowDown: jest.fn(),
+		};
+
+		const right = {
+			ArrowUp: jest.fn(),
+		};
+
+		const merged = mergeEventHandlers( left, right );
+
+		merged.ArrowUp();
+
+		expect( left.ArrowUp ).toHaveBeenCalled();
+		expect( right.ArrowUp ).toHaveBeenCalled();
+
+		expect( merged.ArrowDown ).toBe( left.ArrowDown );
+	} );
+} );