Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 06:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ModalsContainerContext used in Toast component

Browse source
This commit is contained in:
svetlagasheva 2020-01-09 16:38:29 +02:00
parent 850f6ce399
commit a8907ffac5
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/common/Toast/Toast.js
View file

@ -1,12 +1,15 @@
const React = require('react');
const classnames = require('classnames');
const { Modal } = require('stremio-router');
const ModalsContainerContext = require('stremio-router/ModalsContainerContext/ModalsContainerContext');
const { useToastsContainer } = require('../ToastsContainerContext');
const ToastItem = require('./ToastItem');
const styles = require('./styles');
const DEFAULT_TIMEOUT = 2000;
const Toast = React.forwardRef(({ className }, ref) => {
const toastsContainer = useToastsContainer();
const [toastItems, dispatch] = React.useReducer(
(state, action) => {
switch (action.type) {
@ -45,9 +48,11 @@ const Toast = React.forwardRef(({ className }, ref) => {
React.useImperativeHandle(ref, () => ({ show, hideAll }));
return toastItems.length === 0 ? null : (
<Modal className={classnames(className, styles['toast-container'])} disabled={true}>
{toastItems.map((item, index) => (<ToastItem {...item} key={index} />))}
</Modal>
<ModalsContainerContext.Provider value={toastsContainer}>
<Modal className={classnames(className, styles['toast-container'])} disabled={true}>
{toastItems.map((item, index) => (<ToastItem {...item} key={index} />))}
</Modal>
</ModalsContainerContext.Provider>
);
});

8
src/common/Toast/styles.less
View file

@ -1,4 +1,10 @@
.toast-container {
pointer-events: none;
--nav-bar-size: 3.2rem;
position: absolute;
top: var(--nav-bar-size);
right: 0;
bottom: 0;
left: auto !important;
z-index: 0;
pointer-events: none;
}