this repo has no description
It's time to use CloseWatcher
It shipped since Chrome 120 https://chromestatus.com/feature/4722261258928128
+28
-1
+9
src/components/compose.jsx
+9
src/components/compose.jsx
···
28
28
getCurrentInstanceConfiguration,
29
29
} from '../utils/store-utils';
30
30
import supports from '../utils/supports';
31
+
import useCloseWatcher from '../utils/useCloseWatcher';
31
32
import useInterval from '../utils/useInterval';
32
33
import visibilityIconsMap from '../utils/visibility-icons-map';
33
34
···
416
417
};
417
418
useEffect(updateCharCount, []);
418
419
420
+
const supportsCloseWatcher = window.CloseWatcher;
419
421
const escDownRef = useRef(false);
420
422
useHotkeys(
421
423
'esc',
···
424
426
// This won't be true if this event is already handled and not propagated 🤞
425
427
},
426
428
{
429
+
enabled: !supportsCloseWatcher,
427
430
enableOnFormTags: true,
428
431
},
429
432
);
···
436
439
escDownRef.current = false;
437
440
},
438
441
{
442
+
enabled: !supportsCloseWatcher,
439
443
enableOnFormTags: true,
440
444
// Use keyup because Esc keydown will close the confirm dialog on Safari
441
445
keyup: true,
···
448
452
},
449
453
},
450
454
);
455
+
useCloseWatcher(() => {
456
+
if (!standalone && confirmClose()) {
457
+
onClose();
458
+
}
459
+
}, [standalone, confirmClose, onClose]);
451
460
452
461
const prevBackgroundDraft = useRef({});
453
462
const draftKey = () => {
+5
-1
src/components/modal.jsx
+5
-1
src/components/modal.jsx
···
4
4
import { useEffect, useRef } from 'preact/hooks';
5
5
import { useHotkeys } from 'react-hotkeys-hook';
6
6
7
+
import useCloseWatcher from '../utils/useCloseWatcher';
8
+
7
9
const $modalContainer = document.getElementById('modal-container');
8
10
9
11
function Modal({ children, onClose, onClick, class: className }) {
···
20
22
return () => clearTimeout(timer);
21
23
}, []);
22
24
25
+
const supportsCloseWatcher = window.CloseWatcher;
23
26
const escRef = useHotkeys(
24
27
'esc',
25
28
() => {
···
28
31
}, 0);
29
32
},
30
33
{
31
-
enabled: !!onClose,
34
+
enabled: !supportsCloseWatcher && !!onClose,
32
35
// Using keyup and setTimeout above
33
36
// This will run "later" to prevent clash with esc handlers from other components
34
37
keydown: false,
···
36
39
},
37
40
[onClose],
38
41
);
42
+
useCloseWatcher(onClose, [onClose]);
39
43
40
44
const Modal = (
41
45
<div
+14
src/utils/useCloseWatcher.js
+14
src/utils/useCloseWatcher.js
···
1
+
import { useEffect } from 'preact/hooks';
2
+
3
+
function useCloseWatcher(fn, deps = []) {
4
+
if (!fn || typeof fn !== 'function') return;
5
+
useEffect(() => {
6
+
const watcher = new CloseWatcher();
7
+
watcher.addEventListener('close', fn);
8
+
return () => {
9
+
watcher.destroy();
10
+
};
11
+
}, deps);
12
+
}
13
+
14
+
export default window.CloseWatcher ? useCloseWatcher : () => {};