synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
57 lines • 3.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var icons_1 = require("@material-ui/icons");
var Typography_1 = (0, tslib_1.__importDefault)(require("../utils/typography/Typography"));
function getIcon(variant) {
switch (variant) {
case 'warning':
return react_1.default.createElement(icons_1.WarningOutlined, { className: "text-warning", fontSize: 'large' });
case 'info':
return react_1.default.createElement(icons_1.InfoOutlined, { className: "text-info", fontSize: 'large' });
case 'danger':
return react_1.default.createElement(icons_1.ErrorOutlined, { className: "text-danger", fontSize: 'large' });
case 'success':
return react_1.default.createElement(icons_1.CheckCircleOutlined, { className: "text-success", fontSize: 'large' });
default:
return react_1.default.createElement(react_1.default.Fragment, null);
}
}
/**
* Nav bar item, displayed when files have been added to the Download Cart.
* This must be configured with the URL of a page dedicated to showing the Download Cart.
*/
function FullWidthAlert(props) {
var title = props.title, description = props.description, secondaryButtonText = props.secondaryButtonText, secondaryButtonHref = props.secondaryButtonHref, primaryButtonText = props.primaryButtonText, onPrimaryButtonClick = props.onPrimaryButtonClick, show = props.show, onClose = props.onClose, autoCloseAfterDelayInSeconds = props.autoCloseAfterDelayInSeconds, _a = props.variant, variant = _a === void 0 ? 'info' : _a, transition = props.transition, _b = props.isGlobal, isGlobal = _b === void 0 ? true : _b;
var iconContent = getIcon(variant);
var hasActions = (primaryButtonText && onPrimaryButtonClick) ||
(secondaryButtonText && secondaryButtonHref);
(0, react_1.useEffect)(function () {
var timer;
if (onClose && autoCloseAfterDelayInSeconds) {
timer = setTimeout(onClose, autoCloseAfterDelayInSeconds * 1000);
}
return function () {
if (timer) {
clearTimeout(timer);
}
};
}, [onClose, autoCloseAfterDelayInSeconds]);
var additionalAlertVariantClass = variant ? "alert-" + variant : '';
return (react_1.default.createElement(react_bootstrap_1.Alert, { variant: variant, show: show, dismissible: false, transition: transition, className: "FullWidthAlert bootstrap-4-backport " + (isGlobal ? 'global' : '') + " " + additionalAlertVariantClass },
react_1.default.createElement("div", { className: "gridContainer " + (hasActions ? '' : 'noActions') + " " + (onClose ? 'hasCloseButton' : '') },
react_1.default.createElement("span", { className: "iconArea" }, iconContent),
react_1.default.createElement("span", { className: "messageArea" },
react_1.default.createElement(Typography_1.default, { variant: "headline3" }, title),
react_1.default.createElement(Typography_1.default, { variant: "body1" }, description)),
secondaryButtonText && secondaryButtonHref && (react_1.default.createElement("a", { className: "secondaryButton", target: "_blank", rel: "noopener noreferrer", href: secondaryButtonHref },
' ',
secondaryButtonText)),
primaryButtonText && onPrimaryButtonClick && (react_1.default.createElement(react_bootstrap_1.Button, { className: "primaryButton", variant: "secondary", onClick: onPrimaryButtonClick }, primaryButtonText)),
onClose && (react_1.default.createElement("button", { className: "closeAlert", onClick: onClose },
react_1.default.createElement(icons_1.Clear, { fontSize: 'large' }))))));
}
exports.default = FullWidthAlert;
//# sourceMappingURL=FullWidthAlert.js.map