-
Notifications
You must be signed in to change notification settings - Fork 8
/
ToastTestPage.tsx
69 lines (57 loc) · 1.8 KB
/
ToastTestPage.tsx
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
import { Button, Comment16Icon, Success16Icon } from '@oxide/ui'
import React, { useState } from 'react'
import { useToast } from '../hooks'
import { classed } from '@oxide/util'
const useCounter = (initialValue: number): [number, () => void] => {
const [value, setValue] = useState(initialValue)
return [value, () => setValue((v) => v + 1)]
}
const Heading = classed.h2`mb-4 mt-8 text-lg text-green-500`
const ToastTestPage = () => {
const addToast = useToast()
const [counter, incrCounter] = useCounter(1)
const [defaultCloseCounter, incrDefaultCloseCounter] = useCounter(0)
const [shouldHaveTimeout, setShouldHaveTimout] = useState(false)
const handleDefaultToast = () => {
incrCounter()
addToast({
variant: 'success',
title: `Default Toast #${counter}`,
icon: <Success16Icon />,
onClose: incrDefaultCloseCounter,
timeout: shouldHaveTimeout ? 5000 : undefined,
})
}
const handleInfoToast = () => {
addToast({
variant: 'info',
title: 'Some info here',
icon: <Comment16Icon />,
timeout: shouldHaveTimeout ? 5000 : undefined,
})
}
return (
<div>
<section>
<Heading>Default Toast</Heading>
<div>Toast Closed: {defaultCloseCounter} times</div>
<label className="block">
Should have timeout?
<input
className="ml-2"
checked={shouldHaveTimeout}
onChange={(e) => setShouldHaveTimout(e.target.checked)}
type="checkbox"
/>
</label>
<Button className="mt-4" onClick={handleDefaultToast}>
Trigger Default Toast
</Button>
<Button className="mt-4 ml-2" onClick={handleInfoToast}>
Trigger Info Toast
</Button>
</section>
</div>
)
}
export default ToastTestPage