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