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

React components for building web UI in Azure DevOps

import{__extends,__spreadArray}from"tslib";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";var ResizeDelayMs=100,ResponsiveViewport=function(n){function e(e){var t=n.call(this,e)||this,e=(t._onAsyncResize=function(){t._resize()},t._resolveElement=function(e){t._element=e},e.initialWidth);return t.events=new EventManagement,t.timers=new TimerManagement,t.state={activeBreakpoints:null==e?[]:t._getActiveBreakpoints(e)},t._onAsyncResize=t.timers.throttle(t._onAsyncResize,ResizeDelayMs,{leading:!1}),t}return __extends(e,n),e.prototype.componentDidMount=function(){this.events.addEventListener(window,"resize",this._onAsyncResize),this._onAsyncResize()},e.prototype.componentWillUnmount=function(){this.events.removeAllListeners(),this.timers.dispose()},e.prototype.shouldComponentUpdate=function(e,t){var n;return this.props!==e||(e=t.activeBreakpoints,n=this.state.activeBreakpoints,e.length!==n.length)||e.some(function(e,t){return e!==n[t]})},e.prototype.render=function(){var e=this.props,t=e.tag,t=void 0===t?"div":t,n=e.className,i=e.children,e=e.onRenderContent,o=this.state.activeBreakpoints,e=e&&e(o)||i;return React.createElement(t,{className:css.apply(void 0,__spreadArray([n],o&&o.map(function(e){return e.className}),!1)),ref:this._resolveElement},e)},e.prototype.measure=function(){this._resize()},e.prototype._resize=function(){var e=this._element.getBoundingClientRect().width;this.setState({activeBreakpoints:this._getActiveBreakpoints(e)})},e.prototype._getActiveBreakpoints=function(t){return this.props.breakPoints.filter(function(e){return!(0<=e.minWidth&&t<e.minWidth||0<=e.maxWidth&&t>=e.maxWidth)})},e}(React.Component);export{ResponsiveViewport};