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

React components for building web UI in Azure DevOps

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";const FormItemContext=React.createContext({});let formItemId=1;class FormItem extends React.Component{constructor(e){super(e),this.id="form-item-"+formItemId++,this.labelId=this.id+"-label",this.safeLabelId=getSafeId(this.labelId),this.props.emitGeneratedLabelId&&this.props.emitGeneratedLabelId(this.safeLabelId)}render(){const{ariaLabel:t,className:a,error:e,severity:s,label:m,message:r,required:o}=this.props,i=m?this.labelId:void 0;return React.createElement(Observer,{error:e,severity:s,message:r},e=>{var r=e.message?this.id+"-message":void 0;return React.createElement(FormItemContext.Provider,{value:{ariaDescribedById:r,ariaLabelledById:i,error:e.error,severity:e.severity}},React.createElement("div",{className:css(a,"flex-column")},m&&React.createElement("label",{"aria-label":t,className:css("bolt-formitem-label","body-m"),id:this.safeLabelId},m,o&&React.createElement("span",{className:"bolt-formitem-label--required-field-text","aria-hidden":"false"},"(required field)"),o&&React.createElement("abbr",{className:"bolt-formitem-label--required padding-left-4","aria-hidden":"true"},"*")),this.props.children,e.message&&React.createElement("span",{className:css("bolt-formitem-message body-xs",e.error&&(!s||s===Severity.Error)&&"bolt-formitem-message-error",e.error&&s===Severity.Warning&&"bolt-formitem-message-warning"),id:getSafeId(r),role:e.error?"alert":void 0},e.message)))})}}export{FormItemContext,FormItem};