azure-devops-ui
Version:
React components for building web UI in Azure DevOps
37 lines (36 loc) • 2.6 kB
JavaScript
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";
export var FormItemContext = React.createContext({});
var formItemId = 1;
var FormItem = /** @class */ (function (_super) {
__extends(FormItem, _super);
function FormItem() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.id = "form-item-" + formItemId++;
return _this;
}
FormItem.prototype.render = function () {
var _this = this;
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, error = _a.error, severity = _a.severity, label = _a.label, message = _a.message, required = _a.required;
var ariaLabelledById = label ? this.id + "-label" : undefined;
return (React.createElement(Observer, { error: error, severity: severity, message: message }, function (observedProps) {
var ariaDescribedById = observedProps.message ? _this.id + "-message" : undefined;
return (React.createElement(FormItemContext.Provider, { value: { ariaDescribedById: ariaDescribedById, ariaLabelledById: 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: getSafeId(ariaLabelledById) },
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)))));
}));
};
return FormItem;
}(React.Component));
export { FormItem };