@nake/babel-preset/tests/react.test.js

Babel preset for transforming your future JS/JSX and TypeScript code

import React from 'react';

function withFullscreen(WrappedComponent) {
  return class extends WrappedComponent {
    constructor(props) {
      super(props);
      this.state = {
        fullscreen: false,
      };
    }

    // 全图监控全屏切换处理
    onFullScreenHandler = element => {
      if (document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen) {
        if (document.exitFullscreen) document.exitFullscreen();
        if (document.webkitExitFullscreen) document.webkitExitFullscreen();
        if (document.mozCancelFullScreen) document.mozCancelFullScreen();
        if (document.msExitFullscreen) document.msExitFullscreen();
      } else {
        if (element.requestFullscreen) element.requestFullscreen();
        if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
        if (element.mozRequestFullScreen) element.mozRequestFullScreen();
        if (element.msRequestFullscreen) element.msRequestFullscreen();
      }
    };

    componentDidMount() {
      // 增加全屏切换事件监听
      const onfullscreenchange = () => {
        const fullscreen =
          document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
        this.setState({ fullscreen });
      };
      document.onfullscreenchange = onfullscreenchange;
      document.onwebkitfullscreenchange = onfullscreenchange;
      document.onmozfullscreenchange = onfullscreenchange;
      document.MSFullscreenChange = onfullscreenchange;
    }

    render() {
      const { fullscreen } = this.state;
      return (
        <WrappedComponent
          fullscreen={fullscreen}
          onFullScreenHandler={this.onFullScreenHandler}
          {...this.props}
        />
      );
    }
  };
}

export default withFullscreen;