125 lines
4.4 KiB
Plaintext
125 lines
4.4 KiB
Plaintext
import { __read } from "tslib";
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import screenfull from 'screenfull';
|
|
import useLatest from '../useLatest';
|
|
import useMemoizedFn from '../useMemoizedFn';
|
|
import { getTargetElement } from '../utils/domTarget';
|
|
import { isBoolean } from '../utils';
|
|
var useFullscreen = function (target, options) {
|
|
var _a = options || {}, onExit = _a.onExit, onEnter = _a.onEnter, _b = _a.pageFullscreen, pageFullscreen = _b === void 0 ? false : _b;
|
|
var _c = isBoolean(pageFullscreen) || !pageFullscreen ? {} : pageFullscreen, _d = _c.className, className = _d === void 0 ? 'ahooks-page-fullscreen' : _d, _e = _c.zIndex, zIndex = _e === void 0 ? 999999 : _e;
|
|
var onExitRef = useLatest(onExit);
|
|
var onEnterRef = useLatest(onEnter);
|
|
// The state of full screen may be changed by other scripts/components,
|
|
// so the initial value needs to be computed dynamically.
|
|
var _f = __read(useState(getIsFullscreen), 2), state = _f[0], setState = _f[1];
|
|
var stateRef = useRef(getIsFullscreen());
|
|
function getIsFullscreen() {
|
|
return (screenfull.isEnabled &&
|
|
!!screenfull.element &&
|
|
screenfull.element === getTargetElement(target));
|
|
}
|
|
var invokeCallback = function (fullscreen) {
|
|
var _a, _b;
|
|
if (fullscreen) {
|
|
(_a = onEnterRef.current) === null || _a === void 0 ? void 0 : _a.call(onEnterRef);
|
|
}
|
|
else {
|
|
(_b = onExitRef.current) === null || _b === void 0 ? void 0 : _b.call(onExitRef);
|
|
}
|
|
};
|
|
var updateFullscreenState = function (fullscreen) {
|
|
// Prevent repeated calls when the state is not changed.
|
|
if (stateRef.current !== fullscreen) {
|
|
invokeCallback(fullscreen);
|
|
setState(fullscreen);
|
|
stateRef.current = fullscreen;
|
|
}
|
|
};
|
|
var onScreenfullChange = function () {
|
|
var fullscreen = getIsFullscreen();
|
|
updateFullscreenState(fullscreen);
|
|
};
|
|
var togglePageFullscreen = function (fullscreen) {
|
|
var el = getTargetElement(target);
|
|
if (!el) {
|
|
return;
|
|
}
|
|
var styleElem = document.getElementById(className);
|
|
if (fullscreen) {
|
|
el.classList.add(className);
|
|
if (!styleElem) {
|
|
styleElem = document.createElement('style');
|
|
styleElem.setAttribute('id', className);
|
|
styleElem.textContent = "\n .".concat(className, " {\n position: fixed; left: 0; top: 0; right: 0; bottom: 0;\n width: 100% !important; height: 100% !important;\n z-index: ").concat(zIndex, ";\n }");
|
|
el.appendChild(styleElem);
|
|
}
|
|
}
|
|
else {
|
|
el.classList.remove(className);
|
|
if (styleElem) {
|
|
styleElem.remove();
|
|
}
|
|
}
|
|
updateFullscreenState(fullscreen);
|
|
};
|
|
var enterFullscreen = function () {
|
|
var el = getTargetElement(target);
|
|
if (!el) {
|
|
return;
|
|
}
|
|
if (pageFullscreen) {
|
|
togglePageFullscreen(true);
|
|
return;
|
|
}
|
|
if (screenfull.isEnabled) {
|
|
try {
|
|
screenfull.request(el);
|
|
}
|
|
catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
};
|
|
var exitFullscreen = function () {
|
|
var el = getTargetElement(target);
|
|
if (!el) {
|
|
return;
|
|
}
|
|
if (pageFullscreen) {
|
|
togglePageFullscreen(false);
|
|
return;
|
|
}
|
|
if (screenfull.isEnabled && screenfull.element === el) {
|
|
screenfull.exit();
|
|
}
|
|
};
|
|
var toggleFullscreen = function () {
|
|
if (state) {
|
|
exitFullscreen();
|
|
}
|
|
else {
|
|
enterFullscreen();
|
|
}
|
|
};
|
|
useEffect(function () {
|
|
if (!screenfull.isEnabled || pageFullscreen) {
|
|
return;
|
|
}
|
|
screenfull.on('change', onScreenfullChange);
|
|
return function () {
|
|
screenfull.off('change', onScreenfullChange);
|
|
};
|
|
}, []);
|
|
return [
|
|
state,
|
|
{
|
|
enterFullscreen: useMemoizedFn(enterFullscreen),
|
|
exitFullscreen: useMemoizedFn(exitFullscreen),
|
|
toggleFullscreen: useMemoizedFn(toggleFullscreen),
|
|
isEnabled: screenfull.isEnabled,
|
|
},
|
|
];
|
|
};
|
|
export default useFullscreen;
|