[IMPL] useSwipe hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useEventDispatcher/UseEventDispatcher.tsx

@@ -22,7 +22,7 @@ export const UseEventDispatcher = () => {
 	useEventListener({
 		type: "demo",
 		element: inputRef,
-		listener: (evt) => {
+		listener: (evt: CustomEvent) => {
 			setState((evt as CustomEvent<string>).detail);
 		},
 	});

apps/react-tools-demo/src/components/hooks/useSwipe/UseSwipe.tsx

@@ -0,0 +1,26 @@
+import { useRef } from "react";
+import { useSwipe } from "../../../../../../packages/react-tools/src";
+
+/**
+The component uses _useSwipe_ hook to handle swipe event on a div element.
+ */
+export const UseSwipe = () => {
+	const divRef = useRef<HTMLDivElement>(null);
+	useSwipe({
+		target: divRef,
+		onSwipe(e, direction, delta) {
+			console.log(direction)
+			delta.x >=0 && (divRef.current!.style.left = delta.x + "px");
+		},
+		onSwipeEnd(e, direction, delta) {
+			divRef.current!.style.left = `${delta.x>330 ? "400" : "0"}px`
+		},
+	});
+	const reset = () => {
+		divRef.current!.style.left = "0";
+	}
+	return <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: 400, height: 100, border: "1px solid lightgray", overflow: "hidden", margin: "0 auto" }}>
+		<button onClick={reset}>RESET</button>
+		<div ref={divRef} style={{ position: "absolute", backgroundColor: "rgb(73 84 104)", zIndex: 100, inset: 0 }}><p>SWIPE</p></div>
+	</div>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -71,6 +71,7 @@ export const COMPONENTS = [
 			"usePinchZoom",
 			"usePointerLock",
 			"useContextMenu",
+			"useSwipe"
 		],
 		//API DOM
 		[

apps/react-tools-demo/src/markdown/useDisplayMedia.md

@@ -5,17 +5,23 @@ Hook to capture the contents of a display.
 
 ```tsx
 export const UseDisplayMedia = () => {
-	const start = useDisplayMedia();
+	const [stream, start, stop] = useDisplayMedia();
 	const ref = useRef<HTMLVideoElement>(null);
 
 	const init = async () => {
-		const stream = await start();
-		ref.current && (ref.current.srcObject = stream);
+		await start();
 	}
 
-	return <div style={{ display: "grid", gridTemplateRows: "auto auto", justifyContent: "center", gap: 50, maxHeight: 350, overflow: "auto" }}>
+	if (ref.current) {
+		stream
+			? (ref.current.srcObject = stream)
+			: (ref.current.srcObject = null);
+	}
+
+	return <div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 20, maxHeight: 350, overflow: "auto" }}>
 		<button onClick={init}>Start</button>
-		<video autoPlay controls ref={ref}/>
+		<button onClick={stop}>Stop</button>
+		<video autoPlay width={300} height={200} ref={ref}/>
 	</div>
 }
 
@@ -27,7 +33,7 @@ export const UseDisplayMedia = () => {
 ## API
 
 ```tsx
-useDisplayMedia()
+useDisplayMedia(): [MediaStream | undefined, (options?: TDisplayMediaStreamOptions) => Promise<void>, () => void]
 ```
 
 > ### Params
@@ -37,8 +43,13 @@ useDisplayMedia()
 
 > ### Returns
 >
-> __start__: function to start capture.
-> - __Union of__:  
->     - _(options: DisplayMediaStreamOptions_  
->     - _undefined) => Promise<MediaStream>_  
+> __result__:  __Union of__:  
+    - __Array__:  
+        - _MediaStream|undefined_  
+        - _(options: TDisplayMediaStreamOption_  
+    - _undefined) => Promise<void>, ()=>void]_  
+> Array containing:
+> - first element: the captured stream.
+> - second element: function that starts capture.
+> - third element: function that stops capture.
 >

apps/react-tools-demo/src/markdown/useEventDispatcher.md

@@ -17,7 +17,7 @@ export const UseEventDispatcher = () => {
 	useEventListener({
 		type: "demo",
 		element: inputRef,
-		listener: (evt) => {
+		listener: (evt: CustomEvent) => {
 			setState((evt as CustomEvent<string>).detail);
 		},
 	});

apps/react-tools-demo/src/markdown/useEventListener.md

@@ -35,17 +35,17 @@ export { UseEventListener };
 ## API
 
 ```tsx
-useEventListener<T extends Event | CustomEvent>({ type, listener, element = window, listenerOpts, effectType = "normal" }: { type: string, listener: ((evt: T) => unknown | Promise<unknown>), element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void)
+useEventListener<T extends keyof WindowEventMap>({ type, listener, element = window, listenerOpts, effectType = "normal" }: { type: T|(T[]), listener: ((evt: WindowEventMap[T]) => unknown | Promise<unknown>), element?: RefObject<Element> | Element | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void)
 ```
 
 > ### Params
 >
 > - __options__: _Object_
-> - __options.type__: _string_  
-event type.
+> - __options.type__: _keyof WindowEventMap|(keyof WindowEventMap)[]_  
+event or events type.
 > - __options.listener__: _(evt: Event | CustomEvent) => void_  
 listener to be executed on specified event.
-> - __options.element=window?__: _RefObject<HTMLElement> | Window_  
+> - __options.element=window?__: _RefObject<Element> | Element | Window_  
 element on which attaching eventListener.
 > - __options.listenerOpts?__: _boolean | AddEventListenerOptions_  
 options for listener.

apps/react-tools-demo/src/markdown/useSwipe.md

@@ -0,0 +1,47 @@
+# useSwipe
+Hook to handle swipe gesture.
+
+## Usage
+
+```tsx
+export const UseSwipe = () => {
+	return <div style={{ position: "relative", width: 400, height: 100, border: "1px solid lightgray" }}>
+		<div style={{position: "absolute", backgroundColor: "lightgray", width: 400, height: 100}}></div>
+	</div>
+}
+```
+
+> The component uses _useSwipe_ hook to handle swipe event on a div element.
+
+
+## API
+
+```tsx
+useSwipe({ target, onSwipeStart, onSwipe, onSwipeEnd, options }: UseSwipeProps): UseSwipeResult
+```
+
+> ### Params
+>
+> - __param__: _UseSwipeProps_  
+object
+> - __param.target__: _RefObject<Element>|Element_  
+element on which attach swipe event.
+> - __param.onSwipeStart?__: _(e: PointerEvent) => void_  
+callback that will be executed when swipe starts.
+> - __param.onSwipe?__: _(e: PointerEvent, direction: SwipeDirection, delta: {x: number, y: number}) => void_  
+callback that will be executed when swipe moves.
+> - __param.onSwipeEnd?__: _(e: PointerEvent, direction: SwipeDirection, delta: {x: number, y: number}) => void_  
+callback that will be executed when swipe ends.
+> - __param.options?__: _Object_  
+object to set option for listener.
+> - __param.options.passive=true?__: _boolean_  
+if true, handler callback never calls _preventDefault_ method.
+> - __param.options.threshold=0?__: _threshold_  
+a threshold value for swipe event.
+>
+
+> ### Returns
+>
+> __- callback that stops listener.__
+> - _UseSwipeResult_  
+>

packages/react-tools/README.md

@@ -44,7 +44,7 @@
 	- [x] useMergedRef
 	- [x] useLazyRef
 	- [x] useId
- - [ ] usePromise (https://github.com/vigzmv/react-promise-suspense/blob/master/lib/index.ts)
+ 	- [ ] usePromise (https://github.com/vigzmv/react-promise-suspense/blob/master/lib/index.ts)
 
 - __EVENTS__
 	- [x] useEvents
@@ -72,6 +72,7 @@
 	- [x] usePinchZoom
 	- [x] usePointerLock
 	- [x] useContextMenu
+   	- [x] useSwipe
 	- [ ] useInfiniteScroll
 	- [ ] useDragAndDrop (check for mobile usage)
 
@@ -118,7 +119,6 @@
 	- [x] usePermission
 	- [x] useMediaDevices
 	- [x] useDisplayMedia
-   	- [ ] usePointerTouchSwipe (https://vueuse.org/core/usePointerSwipe/ https://vueuse.org/core/useSwipe/)
 	- [ ] useWebWorker (https://vueuse.org/core/useWebWorker/)
 	- [ ] useWebWorkerFn (https://vueuse.org/core/useWebWorkerFn/)
 	- [ ] useIndexedDB
@@ -139,12 +139,22 @@
 	- [ ] fetch-client (???ARTS-like)
 	- [ ] defaultSerializer (https://github.com/vueuse/vueuse/blob/main/packages/core/useBase64/serialization.ts)
 	- [ ] useBase64 (https://vueuse.org/core/useBase64/)
+	- [ ] removePropertiesFromArrayObject
+	- [ ] uniqueElements
+	- [ ] getKeyObjectFromValue
+	- [ ] dottedStringToObject
+	- [ ] mergeObjects
+	- [ ] alphanumericCompare
+	- [ ] camelCase
+	- [ ] pascalCase
+	- [ ] kebabCase
+	- [ ] snakeCase
 
 - __COMPONENT__
 	- [ ] Show component to render or not a component by a condition. Props: when, fallback, keyed. Keyed is a boolean and needs to avoid rerenders children when it is a function.
 	- [ ] Switch and Match components with fallback and when props
-	- [ ] For/Each: A referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument (ref https://javascript.plainenglish.io/react-each-and-of-pattern-b00aa4305089	)
- - [ ] Index: Non-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value.
+	- [ ] For/Each: A referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument (ref https://javascript.plainenglish.io/react-each-and-of-pattern-b00aa4305089)
+	- [ ] Index: Non-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value.
 	- [ ] RestrictedRoute (maybe)
 	- [ ] ErrorBoundary (?? error event listener)
 	- [ ] Suspense: Suspence compontent react-like for async component

packages/react-tools/src/hooks/index.ts

@@ -95,4 +95,5 @@ export { useWebSocket } from './useWebSocket';
 export { useContextMenu } from './useContextMenu';
 export { useMediaDevices } from './useMediaDevices';
 export { usePermission } from './usePermission';
-export { useDisplayMedia } from './useDisplayMedia';
+export { useDisplayMedia } from './useDisplayMedia';
+export { useSwipe } from './useSwipe';

packages/react-tools/src/hooks/useEventListener.ts

@@ -4,35 +4,40 @@ import { useMemoizedFunction } from ".";
 /**
  * __`useEventListener`__: Hook to simplify add and remove EventListener use. It's persist during rerendering and automatically remove eventlistener on unMount component lifecycle.
  * @param {Object} options
- * @param {string} options.type - event type.
+ * @param {keyof WindowEventMap|(keyof WindowEventMap)[]} options.type - event or events type.
  * @param {(evt: Event | CustomEvent) => void} options.listener - listener to be executed on specified event.
- * @param {RefObject<HTMLElement> | Window} [options.element=window] - element on which attaching eventListener.
+ * @param {RefObject<Element> | Element | Window} [options.element=window] - element on which attaching eventListener.
  * @param {boolean | AddEventListenerOptions} [options.listenerOpts] - options for listener.
  * @param {"normal"|"layout"} [options.effectType="normal"] - option to set which hook is used to attach event listener.
  * @returns {()=>void} remove - used to manually remove the eventListener, otherwise is removed when component is unmounted.
  */
-export const useEventListener = <T extends Event | CustomEvent>({ type, listener, element = window, listenerOpts, effectType = "normal" }: { type: string, listener: ((evt: T) => unknown | Promise<unknown>), element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void) => {
+function useEventListener<T extends keyof DocumentEventMap>({ type, listener, element, listenerOpts, effectType }: { type: T | (T[]), listener: ((evt: DocumentEventMap[T]) => unknown | Promise<unknown>), element?: RefObject<Element> | Element | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void);
+function useEventListener<T extends keyof HTMLElementEventMap>({ type, listener, element, listenerOpts, effectType }: { type: T | (T[]), listener: ((evt: HTMLElementEventMap[T]) => unknown | Promise<unknown>), element?: RefObject<Element> | Element | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void);
+function useEventListener<T extends string, E extends Event|CustomEvent>({ type, listener, element, listenerOpts, effectType }: { type: T | (T[]), listener: ((evt: E) => unknown | Promise<unknown>), element?: RefObject<Element> | Element | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void);
+function useEventListener<T extends keyof WindowEventMap>({ type, listener, element = window, listenerOpts, effectType = "normal" }: { type: T|(T[]), listener: ((evt: WindowEventMap[T]) => unknown | Promise<unknown>), element?: RefObject<Element> | Element | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }): (() => void) {
 	const optsMemoized = useRef<typeof listenerOpts>(listenerOpts);
-	const elementReference = useRef<HTMLElement | Window | null>();
+	const elementReference = useRef<Element | Window | null>();
 	const effect = effectType === "layout" ? useLayoutEffect : useEffect;
-
+	const types = useRef(Array.isArray(type) ? type : [type]);
 	effect(() => {
 		const opts = optsMemoized.current;
 		elementReference.current = Reflect.has(element, "current")
-			? (element as RefObject<HTMLElement>)?.current !== null
-				? (element as RefObject<HTMLElement>).current
+			? (element as RefObject<Element>)?.current !== null
+				? (element as RefObject<Element>).current
 				: null
 			: element as Window
 
-		elementReference.current && (elementReference.current as HTMLElement | Window).addEventListener(type, listener as EventListenerOrEventListenerObject, opts);
+		elementReference.current && types.current.forEach(type => (elementReference.current as Element | Window).addEventListener(type, listener as EventListenerOrEventListenerObject, opts));
 		return () => {
-			elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener as EventListenerOrEventListenerObject, opts);
+			elementReference.current && types.current.forEach(type => (elementReference.current as Element | Window).removeEventListener(type, listener as EventListenerOrEventListenerObject, opts));
 		}
-	}, [element, type, listener]);
+	}, [element, listener]);
 
 	const remove = useMemoizedFunction(() => {
-		elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener as EventListenerOrEventListenerObject, optsMemoized.current);
+		elementReference.current && types.current.forEach(type => (elementReference.current as Element | Window).removeEventListener(type, listener as EventListenerOrEventListenerObject, optsMemoized.current));
 	});
 
 	return remove;
-}
+}
+
+export { useEventListener };