react-big-screen-scale/dist/react-big-screen-scale.cjs.production.min.js

一个还不错的react大屏缩放组件

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}exports.default=function(e){var n,c,o,u=e.width,l=void 0===u?1920:u,a=e.height,h=void 0===a?1080:a,d=e.autoScale,s=void 0===d||d,g=e.isfullScreen,f=void 0!==g&&g,v=e.containerStyle,w=e.wrapperStyle,y=e.children,p=t.useRef(null),m=t.useRef({width:0,height:0,originalWidth:0,originalHeight:0}),b=(n=function(){x(),H(),W()},void 0===c&&(c=400),function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];o&&clearTimeout(o),o=setTimeout((function(){n.apply(null,t),clearTimeout(o)}),c>0?c:100)}),x=function(){var e,t;l&&h?(m.current.width=l,m.current.height=h):(m.current.width=null==(e=p.current)?void 0:e.clientWidth,m.current.height=null==(t=p.current)?void 0:t.clientHeight),m.current.originalHeight&&m.current.originalWidth||(m.current.originalWidth=window.screen.width,m.current.originalHeight=window.screen.height)},H=function(){m.current.width&&m.current.height?(p.current.style.width=m.current.width+"px",p.current.style.height=m.current.height+"px"):(p.current.style.width=m.current.originalWidth+"px",p.current.style.height=m.current.originalHeight+"px")},W=function(){var e=document.body.clientWidth,t=document.body.clientHeight,r=e/+(m.current.width||m.current.originalWidth),i=t/+(m.current.height||m.current.originalHeight);f?p.current.style.transform="scale("+r+","+i+")":function(e){if(s){var t=p.current.clientWidth,r=p.current.clientHeight,i=document.body.clientWidth,n=document.body.clientHeight;p.current.style.transform="scale("+e+","+e+")";var c=Math.max((i-t*e)/2,0),o=Math.max((n-r*e)/2,0);"object"==typeof s&&(!s.x&&(c=0),!s.y&&(o=0)),p.current.style.margin=o+"px "+c+"px"}}(Math.min(r,i))};return t.useEffect((function(){return x(),H(),W(),window.addEventListener("resize",b),function(){window.removeEventListener("resize",b)}}),[]),r.createElement("section",{className:"react-big-screen-scale",style:i({},{overflow:"hidden",backgroundSize:"100% 100%",width:"100vw",height:"100vh"},v)},r.createElement("div",{ref:p,style:i({},{transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"500ms",position:"relative",overflow:"hidden",zIndex:100,transformOrigin:"left top"},w)},null!=y?y:"请传入被要包裹的组件"))};
//# sourceMappingURL=react-big-screen-scale.cjs.production.min.js.map