azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.22 kB
JavaScript
import{__assign,__extends}from"tslib";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";var CustomTeachingBubble=function(o){function e(e){var t=o.call(this,e)||this;return t.dismiss=function(){t.setState({fadingOut:!0})},t.onAnimationEnd=function(){t.state.fadingOut?t.props.onDismiss&&t.props.onDismiss():t.state.newPosition&&t.setState({anchorElement:t.props.anchorElement,anchorOrigin:t.props.anchorOrigin,children:t.props.children,cornerPlacement:t.props.cornerPlacement,newPosition:!1},t.props.onLocationChange)},t.getCalloutOrigin=function(e,t){return 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}},t.getBeakClassName=function(e,t){var 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",t=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";return css(o,t)},t.state={anchorElement:e.anchorElement,anchorOrigin:e.anchorOrigin,children:e.children,cornerPlacement:t.props.cornerPlacement},t}return __extends(e,o),e.getDerivedStateFromProps=function(e,t){return t.anchorElement!==e.anchorElement||t.anchorOrigin.horizontal!==e.anchorOrigin.horizontal||t.anchorOrigin.vertical!==e.anchorOrigin.vertical?__assign(__assign({},t),{newPosition:!0}):{children:e.children,cornerPlacement:e.cornerPlacement}},e.prototype.render=function(){var o=this,e=this.state,n=e.anchorElement,r=e.anchorOrigin,i=e.children,t=e.cornerPlacement,t=void 0===t?TeachingBubbleCornerPlacement.vertical:t,a=e.fadingOut,c=e.newPosition,l=this.getCalloutOrigin(r,t);return React.createElement(ScreenSizeObserver,null,function(e){var t,e=e.screenSize===ScreenSize.xsmall;return e||(t=r.vertical===Location.end?window.innerHeight-n.getBoundingClientRect().bottom:r.vertical===Location.start?n.getBoundingClientRect().top:window.innerHeight),React.createElement(Callout,{anchorElement:e?void 0:n,anchorPoint:e?{x:0,y:0}:void 0,anchorOrigin:r,ariaDescribedBy:o.props.ariaDescribedBy,ariaLabelledBy:o.props.ariaLabeledBy,blurDismiss:o.props.textOnly,calloutOrigin:l,className:css(e&&"absolute-fill"),contentClassName:css("bolt-bubble-callout",(a||c)&&"fade-out",o.getBeakClassName(r,l),e?"bolt-bubble-fullscreen absolute-fill flex-grow scroll-auto":"relative"),contentShadow:!0,escDismiss:!0,fixedLayout:!0,focuszoneProps:{circularNavigation:!0,defaultActiveElement:o.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:o.onAnimationEnd,onDismiss:o.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}),i)))})},e}(React.Component);export{CustomTeachingBubble};