azure-devops-ui
Version:
React components for building web UI in Azure DevOps
71 lines (70 loc) • 5.08 kB
JavaScript
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';
export class TeachingPanel extends React.Component {
constructor(props) {
super(props);
this.nextButton = React.createRef();
this._onPanelClose = () => {
this.setState({ shouldShow: false });
this.props.onDismiss && this.props.onDismiss(this.state.slideIndex);
};
this._onNextPressed = () => {
if (this.state.slideIndex + 1 === this.props.slides.length) {
this._onPanelClose();
}
else {
this.setState({ slideIndex: this.state.slideIndex + 1 });
}
};
this._onBackPressed = () => {
if (this.state.slideIndex > 0) {
// If we are on the second slide before moveing to the first slide, set
// focus to the next button, otherwise focus is lost.
if (this.state.slideIndex === 1 && this.nextButton.current) {
this.nextButton.current.focus();
}
this.setState({ slideIndex: this.state.slideIndex - 1 });
}
};
this._renderPanel = () => {
var _a;
const currentSlide = this.props.slides[this.state.slideIndex];
const firstSlide = this.state.slideIndex === 0;
const lastSlide = this.state.slideIndex + 1 === this.props.slides.length;
if (!currentSlide) {
return null;
}
return (React.createElement(Callout, { className: "bolt-teaching-panel-layer", contentClassName: ((_a = this.props.className) !== null && _a !== void 0 ? _a : "bolt-teaching-panel") + " depth-16", contentJustification: ContentJustification.Center, contentLocation: ContentLocation.Center, contentOrientation: ContentOrientation.Column, contentShadow: true, escDismiss: true, lightDismiss: true, modal: true, onDismiss: this._onPanelClose },
React.createElement(FocusZone, { circularNavigation: true, defaultActiveElement: ".bolt-teaching-panel-next", focusOnMount: true, handleTabKey: true },
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: currentSlide.slideImage, alt: currentSlide.imageAltText }),
React.createElement(Button, { subtle: true, 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: true },
React.createElement("span", { className: "bolt-teaching-panel-header title-m text-ellipsis flex-noshrink" }, currentSlide.title)),
React.createElement("span", { className: "bolt-teaching-panel-text flex-grow body-l v-scroll-auto custom-scrollbar", dangerouslySetInnerHTML: { __html: currentSlide.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", firstSlide && "first-slide"), disabled: this.state.slideIndex <= 0 }),
React.createElement(Button, { ref: this.nextButton, primary: true, text: lastSlide ? 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((item, index) => {
return (React.createElement("div", { key: "progress-" + index, className: css("bolt-teaching-panel-progress-circle", this.state.slideIndex === index && "current") }));
}))))))));
};
this.state = {
slideIndex: 0,
shouldShow: true
};
}
render() {
return this.state.shouldShow ? this._renderPanel() : null;
}
}