azure-devops-ui
Version:
React components for building web UI in Azure DevOps
32 lines (31 loc) • 1.86 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Panel.css";
import * as React from "react";
import { CustomPanel } from "./CustomPanel";
import { PanelContent } from "./PanelContent";
import { PanelFooter } from "./PanelFooter";
import { PanelHeader } from "./PanelHeader";
import { PanelOverlay } from "./PanelOverlay";
let panelId = 1;
export class Panel extends React.Component {
constructor() {
super(...arguments);
this.customPanelRef = React.createRef();
this.panelId = `panel-${panelId++}`;
}
render() {
const { props } = this;
const { backButtonProps, description, descriptionItem, footerButtonProps, onDismiss, overlayContent, showSeparator, titleProps = {} } = props;
const id = props.id || this.panelId;
const titleId = titleProps.id ? titleProps.id : titleProps.text ? `${id}-title` : undefined;
return (React.createElement(CustomPanel, Object.assign({ ariaLabelledBy: titleId }, props, { id: id, lightDismiss: overlayContent ? false : props.lightDismiss, ref: this.customPanelRef }),
React.createElement(PanelHeader, { backButtonProps: backButtonProps, description: !!descriptionItem ? descriptionItem : description, onDismiss: onDismiss, showSeparator: showSeparator, titleProps: Object.assign({ id: titleId }, titleProps) }),
React.createElement(PanelContent, { className: props.contentClassName }, props.children),
footerButtonProps && React.createElement(PanelFooter, { showSeparator: showSeparator, buttonProps: footerButtonProps }),
overlayContent && React.createElement(PanelOverlay, { overlayContent: overlayContent })));
}
animateOut() {
return this.customPanelRef.current ? this.customPanelRef.current.animateOut() : Promise.resolve();
}
}