2019-07-17 11:20:02 +00:00
|
|
|
import React from 'react'
|
|
|
|
import { toast } from 'react-toastify'
|
|
|
|
import styled from 'styled-components'
|
|
|
|
import { Icons } from '../icons'
|
2020-09-25 06:01:05 +00:00
|
|
|
import IconButton from '../icon-button'
|
2019-07-17 11:20:02 +00:00
|
|
|
|
2020-09-01 13:55:28 +00:00
|
|
|
// eslint-disable-next-line react/prop-types
|
2019-07-17 11:20:02 +00:00
|
|
|
const Icon = ({ type }) => (
|
|
|
|
type === "success"
|
2020-09-25 06:01:05 +00:00
|
|
|
? <Icons.CheckToastIcon color="#333333" isfill={true} />
|
2019-07-17 11:20:02 +00:00
|
|
|
: type === "error" || type === "warning"
|
2020-09-25 06:01:05 +00:00
|
|
|
? <Icons.DangerToastIcon color="#333333" isfill={true} />
|
|
|
|
: <Icons.InfoToastIcon color="#333333" isfill={true} />
|
2019-07-17 11:20:02 +00:00
|
|
|
);
|
|
|
|
|
2020-09-25 06:01:05 +00:00
|
|
|
const IconWrapper = styled.div`
|
|
|
|
align-self: end;
|
|
|
|
display: flex;
|
|
|
|
svg{
|
|
|
|
width: 16px;
|
|
|
|
min-width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
min-height: 16px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-07-17 11:20:02 +00:00
|
|
|
const StyledDiv = styled.div`
|
|
|
|
margin-left: 15px;
|
2020-09-25 06:01:05 +00:00
|
|
|
line-height: 1.3;
|
|
|
|
align-self: center;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledCloseWrapper = styled.div`
|
|
|
|
.closeButton{
|
|
|
|
opacity: 0.5;
|
|
|
|
padding-top: 2px;
|
|
|
|
&:hover{
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
2019-07-17 11:20:02 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const ToastTitle = styled.p`
|
2020-09-25 06:01:05 +00:00
|
|
|
font-weight: bold;
|
|
|
|
margin: 0;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
line-height: 16px;
|
2019-07-17 11:20:02 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const toastr = {
|
|
|
|
clear: clear,
|
|
|
|
error: error,
|
|
|
|
info: info,
|
|
|
|
success: success,
|
|
|
|
warning: warning
|
|
|
|
};
|
|
|
|
|
2020-09-25 06:01:05 +00:00
|
|
|
const CloseButton = ({closeToast}) => (
|
|
|
|
<StyledCloseWrapper>
|
|
|
|
<IconButton
|
|
|
|
className="closeButton"
|
|
|
|
onClick={closeToast}
|
|
|
|
iconName="CrossIcon"
|
|
|
|
size={12}
|
|
|
|
color="#333333"
|
|
|
|
/>
|
|
|
|
</StyledCloseWrapper>
|
|
|
|
)
|
|
|
|
|
2019-07-17 11:20:02 +00:00
|
|
|
|
2019-07-24 08:19:09 +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:01:05 +00:00
|
|
|
{title && <ToastTitle>{title}</ToastTitle>}
|
2019-07-24 08:19:09 +00:00
|
|
|
{data}
|
2019-07-17 11:20:02 +00:00
|
|
|
</StyledDiv>
|
|
|
|
</>,
|
|
|
|
{
|
|
|
|
type: type,
|
2019-07-18 15:26:34 +00:00
|
|
|
closeOnClick: !withCross,
|
2020-09-25 06:01:05 +00:00
|
|
|
closeButton: withCross && <CloseButton/>,
|
2019-07-23 15:55:27 +00:00
|
|
|
autoClose: timeout === 0 ? false : timeout < 750 ? 5000 : (timeout || 5000),
|
2019-07-18 14:42:30 +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) {
|
|
|
|
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) {
|
|
|
|
return notify('error', data, 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) {
|
|
|
|
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) {
|
|
|
|
return notify('info', data, title, timeout, withCross, centerPosition);
|
2019-07-17 11:20:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function clear() {
|
|
|
|
return toast.dismiss();
|
|
|
|
}
|
|
|
|
|
|
|
|
export default toastr;
|