1 | import { useEffect, useRef } from 'react';
|
---|
2 | import { isBrowser, off, on } from './misc/util';
|
---|
3 | export function getClosestBody(el) {
|
---|
4 | if (!el) {
|
---|
5 | return null;
|
---|
6 | }
|
---|
7 | else if (el.tagName === 'BODY') {
|
---|
8 | return el;
|
---|
9 | }
|
---|
10 | else if (el.tagName === 'IFRAME') {
|
---|
11 | var document_1 = el.contentDocument;
|
---|
12 | return document_1 ? document_1.body : null;
|
---|
13 | }
|
---|
14 | else if (!el.offsetParent) {
|
---|
15 | return null;
|
---|
16 | }
|
---|
17 | return getClosestBody(el.offsetParent);
|
---|
18 | }
|
---|
19 | function preventDefault(rawEvent) {
|
---|
20 | var e = rawEvent || window.event;
|
---|
21 | // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
|
---|
22 | if (e.touches.length > 1)
|
---|
23 | return true;
|
---|
24 | if (e.preventDefault)
|
---|
25 | e.preventDefault();
|
---|
26 | return false;
|
---|
27 | }
|
---|
28 | var isIosDevice = isBrowser &&
|
---|
29 | window.navigator &&
|
---|
30 | window.navigator.platform &&
|
---|
31 | /iP(ad|hone|od)/.test(window.navigator.platform);
|
---|
32 | var bodies = new Map();
|
---|
33 | var doc = typeof document === 'object' ? document : undefined;
|
---|
34 | var documentListenerAdded = false;
|
---|
35 | export default !doc
|
---|
36 | ? function useLockBodyMock(_locked, _elementRef) {
|
---|
37 | if (_locked === void 0) { _locked = true; }
|
---|
38 | }
|
---|
39 | : function useLockBody(locked, elementRef) {
|
---|
40 | if (locked === void 0) { locked = true; }
|
---|
41 | var bodyRef = useRef(doc.body);
|
---|
42 | elementRef = elementRef || bodyRef;
|
---|
43 | var lock = function (body) {
|
---|
44 | var bodyInfo = bodies.get(body);
|
---|
45 | if (!bodyInfo) {
|
---|
46 | bodies.set(body, { counter: 1, initialOverflow: body.style.overflow });
|
---|
47 | if (isIosDevice) {
|
---|
48 | if (!documentListenerAdded) {
|
---|
49 | on(document, 'touchmove', preventDefault, { passive: false });
|
---|
50 | documentListenerAdded = true;
|
---|
51 | }
|
---|
52 | }
|
---|
53 | else {
|
---|
54 | body.style.overflow = 'hidden';
|
---|
55 | }
|
---|
56 | }
|
---|
57 | else {
|
---|
58 | bodies.set(body, {
|
---|
59 | counter: bodyInfo.counter + 1,
|
---|
60 | initialOverflow: bodyInfo.initialOverflow,
|
---|
61 | });
|
---|
62 | }
|
---|
63 | };
|
---|
64 | var unlock = function (body) {
|
---|
65 | var bodyInfo = bodies.get(body);
|
---|
66 | if (bodyInfo) {
|
---|
67 | if (bodyInfo.counter === 1) {
|
---|
68 | bodies.delete(body);
|
---|
69 | if (isIosDevice) {
|
---|
70 | body.ontouchmove = null;
|
---|
71 | if (documentListenerAdded) {
|
---|
72 | off(document, 'touchmove', preventDefault);
|
---|
73 | documentListenerAdded = false;
|
---|
74 | }
|
---|
75 | }
|
---|
76 | else {
|
---|
77 | body.style.overflow = bodyInfo.initialOverflow;
|
---|
78 | }
|
---|
79 | }
|
---|
80 | else {
|
---|
81 | bodies.set(body, {
|
---|
82 | counter: bodyInfo.counter - 1,
|
---|
83 | initialOverflow: bodyInfo.initialOverflow,
|
---|
84 | });
|
---|
85 | }
|
---|
86 | }
|
---|
87 | };
|
---|
88 | useEffect(function () {
|
---|
89 | var body = getClosestBody(elementRef.current);
|
---|
90 | if (!body) {
|
---|
91 | return;
|
---|
92 | }
|
---|
93 | if (locked) {
|
---|
94 | lock(body);
|
---|
95 | }
|
---|
96 | else {
|
---|
97 | unlock(body);
|
---|
98 | }
|
---|
99 | }, [locked, elementRef.current]);
|
---|
100 | // clean up, on un-mount
|
---|
101 | useEffect(function () {
|
---|
102 | var body = getClosestBody(elementRef.current);
|
---|
103 | if (!body) {
|
---|
104 | return;
|
---|
105 | }
|
---|
106 | return function () {
|
---|
107 | unlock(body);
|
---|
108 | };
|
---|
109 | }, []);
|
---|
110 | };
|
---|