azure-devops-ui
Version:
React components for building web UI in Azure DevOps
36 lines (35 loc) • 2.4 kB
JavaScript
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";
export const FormItemContext = React.createContext({});
let formItemId = 1;
export class FormItem extends React.Component {
constructor(props) {
super(props);
this.id = "form-item-" + formItemId++;
this.labelId = this.id + "-label";
this.safeLabelId = getSafeId(this.labelId);
if (this.props.emitGeneratedLabelId) {
this.props.emitGeneratedLabelId(this.safeLabelId);
}
}
render() {
const { ariaLabel, className, error, severity, label, message, required } = this.props;
const ariaLabelledById = label ? this.labelId : undefined;
return (React.createElement(Observer, { error: error, severity: severity, message: message }, (observedProps) => {
const ariaDescribedById = observedProps.message ? this.id + "-message" : undefined;
return (React.createElement(FormItemContext.Provider, { value: { ariaDescribedById, ariaLabelledById, error: observedProps.error, severity: observedProps.severity } },
React.createElement("div", { className: css(className, "flex-column") },
label && (React.createElement("label", { "aria-label": ariaLabel, className: css("bolt-formitem-label", "body-m"), id: this.safeLabelId },
label,
required && (React.createElement("span", { className: "bolt-formitem-label--required-field-text", "aria-hidden": "false" }, "(required field)")),
required && (React.createElement("abbr", { className: "bolt-formitem-label--required padding-left-4", "aria-hidden": "true" }, "*")))),
this.props.children,
observedProps.message && (React.createElement("span", { className: css("bolt-formitem-message body-xs", observedProps.error && (!severity || severity === Severity.Error) && "bolt-formitem-message-error", observedProps.error && severity === Severity.Warning && "bolt-formitem-message-warning"), id: getSafeId(ariaDescribedById), role: observedProps.error ? "alert" : undefined }, observedProps.message)))));
}));
}
}