└── useOutsideClick.jsx


/useOutsideClick.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | import { selectOutsideName } from '../UI/SelectOutside/SelectOutside.service';
 3 | 
 4 | export const useOutsideClick = ({ callback, ref }) => {
 5 |   const handleClick = (event) => {
 6 |     const path = event.composedPath ? event.composedPath() : event.path;
 7 |     //console.log(path);
 8 |     if (ref.current && !path?.includes(ref.current)) {
 9 |       //find in path element with name select-outside
10 | 
11 |       const selectOutside = path.find((el) =>
12 |         el?.getAttribute
13 |           ? el?.getAttribute('name') === selectOutsideName
14 |           : false
15 |       );
16 |       if (selectOutside) return;
17 |       callback(event);
18 |     }
19 |   };
20 | 
21 |   useEffect(() => {
22 |     document.addEventListener('click', handleClick);
23 |     return () => {
24 |       document.removeEventListener('click', handleClick);
25 |     };
26 |   });
27 | };
28 | 


--------------------------------------------------------------------------------