azure-devops-ui/Components/TeachingBubble/CustomTeachingBubble.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./TeachingBubble.css";import*as React from"react";import{TeachingBubbleCornerPlacement}from"./TeachingBubble.Props";import{Callout}from"../../Callout";import{FocusZoneKeyStroke}from"../../FocusZone";import{css,KeyCode}from"../../Util";import{ScreenSize}from"../../Core/Util/Screen";import{Location}from"../..//Utilities/Position";import{ScreenSizeObserver}from"../../Utilities/ScreenSize";class CustomTeachingBubble extends React.Component{constructor(e){super(e),this.dismiss=()=>{this.setState({fadingOut:!0})},this.onAnimationEnd=()=>{this.state.fadingOut?this.props.onDismiss&&this.props.onDismiss():this.state.newPosition&&this.setState({anchorElement:this.props.anchorElement,anchorOrigin:this.props.anchorOrigin,children:this.props.children,cornerPlacement:this.props.cornerPlacement,newPosition:!1},this.props.onLocationChange)},this.getCalloutOrigin=(e,t)=>(e.horizontal===Location.center?t=TeachingBubbleCornerPlacement.vertical:e.vertical===Location.center&&(t=TeachingBubbleCornerPlacement.horizontal),t===TeachingBubbleCornerPlacement.horizontal?e.horizontal===Location.start?{horizontal:Location.end,vertical:e.vertical}:e.horizontal===Location.end?{horizontal:Location.start,vertical:e.vertical}:{horizontal:Location.center,vertical:e.vertical}:e.vertical===Location.start?{horizontal:e.horizontal,vertical:Location.end}:e.vertical===Location.end?{horizontal:e.horizontal,vertical:Location.start}:{horizontal:e.horizontal,vertical:Location.center}),this.getBeakClassName=(e,t)=>{let o,i;return o=t.horizontal===Location.start?e.horizontal===Location.end?"left-primary":"left-secondary":t.horizontal===Location.end?e.horizontal===Location.start?"right-primary":"right-secondary":"center-h",i=t.vertical===Location.start?e.vertical===Location.end?"top-primary":"top-secondary":t.vertical===Location.end?e.vertical===Location.start?"bottom-primary":"bottom-secondary":"center-v",css(o,i)},this.state={anchorElement:e.anchorElement,anchorOrigin:e.anchorOrigin,children:e.children,cornerPlacement:this.props.cornerPlacement}}static getDerivedStateFromProps(e,t){return t.anchorElement!==e.anchorElement||t.anchorOrigin.horizontal!==e.anchorOrigin.horizontal||t.anchorOrigin.vertical!==e.anchorOrigin.vertical?Object.assign(Object.assign({},t),{newPosition:!0}):{children:e.children,cornerPlacement:e.cornerPlacement}}render(){const{anchorElement:o,anchorOrigin:i,children:n,cornerPlacement:e=TeachingBubbleCornerPlacement.vertical,fadingOut:r,newPosition:a}=this.state,c=this.getCalloutOrigin(i,e);return React.createElement(ScreenSizeObserver,null,e=>{e=e.screenSize===ScreenSize.xsmall;let t;return e||(t=i.vertical===Location.end?window.innerHeight-o.getBoundingClientRect().bottom:i.vertical===Location.start?o.getBoundingClientRect().top:window.innerHeight),React.createElement(Callout,{anchorElement:e?void 0:o,anchorPoint:e?{x:0,y:0}:void 0,anchorOrigin:i,ariaDescribedBy:this.props.ariaDescribedBy,ariaLabelledBy:this.props.ariaLabeledBy,blurDismiss:this.props.textOnly,calloutOrigin:c,className:css(e&&"absolute-fill"),contentClassName:css("bolt-bubble-callout",(r||a)&&"fade-out",this.getBeakClassName(i,c),e?"bolt-bubble-fullscreen absolute-fill flex-grow scroll-auto":"relative"),contentShadow:!0,escDismiss:!0,fixedLayout:!0,focuszoneProps:{circularNavigation:!0,defaultActiveElement:this.props.defaultActiveElement||".bolt-bubble-focusable-element",focusOnMount:!0,handleTabKey:!0,includeDefaults:!0,postprocessKeyStroke:function(e){return e.which===KeyCode.tab&&e.preventDefault(),FocusZoneKeyStroke.IgnoreParents}},onAnimationEnd:this.onAnimationEnd,onDismiss:this.dismiss,updateLayout:!0,viewportChangeDismiss:!1},React.createElement("div",{"aria-live":"polite","aria-relevant":"text",className:"bolt-bubble-container"},!e&&React.createElement("div",{className:"bolt-bubble-beak depth-8"}),React.createElement("div",{className:"bolt-bubble-content relative scroll-auto",style:{maxHeight:t}},React.createElement("div",{className:"bolt-bubble-focusable-element no-outline",tabIndex:-1}),n)))})}}export{CustomTeachingBubble};