Merge pull request #58 from likhith-deriv/likhith/76946/migrate-hooks…

…-folder-to-ts

likhith/migrated hooks folder to ts

packages/components/src/hooks/use-blockscroll.js → packages/components/src/hooks/use-blockscroll.ts

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 
-export const useBlockScroll = target_ref => {
+export const useBlockScroll = (target_ref: RefObject<HTMLElement>) => {
     React.useEffect(() => {
         if (!target_ref) return undefined;
 
-        const getScrollableParentElement = elem => {
+        const getScrollableParentElement: (prop: HTMLElement | null) => HTMLElement | null = (
+            elem: HTMLElement | null
+        ) => {
             if (!elem) return null;
             if (elem.classList.contains('dc-themed-scrollbars') && elem.scrollHeight > elem.clientHeight) return elem;
             return getScrollableParentElement(elem.parentElement);

packages/components/src/hooks/use-constructor.js → packages/components/src/hooks/use-constructor.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const useConstructor = (callBack = () => {}) => {
+export const useConstructor = (callBack: () => void = () => undefined) => {
     const is_called_ref = React.useRef(false);
     if (!is_called_ref.current) {
         callBack();

packages/components/src/hooks/use-deep-effect.js → packages/components/src/hooks/use-deep-effect.ts

@@ -3,8 +3,8 @@ import { isDeepEqual } from '@deriv/shared';
 
 // Note: Do not use this effect on huge objects or objects with
 // circular references as performance may suffer.
-export const useDeepEffect = (callback, dependencies) => {
-    const prev_dependencies = React.useRef(null);
+export const useDeepEffect = (callback: () => void, dependencies: unknown[]) => {
+    const prev_dependencies = React.useRef<unknown[] | null>(null);
 
     if (!isDeepEqual(prev_dependencies, dependencies)) {
         prev_dependencies.current = dependencies;

packages/components/src/hooks/use-hover.js → packages/components/src/hooks/use-hover.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 
-export const useHover = (refSetter, should_prevent_bubbling) => {
+export const useHover = (refSetter: RefObject<HTMLElement> | null, should_prevent_bubbling: boolean) => {
     const [value, setValue] = React.useState(false);
     const default_ref = React.useRef(null);
     const ref = refSetter || default_ref;
@@ -40,10 +40,10 @@ export const useHoverCallback = () => {
 
     const handleMouseOver = React.useCallback(() => setValue(true), []);
     const handleMouseOut = React.useCallback(() => setValue(false), []);
-    const ref = React.useRef();
+    const ref = React.useRef<HTMLElement | null>(null);
 
     const callbackRef = React.useCallback(
-        node => {
+        (node: HTMLElement) => {
             if (ref.current) {
                 ref.current.removeEventListener('mouseover', handleMouseOver);
                 ref.current.removeEventListener('mouseout', handleMouseOut);

packages/components/src/hooks/use-interval.js → packages/components/src/hooks/use-interval.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 
-export const useInterval = (callback, delay) => {
-    const savedCallback = React.useRef();
+export const useInterval = (callback: () => void, delay: number) => {
+    const savedCallback = React.useRef<() => void | undefined>();
     React.useEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
 
     React.useEffect(() => {
         function tick() {
-            savedCallback.current();
+            savedCallback.current?.();
         }
         if (delay !== null) {
             const id = setInterval(tick, delay);

packages/components/src/hooks/use-on-scroll.js → packages/components/src/hooks/use-on-scroll.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 
-export const useOnScroll = (ref, callback) => {
+export const useOnScroll = (ref: RefObject<HTMLElement>, callback: EventListener) => {
     // Allow consumer to prematurely dispose this scroll listener.
-    const remover = React.useRef(null);
+    const remover = React.useRef<(() => void) | null>(null);
     const has_removed = React.useRef(false);
 
     const diposeListener = () => {
@@ -19,7 +19,7 @@ export const useOnScroll = (ref, callback) => {
             ref.current.addEventListener('scroll', callback);
 
             remover.current = () => {
-                ref.current.removeEventListener('scroll', callback);
+                ref.current!.removeEventListener('scroll', callback);
             };
         }
 

packages/components/src/hooks/use-onclickoutside.ts

@@ -0,0 +1,29 @@
+import React, { RefObject } from 'react';
+
+export const useOnClickOutside = (
+    ref: RefObject<HTMLElement>,
+    handler: (event: MouseEvent) => void,
+    validationFn: (event: MouseEvent) => boolean
+) => {
+    React.useEffect(() => {
+        const listener = (event: MouseEvent) => {
+            const path = event.composedPath?.()[0] ?? (event as MouseEvent & { path: HTMLElement }).path; //event.path is non-standard and will be deprecated
+            // When component is isolated (e.g, iframe, shadow DOM) event.target refers to whole container not the component. path[0] is the node that the event originated from, it does not need to walk the array
+            if (
+                ref &&
+                ref.current &&
+                !ref.current.contains(event.target as HTMLElement) &&
+                !ref.current.contains(path as HTMLElement)
+            ) {
+                if (validationFn && !validationFn(event)) return;
+                handler(event);
+            }
+        };
+
+        document.addEventListener('mousedown', listener);
+
+        return () => {
+            document.removeEventListener('mousedown', listener);
+        };
+    }, [ref, handler, validationFn]);
+};

packages/components/src/hooks/use-onlongpress.js → packages/components/src/hooks/use-onlongpress.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 
 export const useLongPress = (
-    callback = () => {
+    callback: () => void = () => {
         /** empty function */
     },
     ms = 300
 ) => {
     const [startLongPress, setStartLongPress] = React.useState(false);
 
-    const preventDefaults = e => {
+    const preventDefaults = (e: Event) => {
         e.preventDefault();
         e.stopPropagation();
     };
 
     React.useEffect(() => {
-        let timer;
+        let timer: ReturnType<typeof setTimeout> | undefined;
         if (startLongPress) {
             timer = setTimeout(callback, ms);
         } else if (timer) {
@@ -28,13 +28,13 @@ export const useLongPress = (
     }, [startLongPress]);
 
     return {
-        onMouseDown: e => {
+        onMouseDown: (e: MouseEvent) => {
             preventDefaults(e);
             setStartLongPress(true);
         },
         onMouseUp: () => setStartLongPress(false),
         onMouseLeave: () => setStartLongPress(false),
-        onTouchStart: e => {
+        onTouchStart: (e: TouchEvent) => {
             preventDefaults(e);
             setStartLongPress(true);
         },

packages/components/src/hooks/use-prevent-ios-zoom.js → packages/components/src/hooks/use-prevent-ios-zoom.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export const usePreventIOSZoom = () => {
     React.useEffect(() => {
         // Fix to prevent iOS from zooming in erratically on quick taps
-        const preventIOSZoom = event => {
+        const preventIOSZoom = (event: TouchEvent) => {
             if (event.touches.length > 1) {
                 event.preventDefault();
                 event.stopPropagation();

packages/components/src/hooks/use-previous.js → packages/components/src/hooks/use-previous.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
-export const usePrevious = value => {
-    const ref = React.useRef();
+export const usePrevious = <T>(value: T) => {
+    const ref = React.useRef<T | undefined>();
     React.useEffect(() => {
         ref.current = value;
     }, [value]);

packages/components/src/hooks/use-safe-state.js → packages/components/src/hooks/use-safe-state.ts

@@ -1,23 +1,25 @@
 import * as React from 'react';
 
-export const useSafeState = (initial_state, optIsMountedFunc = null) => {
+export const useSafeState = <T>(initial_state: T, optIsMountedFunc: () => void) => {
     const [state, setState] = React.useState(initial_state);
     const is_mounted = React.useRef(false);
 
     React.useLayoutEffect(() => {
         is_mounted.current = true;
-        return () => (is_mounted.current = false);
+        return () => {
+            is_mounted.current = false;
+        };
     }, []);
 
     const isMounted = () => {
-        if (typeof optIsMountedFunc === 'function') {
+        if (optIsMountedFunc && typeof optIsMountedFunc === 'function') {
             return optIsMountedFunc();
         }
 
         return is_mounted.current === true;
     };
 
-    const wrappedSetState = value => {
+    const wrappedSetState = (value: T) => {
         if (isMounted()) {
             setState(value);
         }

packages/components/src/hooks/use-state-callback.js → packages/components/src/hooks/use-state-callback.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 
 // this hook mimics this.setState({ state: value, ... }, () => callbackFunc());
-export const useStateCallback = initial_state => {
-    const [state, setState] = React.useState(initial_state);
-    const callbackRef = React.useRef(null); // a mutable ref to store existing callback
+export const useStateCallback = <T>(initial_state: T) => {
+    const [state, setState] = React.useState<T>(initial_state);
+    const callbackRef = React.useRef<((param: T) => void) | null>(null); // a mutable ref to store existing callback
 
-    const setStateCallback = React.useCallback((current_state, cb) => {
+    const setStateCallback = React.useCallback((current_state: T, cb: (param: T) => void) => {
         callbackRef.current = cb; // store the passed callback to the ref
         setState(current_state);
     }, []);