remove timer from error notification

This commit is contained in:
AlicjaSzu 2020-07-02 14:44:03 +02:00
parent a3d16975da
commit 3f903b8525
5 changed files with 34 additions and 38 deletions

View file

@ -11,8 +11,8 @@ import { INotification } from "./";
import { useStyles } from "./styles"; import { useStyles } from "./styles";
export interface IMessageManagerProps extends INotification { export interface IMessageManagerProps extends INotification {
onMouseEnter: () => void; onMouseEnter?: () => void;
onMouseLeave: () => void; onMouseLeave?: () => void;
} }
export const MessageManagerTemplate: React.FC<IMessageManagerProps> = props => { export const MessageManagerTemplate: React.FC<IMessageManagerProps> = props => {
@ -32,11 +32,11 @@ export const MessageManagerTemplate: React.FC<IMessageManagerProps> = props => {
<div <div
key={props.id} key={props.id}
className={classes.snackbarContainer} className={classes.snackbarContainer}
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter && onMouseEnter}
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave && onMouseLeave}
> >
<SnackbarContent <SnackbarContent
id={props.id} id={props.id.toString()}
key={props.id} key={props.id}
aria-describedby="message-id" aria-describedby="message-id"
className={classNames(classes.snackbar, { className={classNames(classes.snackbar, {

View file

@ -11,13 +11,6 @@ import {
import Container from "./Container"; import Container from "./Container";
import Transition from "./Transition"; import Transition from "./Transition";
const containerStyle = {
display: "grid",
gridTemplateRows: "repeat(auto-fill, minmax(90px, 1fr)",
justifyContent: "end",
zIndex: 1200
};
const MessageManagerProvider = ({ children }) => { const MessageManagerProvider = ({ children }) => {
const root = useRef(null); const root = useRef(null);
const timersArr = useRef<ITimer[]>([]); const timersArr = useRef<ITimer[]>([]);
@ -51,28 +44,26 @@ const MessageManagerProvider = ({ children }) => {
}, []); }, []);
const show = useCallback((message = {}, timeout = 3000) => { const show = useCallback((message = {}, timeout = 3000) => {
const id = Math.random() const id = Date.now();
.toString(36)
.substr(2, 9);
const notification = { const notification = {
close: () => remove(id), close: () => remove(id),
id, id,
message, message,
timeout timeout
}; };
if (timeout !== null) {
const timeoutId = window.setTimeout(() => {
timerCallback(notification);
}, timeout);
const timeoutId = window.setTimeout(() => { timersArr.current.push({
timerCallback(notification); id: notification.id,
}, timeout); notification,
remaining: timeout,
timersArr.current.push({ start: new Date().getTime(),
id: notification.id, timeoutId
notification, });
remaining: timeout, }
start: new Date().getTime(),
timeoutId
});
setNotifications(state => [notification, ...state]); setNotifications(state => [notification, ...state]);
@ -112,16 +103,20 @@ const MessageManagerProvider = ({ children }) => {
createPortal( createPortal(
<TransitionGroup <TransitionGroup
appear appear
options={{ containerStyle, position: "top right" }} options={{ position: "top right" }}
component={Container} component={Container}
> >
{!!notifications.length && {!!notifications.length &&
notifications.map(notification => ( notifications.map(notification => (
<Transition key={notification.id}> <Transition key={notification.id}>
<MessageManagerTemplate <MessageManagerTemplate
onMouseEnter={() => pauseTimer(notification)}
onMouseLeave={() => resumeTimer(notification)}
{...notification} {...notification}
{...(!!notification.timeout
? {
onMouseEnter: () => pauseTimer(notification),
onMouseLeave: () => resumeTimer(notification)
}
: {})}
/> />
</Transition> </Transition>
))} ))}

View file

@ -15,14 +15,14 @@ export interface IMessage {
} }
export interface INotification { export interface INotification {
id: string; id: number;
message: IMessage; message: IMessage;
timeout: number; timeout: number;
close: () => void; close: () => void;
} }
export interface ITimer { export interface ITimer {
id: string; id: number;
notification: INotification; notification: INotification;
remaining: number; remaining: number;
start: number; start: number;
@ -36,7 +36,7 @@ export const types = {
WARNING: "warning" WARNING: "warning"
}; };
export interface INotificationContext { export interface INotificationContext {
show: (message: IMessage, timeout?: number) => void; show: (message: IMessage, timeout?: number | null) => void;
remove: (notification: INotification) => void; remove: (notification: INotification) => void;
} }

View file

@ -34,10 +34,9 @@ export const useStyles = makeStyles(
color: theme.palette.text.primary color: theme.palette.text.primary
}, },
container: { container: {
alignItems: "flex-end", display: "grid",
display: "flex", gridTemplateRows: "repeat(auto-fill, minmax(90px, 1fr))",
flexDirection: "column", justifyContent: "end",
justifyContent: "center",
left: 0, left: 0,
pointerEvents: "none", pointerEvents: "none",
position: "fixed", position: "fixed",
@ -166,6 +165,7 @@ export const useStyles = makeStyles(
}, },
borderRadius: 4, borderRadius: 4,
paddingBottom: 15, paddingBottom: 15,
paddingLeft: 5,
paddingRight: 45, paddingRight: 45,
position: "relative" position: "relative"
}, },

View file

@ -8,7 +8,8 @@ function useNotifier(): UseNotifierResult {
const notificationContext = useContext(MessageContext); const notificationContext = useContext(MessageContext);
const notify = (options: IMessage) => { const notify = (options: IMessage) => {
notificationContext.show(options, options.autohide); const timeout = options.status === "error" ? null : options.autohide;
notificationContext.show(options, timeout);
}; };
return notify; return notify;
} }