-
Notifications
You must be signed in to change notification settings - Fork 11
/
Toasty.ts
103 lines (94 loc) · 2.5 KB
/
Toasty.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { Action as ContextAction } from './store';
import { Dispatch, Reducer } from 'redux';
import { WithID } from '../../types/WithID';
import { genID } from '../../utils/genID';
import { objectMapHas } from '../utils/objectMap';
import { produce } from 'immer';
// == state ========================================================================================
export interface State {
entries: {
[ id: string ]: {
kind: 'error' | 'warning' | 'info';
message: string;
closing: boolean;
} & WithID;
};
}
export const initialState: Readonly<State> = {
entries: {}
};
// == action =======================================================================================
export type Action = {
type: 'Toasty/Push';
id: string;
kind: 'error' | 'warning' | 'info';
message: string;
} | {
type: 'Toasty/Closing';
id: string;
} | {
type: 'Toasty/Close';
id: string;
} | {
type: 'Toasty/Clear';
};
// == reducer ======================================================================================
export const reducer: Reducer<State, ContextAction> = ( state = initialState, action ) => {
return produce( state, ( newState: State ) => {
if ( action.type === 'Toasty/Push' ) {
newState.entries[ action.id ] = {
$id: action.id,
kind: action.kind,
message: action.message,
closing: false
};
} else if ( action.type === 'Toasty/Closing' ) {
if ( objectMapHas( newState.entries, action.id ) ) {
newState.entries[ action.id ].closing = true;
}
} else if ( action.type === 'Toasty/Close' ) {
delete newState.entries[ action.id ];
} else if ( action.type === 'Toasty/Clear' ) {
newState.entries = {};
}
} );
};
// == helpers ======================================================================================
export function closeToasty( { id, dispatch }: {
id: string;
dispatch: Dispatch<ContextAction>;
} ): void {
dispatch( {
type: 'Toasty/Closing',
id
} );
setTimeout(
() => {
dispatch( {
type: 'Toasty/Close',
id
} );
},
200
);
}
export function showToasty( { kind, message, dispatch, timeout }: {
kind: 'error' | 'warning' | 'info';
message: string;
dispatch: Dispatch<ContextAction>;
timeout?: number;
} ): void {
const id = genID();
dispatch( {
type: 'Toasty/Push',
id,
kind,
message
} );
if ( timeout ) {
setTimeout(
() => closeToasty( { id, dispatch } ),
1000.0 * timeout
);
}
}