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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{EventManagement}from"../../Core/EventManagement";import{TimerManagement}from"../../Core/TimerManagement";import{css}from"../../Util";const ResizeDelayMs=100;class ResponsiveViewport extends React.Component{constructor(e){super(e),this._onAsyncResize=()=>{this._resize()},this._resolveElement=e=>{this._element=e};e=e.initialWidth;this.events=new EventManagement,this.timers=new TimerManagement,this.state={activeBreakpoints:null==e?[]:this._getActiveBreakpoints(e)},this._onAsyncResize=this.timers.throttle(this._onAsyncResize,ResizeDelayMs,{leading:!1})}componentDidMount(){this.events.addEventListener(window,"resize",this._onAsyncResize),this._onAsyncResize()}componentWillUnmount(){this.events.removeAllListeners(),this.timers.dispose()}shouldComponentUpdate(e,t){if(this.props!==e)return!0;e=t.activeBreakpoints;const s=this.state.activeBreakpoints;return e.length!==s.length||e.some((e,t)=>e!==s[t])}render(){var{tag:e="div",className:t,children:s,onRenderContent:i}=this.props,n=this.state["activeBreakpoints"],i=i&&i(n)||s;return React.createElement(e,{className:css(t,...n&&n.map(e=>e.className)),ref:this._resolveElement},i)}measure(){this._resize()}_resize(){var e=this._element.getBoundingClientRect()["width"];this.setState({activeBreakpoints:this._getActiveBreakpoints(e)})}_getActiveBreakpoints(t){var e=this.props["breakPoints"];return e.filter(e=>!(0<=e.minWidth&&t<e.minWidth||0<=e.maxWidth&&t>=e.maxWidth))}}export{ResponsiveViewport};