Skip to content

Commit 50d55d7

Browse files
juliajforestiggazzo
juliajforesti
and
ggazzo
authored
Chore: Migrate useOutsideClick to fuselage-hooks (#24133)
Co-authored-by: Guilherme Gazzo <[email protected]>
1 parent 0e755f2 commit 50d55d7

File tree

5 files changed

+114
-54
lines changed

5 files changed

+114
-54
lines changed

‎client/hooks/useOutsideClick.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎client/sidebar/header/actions/Search.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Sidebar } from '@rocket.chat/fuselage';
2-
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
2+
import { useMutableCallback, useOutsideClick } from '@rocket.chat/fuselage-hooks';
33
import React, { useState, useEffect, useRef } from 'react';
44
import tinykeys from 'tinykeys';
55

6-
import { useOutsideClick } from '../../../hooks/useOutsideClick';
76
import SearchList from '../../search/SearchList';
87

98
const Search = (props) => {
@@ -20,7 +19,7 @@ const Search = (props) => {
2019
setSearchOpen(true);
2120
});
2221

23-
useOutsideClick(ref, handleCloseSearch);
22+
useOutsideClick([ref], handleCloseSearch);
2423

2524
useEffect(() => {
2625
const unsubscribe = tinykeys(window, {

‎client/sidebar/header/hooks/useDropdownVisibility.ts‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { useToggle } from '@rocket.chat/fuselage-hooks';
1+
import { useToggle, useOutsideClick } from '@rocket.chat/fuselage-hooks';
22
import { RefObject, useCallback } from 'react';
33

4-
import { useOutsideClick } from '../../../hooks/useOutsideClick';
5-
64
/**
75
* useDropdownVisibility
86
* is used to control the visibility of a dropdown
@@ -19,7 +17,7 @@ export const useDropdownVisibility = <T extends HTMLElement>({
1917
reference,
2018
target,
2119
}: {
22-
reference?: RefObject<T>;
20+
reference: RefObject<T>;
2321
target: RefObject<T>;
2422
}): {
2523
isVisible: boolean;
@@ -28,15 +26,8 @@ export const useDropdownVisibility = <T extends HTMLElement>({
2826
const [isVisible, toggle] = useToggle(false);
2927

3028
useOutsideClick(
31-
target,
32-
useCallback(
33-
(event: MouseEvent) => {
34-
if (!reference || !reference.current || !reference.current.contains(event.target as Node)) {
35-
toggle(false);
36-
}
37-
},
38-
[reference, toggle],
39-
),
29+
[target, reference],
30+
useCallback(() => toggle(false), [toggle]),
4031
);
4132

4233
return {

‎package-lock.json‎

Lines changed: 106 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,8 +177,8 @@
177177
"@rocket.chat/apps-engine": "^1.29.1",
178178
"@rocket.chat/css-in-js": "^0.31.0",
179179
"@rocket.chat/emitter": "^0.31.0",
180-
"@rocket.chat/fuselage": "^0.31.0",
181-
"@rocket.chat/fuselage-hooks": "^0.6.3-dev.385",
180+
"@rocket.chat/fuselage": "^0.6.3-dev.392",
181+
"@rocket.chat/fuselage-hooks": "^0.6.3-dev.392",
182182
"@rocket.chat/fuselage-polyfills": "^0.31.0",
183183
"@rocket.chat/fuselage-tokens": "^0.31.0",
184184
"@rocket.chat/fuselage-ui-kit": "^0.31.0",

0 commit comments

Comments
 (0)