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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Toast.css";import*as React from"react";import{makeCancelable}from"../../Core/Util/Promise";import{Button}from"../../Button";import{Callout,ContentJustification,ContentLocation}from"../../Callout";import{Measure}from"../../Measure";import{css,getSafeId,KeyCode}from"../../Util";class Toast extends React.Component{constructor(t){super(t),this.callToActionRef=React.createRef(),this.onCallToActionClick=t=>{this.props.onCallToActionClick&&this.props.onCallToActionClick(t)},this.onKeyboardShortcut=t=>{this.callToActionRef.current&&!this.state.fadingOut&&t.ctrlKey&&t.altKey&&t.which===KeyCode.t&&this.callToActionRef.current.focus()},this.onMeasureCallToAction=(t,e)=>{this.setState({callToActionWidth:t})},this.state={fadingOut:!1}}fadeOut(){this.fadeOutPromise&&this.fadeOutPromise.cancel();var t=new Promise(t=>{this.setState({fadingOut:!0}),setTimeout(()=>{t()},500)});return this.fadeOutPromise=makeCancelable(t),this.fadeOutPromise}render(){var{message:t,callToAction:e,className:o}=this.props,{callToActionWidth:a,fadingOut:s}=this.state,a=!e||!a||a<=120,n=a?"one-line flex-row":"multi-line flex-column",a=a?"flex-grow":void 0,s=s?"fade-out":void 0;return React.createElement(Callout,{className:css(o,"bolt-toast no-events"),contentClassName:css("bolt-toast-content",n,s),contentJustification:ContentJustification.Center,contentLocation:ContentLocation.End},React.createElement("span",{className:css("bolt-toast-message flex-shrink",a),id:getSafeId("toast-message"),role:"alert"},t),e&&React.createElement(React.Fragment,null,React.createElement("span",{className:"bolt-toast-separator flex-noshrink"}),React.createElement(Measure,{onMeasure:this.onMeasureCallToAction},React.createElement("div",{className:"bolt-toast-call-to-action-container"},React.createElement(Button,{ariaDescribedBy:"toast-message",className:"bolt-toast-call-to-action flex-noshrink",ref:this.callToActionRef,subtle:!0,onClick:this.onCallToActionClick},e)))))}componentDidMount(){document.addEventListener("keydown",this.onKeyboardShortcut)}componentWillUnmount(){this.fadeOutPromise&&this.fadeOutPromise.cancel(),document.removeEventListener("keydown",this.onKeyboardShortcut)}}export{Toast};