linkmore-design/es/hooks/useFullscreen/index.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useState, useRef, useEffect } from 'react';
var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
var isFunction = function isFunction(value) {
  return typeof value === 'function';
};
var getTargetElement = function getTargetElement(target, defaultElement) {
  if (!isBrowser) {
    return undefined;
  }
  if (!target) {
    return defaultElement;
  }
  var targetElement;
  if (isFunction(target)) {
    targetElement = target();
  } else if ('current' in target) {
    targetElement = target.current;
  } else {
    targetElement = target;
  }
  return targetElement;
};
var fullScreenCssText = 'position: fixed;width: 100%;height:100%;top:0;left:0;z-index:1100;background-color: #fff;padding: 16px;';
var useFullscreen = function useFullscreen(target, options) {
  var _ref = options || {},
    onExit = _ref.onExit,
    onEnter = _ref.onEnter;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isFullscreen = _useState2[0],
    setIsFullscreen = _useState2[1];
  var originCssTextRef = useRef('');
  var eleRef = useRef(null);
  var cloneEleRef = useRef(null);
  var enterFullscreen = function enterFullscreen() {
    onEnter === null || onEnter === void 0 ? void 0 : onEnter();
    setIsFullscreen(true);
    var el = getTargetElement(target);
    if (!eleRef.current) {
      eleRef.current = el;
      var originCssText = el.style.cssText;
      originCssTextRef.current = originCssText;
    }
    eleRef.current.style.cssText = "".concat(originCssTextRef.current).concat(fullScreenCssText);
    try {
      var _eleRef$current;
      cloneEleRef.current = (_eleRef$current = eleRef.current) === null || _eleRef$current === void 0 ? void 0 : _eleRef$current.cloneNode(true);
      document.body.appendChild(cloneEleRef.current);
      eleRef.current.style.cssText = "".concat(originCssTextRef.current).concat(fullScreenCssText, "display: none;");
    } catch (_unused) {
      console.log('fullScreen error');
    }
    // message.info({content: '使用 Esc 键可退出全屏模式', key: 'tip'})
  };

  var exitFullscreen = function exitFullscreen() {
    onExit === null || onExit === void 0 ? void 0 : onExit();
    setIsFullscreen(false);
    if (eleRef.current) {
      eleRef.current.style.cssText = "".concat(originCssTextRef.current);
      try {
        var _document$body$remove, _document$body;
        (_document$body$remove = (_document$body = document.body).removeChild) === null || _document$body$remove === void 0 ? void 0 : _document$body$remove.call(_document$body, cloneEleRef.current);
      } catch (_unused2) {
        console.log('fullScreen error');
      }
    }
  };
  var toggleFullscreen = function toggleFullscreen() {
    if (isFullscreen) {
      exitFullscreen();
    } else {
      enterFullscreen();
    }
  };
  useEffect(function () {
    var fn = function fn(event) {
      if (event.keyCode === 27) {
        console.log(1);
        exitFullscreen();
      }
    };
    window.addEventListener('keydown', fn);
    return function () {
      window.removeEventListener('keydown', fn);
    };
  }, []);
  return {
    isFullscreen: isFullscreen,
    enterFullscreen: enterFullscreen,
    exitFullscreen: exitFullscreen,
    toggleFullscreen: toggleFullscreen
  };
};
export default useFullscreen;