show toast with react-toastify and make them a styled-component
Audric Ackermann
4 years ago
parent
051436339d
commit
e613613416
@ -1,75 +0,0 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionToastView = Whisper.View.extend({
|
||||
initialize(options) {
|
||||
this.props = {
|
||||
title: options.title,
|
||||
id: options.id,
|
||||
description: options.description,
|
||||
icon: options.icon,
|
||||
fadeToast: this.fadeToast.bind(this),
|
||||
closeToast: this.closeToast.bind(this),
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
this.toastView = new Whisper.ReactWrapperView({
|
||||
className: 'session-toast-wrapper',
|
||||
Component: window.Signal.Components.SessionToast,
|
||||
props: this.props,
|
||||
});
|
||||
|
||||
this.$el.prepend(this.toastView.el);
|
||||
},
|
||||
|
||||
update(options) {
|
||||
this.props.title = options.title;
|
||||
this.props.id = options.id;
|
||||
this.props.description = options.description || '';
|
||||
this.props.type = options.type || '';
|
||||
this.props.icon = options.icon || '';
|
||||
this.props.shouldFade = options.shouldFade !== false;
|
||||
|
||||
this.toastView.update(this.props);
|
||||
|
||||
this.showToast();
|
||||
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
if (this.props.shouldFade) {
|
||||
this.timer = setTimeout(this.fadeToast.bind(this), 4000);
|
||||
}
|
||||
},
|
||||
|
||||
showToast() {
|
||||
this.toastView.$el.show();
|
||||
},
|
||||
|
||||
fadeToast() {
|
||||
this.removeToast();
|
||||
this.toastView.$el.fadeOut(500, () => {
|
||||
this.toastView.remove();
|
||||
});
|
||||
},
|
||||
|
||||
closeToast() {
|
||||
this.removeToast();
|
||||
this.toastView.$el.fadeOut(125, () => {
|
||||
this.toastView.remove();
|
||||
});
|
||||
},
|
||||
|
||||
removeToast() {
|
||||
if (this.props.id) {
|
||||
window.toasts.delete(this.props.id);
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -1,31 +0,0 @@
|
||||
/* global Whisper, Mustache, _ */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.ToastView = Whisper.View.extend({
|
||||
className: 'toast',
|
||||
templateName: 'toast',
|
||||
initialize() {
|
||||
this.$el.hide();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$el.fadeOut(this.remove.bind(this));
|
||||
},
|
||||
|
||||
render() {
|
||||
this.$el.html(
|
||||
Mustache.render(
|
||||
_.result(this, 'template', ''),
|
||||
_.result(this, 'render_attributes', '')
|
||||
)
|
||||
);
|
||||
this.$el.show();
|
||||
setTimeout(this.close.bind(this), 2000);
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const SessionToastContainerPrivate = () => {
|
||||
return (
|
||||
<WrappedToastContainer
|
||||
position="bottom-right"
|
||||
autoClose={5000}
|
||||
hideProgressBar={false}
|
||||
newestOnTop={true}
|
||||
closeOnClick={true}
|
||||
rtl={false}
|
||||
pauseOnFocusLoss={true}
|
||||
draggable={true}
|
||||
pauseOnHover={true}
|
||||
transition={Slide}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const WrappedToastContainer = ({
|
||||
className,
|
||||
...rest
|
||||
}: ToastContainerProps & { className?: string }) => (
|
||||
<div className={className}>
|
||||
<ToastContainer {...rest} />
|
||||
</div>
|
||||
);
|
||||
|
||||
// tslint:disable-next-line: no-default-export
|
||||
export const SessionToastContainer = styled(SessionToastContainerPrivate).attrs(
|
||||
{
|
||||
// custom props
|
||||
}
|
||||
)`
|
||||
.Toastify__toast-container {
|
||||
}
|
||||
.Toastify__toast {
|
||||
}
|
||||
.Toastify__toast--error {
|
||||
}
|
||||
.Toastify__toast--warning {
|
||||
}
|
||||
.Toastify__toast--success {
|
||||
}
|
||||
.Toastify__toast-body {
|
||||
}
|
||||
.Toastify__progress-bar {
|
||||
}
|
||||
`;
|
||||
@ -1,164 +0,0 @@
|
||||
export function push(options: {
|
||||
title: string;
|
||||
id?: string;
|
||||
description?: string;
|
||||
type?: 'success' | 'info' | 'warning' | 'error';
|
||||
icon?: string;
|
||||
shouldFade?: boolean;
|
||||
}) {
|
||||
window.pushToast(options);
|
||||
}
|
||||
|
||||
export function pushLoadAttachmentFailure() {
|
||||
window.pushToast({
|
||||
title: window.i18n('unableToLoadAttachment'),
|
||||
type: 'error',
|
||||
id: 'unableToLoadAttachment',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushDangerousFileError() {
|
||||
window.pushToast({
|
||||
title: window.i18n('dangerousFileType'),
|
||||
type: 'error',
|
||||
id: 'dangerousFileType',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushFileSizeError(limit: number, units: string) {
|
||||
window.pushToast({
|
||||
title: window.i18n('fileSizeWarning'),
|
||||
description: `Max size: ${limit} ${units}`,
|
||||
type: 'error',
|
||||
id: 'fileSizeWarning',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushMultipleNonImageError() {
|
||||
window.pushToast({
|
||||
title: window.i18n('cannotMixImageAndNonImageAttachments'),
|
||||
type: 'error',
|
||||
id: 'cannotMixImageAndNonImageAttachments',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushCannotMixError() {
|
||||
window.pushToast({
|
||||
title: window.i18n('oneNonImageAtATimeToast'),
|
||||
type: 'error',
|
||||
id: 'oneNonImageAtATimeToast',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushMaximumAttachmentsError() {
|
||||
window.pushToast({
|
||||
title: window.i18n('maximumAttachments'),
|
||||
type: 'error',
|
||||
id: 'maximumAttachments',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushMessageBodyTooLong() {
|
||||
window.pushToast({
|
||||
title: window.i18n('messageBodyTooLong'),
|
||||
type: 'error',
|
||||
id: 'messageBodyTooLong',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushMessageBodyMissing() {
|
||||
window.pushToast({
|
||||
title: window.i18n('messageBodyMissing'),
|
||||
type: 'error',
|
||||
id: 'messageBodyMissing',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushCopiedToClipBoard() {
|
||||
window.pushToast({
|
||||
title: window.i18n('copiedToClipboard'),
|
||||
type: 'success',
|
||||
id: 'copiedToClipboard',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushForceUnlinked() {
|
||||
window.pushToast({
|
||||
title: window.i18n('successUnlinked'),
|
||||
type: 'info',
|
||||
id: 'successUnlinked',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushSpellCheckDirty() {
|
||||
window.pushToast({
|
||||
title: window.i18n('spellCheckDirty'),
|
||||
type: 'info',
|
||||
id: 'spellCheckDirty',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushAlreadyMemberOpenGroup() {
|
||||
window.pushToast({
|
||||
title: window.i18n('publicChatExists'),
|
||||
type: 'info',
|
||||
id: 'alreadyMemberPublicChat',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushUserBanSuccess() {
|
||||
window.pushToast({
|
||||
title: window.i18n('userBanned'),
|
||||
type: 'success',
|
||||
id: 'userBanned',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushUserBanFailure() {
|
||||
window.pushToast({
|
||||
title: window.i18n('userBanFailed'),
|
||||
type: 'error',
|
||||
id: 'userBanFailed',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushMessageDeleteForbidden() {
|
||||
window.pushToast({
|
||||
title: window.i18n('messageDeletionForbidden'),
|
||||
type: 'error',
|
||||
id: 'messageDeletionForbidden',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushAudioPermissionNeeded() {
|
||||
window.pushToast({
|
||||
id: 'audioPermissionNeeded',
|
||||
title: window.i18n('audioPermissionNeededTitle'),
|
||||
description: window.i18n('audioPermissionNeeded'),
|
||||
type: 'info',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushOriginalNotFound() {
|
||||
window.pushToast({
|
||||
id: 'originalMessageNotFound',
|
||||
title: window.i18n('originalMessageNotFound'),
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushOriginalNoLongerAvailable() {
|
||||
window.pushToast({
|
||||
id: 'originalMessageNotAvailable',
|
||||
title: window.i18n('originalMessageNotAvailable'),
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
export function pushFoundButNotLoaded() {
|
||||
window.pushToast({
|
||||
id: 'messageFoundButNotLoaded',
|
||||
title: window.i18n('messageFoundButNotLoaded'),
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,214 @@
|
||||
import React from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { SessionIconType } from '../../components/session/icon';
|
||||
import {
|
||||
SessionToast,
|
||||
SessionToastType,
|
||||
} from '../../components/session/SessionToast';
|
||||
|
||||
// if you push a toast manually with toast...() be sure to set the type attribute of the SessionToast component
|
||||
export function pushToastError(
|
||||
id: string,
|
||||
title: string,
|
||||
description?: string
|
||||
) {
|
||||
toast.error(
|
||||
<SessionToast
|
||||
title={title}
|
||||
description={description}
|
||||
type={SessionToastType.Error}
|
||||
/>,
|
||||
{ toastId: id }
|
||||
);
|
||||
}
|
||||
|
||||
export function pushToastWarning(
|
||||
id: string,
|
||||
title: string,
|
||||
description?: string
|
||||
) {
|
||||
toast.warning(
|
||||
<SessionToast
|
||||
title={title}
|
||||
description={description}
|
||||
type={SessionToastType.Warning}
|
||||
/>,
|
||||
{ toastId: id }
|
||||
);
|
||||
}
|
||||
|
||||
export function pushToastInfo(id: string, title: string, description?: string) {
|
||||
toast.info(
|
||||
<SessionToast
|
||||
title={title}
|
||||
description={description}
|
||||
type={SessionToastType.Info}
|
||||
/>,
|
||||
{ toastId: id }
|
||||
);
|
||||
}
|
||||
|
||||
export function pushToastSuccess(
|
||||
id: string,
|
||||
title: string,
|
||||
description?: string,
|
||||
icon?: SessionIconType
|
||||
) {
|
||||
toast.success(
|
||||
<SessionToast
|
||||
title={title}
|
||||
description={description}
|
||||
type={SessionToastType.Success}
|
||||
icon={icon}
|
||||
/>,
|
||||
{ toastId: id }
|
||||
);
|
||||
}
|
||||
|
||||
export function pushLoadAttachmentFailure() {
|
||||
pushToastError(
|
||||
'unableToLoadAttachment',
|
||||
window.i18n('unableToLoadAttachment')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushDangerousFileError() {
|
||||
pushToastError('dangerousFileType', window.i18n('dangerousFileType'));
|
||||
}
|
||||
|
||||
export function pushFileSizeError(limit: number, units: string) {
|
||||
pushToastError(
|
||||
'fileSizeWarning',
|
||||
window.i18n('fileSizeWarning'),
|
||||
`Max size: ${limit} ${units}`
|
||||
);
|
||||
}
|
||||
|
||||
export function pushMultipleNonImageError() {
|
||||
pushToastError(
|
||||
'cannotMixImageAndNonImageAttachments',
|
||||
window.i18n('cannotMixImageAndNonImageAttachments')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushCannotMixError() {
|
||||
pushToastError(
|
||||
'oneNonImageAtATimeToast',
|
||||
window.i18n('oneNonImageAtATimeToast')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushMaximumAttachmentsError() {
|
||||
pushToastError('maximumAttachments', window.i18n('maximumAttachments'));
|
||||
}
|
||||
|
||||
export function pushMessageBodyTooLong() {
|
||||
pushToastError('messageBodyTooLong', window.i18n('messageBodyTooLong'));
|
||||
}
|
||||
|
||||
export function pushMessageBodyMissing() {
|
||||
pushToastError('messageBodyMissing', window.i18n('messageBodyMissing'));
|
||||
}
|
||||
|
||||
export function pushCopiedToClipBoard() {
|
||||
pushToastInfo('copiedToClipboard', window.i18n('copiedToClipboard'));
|
||||
}
|
||||
|
||||
export function pushForceUnlinked() {
|
||||
pushToastInfo('successUnlinked', window.i18n('successUnlinked'));
|
||||
}
|
||||
|
||||
export function pushSpellCheckDirty() {
|
||||
pushToastInfo('spellCheckDirty', window.i18n('spellCheckDirty'));
|
||||
}
|
||||
|
||||
export function pushAlreadyMemberOpenGroup() {
|
||||
pushToastInfo('publicChatExists', window.i18n('publicChatExists'));
|
||||
}
|
||||
|
||||
export function pushUserBanSuccess() {
|
||||
pushToastSuccess('userBanned', window.i18n('userBanned'));
|
||||
}
|
||||
|
||||
export function pushUserBanFailure() {
|
||||
pushToastError('userBanFailed', window.i18n('userBanFailed'));
|
||||
}
|
||||
|
||||
export function pushMessageDeleteForbidden() {
|
||||
pushToastError(
|
||||
'messageDeletionForbidden',
|
||||
window.i18n('messageDeletionForbidden')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushAudioPermissionNeeded() {
|
||||
pushToastInfo(
|
||||
'audioPermissionNeeded',
|
||||
window.i18n('audioPermissionNeededTitle'),
|
||||
window.i18n('audioPermissionNeeded')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushOriginalNotFound() {
|
||||
pushToastError(
|
||||
'originalMessageNotFound',
|
||||
window.i18n('originalMessageNotFound')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushOriginalNoLongerAvailable() {
|
||||
pushToastError(
|
||||
'originalMessageNotAvailable',
|
||||
window.i18n('originalMessageNotAvailable')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushFoundButNotLoaded() {
|
||||
pushToastError(
|
||||
'messageFoundButNotLoaded',
|
||||
window.i18n('messageFoundButNotLoaded')
|
||||
);
|
||||
}
|
||||
|
||||
export function pushTooManyMembers() {
|
||||
pushToastError('tooManyMembers', window.i18n('closedGroupMaxSize'));
|
||||
}
|
||||
|
||||
export function pushPairingRequestReceived(alreadyLinked: boolean) {
|
||||
const title = alreadyLinked
|
||||
? window.i18n('devicePairingRequestReceivedLimitTitle')
|
||||
: window.i18n('devicePairingRequestReceivedNoListenerTitle');
|
||||
|
||||
const description = alreadyLinked
|
||||
? window.i18n(
|
||||
'devicePairingRequestReceivedLimitDescription',
|
||||
window.CONSTANTS.MAX_LINKED_DEVICES
|
||||
)
|
||||
: window.i18n('devicePairingRequestReceivedNoListenerDescription');
|
||||
|
||||
if (alreadyLinked) {
|
||||
toast.info(
|
||||
<SessionToast
|
||||
title={title}
|
||||
description={description}
|
||||
type={SessionToastType.Info}
|
||||
/>,
|
||||
{
|
||||
toastId: 'pairingRequestReceived',
|
||||
autoClose: false,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
toast.warning(
|
||||
<SessionToast
|
||||
title={title}
|
||||
description={description}
|
||||
type={SessionToastType.Warning}
|
||||
/>,
|
||||
{
|
||||
toastId: 'pairingRequestReceived',
|
||||
autoClose: false,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue