ad8226a5c3
* WIP - merge edition of account name and tags * [WIP] - tests * Apply test improvements * Improve tests * Improve tests and use useCallback * WIP - add cancel button * Outside click * Add more tests * Apply styling * Add opacity on not editable elements * Remove unnecessary code and fix type of sidebar ref * Disable eslint rule * Place edit button within account menu buttons * Adjust test setup * Ato-lint fixes * Update styles * Apply review suggestions * Remove unused styles and change type of sidebar ref * Remove onCancel from useAccountInfo hook * Fix issue with edit button * Apply review suggestions, remove tests * Adjust tests * Simplify tests * Apply lint fixes * Change layout of buttons Co-authored-by: MiZiet <michalzietalak@o2.pl> Co-authored-by: Jaco Greeff <jacogr@gmail.com>
25 lines
831 B
TypeScript
25 lines
831 B
TypeScript
// Copyright 2017-2021 @polkadot/react-components authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import { RefObject, useCallback, useEffect } from 'react';
|
|
|
|
function getClickedElement (refs: React.RefObject<HTMLDivElement>[], e: MouseEvent) {
|
|
return refs.find((ref) => ref.current && ref.current.contains(e.target as HTMLElement));
|
|
}
|
|
|
|
export const useOutsideClick = (elements: RefObject<HTMLDivElement>[], callback: () => void): void => {
|
|
const handleClick = useCallback((e: MouseEvent) => {
|
|
if (elements.length && !getClickedElement(elements, e)) {
|
|
callback();
|
|
}
|
|
}, [elements, callback]);
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('click', handleClick, true);
|
|
|
|
return () => {
|
|
document.removeEventListener('click', handleClick, true);
|
|
};
|
|
}, [handleClick, callback]);
|
|
};
|