Skip to content

Commit 9f116fd

Browse files
committed
✨ Make Toast positionable
1 parent 1d3eaaf commit 9f116fd

File tree

7 files changed

+84
-8
lines changed

7 files changed

+84
-8
lines changed

src/components/Toast/Toast.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import './toast.scss'
77
interface Props extends ToastProps {}
88
99
const {
10+
position,
1011
className
1112
} = Astro.props
1213
1314
const classes = [
1415
'w-toast',
16+
position,
1517
className
1618
].filter(Boolean).join(' ')
1719
---

src/components/Toast/Toast.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
import Alert from '../Alert/Alert.svelte'
44
import './toast.scss'
55
6+
export let position: ToastProps['position'] = ''
67
export let className: ToastProps['className'] = ''
78
89
const classes = [
910
'w-toast',
11+
position,
1012
className
1113
].filter(Boolean).join(' ')
1214
</script>

src/components/Toast/Toast.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ type ReactToastProps = {
1111

1212
const Toast = ({
1313
icon,
14+
position,
1415
className,
1516
children,
1617
...rest
1718
}: ReactToastProps) => {
1819
const classes = [
1920
'w-toast',
21+
position,
2022
className
2123
].filter(Boolean).join(' ')
2224

src/components/Toast/toast.scss

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,43 @@
11
@import '../../scss/config.scss';
22

33
.w-toast {
4-
@include Transition(transform);
54
background: #000;
65
position: fixed;
76
right: 20px;
87
bottom: 20px;
98
transform: translateY(calc(100% + 25px));
109

10+
&:not(.no-anim) {
11+
@include Transition(transform);
12+
}
13+
1114
&.show {
1215
transform: translateY(0);
1316
}
17+
18+
&.bottom-left,
19+
&.top-left {
20+
right: auto;
21+
left: 20px;
22+
}
23+
24+
&.top-left,
25+
&.top-right,
26+
&.top-full {
27+
bottom: auto;
28+
top: 20px;
29+
transform: translateY(calc(-100% - 25px));
30+
31+
&.show {
32+
transform: translateY(0);
33+
}
34+
}
35+
36+
&.bottom-full {
37+
left: 20px;
38+
}
39+
40+
&.top-full {
41+
left: 20px;
42+
}
1443
}

src/components/Toast/toast.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { AlertProps } from '../Alert/alert'
22

33
export type ToastProps = {
4+
position?: string
45
[key: string]: any
56
} & AlertProps

src/pages/toast.astro

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,36 @@ const sections = [
153153
</section.component>
154154
</ComponentWrapper>
155155

156+
<ComponentWrapper title="Toast in bottom left">
157+
<Button theme="secondary" id={`toast-btn-9${index}`}>
158+
Show Toast
159+
</Button>
160+
161+
<section.component title="Bottom left" id={`toast-9${index}`} position="bottom-left">
162+
Toast in bottom left corner
163+
</section.component>
164+
</ComponentWrapper>
165+
166+
<ComponentWrapper title="Toast in top left">
167+
<Button theme="secondary" id={`toast-btn-10${index}`}>
168+
Show Toast
169+
</Button>
170+
171+
<section.component title="Top left" id={`toast-10${index}`} position="top-left">
172+
Toast in top left corner
173+
</section.component>
174+
</ComponentWrapper>
175+
176+
<ComponentWrapper title="Toast in top right">
177+
<Button theme="secondary" id={`toast-btn-11${index}`}>
178+
Show Toast
179+
</Button>
180+
181+
<section.component title="Top right" id={`toast-11${index}`} position="top-right">
182+
Toast in top right corner
183+
</section.component>
184+
</ComponentWrapper>
185+
156186
<ComponentWrapper title="Dismissable toast with long timeout">
157187
<Button theme="secondary" id={`dismissable-show-${index}`}>
158188
Show Toast
@@ -178,9 +208,9 @@ const sections = [
178208
</section.component>
179209
</ComponentWrapper>
180210

181-
<ComponentWrapper title="Programmatically setting theme">
211+
<ComponentWrapper title="Programmatically setting theme & pos">
182212
<Button theme="secondary" id={`themed-btn-${index}`}>
183-
Show Toast
213+
Show Toast in top-left corner
184214
</Button>
185215

186216
<section.component title="Original title" id={`themed-toast-${index}`}>
@@ -206,7 +236,7 @@ const sections = [
206236
?.addEventListener('click', callback)
207237
}
208238

209-
const ids = Array(8).fill(10).map((x, index) => x * (index + 1))
239+
const ids = Array(11).fill(10).map((x, index) => x * (index + 1))
210240
const buttons = [
211241
'astro',
212242
'svelte',
@@ -256,7 +286,8 @@ const sections = [
256286
element: `#themed-toast-${x}`,
257287
title: 'Title set through JS',
258288
content: 'Theme set to "success"',
259-
theme: 'success'
289+
theme: 'success',
290+
position: 'top-left'
260291
})
261292
})
262293
})

src/utils/toast.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type Toast = {
66
title?: AlertProps['title']
77
content?: string
88
theme?: AlertProps['theme']
9+
position?: string
910
}
1011

1112
let defaultTimeout = 5000
@@ -21,17 +22,20 @@ export const toast = (config: Toast | string) => {
2122
timeout,
2223
title,
2324
content,
24-
theme
25+
theme,
26+
position
2527
} = (typeof config === 'string' ? {} : config) as Toast
2628

2729
const htmlElement = document.querySelector(element)
2830

2931
if (htmlElement) {
30-
htmlElement.classList.add('show')
31-
3232
if (theme) {
3333
htmlElement.classList.add(theme)
3434
}
35+
36+
if (position) {
37+
htmlElement.classList.add(position, 'no-anim')
38+
}
3539

3640
if (title) {
3741
const titleElement = htmlElement.querySelector('.alert-title')
@@ -45,6 +49,11 @@ export const toast = (config: Toast | string) => {
4549
contentElement ? contentElement.innerHTML = content : null
4650
}
4751

52+
setTimeout(() => {
53+
htmlElement.classList.remove('no-anim')
54+
htmlElement.classList.add('show')
55+
}, 0)
56+
4857
setTimeout(() => {
4958
htmlElement.classList.remove('show')
5059
}, timeout || defaultTimeout)

0 commit comments

Comments
 (0)