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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Callout.css";import*as React from"react";import{FocusWithin}from"../../FocusWithin";import{FocusZone}from"../../FocusZone";import{Portal}from"../../Portal";import{css,getSafeId,KeyCode}from"../../Util";import{Location,position,updateLayout}from"../../Utilities/Position";import{TimerManagement}from"../../Core/TimerManagement";import{SurfaceBackground,SurfaceContext}from"../../Surface";import{ContentJustification,ContentLocation,ContentOrientation,ContentSize}from"./Callout.Props";var Callout=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.calloutContent=React.createRef(),t}return __extends(t,e),t.prototype.render=function(){var t=this.props.portalProps;return React.createElement(Portal,__assign({},t,{className:css(t&&t.className,this.props.anchorElement&&"bolt-layout-relative")}),React.createElement(CalloutContent,__assign({ref:this.calloutContent},this.props)))},t.prototype.componentWillUnmount=function(){this.calloutContent.current&&this.calloutContent.current.portalWillUnmount()},t.prototype.updateLayout=function(){this.calloutContent.current&&this.calloutContent.current.updateLayout()},t.defaultProps={blurDismiss:!1,viewportChangeDismiss:!0},t}(React.Component),CalloutContent=function(e){function t(t){var n=e.call(this,t)||this;return n.calloutElement=React.createRef(),n.relayoutTimer=new TimerManagement,n.scrollListen=!1,n.scrollEvent=null,n.initialScreenWidth=window.innerWidth,n.onBlur=function(){n.props.onDismiss&&n.props.onDismiss()},n.onClick=function(t){n.props.lightDismiss&&!t.defaultPrevented&&(n.props.onDismiss&&n.props.onDismiss(),t.preventDefault())},n.onKeyDown=function(t){var e,o;n.props.escDismiss&&t.which===KeyCode.escape&&!t.defaultPrevented&&(n.props.onDismiss&&n.props.onDismiss(),t.preventDefault()),null!=(o=(e=n.props).onKeyDown)&&o.call(e,t)},n.onResize=function(){!0!==n.props.viewportChangeDismiss||n.initialScreenWidth===window.innerWidth&&document.activeElement&&("INPUT"===document.activeElement.tagName||"TEXTAREA"===document.activeElement.tagName)?n.props.updateLayout&&(n.relayoutTimer.clearAllTimers(),n.relayoutTimer.setTimeout(function(){n.updateLayout()},200)):n.props.onDismiss&&n.props.onDismiss()},n.onScroll=function(t){n.scrollListen&&(n.scrollEvent=t.nativeEvent)},n.onScrollDocument=function(t){var e;n.scrollListen&&(t===n.scrollEvent?n.scrollEvent=null:!0===n.props.viewportChangeDismiss?(e=n.props.anchorElement,t.target&&e&&t.target.contains(e)&&n.props.onDismiss&&n.props.onDismiss()):n.props.updateLayout&&n.relayoutTimer.setTimeout(function(){n.updateLayout()},50))},n.focusElement=document.activeElement,n.contentElement=t.contentRef||React.createRef(),n}return __extends(t,e),t.prototype.render=function(){var t,e=this,o=this.props,n=o.blurDismiss,i=o.contentJustification,r=o.contentLocation,s=o.contentOrientation,a=o.focuszoneProps,l=o.lightDismiss,c=o.modal,u=o.onAnimationEnd,p=o.onMouseEnter,m=o.onMouseLeave,o=o.anchorElement,n=(n&&a?t=React.createElement(FocusWithin,{onBlur:this.onBlur,updateStateOnFocusChange:!1},function(t){return React.createElement(FocusZone,__assign({},a),e.renderContent(t.onFocus,t.onBlur))}):(t=this.renderContent(),n&&(t=React.createElement(FocusWithin,{onBlur:this.onBlur,updateStateOnFocusChange:!1},t)),a&&(t=React.createElement(FocusZone,__assign({},a),t))),l?React.createElement("div",{className:css("absolute-fill bolt-light-dismiss",c&&"bolt-callout-modal"),onClick:this.onClick}):null);return React.createElement(SurfaceContext.Provider,{value:{background:SurfaceBackground.callout}},React.createElement("div",{className:"flex-row flex-grow"},React.createElement("div",{className:css(this.props.className,"bolt-callout absolute",void 0!==r&&"absolute-fill",i===ContentJustification.Start&&"justify-start",i===ContentJustification.Center&&"justify-center",i===ContentJustification.End&&"justify-end",r===ContentLocation.Start&&"flex-start",r===ContentLocation.Center&&"flex-center",r===ContentLocation.End&&"flex-end",s===ContentOrientation.Column&&"flex-column",s!==ContentOrientation.Column&&"flex-row",c&&!l&&"bolt-callout-modal"),id:getSafeId(this.props.id),onAnimationEnd:u,onMouseEnter:p,onMouseLeave:m,onKeyDown:this.onKeyDown,ref:this.calloutElement,role:this.props.role,tabIndex:-1},!o&&n,t),!!o&&n))},t.prototype.componentDidMount=function(){this.updateLayout(),this.props.anchorElement&&(window.addEventListener("resize",this.onResize),document.addEventListener("scroll",this.onScrollDocument,!0),this.scrollListen=!0)},t.prototype.componentDidUpdate=function(){this.props.updateLayout&&this.updateLayout()},t.prototype.componentWillUnmount=function(){this.scrollListen&&(document.removeEventListener("scroll",this.onScrollDocument,!0),window.removeEventListener("resize",this.onResize)),this.relayoutTimer&&this.relayoutTimer.clearAllTimers()},t.prototype.portalWillUnmount=function(){var t=this.contentElement.current,e=this.focusElement;e&&t&&t.contains(document.activeElement)&&window.setTimeout(function(){!t.contains(document.activeElement)&&document.activeElement!==document.body&&null!==document.activeElement||e.focus()},0)},t.prototype.updateLayout=function(){void 0===this.props.contentLocation&&this.calloutElement.current&&(position(this.calloutElement.current,this.props.calloutOrigin||{horizontal:Location.start,vertical:Location.start},this.props.anchorOffset,this.props.anchorElement,this.props.anchorOrigin,this.props.anchorPoint,this.props.anchorElement?5e3:0),this.props.fixedLayout||updateLayout(this.calloutElement.current,this.props.calloutOrigin||{horizontal:Location.start,vertical:Location.start},this.props.anchorOffset,this.props.anchorElement,this.props.anchorOrigin,this.props.anchorPoint,this.props.anchorElement?5e3:0))},t.prototype.renderContent=function(t,e){var o=this.props,n=o.contentJustification,i=o.contentOrientation,r=o.contentSize,s=o.height,o=o.width;return React.createElement("div",{"aria-describedby":getSafeId(this.props.ariaDescribedBy),"aria-label":this.props.ariaLabel,"aria-labelledby":getSafeId(this.props.ariaLabelledBy),"aria-modal":this.props.modal,className:css(this.props.contentClassName,"bolt-callout-content",this.props.contentShadow&&"bolt-callout-shadow",n===ContentJustification.Stretch&&"flex-grow",i===ContentOrientation.Column&&"flex-column",i===ContentOrientation.Row&&"flex-row",r===ContentSize.Small&&"bolt-callout-small",r===ContentSize.Medium&&"bolt-callout-medium",r===ContentSize.Large&&"bolt-callout-large",r===ContentSize.ExtraLarge&&"bolt-callout-extra-large",r===ContentSize.Auto&&"bolt-callout-auto"),onBlur:e,onFocus:t,onScroll:this.onScroll,ref:this.contentElement,role:this.props.role||"dialog",style:{height:s,width:o}},this.props.children)},t}(React.Component);export{Callout};