azure-devops-ui/Components/MessageBar/MessageBar.min.js

React components for building web UI in Azure DevOps

import{__assign}from"tslib";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";var MessageBar=function(e){var r=e.buttonProps,s=e.className,a=e.messageClassName,t=e.iconProps,o=e.onDismiss,n=e.severity,n=void 0===n?MessageBarSeverity.Info:n,c=e.role,i=MessageBarSeverityInternal[n],l=i.className,t=t||i.defaultIconProps,i=React.useContext(ScreenContext),m=React.useState(i.size.value===ScreenSize.xsmall),u=m[0],f=m[1],m=format(Resources.DismissButtonLabel,getSeverityString(n));return React.createElement("div",{className:css(s,"bolt-messagebar",l,u&&"mobile")},React.createElement(Breakpoint,{breakpoints:[1,ScreenBreakpoints.small],onBreakpoint:function(e){return f(0===e)}}),React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},React.createElement("div",{className:css("bolt-messagebar-content flex-grow",u&&i.size.value===ScreenSize.xsmall?"flex-column":"flex-row")},React.createElement("div",{className:css("flex-row",a)},React.createElement("div",{className:"bolt-messagebar-icons flex-row"},React.createElement(Icon,__assign({},t,{className:css(t.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:c||(n===MessageBarSeverity.Error||n===MessageBarSeverity.Warning?"alert":void 0)},e.children),o&&u&&React.createElement(Button,{ariaLabel:m,className:"bolt-messagebar-close-button relative flex-self-start",iconProps:{iconName:"Cancel"},key:"closeButton",onClick:o,subtle:!0})),(o&&!u||r&&0<r.length)&&React.createElement("div",{className:"bolt-messagebar-buttons flex-noshrink flex-row flex-center flex-self-stretch"},r&&r.map(function(e,r){return React.createElement(Button,__assign({key:r},e))}),o&&!u&&React.createElement(Button,{ariaLabel:m,className:"bolt-messagebar-close-button",iconProps:{iconName:"Cancel"},key:"closeButton",onClick:o,subtle:!0})))))};function getSeverityString(e){switch(e){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""}MessageBar.displayName="MessageBar";var 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"}}};export{MessageBar};