103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import { toast, ToastOptions, TypeOptions, ToastType } from "react-toastify";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import styled from "styled-components";
|
|
import { theme } from "constants/DefaultTheme";
|
|
import { AlertIcons } from "icons/AlertIcons";
|
|
import { ReduxAction } from "constants/ReduxActionConstants";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
const ToastBody = styled.div<{ type: TypeOptions; action: string }>`
|
|
height: 100%;
|
|
border-left: 4px solid ${({ type }) => theme.alert[type].color};
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
color: black;
|
|
padding-left: 5px;
|
|
display: grid;
|
|
grid-template-columns: ${props =>
|
|
props.action === "enabled" ? "20px 212px 60px" : "20px auto"};
|
|
align-items: center;
|
|
`;
|
|
|
|
const ToastMessage = styled.span`
|
|
font-size: ${props => props.theme.fontSizes[3]}px;
|
|
margin: 0 5px;
|
|
`;
|
|
|
|
const ToastAction = styled.button`
|
|
border: none;
|
|
background: rgba(214, 65, 95, 0.08);
|
|
|
|
color: #d6415f;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
float: right;
|
|
&:hover {
|
|
background: rgba(214, 65, 95, 0.2);
|
|
}
|
|
`;
|
|
|
|
const ToastIcon = {
|
|
info: AlertIcons.INFO,
|
|
success: AlertIcons.SUCCESS,
|
|
error: AlertIcons.ERROR,
|
|
warning: AlertIcons.WARNING,
|
|
default: AlertIcons.INFO,
|
|
};
|
|
|
|
type Props = ToastOptions & {
|
|
message: string;
|
|
closeToast?: () => void;
|
|
action?: { text: string; dispatchableAction: ReduxAction<any> };
|
|
};
|
|
|
|
const ToastComponent = (props: Props) => {
|
|
const dispatch = useDispatch();
|
|
const alertType = props.type || ToastType.INFO;
|
|
const Icon = ToastIcon[alertType];
|
|
return (
|
|
<ToastBody
|
|
type={alertType}
|
|
action={!!props.action ? "enabled" : "disabled"}
|
|
>
|
|
<Icon color={theme.alert[alertType].color} width={20} height={20} />
|
|
<ToastMessage>{props.message}</ToastMessage>
|
|
{props.action && (
|
|
<ToastAction
|
|
onClick={() => {
|
|
dispatch(props.action?.dispatchableAction);
|
|
props.closeToast && props.closeToast();
|
|
}}
|
|
>
|
|
{props.action.text}
|
|
</ToastAction>
|
|
)}
|
|
</ToastBody>
|
|
);
|
|
};
|
|
|
|
const Toaster = {
|
|
show: (config: Props) => {
|
|
toast(
|
|
<ToastComponent
|
|
{...config}
|
|
closeToast={config.closeToast || toast.dismiss}
|
|
/>,
|
|
{
|
|
pauseOnHover: false,
|
|
pauseOnFocusLoss: false,
|
|
autoClose: config.autoClose || 4000,
|
|
hideProgressBar:
|
|
config.hideProgressBar === undefined ? true : config.hideProgressBar,
|
|
},
|
|
);
|
|
},
|
|
clear: () => toast.dismiss(),
|
|
};
|
|
|
|
export const AppToaster = Toaster;
|