@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
61 lines • 3.88 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useCallback, useRef } from 'react';
import classnames from 'classnames';
import ModalContainer from '../ModalContainer';
import Overlay from '../Overlay';
import Text from '../Text';
import { DEFAULTS, STYLE } from './OverlayAlert.constants';
import './OverlayAlert.style.scss';
import { v4 as uuidV4 } from 'uuid';
import { useShouldCloseOnEsc } from '../../hooks/useShouldCloseOnEsc';
/**
* The OverlayAlert component.
*
* @beta
*/
var OverlayAlert = function (props) {
var actions = props.actions, children = props.children, className = props.className, controls = props.controls, details = props.details, modalColor = props.modalColor, _a = props.overlayColor, overlayColor = _a === void 0 ? DEFAULTS.OVERLAY_COLOR : _a, title = props.title, _b = props.focusLockProps, focusLockProps = _b === void 0 ? DEFAULTS.FOCUS_LOCK_PROPS : _b, onClose = props.onClose, ariaLabel = props["aria-label"], ariaLabelledby = props["aria-labelledby"], ariaDescribedby = props["aria-describedby"], other = __rest(props, ["actions", "children", "className", "controls", "details", "modalColor", "overlayColor", "title", "focusLockProps", "onClose", 'aria-label', 'aria-labelledby', 'aria-describedby']);
var id = useRef(uuidV4());
var detailsId = useRef(uuidV4());
var shouldCloseOnEsc = useShouldCloseOnEsc().shouldCloseOnEsc;
var onKeyDown = useCallback(function (event) {
if (event.key === 'Escape' && shouldCloseOnEsc) {
onClose === null || onClose === void 0 ? void 0 : onClose();
}
}, [onClose, shouldCloseOnEsc]);
var ariaLabelledbyProp = ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : (title ? id.current : undefined);
var ariaDescribedbyProp = ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : (details && !children ? detailsId.current : undefined);
return (React.createElement(Overlay, __assign({ className: classnames(className, STYLE.wrapper), color: overlayColor, onKeyDown: onKeyDown }, other),
React.createElement(ModalContainer, { className: classnames(STYLE.modalContainer), round: 75, color: modalColor, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyProp, "aria-describedby": ariaDescribedbyProp, focusLockProps: focusLockProps },
React.createElement("div", null,
React.createElement("div", null, controls)),
!!title && (React.createElement("div", { className: classnames(STYLE.title) },
React.createElement(Text, { className: classnames(STYLE.title), type: "title", tagName: "h2", id: id.current }, title))),
React.createElement("div", null, children
? children
: !!details && (React.createElement(Text, { className: classnames(STYLE.details), type: "body-primary", tagName: "p", id: detailsId.current }, details))),
React.createElement("div", null, actions))));
};
export default OverlayAlert;
//# sourceMappingURL=OverlayAlert.js.map