记录reactHooks实现某个页面的全屏

偷师学艺来的，先存着。

import React, { useState, useMemo, useEffect } from 'react';
import { Button, Icon } from '组件库';

const CustomIcon = Icon.createFromIconfontCN({ scriptUrl: '一个icon的js文件' });

interface Props {
  dom: Element;
  className?: string;
}

const FullscreenBtn = (props: Props) => {
  const { dom, className } = props;
  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);

  useEffect(() => {
    const handleChangeIsFullscreen = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener('fullscreenchange', handleChangeIsFullscreen);
    return () => {
      document.removeEventListener('fullscreenchange', handleChangeIsFullscreen);
    };
  }, []);

  // 全屏
  const handleFullscreen = () => {
    dom?.requestFullscreen();
  };

  // 退出全屏
  const handleExitFullscreen = () => {
    document.exitFullscreen();
  };

  const text: string = useMemo(() => (isFullscreen ? '退出全屏' : '全屏'), [isFullscreen]);

  return (
    <Button
      className={className}
      onClick={isFullscreen ? handleExitFullscreen : handleFullscreen}
    >
      <CustomIcon
        size="small"
        style={{ marginRight: 5 }}
        type={isFullscreen ? 'icon-full-screen-cancel' : 'icon-full-screen'}
      />
      {text}
    </Button>
  );
};

export default FullscreenBtn;