azure-devops-ui/Components/ResponsiveLayout/ResponsiveLayout.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{shimRef}from"../../Util";import{ResponsiveOrientation}from"./ResponsiveLayout.Props";class ResponsiveLayout extends React.Component{constructor(){super(...arguments),this.childDetails=[],this.childKeys=[],this.containerRef=React.createRef(),this.hiddenCount=0,this.layoutTimeout=0,this.updateLayout=()=>{var n=this.containerRef.current;if(n&&n.children.length){var t=this.hiddenCount,h=n.getBoundingClientRect();let e=0,i=0,s=!1;this.childDetails&&n.children.length===this.childDetails.length||(this.childDetails=[],s=!0);for(let t=0;t<n.children.length;t++){var o,l,r=n.children[t].getBoundingClientRect();s?(o={appliedSize:0,clientRect:r},(l=window.getComputedStyle(n.children[t]))&&(o.margins={left:parseInt(l.getPropertyValue("margin-left")||"0"),right:parseInt(l.getPropertyValue("margin-right")||"0")}),this.childDetails.push(o)):this.childDetails[t].clientRect=r,this.props.ignoredChildren&&0<=this.props.ignoredChildren.indexOf(t)&&(i+=this.props.orientation===ResponsiveOrientation.Vertical?r.height:r.width)}e=this.props.orientation===ResponsiveOrientation.Vertical?Math.floor(this.childDetails[this.childDetails.length-1].clientRect.bottom-this.childDetails[0].clientRect.top):Math.floor(this.childDetails[this.childDetails.length-1].clientRect.right-this.childDetails[0].clientRect.left),e-=Math.floor(i);h=Math.floor(this.props.orientation===ResponsiveOrientation.Vertical?h.height:h.width);if(h<=e){let t=h-e;for(;t<0&&this.hiddenCount<this.props.responsiveChildren.length;){var a=this.props.responsiveChildren[this.hiddenCount],a=this.childDetails[a],d=Math.ceil(this.props.orientation===ResponsiveOrientation.Vertical?a.clientRect.height:a.clientRect.width);d+=(a.margins?a.margins.left+a.margins.right:0)||8,t+=d,a.hidden=!0,a.appliedSize=d,this.hiddenCount++}}else if(h>e){let t=h-e;for(;0<this.hiddenCount;){var c=this.props.responsiveChildren[this.hiddenCount-1],c=this.childDetails[c];if(c.appliedSize>=t)break;t-=c.appliedSize,c.hidden=!1,this.hiddenCount--}}t!=this.hiddenCount&&(this.layoutTimeout=window.setTimeout(()=>{this.layoutTimeout=0,this.props.onLayoutChange&&this.props.onLayoutChange(this.hiddenCount),this.forceUpdate()},0))}}}render(){const i=[];var t=React.Children.only(this.props.children),t=(this.containerRef=shimRef(t),React.cloneElement(t,Object.assign(Object.assign({},t.props),{ref:this.containerRef}),React.Children.map(t.props.children,(t,e)=>(t.key||(console.warn("All children MUST have a unique key"),t.key=e),i[e]=t.key,this.childDetails&&this.childDetails[e]&&this.childDetails[e].hidden?React.createElement("div",{key:"PH"+e,className:"responsive-placeholder"}):t))));if(this.childKeys)if(this.childKeys.length!==i.length)this.resetLayout();else for(let t=0;t<i.length;t++)if(this.childKeys[t]!==i[t]){this.resetLayout();break}return this.childKeys=i,t}componentDidMount(){window.addEventListener("resize",this.updateLayout),this.updateLayout()}componentDidUpdate(){this.updateLayout()}componentWillUnmount(){this.layoutTimeout&&(window.clearTimeout(this.layoutTimeout),this.layoutTimeout=0),window.removeEventListener("resize",this.updateLayout)}resetLayout(){this.childDetails=void 0,this.hiddenCount=0}}export{ResponsiveLayout};