@salvoravida/reapop
Version:
A simple & customizable notifications system for React
1,223 lines (1,104 loc) • 38.5 kB
JavaScript
import React, { createContext, useContext, useState, useRef, useEffect, useReducer, useCallback } from 'react';
import { Transition, TransitionGroup } from 'react-transition-group';
var CONFIG = {
defaultProps: {},
customizeNotification: null,
generateId: null
};
var STATUSES = /*#__PURE__*/Object.freeze({
none: 'none',
info: 'info',
success: 'success',
loading: 'loading',
warning: 'warning',
error: 'error'
});
var POSITIONS = /*#__PURE__*/Object.freeze({
topCenter: 'top-center',
topLeft: 'top-left',
topRight: 'top-right',
bottomCenter: 'bottom-center',
bottomLeft: 'bottom-left',
bottomRight: 'bottom-right'
});
var classnamePrefix = 'reapop__';
var classnames = {
container: function container(position, singleContainer) {
var classes = [classnamePrefix + "container", classnamePrefix + "container--" + position];
if (singleContainer) {
classes.push(classnamePrefix + "container--single");
}
return classes;
},
notification: function notification(_notification) {
return [classnamePrefix + "notification", classnamePrefix + "notification--" + _notification.status, classnamePrefix + "notification--buttons-" + _notification.buttons.length, _notification.dismissible ? classnamePrefix + "notification--dismissible" : ''];
},
notificationIcon: classnamePrefix + "notification-icon",
notificationImageContainer: classnamePrefix + "notification-image-container",
notificationImage: classnamePrefix + "notification-image",
notificationDismissIcon: classnamePrefix + "notification-dismiss-icon",
notificationMeta: classnamePrefix + "notification-meta",
notificationTitle: classnamePrefix + "notification-title",
notificationMessage: classnamePrefix + "notification-message",
notificationButtons: classnamePrefix + "notification-buttons",
notificationButton: classnamePrefix + "notification-button",
notificationButtonText: classnamePrefix + "notification-button-text"
};
var ComponentsContext = /*#__PURE__*/createContext({});
var ThemeContext = /*#__PURE__*/createContext(undefined);
var useTheme = function useTheme() {
return useContext(ThemeContext);
};
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var Timer = /*#__PURE__*/function () {
function Timer(delay, callback) {
this.remainingTime = delay;
this.callback = callback;
}
var _proto = Timer.prototype;
_proto.pause = function pause() {
clearTimeout(this.timerId);
this.remainingTime -= new Date().getTime() - this.start.getTime();
};
_proto.resume = function resume() {
this.start = new Date();
clearTimeout(this.timerId);
this.timerId = setTimeout(this.callback, this.remainingTime);
};
return Timer;
}();
var clone = function clone(origObject) {
if (typeof origObject !== 'object' || origObject === null) {
return origObject;
}
if (Array.isArray(origObject)) {
return origObject.map(function (value) {
return clone(value);
});
}
var newObject = {};
for (var key in origObject) {
newObject[key] = clone(origObject[key]);
}
return newObject;
};
var isObject = function isObject(value) {
return !!value && value.constructor === Object;
};
var noop = function noop() {// noop
};
var useComponentsContext = function useComponentsContext() {
return useContext(ComponentsContext);
};
var _excluded = ["children", "notification", "nodeRef"];
var SlideTransition = function SlideTransition(props) {
var duration = props.duration || 300;
var collapseAnimationDuration = 250;
var children = props.children,
notification = props.notification,
nodeRef = props.nodeRef,
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
var getNode = function getNode() {
return nodeRef.current;
};
var transformDirection = [POSITIONS.topCenter, POSITIONS.bottomCenter].includes(notification.position) ? 'translateY' : 'translateX';
var transformValue = [POSITIONS.topCenter, POSITIONS.topLeft, POSITIONS.bottomLeft].includes(notification.position) ? '-100%' : '100%'; // eslint-disable-next-line no-undef
var animationProps = {
fill: 'forwards',
duration: duration
};
var onEnter = function onEnter() {
getNode().animate([{
transform: transformDirection + "(" + transformValue + ")",
opacity: 0
}, {
transform: transformDirection + "(0)",
opacity: 1
}], animationProps);
};
var onExit = function onExit() {
var hideAnimationDuration = duration;
getNode().animate([{
transform: transformDirection + "(" + transformValue + ")",
opacity: 0
}], animationProps); // `150px`: A value higher than the height a notification can have
// to create a smooth animation for displayed notifications
// when a notification is removed from a container.
getNode().animate([{
maxHeight: '150px'
}, {
margin: 0,
maxHeight: 0
}], _extends({}, animationProps, {
duration: collapseAnimationDuration,
delay: hideAnimationDuration
}));
};
return /*#__PURE__*/React.createElement(Transition, _extends({
nodeRef: nodeRef,
onEnter: onEnter,
onExit: onExit,
timeout: duration + collapseAnimationDuration
}, otherProps), children);
};
var NotificationIcon = function NotificationIcon(props) {
var theme = props.theme;
var status = props.notification.status;
var styles = theme ? theme.notificationIcon(props.notification) : {};
var iconProps = {
style: styles,
className: classnames.notificationIcon
};
switch (status) {
case STATUSES.none:
return null;
case STATUSES.info:
return /*#__PURE__*/React.createElement("svg", _extends({
viewBox: "0 0 16 16",
fill: "currentColor"
}, iconProps), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
}));
case STATUSES.loading:
return /*#__PURE__*/React.createElement("svg", _extends({
viewBox: "5 5 40 40",
fill: "currentColor"
}, iconProps), /*#__PURE__*/React.createElement("path", {
d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
}, /*#__PURE__*/React.createElement("animateTransform", {
attributeType: "xml",
attributeName: "transform",
type: "rotate",
from: "0 25 25",
to: "360 25 25",
dur: "0.5s",
repeatCount: "indefinite"
})));
case STATUSES.success:
return /*#__PURE__*/React.createElement("svg", _extends({
viewBox: "0 0 16 16",
fill: "currentColor"
}, iconProps), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
}));
case STATUSES.warning:
return /*#__PURE__*/React.createElement("svg", _extends({
viewBox: "0 0 16 16",
fill: "currentColor"
}, iconProps), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
}));
case STATUSES.error:
return /*#__PURE__*/React.createElement("svg", _extends({
viewBox: "0 0 16 16",
fill: "currentColor"
}, iconProps), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zm-6.106 4.5a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"
}));
}
};
var NotificationDismissIcon = function NotificationDismissIcon(props) {
var theme = props.theme,
notification = props.notification,
dismissNotification = props.dismissNotification;
var styles = theme ? theme.notificationDismissIcon(notification) : {};
return /*#__PURE__*/React.createElement("svg", {
className: classnames.notificationDismissIcon,
style: styles,
onClick: dismissNotification,
viewBox: "4 4 8 8",
fill: "currentColor",
"data-testid": "dismiss-icon"
}, /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
}));
};
var NotificationButton = function NotificationButton(props) {
var notification = props.notification,
theme = props.theme,
position = props.position,
button = props.button;
var _useState = useState(false),
isHovered = _useState[0],
setIsHovered = _useState[1];
var _useState2 = useState(false),
isActive = _useState2[0],
setIsActive = _useState2[1];
var state = {
isHovered: isHovered,
isActive: isActive
};
var buttonStyles = theme ? theme.notificationButton(notification, position, state) : {};
var buttonTextStyles = theme ? theme.notificationButtonText(notification, position, state) : {};
return /*#__PURE__*/React.createElement("button", {
"data-testid": "button",
style: buttonStyles,
className: classnames.notificationButton,
onMouseLeave: function onMouseLeave() {
return setIsHovered(false);
},
onMouseEnter: function onMouseEnter() {
return setIsHovered(true);
},
onMouseDown: function onMouseDown() {
return setIsActive(true);
},
onMouseUp: function onMouseUp() {
return setIsActive(false);
},
onClick: typeof button.onClick === 'function' ? function () {
return button.onClick();
} : noop
}, /*#__PURE__*/React.createElement("span", {
className: classnames.notificationButtonText,
style: buttonTextStyles
}, button.primary ? /*#__PURE__*/React.createElement("b", null, button.name) : button.name));
};
var NotificationImage = function NotificationImage(props) {
var notification = props.notification;
var theme = useTheme();
var containerStyles = theme ? theme.notificationImageContainer(notification) : {};
var imageStyles = theme ? theme.notificationImage(notification) : {};
return /*#__PURE__*/React.createElement("div", {
className: classnames.notificationImageContainer,
style: containerStyles
}, /*#__PURE__*/React.createElement("span", {
className: classnames.notificationImage,
style: _extends({}, imageStyles, {
backgroundImage: "url(" + notification.image + ")"
})
}));
};
var Notification = function Notification(props) {
var notification = props.notification,
dismiss = props.dismissNotification,
theme = props.theme,
components = props.components;
var id = notification.id,
title = notification.title,
message = notification.message,
dismissible = notification.dismissible,
showDismissButton = notification.showDismissButton,
buttons = notification.buttons,
allowHTML = notification.allowHTML,
image = notification.image;
var wrapperClassname = classnames.notification(notification);
var wrapperStyles = theme ? theme.notification(notification) : {};
var metaStyles = theme ? theme.notificationMeta(notification) : {};
var titleStyles = theme ? theme.notificationTitle(notification) : {};
var messageStyles = theme ? theme.notificationMessage(notification) : {};
var buttonsStyles = theme ? theme.notificationButtons(notification) : {};
var Icon = components.NotificationIcon || NotificationIcon;
var dismissNotification = function dismissNotification() {
return dismiss(id);
};
return /*#__PURE__*/React.createElement("div", {
"data-testid": "notification",
role: "alert",
style: wrapperStyles,
className: wrapperClassname.join(' '),
onClick: dismissible && !showDismissButton ? dismissNotification : undefined
}, /*#__PURE__*/React.createElement(Icon, {
theme: theme,
notification: notification
}), image && /*#__PURE__*/React.createElement(NotificationImage, {
notification: notification
}), /*#__PURE__*/React.createElement("div", {
style: metaStyles,
className: classnames.notificationMeta
}, title && (allowHTML ? /*#__PURE__*/React.createElement("h4", {
style: titleStyles,
className: classnames.notificationTitle,
dangerouslySetInnerHTML: {
__html: title
}
}) : /*#__PURE__*/React.createElement("h4", {
style: titleStyles,
className: classnames.notificationTitle
}, title)), message && (allowHTML ? /*#__PURE__*/React.createElement("div", {
style: messageStyles,
className: classnames.notificationMessage,
dangerouslySetInnerHTML: {
__html: message
}
}) : /*#__PURE__*/React.createElement("div", {
style: messageStyles,
className: classnames.notificationMessage
}, message))), dismissible && showDismissButton && /*#__PURE__*/React.createElement(NotificationDismissIcon, {
notification: notification,
theme: theme,
dismissNotification: dismissNotification
}), buttons.length ? /*#__PURE__*/React.createElement("div", {
onClick: dismissNotification,
className: classnames.notificationButtons,
style: buttonsStyles
}, buttons.map(function (button, index) {
return /*#__PURE__*/React.createElement(NotificationButton, {
key: button.name,
position: index,
button: button,
notification: notification,
theme: theme
});
})) : null);
};
var _excluded$1 = ["notification", "dismissNotification"];
var NotificationContainer = function NotificationContainer(props) {
var notification = props.notification,
_dismissNotification = props.dismissNotification,
transitionProps = _objectWithoutPropertiesLoose(props, _excluded$1);
var dismissAfter = notification.dismissAfter,
onAdd = notification.onAdd,
onDismiss = notification.onDismiss;
var components = useComponentsContext();
var theme = useTheme();
var Transition = components.Transition || SlideTransition;
var Notification$1 = components.Notification || Notification;
var _useState = useState(null),
timer = _useState[0],
setTimer = _useState[1];
var nodeRef = useRef(null);
useEffect(function () {
if (onAdd) {
onAdd();
}
return function () {
if (onDismiss) {
onDismiss();
}
};
}, []);
useEffect(function () {
if (!timer && dismissAfter && dismissAfter > 0) {
var _timer = new Timer(dismissAfter, function () {
return _dismissNotification(notification.id);
});
_timer.resume();
setTimer(_timer);
} else if (timer && !dismissAfter) {
timer.pause();
setTimer(null);
}
}, [dismissAfter]);
return /*#__PURE__*/React.createElement(Transition, _extends({
notification: notification,
nodeRef: nodeRef
}, transitionProps), /*#__PURE__*/React.createElement("div", {
ref: nodeRef,
"data-testid": "timed-notification",
onMouseEnter: timer ? function () {
return timer.pause();
} : undefined,
onMouseLeave: timer ? function () {
return timer.resume();
} : undefined
}, /*#__PURE__*/React.createElement(Notification$1, {
notification: notification,
theme: theme,
dismissNotification: function dismissNotification() {
return _dismissNotification(notification.id);
},
components: components
})));
};
var NotificationsContainer = function NotificationsContainer(props) {
var position = props.position,
dismissNotification = props.dismissNotification,
singleContainer = props.singleContainer;
var theme = useTheme();
var styles = theme ? theme.container(position, singleContainer) : {};
var classname = classnames.container(position, singleContainer);
var notifications = props.notifications; // when notifications are displayed at the bottom,
// we display notifications from bottom to top
if ([POSITIONS.bottomRight, POSITIONS.bottomCenter, POSITIONS.bottomLeft].includes(position)) {
notifications = notifications.slice().reverse();
}
return /*#__PURE__*/React.createElement("div", {
style: styles,
className: classname.join(' ')
}, /*#__PURE__*/React.createElement(TransitionGroup, {
component: null
}, notifications.map(function (notification) {
return /*#__PURE__*/React.createElement(NotificationContainer, {
key: notification.id,
notification: notification,
dismissNotification: dismissNotification
});
})));
};
var NotificationsSystem = function NotificationsSystem(props) {
var smallScreenBreakpoint = props.smallScreenBreakpoint || 768;
var theme = props.theme;
var components = props.components || {};
var notifications = props.notifications,
dismissNotification = props.dismissNotification;
var _useState = useState(typeof window === 'undefined' ? 0 : window.innerWidth),
windowWidth = _useState[0],
setWindowWidth = _useState[1];
var singleContainer = windowWidth < smallScreenBreakpoint; // render all notifications in the same container at the top for small screens
var positions = singleContainer ? [POSITIONS.topCenter] : Object.values(POSITIONS);
useEffect(function () {
setWindowWidth(window.innerWidth);
var updateWindowWidth = function updateWindowWidth() {
return setWindowWidth(window.innerWidth);
}; // Update window width when the window is resized
window.addEventListener('resize', updateWindowWidth);
return function () {
window.removeEventListener('resize', updateWindowWidth);
};
}, []);
return /*#__PURE__*/React.createElement(ComponentsContext.Provider, {
value: components
}, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
value: theme
}, /*#__PURE__*/React.createElement("div", null, positions.map(function (position) {
return /*#__PURE__*/React.createElement(NotificationsContainer, {
key: position,
position: position,
notifications: notifications.filter(function (notif) {
return singleContainer || position === notif.position;
}),
dismissNotification: dismissNotification,
singleContainer: singleContainer
});
}))));
};
var NotificationAction;
(function (NotificationAction) {
NotificationAction["UpsertNotification"] = "reapop/upsertNotification";
NotificationAction["DismissNotification"] = "reapop/dismissNotification";
NotificationAction["DismissNotifications"] = "reapop/dismissNotifications";
})(NotificationAction || (NotificationAction = {}));
var INITIAL_STATE = [];
var notificationsReducer = function notificationsReducer() {
return function (state, action) {
if (state === void 0) {
state = INITIAL_STATE;
}
switch (action.type) {
case NotificationAction.UpsertNotification:
{
var payload = clone(action.payload);
if (~state.findIndex(function (notif) {
return notif.id === payload.id;
})) {
return state.map(function (notif) {
return notif.id === payload.id ? payload : notif;
});
}
return [].concat(state, [payload]);
}
case NotificationAction.DismissNotification:
{
var _payload = action.payload;
return state.filter(function (notif) {
return notif.id !== _payload;
});
}
case NotificationAction.DismissNotifications:
return [];
default:
return state;
}
};
};
var setUpNotifications = function setUpNotifications(props) {
for (var key in props) {
var propName = key;
CONFIG[propName] = props[propName];
}
};
var generateId = function generateId() {
return Math.random().toString(36).slice(2, 7);
};
var prepareNotification = function prepareNotification(notification) {
var notif = clone(notification);
var defaultProps = _extends({}, CONFIG.defaultProps, {
status: STATUSES.none,
buttons: []
});
if (notif.id === undefined) {
notif.id = CONFIG.generateId ? CONFIG.generateId(notification) : generateId();
}
Object.entries(defaultProps).map(function (_ref) {
var prop = _ref[0],
defaultValue = _ref[1];
if (notif[prop] === undefined) {
notif[prop] = defaultValue;
}
});
if (typeof CONFIG.customizeNotification === 'function') {
CONFIG.customizeNotification(notif);
}
return notif;
};
function upsertNotification() {
var _ref;
var lastArg = (_ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref]);
var notification = {};
if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
notification.message = arguments.length <= 0 ? undefined : arguments[0];
}
if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'string') {
notification.status = arguments.length <= 1 ? undefined : arguments[1];
}
if (isObject(lastArg)) {
notification = _extends({}, notification, lastArg);
}
return {
type: NotificationAction.UpsertNotification,
payload: prepareNotification(notification)
};
}
var dismissNotification = function dismissNotification(notificationId) {
return {
type: NotificationAction.DismissNotification,
payload: notificationId
};
};
var dismissNotifications = function dismissNotifications() {
return {
type: NotificationAction.DismissNotifications
};
};
var notify = upsertNotification;
var ReapopNotificationsContext = /*#__PURE__*/createContext(undefined);
var NotificationsProvider = function NotificationsProvider(props) {
var _useReducer = useReducer(notificationsReducer(), []),
notifications = _useReducer[0],
dispatch = _useReducer[1];
var context = {
notifications: notifications,
notify: useCallback(function () {
var action = notify.apply(void 0, arguments);
dispatch(action);
return action.payload;
}, [dispatch]),
dismissNotification: useCallback(function (id) {
return dispatch(dismissNotification(id));
}, [dispatch]),
dismissNotifications: useCallback(function () {
return dispatch(dismissNotifications());
}, [dispatch])
};
return /*#__PURE__*/React.createElement(ReapopNotificationsContext.Provider, {
value: context
}, props.children);
};
var _excluded$2 = ["children", "nodeRef"];
var FadeTransition = function FadeTransition(props) {
var duration = props.duration || 300;
var children = props.children,
nodeRef = props.nodeRef,
otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
var getNode = function getNode() {
return nodeRef.current;
}; // eslint-disable-next-line no-undef
var animationProps = {
fill: 'forwards',
duration: duration
};
var onEnter = function onEnter() {
getNode().animate([{
opacity: 0
}, {
opacity: 1
}], animationProps);
};
var onExit = function onExit() {
getNode().animate([{
maxHeight: '150px'
}, {
opacity: 0,
maxHeight: 0,
margin: 0
}], animationProps);
};
return /*#__PURE__*/React.createElement(Transition, _extends({
nodeRef: nodeRef,
onEnter: onEnter,
onExit: onExit,
timeout: duration + 100
}, otherProps), children);
};
var _excluded$3 = ["children", "nodeRef"];
var GrowTransition = function GrowTransition(props) {
var collapseAnimationDuration = 250;
var duration = props.duration || 300;
var children = props.children,
nodeRef = props.nodeRef,
otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
var getNode = function getNode() {
return nodeRef.current;
}; // eslint-disable-next-line no-undef
var animationProps = {
fill: 'forwards',
duration: duration
};
var onEnter = function onEnter() {
getNode().animate([{
transform: 'scale(0.6)',
opacity: 0
}, {
transform: 'scale(1)',
opacity: 1
}], animationProps);
};
var onExit = function onExit() {
var hideAnimationDuration = duration;
getNode().animate([{
transform: 'scale(0.6)',
opacity: 0
}], animationProps); // `150px`: A value higher than the height a notification can have
// to create a smooth animation for displayed notifications
// when a notification is removed from a container.
getNode().animate([{
maxHeight: '150px'
}, {
margin: 0,
maxHeight: 0
}], {
fill: 'forwards',
duration: hideAnimationDuration,
delay: hideAnimationDuration
});
};
return /*#__PURE__*/React.createElement(Transition, _extends({
nodeRef: nodeRef,
onEnter: onEnter,
onExit: onExit,
timeout: duration + collapseAnimationDuration
}, otherProps), children);
};
var useNotifications = function useNotifications() {
return useContext(ReapopNotificationsContext);
};
var _containerPerPosition;
var containerPerPositionStyles = (_containerPerPosition = {}, _containerPerPosition[POSITIONS.topCenter] = {
top: '20px',
left: '50%',
transform: 'translateX(-50%)'
}, _containerPerPosition[POSITIONS.topRight] = {
top: '20px',
right: '20px'
}, _containerPerPosition[POSITIONS.topLeft] = {
top: '20px',
left: '20px'
}, _containerPerPosition[POSITIONS.bottomCenter] = {
bottom: '20px',
left: '50%',
transform: 'translateX(-50%)'
}, _containerPerPosition[POSITIONS.bottomRight] = {
bottom: '20px',
right: '20px'
}, _containerPerPosition[POSITIONS.bottomLeft] = {
bottom: '20px',
left: '20px'
}, _containerPerPosition);
var baseTheme = {
container: function container(position) {
return _extends({
position: 'fixed',
zIndex: 999999
}, containerPerPositionStyles[position]);
}
};
var _colorPerStatus;
var colorPerStatus = (_colorPerStatus = {}, _colorPerStatus[STATUSES.none] = '#ffffff', _colorPerStatus[STATUSES.info] = '#4192ff', _colorPerStatus[STATUSES.loading] = '#4192ff', _colorPerStatus[STATUSES.success] = '#32d38b', _colorPerStatus[STATUSES.warning] = '#f5aa0a', _colorPerStatus[STATUSES.error] = '#E94C58', _colorPerStatus);
var lineHeight = 1.428571429;
var atalhoTheme = /*#__PURE__*/_extends({}, baseTheme, {
notification: function notification(_notification) {
return {
display: 'flex',
width: '350px',
height: '100%',
position: 'relative',
borderRadius: '5px',
border: '1px solid rgba(0,0,0,.1)',
boxShadow: '0 3px 8px 2px rgba(0, 0, 0, 0.3)',
backgroundColor: '#2f2f36',
color: '#ffffff',
marginBottom: '20px',
cursor: _notification.dismissible && !_notification.showDismissButton ? 'pointer' : '',
zIndex: 999
};
},
notificationIcon: function notificationIcon(notification) {
return {
display: notification.image ? 'none' : 'flex',
width: '20px',
height: '20px',
boxSizing: 'border-box',
margin: '10px 0 10px 15px',
alignSelf: 'flex-start',
flexShrink: 0,
color: colorPerStatus[notification.status]
};
},
notificationDismissIcon: function notificationDismissIcon() {
return {
width: '12px',
height: '12px',
margin: '14px 10px',
cursor: 'pointer',
color: '#b9c2cb',
flexShrink: 0
};
},
notificationMeta: function notificationMeta() {
return {
verticalAlign: 'top',
boxSizing: 'border-box',
width: '100%',
padding: '10px 20px'
};
},
notificationTitle: function notificationTitle(notification) {
return {
margin: notification.message ? '0 0 10px' : 0,
fontSize: '14px',
color: '#ffffff',
fontWeight: 700,
lineHeight: lineHeight
};
},
notificationMessage: function notificationMessage() {
return {
margin: 0,
fontSize: '14px',
color: '#b9c2cb',
lineHeight: lineHeight
};
},
notificationImageContainer: function notificationImageContainer() {
return {
boxSizing: 'border-box',
padding: '10px 0 10px 15px'
};
},
notificationImage: function notificationImage() {
return {
display: 'inline-flex',
borderRadius: '40px',
width: '40px',
height: '40px',
backgroundSize: 'cover'
};
},
notificationButtons: function notificationButtons() {
return {};
},
notificationButton: function notificationButton(notification, position, state) {
return {
display: 'block',
width: '100%',
height: 100 / notification.buttons.length + "%",
minHeight: '40px',
boxSizing: 'border-box',
padding: 0,
background: '#2f2f36',
border: 'none',
borderRadius: 0,
borderLeft: '1px solid #464c5f',
outline: 'none',
textAlign: 'center',
color: state.isHovered || state.isActive ? '#349ef3' : '#ffffff',
cursor: 'pointer',
borderTop: position === 1 ? '1px solid #464c5f' : 'none'
};
},
notificationButtonText: function notificationButtonText() {
return {
display: 'block',
height: '25px',
padding: '0 15px',
minWidth: '90px',
maxWidth: '150px',
width: 'auto',
whiteSpace: 'nowrap',
overflow: 'hidden',
margin: '0 auto',
textOverflow: 'ellipsis',
textAlign: 'center',
fontSize: '14px',
lineHeight: '25px'
};
}
});
var _colorPerStatus$1;
var colorPerStatus$1 = (_colorPerStatus$1 = {}, _colorPerStatus$1[STATUSES.none] = '#ffffff', _colorPerStatus$1[STATUSES.info] = '#349ef3', _colorPerStatus$1[STATUSES.loading] = '#349ef3', _colorPerStatus$1[STATUSES.success] = '#4dc657', _colorPerStatus$1[STATUSES.warning] = '#f5aa0a', _colorPerStatus$1[STATUSES.error] = '#f5311d', _colorPerStatus$1);
var lineHeight$1 = 1.428571429;
var wyboTheme = /*#__PURE__*/_extends({}, baseTheme, {
notification: function notification(_notification) {
return {
display: 'flex',
width: '370px',
height: '100%',
position: 'relative',
borderRadius: '8px',
border: 'none',
boxShadow: '0 1px 3px -1px rgba(0, 0, 0, 0.3)',
zIndex: 999,
backgroundColor: '#ffffff',
color: '#524c4c',
borderLeft: '2px solid',
marginBottom: '20px',
borderLeftColor: colorPerStatus$1[_notification.status],
cursor: _notification.dismissible && !_notification.showDismissButton ? 'pointer' : ''
};
},
notificationIcon: function notificationIcon(notification) {
return {
display: notification.image ? 'none' : 'flex',
width: '20px',
height: '20px',
boxSizing: 'border-box',
margin: '10px 0 10px 15px',
alignSelf: 'flex-start',
flexShrink: 0,
color: colorPerStatus$1[notification.status]
};
},
notificationDismissIcon: function notificationDismissIcon() {
return {
width: '12px',
height: '12px',
margin: '14px 10px',
cursor: 'pointer',
color: '#524c4c',
flexShrink: 0
};
},
notificationMeta: function notificationMeta() {
return {
verticalAlign: 'top',
boxSizing: 'border-box',
width: '100%',
padding: '10px 20px'
};
},
notificationTitle: function notificationTitle(notification) {
return {
margin: notification.message ? '0 0 10px' : 0,
fontSize: '14px',
fontWeight: 700,
lineHeight: lineHeight$1
};
},
notificationMessage: function notificationMessage() {
return {
margin: 0,
fontSize: '14px',
lineHeight: lineHeight$1
};
},
notificationImageContainer: function notificationImageContainer() {
return {
boxSizing: 'border-box',
padding: '10px 0 10px 15px'
};
},
notificationImage: function notificationImage() {
return {
display: 'inline-flex',
borderRadius: '40px',
width: '40px',
height: '40px',
backgroundSize: 'cover'
};
},
notificationButtons: function notificationButtons() {
return {};
},
notificationButton: function notificationButton(notification, position, state) {
return {
display: 'block',
width: '100%',
height: 100 / notification.buttons.length + "%",
minHeight: '40px',
boxSizing: 'border-box',
padding: 0,
background: 'none',
border: 'none',
borderRadius: 0,
borderLeft: '1px solid rgba(0, 0, 0, 0.09)',
outline: 'none',
textAlign: 'center',
color: state.isHovered ? '#349ef3' : state.isActive ? '#228ee5' : '#524c4c',
cursor: 'pointer',
borderTop: position === 1 ? '1px solid rgba(0, 0, 0, 0.09)' : 'none'
};
},
notificationButtonText: function notificationButtonText() {
return {
display: 'block',
height: '25px',
padding: '0 15px',
minWidth: '90px',
maxWidth: '150px',
width: 'auto',
whiteSpace: 'nowrap',
overflow: 'hidden',
margin: '0 auto',
textOverflow: 'ellipsis',
textAlign: 'center',
fontSize: '14px',
lineHeight: '25px'
};
}
});
var _colorPerStatus$2;
var colorPerStatus$2 = (_colorPerStatus$2 = {}, _colorPerStatus$2[STATUSES.none] = '#ffffff', _colorPerStatus$2[STATUSES.info] = '#007bff', _colorPerStatus$2[STATUSES.loading] = '#007bff', _colorPerStatus$2[STATUSES.success] = '#28a745', _colorPerStatus$2[STATUSES.warning] = '#ffc107', _colorPerStatus$2[STATUSES.error] = '#dc3545', _colorPerStatus$2);
var lineHeight$2 = 1.428571429;
var bootstrapTheme = /*#__PURE__*/_extends({}, baseTheme, {
notification: function notification(_notification) {
return {
display: 'flex',
width: '350px',
height: '100%',
position: 'relative',
borderRadius: '4px',
border: '1px solid rgba(0,0,0,.1)',
boxShadow: '0 0.25rem 0.75rem rgba(0,0,0,.1)',
zIndex: 999,
backgroundColor: '#ffffff',
color: '#524c4c',
marginBottom: '20px',
cursor: _notification.dismissible && !_notification.showDismissButton ? 'pointer' : ''
};
},
notificationIcon: function notificationIcon(notification) {
return {
display: notification.image ? 'none' : 'flex',
width: '20px',
height: '20px',
boxSizing: 'border-box',
margin: '10px 0 10px 15px',
alignSelf: 'flex-start',
flexShrink: 0,
color: colorPerStatus$2[notification.status]
};
},
notificationDismissIcon: function notificationDismissIcon() {
return {
width: '12px',
height: '12px',
margin: '14px 10px',
cursor: 'pointer',
color: '#524c4c',
flexShrink: 0
};
},
notificationMeta: function notificationMeta() {
return {
verticalAlign: 'top',
boxSizing: 'border-box',
width: '100%',
padding: '10px 20px'
};
},
notificationTitle: function notificationTitle(notification) {
return {
margin: notification.message ? '0 0 10px' : 0,
fontSize: '14px',
color: '#6c757d',
fontWeight: 700,
lineHeight: lineHeight$2
};
},
notificationMessage: function notificationMessage() {
return {
margin: 0,
fontSize: '14px',
color: '#212529',
lineHeight: lineHeight$2
};
},
notificationImageContainer: function notificationImageContainer() {
return {
boxSizing: 'border-box',
padding: '10px 0 10px 15px'
};
},
notificationImage: function notificationImage() {
return {
display: 'inline-flex',
borderRadius: '40px',
width: '40px',
height: '40px',
backgroundSize: 'cover'
};
},
notificationButtons: function notificationButtons() {
return {};
},
notificationButton: function notificationButton(notification, position, state) {
return {
display: 'block',
width: '100%',
height: 100 / notification.buttons.length + "%",
minHeight: '40px',
boxSizing: 'border-box',
padding: 0,
background: 'none',
border: 'none',
borderRadius: 0,
borderLeft: '1px solid rgba(0,0,0,.1)',
outline: 'none',
textAlign: 'center',
color: state.isHovered || state.isActive ? '#007bff' : '#212529',
cursor: 'pointer',
borderTop: position === 1 ? '1px solid rgba(0, 0, 0, 0.09)' : 'none'
};
},
notificationButtonText: function notificationButtonText() {
return {
display: 'block',
height: '25px',
padding: '0 15px',
minWidth: '90px',
maxWidth: '150px',
width: 'auto',
whiteSpace: 'nowrap',
overflow: 'hidden',
margin: '0 auto',
textOverflow: 'ellipsis',
textAlign: 'center',
fontSize: '14px',
lineHeight: '25px'
};
}
});
export default NotificationsSystem;
export { FadeTransition, GrowTransition, NotificationsProvider, POSITIONS, STATUSES, SlideTransition, atalhoTheme, baseTheme, bootstrapTheme, dismissNotification, dismissNotifications, notify, notificationsReducer as reducer, setUpNotifications, useNotifications, wyboTheme };
//# sourceMappingURL=reapop.esm.js.map