IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: Added fix of error displaying

Browse Source
This commit is contained in:
Alexey Safronov 2020-10-05 16:09:35 +03:00
parent 63ee865d98
commit 0add76cd16
1 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
web/ASC.Web.Components/src/components/toast/toastr.js
View File

@ -1,23 +1,24 @@
import React from 'react'
import { toast } from 'react-toastify'
import styled from 'styled-components'
import { Icons } from '../icons'
import IconButton from '../icon-button'
import Text from '../text'
import React from "react";
import { toast } from "react-toastify";
import styled from "styled-components";
import { Icons } from "../icons";
import IconButton from "../icon-button";
import Text from "../text";
// eslint-disable-next-line react/prop-types
const Icon = ({ type }) => (
type === "success"
? <Icons.CheckToastIcon color="#333333" isfill={true} />
: type === "error" || type === "warning"
? <Icons.DangerToastIcon color="#333333" isfill={true} />
: <Icons.InfoToastIcon color="#333333" isfill={true} />
);
const Icon = ({ type }) =>
type === "success" ? (
<Icons.CheckToastIcon color="#333333" isfill={true} />
) : type === "error" || type === "warning" ? (
<Icons.DangerToastIcon color="#333333" isfill={true} />
) : (
<Icons.InfoToastIcon color="#333333" isfill={true} />
);
const IconWrapper = styled.div`
align-self: end;
display: flex;
svg{
svg {
width: 16px;
min-width: 16px;
height: 16px;
@ -26,31 +27,30 @@ const IconWrapper = styled.div`
`;
const StyledDiv = styled.div`
margin: 0 15px;
.toast-title{
.toast-title {
font-weight: 600;
margin: 0;
margin-bottom: 5px;
line-height: 16px;
color:#000000;
font-size:12px;
color: #000000;
font-size: 12px;
}
.toast-text{
.toast-text {
line-height: 1.3;
align-self: center;
font-size:12px;
color:#333333;
font-size: 12px;
color: #333333;
}
`;
const StyledCloseWrapper = styled.div`
.closeButton{
.closeButton {
opacity: 0.5;
padding-top: 2px;
&:hover{
&:hover {
opacity: 1;
}
}
@ -64,7 +64,7 @@ const toastr = {
warning: warning
};
const CloseButton = ({closeToast}) => (
const CloseButton = ({ closeToast }) => (
<StyledCloseWrapper>
<IconButton
className="closeButton"
@ -74,10 +74,17 @@ const CloseButton = ({closeToast}) => (
color="#333333"
/>
</StyledCloseWrapper>
)
);
const notify = (type, data, title, timeout = 5000, withCross = false, centerPosition = false) => {
const notify = (
type,
data,
title,
timeout = 5000,
withCross = false,
centerPosition = false
) => {
debugger;
return toast(
<>
<IconWrapper>
@ -91,31 +98,39 @@ const notify = (type, data, title, timeout = 5000, withCross = false, centerPos
{
type: type,
closeOnClick: !withCross,
closeButton: withCross && <CloseButton/>,
autoClose: timeout === 0 ? false : timeout < 750 ? 5000 : (timeout || 5000),
closeButton: withCross && <CloseButton />,
autoClose: timeout === 0 ? false : timeout < 750 ? 5000 : timeout || 5000,
position: centerPosition && toast.POSITION.TOP_CENTER
}
);
};
function success(data, title, timeout, withCross, centerPosition) {
return notify('success', data, title, timeout, withCross, centerPosition);
return notify("success", data, title, timeout, withCross, centerPosition);
}
function error(data, title, timeout, withCross, centerPosition) {
return notify('error', data, title, timeout, withCross, centerPosition);
const dataType = typeof data;
const message =
dataType === "string"
? data
: dataType === "object" && data.statusText
? data.statusText
: "";
return notify("error", message, title, timeout, withCross, centerPosition);
}
function warning(data, title, timeout, withCross, centerPosition) {
return notify('warning', data, title, timeout, withCross, centerPosition);
return notify("warning", data, title, timeout, withCross, centerPosition);
}
function info(data, title, timeout, withCross, centerPosition) {
return notify('info', data, title, timeout, withCross, centerPosition);
return notify("info", data, title, timeout, withCross, centerPosition);
}
function clear() {
return toast.dismiss();
}
export default toastr;
export default toastr;