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

storybook SimpleToast improved

Browse source
This commit is contained in:
svetlagasheva 2020-01-09 18:44:05 +02:00
parent 709960e939
commit a92f1291da
1 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,11 +2,12 @@ const React = require('react');
const { storiesOf } = require('@storybook/react'); const { storiesOf } = require('@storybook/react');
const { Toast } = require('stremio/common'); const { Toast } = require('stremio/common');
const styles = require('./styles'); const styles = require('./styles');
const { ToastsContainerProvider } = require('stremio/common/ToastsContainerContext');
storiesOf('Toast', module).add('SimpleToast', () => { storiesOf('Toast', module).add('SimpleToast', () => {
const toastRef = React.useRef(null); const toastRef = React.useRef(null);
const showToast = (message) => React.useCallback(() => { const showToast = React.useCallback((message) => {
toastRef.current.show({ toastRef.current.show({
title: 'Something to take your attention', title: 'Something to take your attention',
timeout: 0, timeout: 0,
@ -17,7 +18,7 @@ storiesOf('Toast', module).add('SimpleToast', () => {
}); });
}, [toastRef.current]); }, [toastRef.current]);
const clickSuccess = showToast({ const clickSuccess = () => showToast({
title: 'You clicked it', title: 'You clicked it',
text: 'Congratulations! Click event handled successfully.', text: 'Congratulations! Click event handled successfully.',
type: 'success', type: 'success',
@ -27,16 +28,18 @@ storiesOf('Toast', module).add('SimpleToast', () => {
return ( return (
<div className={styles['root-container']}> <div className={styles['root-container']}>
<button onClick={showToast({ text: 'Longer message that contains a lot of words but it does not state anything. The idea is to test the handling of long messages.' })}>Long message</button> <button onClick={() => showToast({ text: 'Longer message that contains a lot of words but it does not state anything. The idea is to test the handling of long messages.' })}>Long message</button>
<button onClick={showToast({ text: 'This will close after 3 seconds', timeout: 3e3 })}>Timeout 3s</button> <button onClick={() => showToast({ text: 'This will close after 3 seconds', timeout: 3e3 })}>Timeout 3s</button>
<button onClick={showToast({ text: 'Click me and see what happens later', title: 'Click here!', onClick: clickSuccess })}>Clickable</button> <button onClick={() => showToast({ text: 'Click me and see what happens later', title: 'Click here!', onClick: clickSuccess })}>Clickable</button>
<button onClick={showToast({ text: 'Type success', type: 'success', icon: 'ic_check' })}>Success</button> <button onClick={() => showToast({ text: 'Type success', type: 'success', icon: 'ic_check' })}>Success</button>
<button onClick={showToast({ text: 'Type alert', type: 'alert', icon: 'ic_warning' })}>Alert</button> <button onClick={() => showToast({ text: 'Type alert', type: 'alert', icon: 'ic_warning' })}>Alert</button>
<button onClick={showToast({ text: 'Type error', type: 'error', icon: 'ic_x' })}>Error</button> <button onClick={() => showToast({ text: 'Type error', type: 'error', icon: 'ic_x' })}>Error</button>
<button onClick={showToast({ text: 'No title', type: 'info', title: null, icon: null })}>No title</button> <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.show({})}>Empty</button>
<button onClick={() => toastRef.current.hideAll()}>Close all</button> <button onClick={() => toastRef.current.hideAll()}>Close all</button>
<Toast ref={toastRef} className={styles['toasts-container']} /> <ToastsContainerProvider>
<Toast ref={toastRef} className={styles['toasts-container']} />
</ToastsContainerProvider>
</div> </div>
); );
}); });