aboutsummaryrefslogtreecommitdiff
path: root/components/toast.tsx
blob: 03a6255d4c5dd4da2423cf21b56e36a635457dfd (plain)
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/>
				</div>
			</div>
		}
		</div>
	}
}