aws-northstar
Version:
NorthStar Design System
88 lines (84 loc) • 4.45 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/** *******************************************************************************************************************
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. *
******************************************************************************************************************** */
const react_1 = __importStar(require("react"));
const clsx_1 = __importDefault(require("clsx"));
const Box_1 = __importDefault(require("../../layouts/Box"));
const Notifications_1 = __importDefault(require("@material-ui/icons/Notifications"));
const Alert_1 = __importDefault(require("../../components/Alert"));
const Badge_1 = __importDefault(require("../../components/Badge"));
const ButtonDropdown_1 = __importDefault(require("../../components/ButtonDropdown"));
const themes_1 = require("../../themes");
const getNotificationType = (severity) => {
const notifications = {
WARNING: 'warning',
ERROR: 'error',
};
return notifications[severity] || 'info';
};
const useStyles = (0, themes_1.makeStyles)({
menuItem: {
border: 'none',
padding: 0,
maxWidth: '500px',
'&:hover': {
border: 'none',
},
},
icon: {
verticalAlign: 'middle',
},
});
/**
* A button which succinctly indicates the number of notifications as a badge, with each notification shown when the button is clicked
* */
const NotificationButton = ({ notifications = [], onDismissNotification }) => {
const styles = useStyles();
const content = (0, react_1.useMemo)(() => (react_1.default.createElement(Box_1.default, null,
react_1.default.createElement(Notifications_1.default, { className: (0, clsx_1.default)({ [styles.icon]: notifications.length === 0 }) }),
notifications.length > 0 && react_1.default.createElement(Badge_1.default, { color: "blue", content: notifications.length }))), [notifications, styles.icon]);
const items = (0, react_1.useMemo)(() => {
return notifications.map((notification) => ({
text: (react_1.default.createElement(Alert_1.default, { borderRadius: false, header: notification.title, type: getNotificationType(notification.severity), dismissible: true, onDismiss: () => onDismissNotification(notification.id) }, notification.content)),
}));
}, [notifications, onDismissNotification]);
return (react_1.default.createElement(ButtonDropdown_1.default, { menuItemClassName: styles.menuItem, disableArrowDropdown: true, items: items, content: content, darkTheme: true }));
};
exports.default = NotificationButton;