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

React components for building web UI in Azure DevOps

import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./FormItem.css";import*as React from"react";import{Observer}from"../../Observer";import{css,getSafeId}from"../../Util";import{Severity}from"./FormItem.Props";var FormItemContext=React.createContext({}),formItemId=1,FormItem=function(r){function e(){var e=null!==r&&r.apply(this,arguments)||this;return e.id="form-item-"+formItemId++,e}return __extends(e,r),e.prototype.render=function(){var t=this,e=this.props,a=e.ariaLabel,m=e.className,r=e.error,o=e.severity,s=e.label,i=e.message,l=e.required,n=s?this.id+"-label":void 0;return React.createElement(Observer,{error:r,severity:o,message:i},function(e){var r=e.message?t.id+"-message":void 0;return React.createElement(FormItemContext.Provider,{value:{ariaDescribedById:r,ariaLabelledById:n,error:e.error,severity:e.severity}},React.createElement("div",{className:css(m,"flex-column")},s&&React.createElement("label",{"aria-label":a,className:css("bolt-formitem-label","body-m"),id:getSafeId(n)},s,l&&React.createElement("span",{className:"bolt-formitem-label--required-field-text","aria-hidden":"false"},"(required field)"),l&&React.createElement("abbr",{className:"bolt-formitem-label--required padding-left-4","aria-hidden":"true"},"*")),t.props.children,e.message&&React.createElement("span",{className:css("bolt-formitem-message body-xs",e.error&&(!o||o===Severity.Error)&&"bolt-formitem-message-error",e.error&&o===Severity.Warning&&"bolt-formitem-message-warning"),id:getSafeId(r),role:e.error?"alert":void 0},e.message)))})},e}(React.Component);export{FormItemContext,FormItem};