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

ToastsContainerProvider used in RouterDecorator

Browse source
This commit is contained in:
svetlagasheva 2020-01-10 15:27:51 +02:00
parent 322de9e4b8
commit ce399b3a0f
5 changed files with 16 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/Toasts/Toasts.js
View file

@ -1,10 +1,8 @@
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 Toast = require('./Toast');
const styles = require('./styles');
const DEFAULT_TIMEOUT = 2000;
@ -47,7 +45,7 @@ const Toasts = React.forwardRef(({ className }, ref) => {
return toasts.length === 0 ? null : (
<ModalsContainerContext.Provider value={toastsContainer}>
<Modal className={classnames(className, styles['toasts-container'])} disabled={true}>
<Modal className={className} disabled={true}>
{toasts.map((toast, index) => (<Toast {...toast} key={index} />))}
</Modal>
</ModalsContainerContext.Provider>

3
src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
View file

@ -1,13 +1,14 @@
const React = require('react');
const PropTypes = require('prop-types');
const ToastsContainerContext = require('./ToastsContainerContext');
const styles = require('./styles');
const ToastsContainerProvider = ({ children }) => {
const [container, setContainer] = React.useState(null);
return (
<ToastsContainerContext.Provider value={container}>
{container instanceof HTMLElement ? children : null}
<div ref={setContainer} className={'toasts-container'} />
<div ref={setContainer} className={styles['toasts-container']} />
</ToastsContainerContext.Provider>
);
};

0
src/common/Toasts/styles.less → src/common/Toasts/ToastsContainerContext/styles.less
View file

21
storybook/RouterDecorator/RouterDecorator.js
View file

@ -2,20 +2,23 @@ const React = require('react');
const classnames = require('classnames');
const Route = require('stremio-router/Route');
const { RouteFocusedProvider } = require('stremio-router/RouteFocusedContext');
const { ToastsContainerProvider } = require('stremio/common/Toasts/ToastsContainerContext');
const appStyles = require('stremio/App/styles');
const styles = require('./styles');
const RouterDecorator = ({ children }) => (
<div id={'app'}>
<div className={classnames('routes-container', appStyles['router'])}>
<RouteFocusedProvider value={true}>
<Route>
<div className={styles['route-content-container']}>
{children}
</div>
</Route>
</RouteFocusedProvider>
</div>
<ToastsContainerProvider>
<div className={classnames('routes-container', appStyles['router'])}>
<RouteFocusedProvider value={true}>
<Route>
<div className={styles['route-content-container']}>
{children}
</div>
</Route>
</RouteFocusedProvider>
</div>
</ToastsContainerProvider>
</div>
);

5
storybook/stories/Toast/SimpleToast/SimpleToast.js
View file

@ -2,7 +2,6 @@ const React = require('react');
const { storiesOf } = require('@storybook/react');
const { Toasts } = require('stremio/common');
const styles = require('./styles');
const { ToastsContainerProvider } = require('stremio/common/ToastsContainerContext');
storiesOf('Toast', module).add('SimpleToast', () => {
const toastRef = React.useRef(null);
@ -37,9 +36,7 @@ storiesOf('Toast', module).add('SimpleToast', () => {
<button onClick={() => showToast({ text: 'No title', type: 'info', title: null, icon: null })}>No title</button>
<button onClick={() => toastRef.current.show({})}>Empty</button>
<button onClick={() => toastRef.current.hideAll()}>Close all</button>
<ToastsContainerProvider>
<Toasts ref={toastRef} className={styles['toasts-container']} />
</ToastsContainerProvider>
<Toasts ref={toastRef} className={styles['toasts-container']} />
</div>
);
});