Web: components: added property for center positioning for toasts

This commit is contained in:
Daniil Senkiv 2019-07-18 17:42:30 +03:00
parent 1927efb32f
commit 2783d63887
2 changed files with 39 additions and 37 deletions

View File

@ -29,8 +29,8 @@ const toastr = {
};
const notify = (type, text, title, autoClosed = true) => {
const notify = (type, text, title, autoClosed = true, centerPosition) => {
console.log(centerPosition, ' is position')
return toast(
<>
<div>
@ -45,25 +45,26 @@ const notify = (type, text, title, autoClosed = true) => {
type: type,
closeOnClick: autoClosed,
closeButton: !autoClosed,
autoClose: autoClosed
autoClose: autoClosed,
position: centerPosition && toast.POSITION.TOP_CENTER
}
);
};
function success(text, title, autoClosed) {
return notify('success', text, title, autoClosed);
function success(text, title, autoClosed, centerPosition) {
return notify('success', text, title, autoClosed, centerPosition);
}
function error(text, title, autoClosed) {
return notify('error', text, title, autoClosed);
function error(text, title, autoClosed, centerPosition) {
return notify('error', text, title, autoClosed, centerPosition);
}
function warning(text, title, autoClosed) {
return notify('warning', text, title, autoClosed);
function warning(text, title, autoClosed, centerPosition) {
return notify('warning', text, title, autoClosed, centerPosition);
}
function info(text, title, autoClosed) {
return notify('info', text, title, autoClosed);
function info(text, title, autoClosed, centerPosition) {
return notify('info', text, title, autoClosed, centerPosition);
}
function clear() {

View File

@ -9,33 +9,34 @@ storiesOf('Components|Toast', module)
.add('all', () => {
return (
<>
<Toast/>
<Section>
<button onClick = {()=> {
toastr.success('Demo text for success Toast');
toastr.error('Demo text for error Toast');
toastr.warning('Demo text for warning Toast');
toastr.info('Demo text for info Toast');
toastr.success('Demo text for success Toast with title', 'Demo title');
toastr.error('Demo text for error Toast with title', 'Demo title');
toastr.warning('Demo text for warning Toast with title', 'Demo title');
toastr.info('Demo text for info Toast with title', 'Demo title');
<Section>
toastr.success('Demo text for success manual closed Toast', null, false);
toastr.error('Demo text for error manual closed Toast', null, false);
toastr.warning('Demo text for warning manual closed Toast', null, false);
toastr.info('Demo text for info manual closed Toast', null, false);
<Toast>
toastr.success('Demo text for success manual closed Toast with title', 'Demo title', false);
toastr.error('Demo text for error manual closed Toast with title', 'Demo title', false);
toastr.warning('Demo text for warning manual closed Toast with title', 'Demo title', false);
toastr.info('Demo text for info manual closed Toast with title', 'Demo title', false);
{toastr.success('Demo text for success Toast')}
{toastr.error('Demo text for error Toast')}
{toastr.warning('Demo text for warning Toast')}
{toastr.info('Demo text for info Toast')}
}}>Show all Toastr</button>
{toastr.success('Demo text for success Toast with title', 'Demo title')}
{toastr.error('Demo text for error Toast with title', 'Demo title')}
{toastr.warning('Demo text for warning Toast with title', 'Demo title')}
{toastr.info('Demo text for info Toast with title', 'Demo title')}
</Section>
</>
);
});
{toastr.success('Demo text for success manual closed Toast', null, false, true)}
{toastr.error('Demo text for error manual closed Toast', null, false, true)}
{toastr.warning('Demo text for warning manual closed Toast', null, false, true)}
{toastr.info('Demo text for info manual closed Toast', null, false, true)}
{toastr.success('Demo text for success manual closed Toast with title', 'Demo title', false, true)}
{toastr.error('Demo text for error manual closed Toast with title', 'Demo title', false, true)}
{toastr.warning('Demo text for warning manual closed Toast with title', 'Demo title', false, true)}
{toastr.info('Demo text for info manual closed Toast with title', 'Demo title', false, true)}
</Toast>
<button onClick = {()=> toastr.clear()}>Remove toasts</button>
</Section>
</>
);
});