azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 13.8 kB
JavaScript
import"../../CommonImports";import"../../Core/core.css";import"./Status.css";import*as React from"react";import{Tooltip}from"../../TooltipEx";import{css,getSafeId}from"../../Util";import{StatusSize}from"../../Components/Status/Status.Props";var xlViewBoxSize="0 0 32 32",mViewBoxSize="0 0 16 16",sViewBoxSize="0 0 12 12",statusId=1;function Status(e){var a=e.animated,t=e.ariaLabel,c=e.className,l=e.color,i=e.onRenderIcon,s=e.text,r=e.tooltipContent,e=void 0===e.size?StatusSize.xl:e.size;return s?React.createElement(Tooltip,{renderContent:r},React.createElement("div",{"aria-label":s,className:css("bolt-status-extended flex-row flex-center",l,c,e===StatusSize.xl&&"xl")},i(css("bolt-status",l),e,a),React.createElement("span",{className:css("bolt-status-text",e!==StatusSize.l?"font-size-mm xl":"font-size","neutral"===l&&"bolt-status-text-extra-padding")},s))):i(css("bolt-status flex-noshrink",l,c),e,a,t)}function Success(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"16"}),React.createElement("path",{d:"M12.799 20.83l-.005-.003L9.94 17.97a1.5 1.5 0 1 1 2.121-2.12l1.8 1.798 6.209-6.21a1.5 1.5 0 1 1 2.12 2.122l-7.264 7.264-.005.006a1.5 1.5 0 0 1-2.121 0z",fill:"#fff"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"8"}),React.createElement("path",{d:"M6.062 11.144l-.003-.002-1.784-1.785A.937.937 0 1 1 5.6 8.031l1.125 1.124 3.88-3.88A.937.937 0 1 1 11.931 6.6l-4.54 4.54-.004.004a.938.938 0 0 1-1.325 0z",fill:"#fff"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"6"}),React.createElement("path",{d:"M4.74 8.19l-.002-.002-1.29-1.29a.677.677 0 1 1 .958-.957l.813.812 2.804-2.805a.678.678 0 0 1 .959.958L5.7 8.188l-.002.002a.678.678 0 0 1-.958 0z",fill:"#fff"}))}}function Failed(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"16"}),React.createElement("path",{d:"M21.99 9.99a1.5 1.5 0 0 0-2.122 0L16 13.856 12.132 9.99a1.5 1.5 0 0 0-2.121 2.122l3.868 3.868-3.89 3.889a1.5 1.5 0 0 0 2.122 2.121L16 18.1l3.89 3.89a1.5 1.5 0 0 0 2.12-2.122l-3.889-3.89 3.868-3.867a1.5 1.5 0 0 0 0-2.122z",fill:"#fff"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"8"}),React.createElement("path",{d:"M10.984 5.004a.9.9 0 0 1 0 1.272L9.27 7.99l1.74 1.741a.9.9 0 1 1-1.272 1.273l-1.74-1.741-1.742 1.74a.9.9 0 1 1-1.272-1.272l1.74-1.74-1.713-1.714a.9.9 0 0 1 1.273-1.273l1.713 1.713 1.714-1.713a.9.9 0 0 1 1.273 0z",fill:"#fff"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"6"}),React.createElement("path",{d:"M3.64 3.64a.75.75 0 0 1 1.06 0l1.294 1.294L7.288 3.64a.75.75 0 0 1 1.06 1.06L7.056 5.994l1.292 1.292a.75.75 0 0 1-1.06 1.06l-1.295-1.29-1.291 1.291a.75.75 0 1 1-1.06-1.06l1.292-1.293L3.64 4.7a.75.75 0 0 1 0-1.06z",fill:"#fff"}))}}function Warning(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"16"}),React.createElement("path",{d:"M16 7a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-3 0v-9A1.5 1.5 0 0 1 16 7zm-1.5 16a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z",fill:"#fff"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"8"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8.91 3.9a.9.9 0 0 0-1.8 0v4.7a.9.9 0 1 0 1.8 0V3.9zm-.95 8.65a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8z",fill:"#fff"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"6"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.75 2.75a.75.75 0 1 0-1.5 0v3.5a.75.75 0 1 0 1.5 0v-3.5zM6 9.5A.75.75 0 1 0 6 8a.75.75 0 0 0 0 1.5z",fill:"#fff"}))}}function Running(e){var a=css(e.className,!1!==e.animated?e.size===StatusSize.s?"small-animate":"animate":"");switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:a,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"16"}),React.createElement("path",{d:"M23 16c0 .325-.022.645-.065.959-.07.509.137 1.031.582 1.289.622.36 1.42.058 1.545-.65a9.204 9.204 0 0 0-6.27-10.367c-.664-.21-1.292.324-1.292 1.02 0 .532.374.982.873 1.162A7.003 7.003 0 0 1 23 16zM9 16a7.003 7.003 0 0 1 4.627-6.587c.5-.18.873-.63.873-1.161 0-.697-.628-1.232-1.292-1.02a9.204 9.204 0 0 0-6.27 10.367c.124.707.924 1.008 1.545.649.445-.258.652-.78.582-1.29A7.062 7.062 0 0 1 9 16zm7 7a6.975 6.975 0 0 0 4.728-1.838c.403-.37.999-.484 1.472-.21.586.339.744 1.121.261 1.597A9.17 9.17 0 0 1 16 25.2a9.17 9.17 0 0 1-6.461-2.65c-.482-.477-.325-1.26.261-1.599.473-.273 1.069-.159 1.472.21A6.975 6.975 0 0 0 16 23z",fill:"#fff"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:a,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"8"}),React.createElement("path",{d:"M4.75 8a3.25 3.25 0 0 1 1.917-2.965c.33-.148.583-.453.583-.814 0-.479-.432-.848-.881-.683A4.752 4.752 0 0 0 3.29 8.62c.064.49.616.697 1.043.45.303-.175.443-.528.423-.877A3.304 3.304 0 0 1 4.75 8zm6.5 0c0 .065-.002.13-.006.194-.02.349.12.702.422.877.428.247.98.04 1.044-.45a4.752 4.752 0 0 0-3.078-5.084c-.45-.164-.882.205-.882.684 0 .36.253.666.583.814A3.25 3.25 0 0 1 11.25 8zM8 11.25c.758 0 1.455-.26 2.008-.694.293-.23.696-.31 1.019-.123.402.233.51.77.167 1.083A4.733 4.733 0 0 1 8 12.75c-1.23 0-2.35-.467-3.194-1.234-.344-.312-.235-.85.168-1.083.322-.186.725-.108 1.018.123.553.435 1.25.694 2.008.694z",fill:"#fff"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:a,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"6"}),React.createElement("path",{d:"M7.768 4.232a2.5 2.5 0 0 1 .63 2.477c-.081.276-.042.586.161.79.295.294.79.243.94-.145a3.75 3.75 0 0 0-4.853-4.852c-.388.15-.439.644-.144.939.203.203.513.242.79.161a2.5 2.5 0 0 1 2.476.63zm-4.42 4.42a3.75 3.75 0 0 1-.846-4.006c.15-.388.644-.439.939-.145.203.204.242.514.161.79A2.5 2.5 0 0 0 6.71 8.398c.276-.081.586-.042.79.161.294.295.243.79-.145.94a3.75 3.75 0 0 1-4.006-.847z",fill:"#fff"}))}}function Waiting(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"16"}),React.createElement("path",{d:"M16 7a1.5 1.5 0 0 1 1.5 1.5v7.377l4.026 4.027a1.5 1.5 0 0 1-2.12 2.121l-4.428-4.427A1.496 1.496 0 0 1 14.5 16.5v-8A1.5 1.5 0 0 1 16 7z",fill:"#fff"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"8"}),React.createElement("path",{d:"M8 3.5a.9.9 0 0 1 .9.9v3.325l2.002 2.001A.9.9 0 1 1 9.629 11L7.408 8.778A.898.898 0 0 1 7.1 8.1V4.4a.9.9 0 0 1 .9-.9z",fill:"#fff"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"6"}),React.createElement("path",{d:"M6 2.6a.75.75 0 0 1 .75.75v2.439L8.122 7.16a.75.75 0 1 1-1.06 1.06L5.487 6.648A.747.747 0 0 1 5.25 6.1V3.35A.75.75 0 0 1 6 2.6z",fill:"#fff"}))}}function Queued(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"15",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 32c8.836 0 16-7.163 16-16S24.836 0 16 0 0 7.163 0 16s7.164 16 16 16zm0-2c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14z"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"7",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm0-1.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"5",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12zm0-1.25a4.75 4.75 0 1 0 0-9.5 4.75 4.75 0 0 0 0 9.5z"}))}}function Canceled(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"15",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16zm-2 0c0 7.732-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2s14 6.268 14 14zm-17.618-5.81a1.5 1.5 0 1 0-2.121 2.12l9.192 9.193a1.5 1.5 0 1 0 2.121-2.121l-9.192-9.193z"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"7",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1.5 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0zM6.41 5.124a.9.9 0 1 0-1.274 1.272l4.385 4.385a.9.9 0 1 0 1.272-1.273L6.41 5.124z"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"5",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0zm-1.25 0a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 0 1 9.5 0zM4.941 3.89a.75.75 0 0 0-1.06 1.06l3.182 3.182a.75.75 0 1 0 1.06-1.06L4.941 3.89z"}))}}function Skipped(e){switch(e.size){case StatusSize.xl:case StatusSize.l:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:xlViewBoxSize},React.createElement("circle",{cx:"16",cy:"16",r:"15",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16zm-2 0c0 7.732-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2s14 6.268 14 14zM13.44 8.94a1.5 1.5 0 0 1 2.12 0l5.88 5.878A1.5 1.5 0 0 1 21.874 16c.034.423-.11.858-.434 1.182l-5.88 5.879a1.5 1.5 0 1 1-2.12-2.122L18.379 16l-4.94-4.94a1.5 1.5 0 0 1 0-2.12z"}));case StatusSize.m:return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:mViewBoxSize},React.createElement("circle",{cx:"8",cy:"8",r:"7",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1.5 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0zM6.752 4.372a.861.861 0 0 1 1.218 0l3.005 3.005a.86.86 0 0 1 .252.62.859.859 0 0 1-.252.626L7.97 11.628a.861.861 0 1 1-1.218-1.218L9.162 8l-2.41-2.41a.861.861 0 0 1 0-1.218z"}));default:StatusSize.s;return React.createElement(Svg,{ariaLabel:e.ariaLabel,className:e.className,size:e.size,viewBox:sViewBoxSize},React.createElement("circle",{cx:"6",cy:"6",r:"5",fill:"#fff"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0zm-1.25 0a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 0 1 9.5 0zM4.97 3.47a.75.75 0 0 1 1.06 0l1.94 1.94c.162.16.234.378.217.59a.748.748 0 0 1-.217.59L6.03 8.53a.75.75 0 0 1-1.06-1.06L6.44 6 4.97 4.53a.75.75 0 0 1 0-1.06z"}))}}function Svg(e){var a=e.ariaLabel?"img":"presentation",t=e.ariaLabel?getSafeId("status-".concat(statusId++,"-desc")):void 0;return React.createElement("svg",{"aria-labelledby":t,className:e.className,height:e.size,role:a,viewBox:e.viewBox,width:e.size,xmlns:"http://www.w3.org/2000/svg"},e.ariaLabel&&React.createElement("desc",{id:t},e.ariaLabel),e.children)}var Statuses={Success:{color:"success",onRenderIcon:function(e,a,t,c){return Success({ariaLabel:c,className:e,size:a})}},Failed:{color:"failed",onRenderIcon:function(e,a,t,c){return Failed({ariaLabel:c,className:e,size:a})}},Warning:{color:"warning",onRenderIcon:function(e,a,t,c){return Warning({ariaLabel:c,className:e,size:a})}},Information:{color:"active",onRenderIcon:function(e,a,t,c){return Warning({ariaLabel:c,className:css("rotate",e),size:a})}},Running:{color:"active",onRenderIcon:function(e,a,t,c){return Running({animated:t,ariaLabel:c,className:e,size:a})}},Waiting:{color:"active",onRenderIcon:function(e,a,t,c){return Waiting({ariaLabel:c,className:e,size:a})}},Queued:{color:"neutral",onRenderIcon:function(e,a,t,c){return Queued({ariaLabel:c,className:e,size:a})}},Canceled:{color:"neutral",onRenderIcon:function(e,a,t,c){return Canceled({ariaLabel:c,className:e,size:a})}},Skipped:{color:"neutral",onRenderIcon:function(e,a,t,c){return Skipped({ariaLabel:c,className:e,size:a})}}};export{Status,Statuses};