52 lines
2.8 KiB
JavaScript
52 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { storiesOf } from '@storybook/react';
|
|
import { Toast, toastr, Link, Icons, Button } from 'asc-web-components';
|
|
|
|
class TostWrapper extends React.Component {
|
|
componentDidMount() {
|
|
this.toastContainer = document.createElement("div");
|
|
this.toastContainer.setAttribute("id", "toast-container");
|
|
document.body.appendChild(this.toastContainer);
|
|
|
|
ReactDOM.render(<Toast />,
|
|
document.getElementById("toast-container"),
|
|
() => {
|
|
toastr.success('Demo text for success Toast closes in 30 seconds or on click', null, 30000);
|
|
toastr.error('Demo text for error Toast closes in 28 seconds or on click', null, 28000);
|
|
toastr.warning('Demo text for warning Toast closes in 25 seconds or on click', null, 25000);
|
|
toastr.info('Demo text for info Toast closes in 15 seconds or on click', null, 15000);
|
|
toastr.success('Demo text for success Toast with title closes in 12 seconds or on click', 'Demo title', 12000);
|
|
toastr.error('Demo text for error Toast with title closes in 10 seconds or on click', 'Demo title', 10000);
|
|
toastr.warning('Demo text for warning Toast with title closes in 8 seconds or on click', 'Demo title', 8000);
|
|
toastr.info('Demo text for info Toast with title closes in 6 seconds or on click', 'Demo title', 6000);
|
|
toastr.success('Demo text for success manual closed Toast', null, 0, true, true);
|
|
toastr.error('Demo text for error manual closed Toast', null, 0, true, true);
|
|
toastr.warning('Demo text for warning manual closed Toast', null, 0, true, true);
|
|
toastr.info('Demo text for info manual closed Toast', null, 0, true, true);
|
|
toastr.success(<>
|
|
Demo text for success manual closed Toast with title and contains icon <Icons.AimIcon /> and button <Button label='OK' onClick={()=>alert('button clicked!')} /> and <Link type = "page" color="gray" href="https://github.com" text = 'gray link' />
|
|
</>, 'Demo title', 0, true, true);
|
|
toastr.error('Demo text for error manual closed Toast with title', 'Demo title', 0, true, true);
|
|
toastr.warning('Demo text for warning manual closed Toast with title', 'Demo title', 0, true, true);
|
|
toastr.info('Demo text for info manual closed Toast with title', 'Demo title', 0, true, true);
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
toastr.clear();
|
|
ReactDOM.unmountComponentAtNode(this.toastContainer);
|
|
document.body.removeChild(this.toastContainer);
|
|
};
|
|
|
|
render() {
|
|
return (<></>);
|
|
}
|
|
|
|
};
|
|
|
|
storiesOf('Components|Toast', module)
|
|
.addParameters({ viewport: { defaultViewport: 'responsive' } })
|
|
.addParameters({ options: { showAddonPanel: false } })
|
|
.add('all', () => (<TostWrapper />));
|