azure-devops-ui/Components/TeachingBubble/TeachingBubble.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{CustomTeachingBubble}from"./CustomTeachingBubble";import{Image}from"../../Image";import{Header,TitleSize}from"../../Header";import{PanelCloseButton,PanelFooter}from"../../Panel";import{Spacing,Surface,SurfaceBackground}from"../../Surface";import{css}from"../../Util";import{FocusZone,FocusZoneDirection}from"../../FocusZone";let bubbleId=1;class TeachingBubble extends React.Component{constructor(){super(...arguments),this.customBubble=React.createRef(),this.bubbleId="bubble-"+bubbleId++,this.getContent=()=>{var{children:e,imageProps:t,primaryButtonProps:s,text:o,textOnly:r,title:i}=this.props;return r?React.createElement("div",{className:"bolt-bubble-text-only body-m"},o):React.createElement(Surface,{background:SurfaceBackground.callout,spacing:Spacing.condensed},React.createElement("div",{className:"flex-row justify-center"},t&&React.createElement(Image,Object.assign({},t))),React.createElement(PanelCloseButton,{className:"bolt-bubble-close",onDismiss:this.dismiss}),React.createElement(Header,{className:css("bolt-bubble-text",!s&&"no-buttons"),description:o,descriptionClassName:"bolt-bubble-description",descriptionId:this.bubbleId+"-description",title:i,titleSize:TitleSize.Small,titleId:this.bubbleId+"-title"}),e,s&&React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},React.createElement("div",{className:"bolt-bubble-buttons"},React.createElement(PanelFooter,{buttonProps:this.getButtons()}))))},this.getButtons=()=>{var{primaryButtonProps:e,secondaryButtonProps:t}=this.props,e=[Object.assign(Object.assign({},e),{className:css("bolt-bubble-primary-button",e.className)})];return t&&e.push(t),e},this.setFocus=()=>{var{onLocationChange:e,primaryButtonProps:t,secondaryButtonProps:s}=this.props;t&&!s?(s=document.getElementsByClassName("bolt-bubble-primary-button")[0])&&s.focus():t||(s=document.getElementsByClassName("bolt-bubble-close")[0])&&s.focus(),e&&e()},this.dismiss=()=>{this.customBubble.current&&this.customBubble.current.dismiss()}}render(){let e=this.props.defaultActiveElement;return e||this.props.textOnly||(e=this.props.primaryButtonProps?".bolt-bubble-primary-button":".bolt-bubble-close"),React.createElement(CustomTeachingBubble,Object.assign({},this.props,{ariaDescribedBy:this.props.ariaDescribedBy||this.bubbleId+"-description",ariaLabeledBy:this.props.ariaLabeledBy||this.bubbleId+"-title",defaultActiveElement:e,onLocationChange:this.setFocus,ref:this.customBubble}),this.getContent())}}export{TeachingBubble};