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

React components for building web UI in Azure DevOps

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