gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Unbind window listeners on content drawer

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-05 02:46:27 +01:00
parent a42e92781a
commit fe458e0790
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pages/[roadmap]/interactive.tsx
View File

@ -38,13 +38,13 @@ function RoadmapRenderer(props: RoadmapProps) {
// Event bindings for the roadmap interactivity // Event bindings for the roadmap interactivity
useEffect(() => { useEffect(() => {
window.addEventListener('keydown', (event: KeyboardEvent) => { function keydownListener(event: KeyboardEvent) {
if (event.key.toLowerCase() === 'escape') { if (event.key.toLowerCase() === 'escape') {
setGroupId(''); setGroupId('');
} }
}); }
window.addEventListener('click', (event: MouseEvent) => { function clickListener(event: MouseEvent) {
const targetGroup = (event?.target as HTMLElement)?.closest('g'); const targetGroup = (event?.target as HTMLElement)?.closest('g');
const groupId = targetGroup?.dataset?.groupId; const groupId = targetGroup?.dataset?.groupId;
if (!targetGroup || !groupId) { if (!targetGroup || !groupId) {
@ -59,7 +59,15 @@ function RoadmapRenderer(props: RoadmapProps) {
// e.g. 100-internet:how-does-the-internet-work // e.g. 100-internet:how-does-the-internet-work
// will be translated to `internet:how-does-the-internet-work` // will be translated to `internet:how-does-the-internet-work`
setGroupId(groupId.replace(/^\d+-/, '')); setGroupId(groupId.replace(/^\d+-/, ''));
}); }
window.addEventListener('keydown', keydownListener);
window.addEventListener('click', clickListener);
return () => {
window.removeEventListener('keydown', keydownListener);
window.removeEventListener('click', clickListener);
}
}, []); }, []);
useEffect(() => { useEffect(() => {