azure-devops-ui
Version:
React components for building web UI in Azure DevOps
35 lines (34 loc) • 2.84 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Dialog.css";
import * as React from "react";
import { PanelCloseButtonSize } from '../../Components/Panel/Panel.Props';
import { TitleSize } from '../../Header';
import { PanelFooter, PanelHeader } from '../../Panel';
import { SurfaceContext } from '../../Surface';
import { css } from '../../Util';
import { CustomDialog } from "./CustomDialog";
let dialogId = 1;
export class DialogInternal extends React.Component {
constructor() {
super(...arguments);
this.dialogId = `dialog-${dialogId++}`;
}
render() {
const { ariaDescribedBy, ariaLabel, ariaLabelledBy, blurDismiss, calloutClassName, calloutContentClassName, className, contentJustification, contentLocation, contentSize, defaultActiveElement, escDismiss, enterPrimary, footerButtonProps, lightDismiss, modal, onDismiss, overlay, resizable, showCloseButton } = this.props;
const titleProps = Object.assign({}, this.props.titleProps);
const id = this.props.id || this.dialogId;
const titleId = titleProps.id ? titleProps.id : titleProps.text ? `${id}-title` : undefined;
titleProps.id = titleId;
if (titleProps.size === undefined) {
titleProps.size = TitleSize.Small;
}
return (React.createElement(CustomDialog, { ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy || titleId, blurDismiss: blurDismiss, calloutClassName: calloutClassName, calloutContentClassName: calloutContentClassName, contentLocation: contentLocation, contentJustification: contentJustification, className: css("bolt-dialog", className), defaultActiveElement: defaultActiveElement, escDismiss: escDismiss, id: id, lightDismiss: lightDismiss, modal: modal, onDismiss: onDismiss, overlay: overlay, contentSize: contentSize, resizable: resizable, enterPrimary: enterPrimary, primaryButtonProps: footerButtonProps === null || footerButtonProps === void 0 ? void 0 : footerButtonProps.find(button => button.primary) },
React.createElement(PanelHeader, { onDismiss: onDismiss, closeButtonSize: PanelCloseButtonSize.small, showCloseButton: showCloseButton, showSeparator: false, titleProps: titleProps }),
React.createElement(SurfaceContext.Consumer, null, surfaceContext => (React.createElement("div", { className: css("bolt-dialog-content flex-column flex-grow", !footerButtonProps && "bolt-dialog-content-bottom-padding", surfaceContext.horizontalClassName) }, this.props.children))),
footerButtonProps && (React.createElement(PanelFooter, { className: css(resizable && "bolt-dialog-resizable-footer"), showSeparator: false, buttonProps: footerButtonProps }))));
}
}
DialogInternal.defaultProps = {
showCloseButton: false
};