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

React components for building web UI in Azure DevOps

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