azure-devops-ui
Version:
React components for building web UI in Azure DevOps
71 lines (70 loc) • 4.09 kB
JavaScript
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';
let bubbleId = 1;
export class TeachingBubble extends React.Component {
constructor() {
super(...arguments);
this.customBubble = React.createRef();
this.bubbleId = `bubble-${bubbleId++}`;
this.getContent = () => {
const { children, imageProps, primaryButtonProps, text, textOnly, title } = this.props;
if (textOnly) {
return React.createElement("div", { className: "bolt-bubble-text-only body-m" }, text);
}
return (React.createElement(Surface, { background: SurfaceBackground.callout, spacing: Spacing.condensed },
React.createElement("div", { className: "flex-row justify-center" }, imageProps && React.createElement(Image, Object.assign({}, imageProps))),
React.createElement(PanelCloseButton, { className: "bolt-bubble-close", onDismiss: this.dismiss }),
React.createElement(Header, { className: css("bolt-bubble-text", !primaryButtonProps && "no-buttons"), description: text, descriptionClassName: "bolt-bubble-description", descriptionId: `${this.bubbleId}-description`, title: title, titleSize: TitleSize.Small, titleId: `${this.bubbleId}-title` }),
children,
primaryButtonProps && (React.createElement(FocusZone, { direction: FocusZoneDirection.Horizontal },
React.createElement("div", { className: "bolt-bubble-buttons" },
React.createElement(PanelFooter, { buttonProps: this.getButtons() }))))));
};
this.getButtons = () => {
const { primaryButtonProps, secondaryButtonProps } = this.props;
const buttons = [Object.assign(Object.assign({}, primaryButtonProps), { className: css("bolt-bubble-primary-button", primaryButtonProps.className) })];
secondaryButtonProps && buttons.push(secondaryButtonProps);
return buttons;
};
this.setFocus = () => {
const { onLocationChange, primaryButtonProps, secondaryButtonProps } = this.props;
if (primaryButtonProps && !secondaryButtonProps) {
const primaryButton = document.getElementsByClassName("bolt-bubble-primary-button")[0];
if (primaryButton) {
primaryButton.focus();
}
}
else if (!primaryButtonProps) {
const closeButton = document.getElementsByClassName("bolt-bubble-close")[0];
if (closeButton) {
closeButton.focus();
}
}
onLocationChange && onLocationChange();
};
this.dismiss = () => {
this.customBubble.current && this.customBubble.current.dismiss();
};
}
render() {
let defaultActiveElement = this.props.defaultActiveElement;
if (!defaultActiveElement && !this.props.textOnly) {
if (this.props.primaryButtonProps) {
defaultActiveElement = ".bolt-bubble-primary-button";
}
else {
defaultActiveElement = ".bolt-bubble-close";
}
}
return (React.createElement(CustomTeachingBubble, Object.assign({}, this.props, { ariaDescribedBy: this.props.ariaDescribedBy || `${this.bubbleId}-description`, ariaLabeledBy: this.props.ariaLabeledBy || `${this.bubbleId}-title`, defaultActiveElement: defaultActiveElement, onLocationChange: this.setFocus, ref: this.customBubble }), this.getContent()));
}
}