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

React components for building web UI in Azure DevOps

import{__extends}from"tslib";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";var TeachingPanel=function(t){function e(e){var a=t.call(this,e)||this;return a.nextButton=React.createRef(),a._onPanelClose=function(){a.setState({shouldShow:!1}),a.props.onDismiss&&a.props.onDismiss(a.state.slideIndex)},a._onNextPressed=function(){a.state.slideIndex+1===a.props.slides.length?a._onPanelClose():a.setState({slideIndex:a.state.slideIndex+1})},a._onBackPressed=function(){0<a.state.slideIndex&&(1===a.state.slideIndex&&a.nextButton.current&&a.nextButton.current.focus(),a.setState({slideIndex:a.state.slideIndex-1}))},a._renderPanel=function(){var e,t=a.props.slides[a.state.slideIndex],n=0===a.state.slideIndex,o=a.state.slideIndex+1===a.props.slides.length;return t?React.createElement(Callout,{className:"bolt-teaching-panel-layer",contentClassName:(null!=(e=a.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:a._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:a._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:a._onBackPressed,className:css("bolt-teaching-panel-back",n&&"first-slide"),disabled:a.state.slideIndex<=0}),React.createElement(Button,{ref:a.nextButton,primary:!0,text:o?Resources.Done:Resources.Next,onClick:a._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"},a.props.slides.map(function(e,t){return React.createElement("div",{key:"progress-"+t,className:css("bolt-teaching-panel-progress-circle",a.state.slideIndex===t&&"current")})}))))))):null},a.state={slideIndex:0,shouldShow:!0},a}return __extends(e,t),e.prototype.render=function(){return this.state.shouldShow?this._renderPanel():null},e}(React.Component);export{TeachingPanel};