@mapbox/mr-ui
Version:
UI components for Mapbox projects
47 lines (46 loc) • 1.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlWrapper;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _maybeAddPeriod = _interopRequireDefault(require("../utils/maybe-add-period"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ControlWrapper(_ref) {
let {
id,
themeControlWrapper = '',
validationError,
children
} = _ref;
let errorEl = null;
if (validationError) {
const validationErrorId = `${id}-error`;
const errorBody = typeof validationError === 'string' ? (0, _maybeAddPeriod.default)(validationError) : validationError;
errorEl = /*#__PURE__*/_react.default.createElement("div", {
className: "bg txt-s mt3 py6 px12 bg-red-faint round border border--red color-red",
id: validationErrorId,
"data-testid": validationErrorId
}, errorBody);
}
const wrapperClasses = `relative ${themeControlWrapper}`;
return /*#__PURE__*/_react.default.createElement("div", {
className: wrapperClasses
}, children, /*#__PURE__*/_react.default.createElement("div", {
role: "alert"
}, errorEl));
}
ControlWrapper.propTypes = {
/** Should correspond to the identifier of the input. */
id: _propTypes.default.string.isRequired,
/**
* If provided, the value of this property will show up as an error message.
* Strings will end with periods.
*/
validationError: _propTypes.default.node,
/** The contents the controlWrapper contains */
children: _propTypes.default.node,
/** A space separated list of Assembly class names to override the existing presentation. */
themeControlWrapper: _propTypes.default.string
};