2020-10-05 13:09:35 +00:00
|
|
|
import React from "react";
|
|
|
|
import { toast } from "react-toastify";
|
2021-02-20 14:54:12 +00:00
|
|
|
import styled from "styled-components";
|
2021-02-10 15:05:02 +00:00
|
|
|
|
|
|
|
import { CheckToastIcon, DangerToastIcon, InfoToastIcon } from "./svg";
|
2020-10-05 13:09:35 +00:00
|
|
|
import IconButton from "../icon-button";
|
|
|
|
import Text from "../text";
|
2021-02-10 15:05:02 +00:00
|
|
|
import { StyledCloseWrapper, StyledDiv, IconWrapper } from "./styled-toastr";
|
2021-02-24 17:11:23 +00:00
|
|
|
import commonIconsStyles from "../utils/common-icons-style";
|
2021-02-20 14:54:12 +00:00
|
|
|
|
|
|
|
const StyledCheckToastIcon = styled(CheckToastIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledDangerToastIcon = styled(DangerToastIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledInfoToastIcon = styled(InfoToastIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
|
2020-09-01 13:55:28 +00:00
|
|
|
// eslint-disable-next-line react/prop-types
|
2020-10-05 13:09:35 +00:00
|
|
|
const Icon = ({ type }) =>
|
|
|
|
type === "success" ? (
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledCheckToastIcon className="toastr_icon" />
|
2020-10-05 13:09:35 +00:00
|
|
|
) : type === "error" || type === "warning" ? (
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledDangerToastIcon className="toastr_icon" />
|
2020-10-05 13:09:35 +00:00
|
|
|
) : (
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledInfoToastIcon className="toastr_icon" />
|
2020-10-05 13:09:35 +00:00
|
|
|
);
|
2019-07-17 11:20:02 +00:00
|
|
|
|
|
|
|
const toastr = {
|
|
|
|
clear: clear,
|
|
|
|
error: error,
|
|
|
|
info: info,
|
|
|
|
success: success,
|
2020-10-16 13:16:01 +00:00
|
|
|
warning: warning,
|
2019-07-17 11:20:02 +00:00
|
|
|
};
|
|
|
|
|
2020-10-05 13:09:35 +00:00
|
|
|
const CloseButton = ({ closeToast }) => (
|
2020-09-25 06:01:05 +00:00
|
|
|
<StyledCloseWrapper>
|
|
|
|
<IconButton
|
|
|
|
className="closeButton"
|
|
|
|
onClick={closeToast}
|
2021-03-01 08:59:45 +00:00
|
|
|
iconName="/static/images/cross.react.svg"
|
2020-09-25 06:01:05 +00:00
|
|
|
size={12}
|
|
|
|
color="#333333"
|
|
|
|
/>
|
|
|
|
</StyledCloseWrapper>
|
2020-10-05 13:09:35 +00:00
|
|
|
);
|
2019-07-17 11:20:02 +00:00
|
|
|
|
2020-10-05 13:09:35 +00:00
|
|
|
const notify = (
|
|
|
|
type,
|
|
|
|
data,
|
|
|
|
title,
|
|
|
|
timeout = 5000,
|
|
|
|
withCross = false,
|
|
|
|
centerPosition = false
|
|
|
|
) => {
|
2019-07-17 11:20:02 +00:00
|
|
|
return toast(
|
|
|
|
<>
|
2020-09-25 06:01:05 +00:00
|
|
|
<IconWrapper>
|
|
|
|
<Icon size="medium" type={type} />
|
|
|
|
</IconWrapper>
|
2019-07-17 11:20:02 +00:00
|
|
|
<StyledDiv>
|
2020-09-25 06:42:56 +00:00
|
|
|
{title && <Text className="toast-title">{title}</Text>}
|
|
|
|
{data && <Text className="toast-text">{data}</Text>}
|
2019-07-17 11:20:02 +00:00
|
|
|
</StyledDiv>
|
|
|
|
</>,
|
|
|
|
{
|
|
|
|
type: type,
|
2019-07-18 15:26:34 +00:00
|
|
|
closeOnClick: !withCross,
|
2020-10-05 13:09:35 +00:00
|
|
|
closeButton: withCross && <CloseButton />,
|
|
|
|
autoClose: timeout === 0 ? false : timeout < 750 ? 5000 : timeout || 5000,
|
2020-10-16 13:16:01 +00:00
|
|
|
position: centerPosition && toast.POSITION.TOP_CENTER,
|
2019-07-17 11:20:02 +00:00
|
|
|
}
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2019-07-24 08:19:09 +00:00
|
|
|
function success(data, title, timeout, withCross, centerPosition) {
|
2020-10-05 13:09:35 +00:00
|
|
|
return notify("success", data, title, timeout, withCross, centerPosition);
|
2019-07-17 11:20:02 +00:00
|
|
|
}
|
|
|
|
|
2019-07-24 08:19:09 +00:00
|
|
|
function error(data, title, timeout, withCross, centerPosition) {
|
2020-10-05 13:09:35 +00:00
|
|
|
const dataType = typeof data;
|
|
|
|
const message =
|
|
|
|
dataType === "string"
|
|
|
|
? data
|
|
|
|
: dataType === "object" && data.statusText
|
|
|
|
? data.statusText
|
|
|
|
: "";
|
|
|
|
|
|
|
|
return notify("error", message, title, timeout, withCross, centerPosition);
|
2019-07-17 11:20:02 +00:00
|
|
|
}
|
|
|
|
|
2019-07-24 08:19:09 +00:00
|
|
|
function warning(data, title, timeout, withCross, centerPosition) {
|
2020-10-05 13:09:35 +00:00
|
|
|
return notify("warning", data, title, timeout, withCross, centerPosition);
|
2019-07-17 11:20:02 +00:00
|
|
|
}
|
|
|
|
|
2019-07-24 08:19:09 +00:00
|
|
|
function info(data, title, timeout, withCross, centerPosition) {
|
2020-10-05 13:09:35 +00:00
|
|
|
return notify("info", data, title, timeout, withCross, centerPosition);
|
2019-07-17 11:20:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function clear() {
|
|
|
|
return toast.dismiss();
|
|
|
|
}
|
|
|
|
|
2020-10-05 13:09:35 +00:00
|
|
|
export default toastr;
|