[d565449] | 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 | };
|
---|