stremio-web/storybook/stories/Toast/SimpleToast/SimpleToast.js

// Copyright (C) 2017-2020 Smart code 203358507

const React = require('react');
const { storiesOf } = require('@storybook/react');
const { Toasts } = require('stremio/common');
const styles = require('./styles');

storiesOf('Toast', module).add('SimpleToast', () => {
    const toastRef = React.useRef(null);

    const showToast = React.useCallback((message) => {
        toastRef.current.show({
            title: 'Something to take your attention',
            timeout: 0,
            type: 'info',
            icon: 'ic_sub',
            closeButton: true,
            ...message
        });
    }, [toastRef.current]);

    const clickSuccess = () => showToast({
        title: 'You clicked it',
        text: 'Congratulations! Click event handled successfully.',
        type: 'success',
        icon: 'ic_check',
        timeout: 2e3
    });

    return (
        <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: '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: '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 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={() => toastRef.current.show({})}>Empty</button>
            <button onClick={() => toastRef.current.hideAll()}>Close all</button>
            <Toasts ref={toastRef} className={styles['toasts-container']} />
        </div>
    );
});