feat: useDirectives (#311)

AmadeusITGroup · Dec 13, 2023 · 4e25c1a · 4e25c1a
1 parent 142ae61
commit 4e25c1a
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/react/headless/src/utils.ts b/react/headless/src/utils.ts
@@ -1,5 +1,5 @@
 import type {Directive, Widget, WidgetProps, WidgetState} from '@agnos-ui/core';
-import {findChangedProperties} from '@agnos-ui/core';
+import {findChangedProperties, mergeDirectives} from '@agnos-ui/core';
 import type {ReadableSignal, WritableSignal} from '@amadeus-it-group/tansu';
 import {asReadable, writable} from '@amadeus-it-group/tansu';
 import type {RefCallback} from 'react';
@@ -51,7 +51,7 @@ export function useObservable<T>(store$: ReadableSignal<T>) {
 
 export function useDirective(directive: Directive<void>): RefCallback<HTMLElement>;
 export function useDirective<T>(directive: Directive<T>, args: T): RefCallback<HTMLElement>;
-export function useDirective<T>(directive: Directive<T>, args?: T) {
+export function useDirective<T>(directive: Directive<T>, args?: T): RefCallback<HTMLElement> {
 	const instance = useRef<ReturnType<typeof directive>>();
 	const propsRef = useRef<T>();
 	const ref = useCallback(
@@ -69,6 +69,13 @@ export function useDirective<T>(directive: Directive<T>, args?: T) {
 	return ref;
 }
 
+export function useDirectives(directives: Directive<void>[]): RefCallback<HTMLElement>;
+export function useDirectives<T>(directives: Directive<T>[], args: T): RefCallback<HTMLElement>;
+export function useDirectives<T>(directives: Directive<T>[], args?: T): RefCallback<HTMLElement> {
+	const mergedDirectives = useMemo(() => mergeDirectives(...directives), directives);
+	return useDirective(mergedDirectives, args as any);
+}
+
 const propsEqual = <T extends object>(a: T, b: T) => !findChangedProperties(a, b);
 export const usePropsAsStore = <T extends object>(props?: Partial<T>): ReadableSignal<Partial<T>> => {
 	const storeRef = useRef<WritableSignal<Partial<T>>>();