From ae3e04181d1c5d62e859b26aea71230f6b18db22 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 25 Oct 2022 11:22:15 +0800 Subject: [PATCH 1/2] fix: fix issues on parent ts migration branch --- .../components/src/components/modal/modal.tsx | 15 +++++---------- .../themed-scrollbars/themed-scrollbars.tsx | 2 +- packages/components/src/hooks/use-hover.ts | 4 ++-- packages/components/src/hooks/use-interval.ts | 2 +- .../components/src/hooks/use-onclickoutside.ts | 14 +++++++++----- 5 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx index c86a84cddd97..05385f5413a7 100644 --- a/packages/components/src/components/modal/modal.tsx +++ b/packages/components/src/components/modal/modal.tsx @@ -6,12 +6,7 @@ import Body from './modal-body'; import Footer from './modal-footer'; import Text from '../text/text'; import Icon from '../icon/icon'; -import { useOnClickOutside } from '../../hooks'; - -type TClickEvent = React.MouseEvent & { - path?: HTMLElement[]; - composedPath?: () => HTMLElement[]; -}; +import { useOnClickOutside, IClickEvent } from '../../hooks'; type TModalElement = { className?: string; @@ -82,7 +77,7 @@ const ModalElement = ({ const isPortalElementVisible = () => modal_root_ref.current?.querySelectorAll(portal_elements_selector.join(', ')).length; - const validateClickOutside = (e: TClickEvent): boolean => { + const validateClickOutside = (e: IClickEvent): boolean => { const is_absolute_modal_visible = document.getElementById('modal_root_absolute')?.hasChildNodes(); const path = e.path ?? e.composedPath?.(); return ( @@ -90,12 +85,12 @@ const ModalElement = ({ !isPortalElementVisible() && is_open && !is_absolute_modal_visible && - !(elements_to_ignore && path?.find(el => elements_to_ignore.includes(el))) + !(elements_to_ignore && path?.find(el => elements_to_ignore.includes(el as HTMLElement))) ); }; - const closeModal = (e: React.MouseEvent) => { - if (is_open) toggleModal?.(e); + const closeModal = (e: IClickEvent) => { + if (is_open) toggleModal?.(); }; useOnClickOutside(wrapper_ref, closeModal, validateClickOutside); diff --git a/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx b/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx index 4487b15c1814..95da39100ede 100644 --- a/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx +++ b/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx @@ -32,7 +32,7 @@ const ThemedScrollbars = ({ style = {}, width, }: React.PropsWithChildren) => { - const [hoverRef, isHovered] = useHover(refSetter); + const [hoverRef, isHovered] = useHover(refSetter, false); if (is_bypassed) return children; return ( diff --git a/packages/components/src/hooks/use-hover.ts b/packages/components/src/hooks/use-hover.ts index 6a4318755160..7837fe25379f 100644 --- a/packages/components/src/hooks/use-hover.ts +++ b/packages/components/src/hooks/use-hover.ts @@ -1,6 +1,6 @@ import React, { RefObject } from 'react'; -export const useHover = (refSetter: RefObject | null, should_prevent_bubbling: boolean) => { +export const useHover = (refSetter: RefObject | null, should_prevent_bubbling: boolean) => { const [value, setValue] = React.useState(false); const default_ref = React.useRef(null); const ref = refSetter || default_ref; @@ -32,7 +32,7 @@ export const useHover = (refSetter: RefObject | null, should_preven return undefined; }, [ref, should_prevent_bubbling]); - return [ref, value]; + return [ref, value] as const; }; export const useHoverCallback = () => { diff --git a/packages/components/src/hooks/use-interval.ts b/packages/components/src/hooks/use-interval.ts index ece6c2c11fee..a5a714de3db6 100644 --- a/packages/components/src/hooks/use-interval.ts +++ b/packages/components/src/hooks/use-interval.ts @@ -1,6 +1,6 @@ import React from 'react'; -export const useInterval = (callback: () => void, delay: number) => { +export const useInterval = (callback: () => void, delay: number | null) => { const savedCallback = React.useRef<() => void | undefined>(); React.useEffect(() => { savedCallback.current = callback; diff --git a/packages/components/src/hooks/use-onclickoutside.ts b/packages/components/src/hooks/use-onclickoutside.ts index ba95fac82b8a..6a8125d8ebee 100644 --- a/packages/components/src/hooks/use-onclickoutside.ts +++ b/packages/components/src/hooks/use-onclickoutside.ts @@ -1,19 +1,23 @@ import React, { RefObject } from 'react'; +export interface IClickEvent extends MouseEvent { + path?: HTMLElement[]; +} + export const useOnClickOutside = ( ref: RefObject, - handler: (event: MouseEvent) => void, - validationFn: (event: MouseEvent) => boolean + handler: (event: IClickEvent) => void, + validationFn: (event: IClickEvent) => 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 + const listener = (event: IClickEvent) => { + const path = (event.composedPath?.()[0] ?? event.path) as HTMLElement; //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) + !ref.current.contains(path) ) { if (validationFn && !validationFn(event)) return; handler(event); From 61f740ea7999252898e3c741e2fcb376d4bdcd75 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 25 Oct 2022 12:12:49 +0800 Subject: [PATCH 2/2] refactor: remove unused event variable and make parameter optional --- packages/components/src/components/modal/modal.tsx | 2 +- packages/components/src/hooks/use-onclickoutside.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx index 05385f5413a7..1aee5dac3ad5 100644 --- a/packages/components/src/components/modal/modal.tsx +++ b/packages/components/src/components/modal/modal.tsx @@ -89,7 +89,7 @@ const ModalElement = ({ ); }; - const closeModal = (e: IClickEvent) => { + const closeModal = () => { if (is_open) toggleModal?.(); }; diff --git a/packages/components/src/hooks/use-onclickoutside.ts b/packages/components/src/hooks/use-onclickoutside.ts index 6a8125d8ebee..8cf8d6726c6c 100644 --- a/packages/components/src/hooks/use-onclickoutside.ts +++ b/packages/components/src/hooks/use-onclickoutside.ts @@ -6,7 +6,7 @@ export interface IClickEvent extends MouseEvent { export const useOnClickOutside = ( ref: RefObject, - handler: (event: IClickEvent) => void, + handler: (event?: IClickEvent) => void, validationFn: (event: IClickEvent) => boolean ) => { React.useEffect(() => {