GovernmentDataResourceCenter/super-screen/client/src/components/full-screen-container.js

import React, { useLayoutEffect, forwardRef, useEffect } from 'react';

import { useAutoResize } from '@jiaminghi/data-view-react';
import './style.less'
const FullScreenContainer = forwardRef(({
  children, className, style, designWidth = 1920, designHeight = 1080, onlyAutoSize = false, divRef,

}, ref) => {
  const { domRef } = useAutoResize(ref);

  useEffect(() => {
    const innerWidth = document.body.clientWidth;
    const innerHeight = document.body.clientHeight;
    const w = document.body.clientWidth / designWidth;
    const h = document.body.clientHeight / designHeight;
    const scale = w < h ? w : h;
    const divRect = divRef?.current?.getBoundingClientRect();
    if (onlyAutoSize) {
      Object.assign(domRef.current.style, {
        width: `${divRect?.width || 0}px`,
        height: `${divRect?.height || 0}px`,
        // width: '100vw',
        // height: '100vh',
        position: 'fixed',
        zIndex: 999,
        top: `${divRect?.top || 0}px`,
        left: `${divRect?.left || 0}px`,
      });
    } else {
      const isSuperScreen = innerWidth > 3000 && innerHeight >= 976 && innerHeight <= 1080 ? true : false
      Object.assign(domRef.current.style, {
        width: isSuperScreen ? '100vw' : `${designWidth}px`,
        height: isSuperScreen ? '100vh' : `${designHeight}px`,
      });
      domRef.current.style.transform = `scale(${scale}) translate(-50%, -50%)`;
    }
  });

  return (
    <div
      className={onlyAutoSize ? 'dv-screen-container' : 'dv-full-screen-container'}
      style={style}
      ref={domRef}
    >
      {children}
    </div>
  );
});

export default FullScreenContainer;