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

🌈 🚀lm组件库。🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
const isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
const isFunction = value => typeof value === 'function';
const getTargetElement = (target, defaultElement) => {
  if (!isBrowser) {
    return undefined;
  }
  if (!target) {
    return defaultElement;
  }
  let targetElement;
  if (isFunction(target)) {
    targetElement = target();
  } else if ('current' in target) {
    targetElement = target.current;
  } else {
    targetElement = target;
  }
  return targetElement;
};
const fullScreenCssText = 'position: fixed;width: 100%;height:100%;top:0;left:0;z-index:1100;background-color: #fff;padding: 16px;';
const useFullscreen = (target, options) => {
  const {
    onExit,
    onEnter
  } = options || {};
  const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
  const originCssTextRef = (0, _react.useRef)('');
  const eleRef = (0, _react.useRef)(null);
  const cloneEleRef = (0, _react.useRef)(null);
  const enterFullscreen = () => {
    onEnter?.();
    setIsFullscreen(true);
    const el = getTargetElement(target);
    if (!eleRef.current) {
      eleRef.current = el;
      const originCssText = el.style.cssText;
      originCssTextRef.current = originCssText;
    }
    eleRef.current.style.cssText = `${originCssTextRef.current}${fullScreenCssText}`;
    try {
      cloneEleRef.current = eleRef.current?.cloneNode(true);
      document.body.appendChild(cloneEleRef.current);
      eleRef.current.style.cssText = `${originCssTextRef.current}${fullScreenCssText}display: none;`;
    } catch {
      console.log('fullScreen error');
    }
    // message.info({content: '使用 Esc 键可退出全屏模式', key: 'tip'})
  };

  const exitFullscreen = () => {
    onExit?.();
    setIsFullscreen(false);
    if (eleRef.current) {
      eleRef.current.style.cssText = `${originCssTextRef.current}`;
      try {
        document.body.removeChild?.(cloneEleRef.current);
      } catch {
        console.log('fullScreen error');
      }
    }
  };
  const toggleFullscreen = () => {
    if (isFullscreen) {
      exitFullscreen();
    } else {
      enterFullscreen();
    }
  };
  (0, _react.useEffect)(() => {
    const fn = event => {
      if (event.keyCode === 27) {
        console.log(1);
        exitFullscreen();
      }
    };
    window.addEventListener('keydown', fn);
    return () => {
      window.removeEventListener('keydown', fn);
    };
  }, []);
  return {
    isFullscreen,
    enterFullscreen,
    exitFullscreen,
    toggleFullscreen
  };
};
var _default = useFullscreen;
exports.default = _default;