2019-07-17 11:20:02 +00:00
|
|
|
import React from 'react';
|
2019-07-22 11:16:13 +00:00
|
|
|
import ReactDOM from 'react-dom';
|
2019-07-17 11:20:02 +00:00
|
|
|
import { storiesOf } from '@storybook/react';
|
|
|
|
import { Toast, toastr } from 'asc-web-components';
|
|
|
|
|
2019-07-22 11:16:13 +00:00
|
|
|
class TostWrapper extends React.Component {
|
|
|
|
componentDidMount() {
|
|
|
|
this.toastContainer = document.createElement("div");
|
|
|
|
this.toastContainer.setAttribute("id", "toast-container");
|
|
|
|
document.body.appendChild(this.toastContainer);
|
2019-07-18 14:42:30 +00:00
|
|
|
|
2019-07-22 11:16:13 +00:00
|
|
|
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', '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);
|
|
|
|
};
|
2019-07-18 15:26:34 +00:00
|
|
|
|
2019-07-22 11:16:13 +00:00
|
|
|
render() {
|
|
|
|
return (<></>);
|
|
|
|
}
|
2019-07-18 15:26:34 +00:00
|
|
|
|
2019-07-22 11:16:13 +00:00
|
|
|
};
|
2019-07-18 15:26:34 +00:00
|
|
|
|
2019-07-22 11:16:13 +00:00
|
|
|
storiesOf('Components|Toast', module)
|
|
|
|
.addParameters({ viewport: { defaultViewport: 'responsive' } })
|
|
|
|
.addParameters({ options: { showAddonPanel: false } })
|
|
|
|
.add('all', () => (<TostWrapper />));
|