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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./TeachingPanel.css";import*as React from"react";import{Button}from"../../Button";import{Callout,ContentJustification,ContentLocation,ContentOrientation}from"../../Callout";import{FocusZone}from"../../FocusZone";import{Tooltip}from"../../TooltipEx";import{css}from"../../Util";import*as Resources from"../../Resources.TeachingPanel";class TeachingPanel extends React.Component{constructor(e){super(e),this.nextButton=React.createRef(),this._onPanelClose=()=>{this.setState({shouldShow:!1}),this.props.onDismiss&&this.props.onDismiss(this.state.slideIndex)},this._onNextPressed=()=>{this.state.slideIndex+1===this.props.slides.length?this._onPanelClose():this.setState({slideIndex:this.state.slideIndex+1})},this._onBackPressed=()=>{0<this.state.slideIndex&&(1===this.state.slideIndex&&this.nextButton.current&&this.nextButton.current.focus(),this.setState({slideIndex:this.state.slideIndex-1}))},this._renderPanel=()=>{var e,t=this.props.slides[this.state.slideIndex],s=0===this.state.slideIndex,n=this.state.slideIndex+1===this.props.slides.length;return t?React.createElement(Callout,{className:"bolt-teaching-panel-layer",contentClassName:(null!=(e=this.props.className)?e:"bolt-teaching-panel")+" depth-16",contentJustification:ContentJustification.Center,contentLocation:ContentLocation.Center,contentOrientation:ContentOrientation.Column,contentShadow:!0,escDismiss:!0,lightDismiss:!0,modal:!0,onDismiss:this._onPanelClose},React.createElement(FocusZone,{circularNavigation:!0,defaultActiveElement:".bolt-teaching-panel-next",focusOnMount:!0,handleTabKey:!0},React.createElement("div",{className:"bolt-teaching-panel-container flex-grow flex-column scroll-hidden"},React.createElement("div",{className:"bolt-teaching-panel-visual flex-row flex-noshrink"},React.createElement("img",{className:"bolt-teaching-panel-image flex-row",src:t.slideImage,alt:t.imageAltText}),React.createElement(Button,{subtle:!0,className:"bolt-teaching-pane-close-button",ariaLabel:Resources.Close,iconProps:{iconName:"Cancel"},onClick:this._onPanelClose})),React.createElement("div",{className:"bolt-teaching-panel-description flex-column flex-grow padding-16 rhythm-vertical-16 scroll-hidden"},React.createElement(Tooltip,{overflowOnly:!0},React.createElement("span",{className:"bolt-teaching-panel-header title-m text-ellipsis flex-noshrink"},t.title)),React.createElement("span",{className:"bolt-teaching-panel-text flex-grow body-l v-scroll-auto custom-scrollbar",dangerouslySetInnerHTML:{__html:t.description}}),React.createElement("div",{className:"bolt-teaching-panel-buttons flex-row relative"},React.createElement(Button,{text:Resources.Back,onClick:this._onBackPressed,className:css("bolt-teaching-panel-back",s&&"first-slide"),disabled:this.state.slideIndex<=0}),React.createElement(Button,{ref:this.nextButton,primary:!0,text:n?Resources.Done:Resources.Next,onClick:this._onNextPressed,className:"bolt-teaching-panel-next"}),React.createElement("div",{className:"bolt-teaching-panel-progress flex-row flex-grow flex-center justify-center rhythm-horizontal-8 absolute-fill"},this.props.slides.map((e,t)=>React.createElement("div",{key:"progress-"+t,className:css("bolt-teaching-panel-progress-circle",this.state.slideIndex===t&&"current")})))))))):null},this.state={slideIndex:0,shouldShow:!0}}render(){return this.state.shouldShow?this._renderPanel():null}}export{TeachingPanel};