1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import { CSSProperties, ReactNode, Component } from "react";
import CloseIcon from '@material-ui/icons/Close';
export function ToastArea(props: {
style?: CSSProperties
children?: ReactNode
}) {
return <div id="ToastArea" style={{
position: "fixed",
whiteSpace: "nowrap",
bottom: 12,
left: "50%",
transform: "translateX(-50%)",
zIndex: 1,
maxWidth: 600,
width: "calc(100% - 48px - 48px)",
margin: "0 24px",
...props.style
}}>{props.children}</div>
}
export class Toast extends Component<{
text?: string
icon?: ReactNode
children?: ReactNode
type?: "normal"|"confirmation"|"error"
style?: CSSProperties
}> {
state = { render: true }
close = () => this.setState({ render: false })
render () {
if (!this.state.render) return null;
return <div style={{
padding: 0,
marginBottom: 12,
borderRadius: 8,
boxShadow: "0 8px 12px -4px #00000033",
color:
this.props.type === "confirmation" ? "var(--background)" : "var(--text)",
backgroundColor:
this.props.type === "normal" ? "var(--background)" :
this.props.type === "confirmation" ? "var(--disk-b)" :
this.props.type === "error" ? "var(--disk-a)" : "var(--background)",
...this.props.style
}}>
{
this.props.children ?
this.props.children :
<div style={{ lineHeight: 0 }}>
<div style={{
fontSize: 0,
margin: 16,
display: "inline-block",
verticalAlign: "top",
width: 32, height: 32
}}>{this.props.icon}</div>
<h2 style={{
margin: "20px 0",
display: "inline-block",
width: "calc(100% - 128px)",
verticalAlign: "top",
fontSize: 20
}}>{this.props.text}</h2>
<div style={{
padding: 20,
display: "inline-block",
cursor: "pointer"
}} onClick={this.close}>
<CloseIcon style={{ fontSize: 24 }}/>
</div>
</div>
}
</div>
}
}
|