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

React components for building web UI in Azure DevOps

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