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

React components for building web UI in Azure DevOps

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";class Callout extends React.Component{constructor(){super(...arguments),this.calloutContent=React.createRef()}render(){var t=this.props["portalProps"];return React.createElement(Portal,Object.assign({},t,{className:css(t&&t.className,this.props.anchorElement&&"bolt-layout-relative")}),React.createElement(CalloutContent,Object.assign({ref:this.calloutContent},this.props)))}componentWillUnmount(){this.calloutContent.current&&this.calloutContent.current.portalWillUnmount()}updateLayout(){this.calloutContent.current&&this.calloutContent.current.updateLayout()}}Callout.defaultProps={blurDismiss:!1,viewportChangeDismiss:!0};class CalloutContent extends React.Component{constructor(t){super(t),this.calloutElement=React.createRef(),this.relayoutTimer=new TimerManagement,this.scrollListen=!1,this.scrollEvent=null,this.initialScreenWidth=window.innerWidth,this.onBlur=()=>{this.props.onDismiss&&this.props.onDismiss()},this.onClick=t=>{this.props.lightDismiss&&!t.defaultPrevented&&(this.props.onDismiss&&this.props.onDismiss(),t.preventDefault())},this.onKeyDown=t=>{var e,o;this.props.escDismiss&&t.which===KeyCode.escape&&!t.defaultPrevented&&(this.props.onDismiss&&this.props.onDismiss(),t.preventDefault()),null!=(o=(e=this.props).onKeyDown)&&o.call(e,t)},this.onResize=()=>{!0!==this.props.viewportChangeDismiss||this.initialScreenWidth===window.innerWidth&&document.activeElement&&("INPUT"===document.activeElement.tagName||"TEXTAREA"===document.activeElement.tagName)?this.props.updateLayout&&(this.relayoutTimer.clearAllTimers(),this.relayoutTimer.setTimeout(()=>{this.updateLayout()},200)):this.props.onDismiss&&this.props.onDismiss()},this.onScroll=t=>{this.scrollListen&&(this.scrollEvent=t.nativeEvent)},this.onScrollDocument=t=>{var e;this.scrollListen&&(t===this.scrollEvent?this.scrollEvent=null:!0===this.props.viewportChangeDismiss?(e=this.props["anchorElement"],t.target&&e&&t.target.contains(e)&&this.props.onDismiss&&this.props.onDismiss()):this.props.updateLayout&&this.relayoutTimer.setTimeout(()=>{this.updateLayout()},50))},this.focusElement=document.activeElement,this.contentElement=t.contentRef||React.createRef()}render(){const{blurDismiss:t,contentJustification:e,contentLocation:o,contentOrientation:n,focuszoneProps:i,lightDismiss:s,modal:r,onAnimationEnd:a,onMouseEnter:l,onMouseLeave:c,anchorElement:u}=this.props;let p;t&&i?p=React.createElement(FocusWithin,{onBlur:this.onBlur,updateStateOnFocusChange:!1},t=>React.createElement(FocusZone,Object.assign({},i),this.renderContent(t.onFocus,t.onBlur))):(p=this.renderContent(),t&&(p=React.createElement(FocusWithin,{onBlur:this.onBlur,updateStateOnFocusChange:!1},p)),i&&(p=React.createElement(FocusZone,Object.assign({},i),p)));var m=s?React.createElement("div",{className:css("absolute-fill bolt-light-dismiss",r&&"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!==o&&"absolute-fill",e===ContentJustification.Start&&"justify-start",e===ContentJustification.Center&&"justify-center",e===ContentJustification.End&&"justify-end",o===ContentLocation.Start&&"flex-start",o===ContentLocation.Center&&"flex-center",o===ContentLocation.End&&"flex-end",n===ContentOrientation.Column&&"flex-column",n!==ContentOrientation.Column&&"flex-row",r&&!s&&"bolt-callout-modal"),id:getSafeId(this.props.id),onAnimationEnd:a,onMouseEnter:l,onMouseLeave:c,onKeyDown:this.onKeyDown,ref:this.calloutElement,role:this.props.role,tabIndex:-1},!u&&m,p),!!u&&m))}componentDidMount(){this.updateLayout(),this.props.anchorElement&&(window.addEventListener("resize",this.onResize),document.addEventListener("scroll",this.onScrollDocument,!0),this.scrollListen=!0)}componentDidUpdate(){this.props.updateLayout&&this.updateLayout()}componentWillUnmount(){this.scrollListen&&(document.removeEventListener("scroll",this.onScrollDocument,!0),window.removeEventListener("resize",this.onResize)),this.relayoutTimer&&this.relayoutTimer.clearAllTimers()}portalWillUnmount(){const t=this.contentElement.current,e=this["focusElement"];e&&t&&t.contains(document.activeElement)&&window.setTimeout(()=>{!t.contains(document.activeElement)&&document.activeElement!==document.body&&null!==document.activeElement||e.focus()},0)}updateLayout(){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))}renderContent(t,e){var{contentJustification:o,contentOrientation:n,contentSize:i,height:s,width:r}=this.props;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",o===ContentJustification.Stretch&&"flex-grow",n===ContentOrientation.Column&&"flex-column",n===ContentOrientation.Row&&"flex-row",i===ContentSize.Small&&"bolt-callout-small",i===ContentSize.Medium&&"bolt-callout-medium",i===ContentSize.Large&&"bolt-callout-large",i===ContentSize.ExtraLarge&&"bolt-callout-extra-large",i===ContentSize.Auto&&"bolt-callout-auto"),onBlur:e,onFocus:t,onScroll:this.onScroll,ref:this.contentElement,role:this.props.role||"dialog",style:{height:s,width:r}},this.props.children)}}export{Callout};