Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Ignore classes in useClickOutside hook #2135

Merged
merged 5 commits into from
May 28, 2024
+12 −0
Merged

feat: Ignore classes in useClickOutside hook #2135

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
67f2887
Update index.ts
omernave May 22, 2024
46b923d
Update useClickOutside.mdx
omernave May 22, 2024
fd3369d
up
omernave May 28, 2024
ef6444f
lint
omernave May 28, 2024
f71449a
Merge branch 'master' into feat/omerna/ignore-classes-in-useClickOutside
omernave May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ This hook is used when you want to capture click events outside your component.
description="Callback function to execute on outside clicks."
required
/>
<FunctionArgument
name="ignoreClasses"
type="string[]"
description="A list of classes to ignore when checking if the click is outside the element."
defaultValue="undefined"
talkor marked this conversation as resolved.
Show resolved Hide resolved
/>
<FunctionArgument
name="eventName"
type="keyof HTMLElementEventMap | string"
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/hooks/useClickOutside/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import { GenericEventCallback } from "../../types/events";
export default function useClickOutside({
ref,
callback,
ignoreClasses,
eventName = "click"
}: {
ref: RefObject<HTMLElement>;
callback: GenericEventCallback;
ignoreClasses?: string[];
eventName?: keyof HTMLElementEventMap | string;
}) {
const onClickOutsideListener = useCallback(
Expand All @@ -17,6 +19,12 @@ export default function useClickOutside({
return;
}

if (ignoreClasses && event.target instanceof HTMLElement) {
if (event.target.closest(ignoreClasses.join(','))) {
return;
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: avoid nested if statement, the condition can be extracted to a variable to simplify the statement

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done


callback(event);
},

Expand Down
Loading