@mapbox/mr-ui
Version:
UI components for Mapbox projects
81 lines (80 loc) • 3.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlAlert;
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _icon = _interopRequireDefault(require("../icon"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ControlAlert(_ref) {
let {
theme,
children,
autoFocus = false,
onButtonClick
} = _ref;
const container = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
if (autoFocus && container.current) {
container.current.focus();
}
}, [autoFocus]);
const renderDismissButton = () => /*#__PURE__*/_react.default.createElement(_tooltip.default, {
content: "Dismiss"
}, /*#__PURE__*/_react.default.createElement("button", {
"aria-label": "Dismiss",
className: "bg-transparent color-gray-dark color-blue-on-hover px0 py0",
"data-testid": "alert-dismiss",
onClick: onButtonClick
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
name: "close",
inline: true,
size: "1.3em"
})));
const containerClasses = (0, _classnames.default)('round px24 py24 flex', {
'bg-green-faint': theme === 'success',
'bg-red-faint': theme === 'error',
'bg-yellow-faint': theme === 'warning' || theme === 'locked'
});
let iconName = 'alert';
if (theme === 'success') {
iconName = 'check';
} else if (theme === 'locked') {
iconName = 'lock';
}
return /*#__PURE__*/_react.default.createElement("div", {
className: containerClasses
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex-child-no-shrink"
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
name: iconName,
inline: true,
size: "1.3em"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "flex-child-grow",
ref: container,
role: autoFocus ? 'alert' : null,
tabIndex: autoFocus ? -1 : null
}, children), onButtonClick && renderDismissButton());
}
ControlAlert.propTypes = {
/**
* The alert `theme` options are "error", "locked", "success", and
* "warning".
*/
theme: _propTypes.default.oneOf(['error', 'locked', 'success', 'warning']).isRequired,
/** The content of the alert. */
children: _propTypes.default.node.isRequired,
/** Whether to use ARIA alert role for screen readers or not. */
autoFocus: _propTypes.default.bool,
/**
* Called on click of dismiss button. Must have this callback to display
* the button.
*/
onButtonClick: _propTypes.default.func
};