azure-devops-ui
Version:
React components for building web UI in Azure DevOps
73 lines (72 loc) • 4.39 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./MessageBar.css";
import * as React from "react";
import { ScreenBreakpoints, ScreenContext, ScreenSize } from '../../Core/Util/Screen';
import { format } from '../../Core/Util/String';
import { Breakpoint } from '../../Breakpoint';
import { Button } from '../../Button';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { Icon } from '../../Icon';
import * as Resources from '../../Resources.MessageBar';
import { css } from '../../Util';
import { MessageBarSeverity } from "./MessageBar.Props";
export const MessageBar = (props) => {
const { buttonProps, className, messageClassName, iconProps, onDismiss, severity = MessageBarSeverity.Info, role } = props;
const severityProps = MessageBarSeverityInternal[severity];
const severityClassName = severityProps.className;
const renderIconProps = iconProps || severityProps.defaultIconProps;
const screenSize = React.useContext(ScreenContext);
const [mobile, setMobile] = React.useState(screenSize.size.value === ScreenSize.xsmall);
const dismissButtonLabel = format(Resources.DismissButtonLabel, getSeverityString(severity));
return (React.createElement("div", { className: css(className, "bolt-messagebar", severityClassName, mobile && "mobile") },
React.createElement(Breakpoint, { breakpoints: [1, ScreenBreakpoints.small], onBreakpoint: index => setMobile(index === 0) }),
React.createElement(FocusZone, { direction: FocusZoneDirection.Horizontal },
React.createElement("div", { className: css("bolt-messagebar-content flex-grow", mobile && screenSize.size.value === ScreenSize.xsmall ? "flex-column" : "flex-row") },
React.createElement("div", { className: css("flex-row", messageClassName) },
React.createElement("div", { className: "bolt-messagebar-icons flex-row" },
React.createElement(Icon, Object.assign({}, renderIconProps, { className: css(renderIconProps.className, "bolt-messagebar-icon medium") }))),
React.createElement("div", { className: "bolt-messagebar-message flex-row flex-wrap flex-grow flex-shrink flex-center body-m word-break", role: role ? role : severity === MessageBarSeverity.Error || severity === MessageBarSeverity.Warning ? "alert" : undefined }, props.children),
onDismiss && mobile && (React.createElement(Button, { ariaLabel: dismissButtonLabel, className: "bolt-messagebar-close-button relative flex-self-start", iconProps: { iconName: "Cancel" }, key: "closeButton", onClick: onDismiss, subtle: true }))),
((onDismiss && !mobile) || (buttonProps && buttonProps.length > 0)) && (React.createElement("div", { className: "bolt-messagebar-buttons flex-noshrink flex-row flex-center flex-self-stretch" },
buttonProps && buttonProps.map((value, index) => React.createElement(Button, Object.assign({ key: index }, value))),
onDismiss && !mobile && (React.createElement(Button, { ariaLabel: dismissButtonLabel, className: "bolt-messagebar-close-button", iconProps: { iconName: "Cancel" }, key: "closeButton", onClick: onDismiss, subtle: true }))))))));
};
function getSeverityString(severity) {
switch (severity) {
case MessageBarSeverity.Info:
return Resources.Info;
case MessageBarSeverity.Error:
return Resources.Error;
case MessageBarSeverity.Success:
return Resources.Success;
case MessageBarSeverity.Warning:
return Resources.Warning;
}
return "";
}
// Set the function component's name so that Enzyme can recognize it
MessageBar.displayName = "MessageBar";
/**
* Internal backing struct maps MessageBarSeverity to the necessary data
*/
const MessageBarSeverityInternal = {
Info: {
className: "severity-info",
defaultIconProps: {
iconName: "Info"
}
},
Success: {
className: "severity-success",
defaultIconProps: { iconName: "Completed" }
},
Warning: {
className: "severity-warning",
defaultIconProps: { iconName: "Warning" }
},
Error: {
className: "severity-error",
defaultIconProps: { iconName: "ErrorBadge" }
}
};