Skip to content

Commit c247c68

Browse files
author
ci-bot
committed
improve toaster
1 parent b82f742 commit c247c68

File tree

4 files changed

+79
-168
lines changed

4 files changed

+79
-168
lines changed

‎libs/remix-ui/toaster/src/lib/toaster.css‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
1-
.remixui_tooltip {
2-
z-index: 1001;
3-
display: flex;
4-
justify-content: space-between;
5-
align-items: center;
6-
position: fixed;
7-
min-height: 50px;
8-
padding: 16px 24px 12px;
9-
border-radius: 3px;
10-
left: 40%;
11-
font-size: 14px;
12-
text-align: center;
13-
bottom: -0px;
14-
flex-direction: row;
1+
/* Sonner toast styling */
2+
.remixui_sonner_toast {
3+
border-radius: 8px;
4+
padding: 16px 24px;
5+
font-size: 14px;
6+
min-width: 300px;
7+
max-width: 500px;
8+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
159
}
16-
@-webkit-keyframes remixui_animatebottom {
17-
0% {bottom: -300px}
18-
100% {bottom: 0px}
10+
11+
.remixui_custom_toast {
12+
display: flex;
13+
align-items: center;
14+
gap: 12px;
1915
}
20-
@keyframes remixui_animatebottom {
21-
0% {bottom: -300px}
22-
100% {bottom: 0px}
16+
17+
/* Override Sonner default styles to match Remix theme */
18+
[data-sonner-toaster] {
19+
z-index: 1001 !important;
2320
}
24-
@-webkit-keyframes remixui_animatetop {
25-
0% {bottom: 0px}
26-
100% {bottom: -300px}
21+
22+
[data-sonner-toast] {
23+
background: var(--bs-body-bg, #f8f9fa) !important;
24+
color: var(--bs-dark, #212529) !important;
25+
border: 0px solid var(--bs-dark, #6c757d) !important;
26+
font-weight: 500;
2727
}
28-
@keyframes remixui_animatetop {
29-
0% {bottom: 0px}
30-
100% {bottom: -300px}
28+
29+
[data-sonner-toast][data-styled="true"] {
30+
padding: 16px 24px !important;
31+
gap: 12px !important;
3132
}
32-
.remixui_animateTop {
33-
-webkit-animation-name: remixui_animatetop;
34-
-webkit-animation-duration: 2s;
35-
animation-name: remixui_animatetop;
36-
animation-duration: 2s;
37-
}
38-
.remixui_animateBottom {
39-
-webkit-animation-name: remixui_animatebottom;
40-
-webkit-animation-duration: 2s;
41-
animation-name: remixui_animatebottom;
42-
animation-duration: 2s;
33+
34+
/* Dark theme support */
35+
[data-sonner-toast][data-theme="dark"],
36+
.dark [data-sonner-toast] {
37+
background: var(--bs-dark, #212529) !important;
38+
color: var(--bs-light, #f8f9fa) !important;
39+
border: 0px solid var(--bs-secondary, #6c757d) !important;
4340
}

‎libs/remix-ui/toaster/src/lib/toaster.tsx‎

Lines changed: 39 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, {useEffect, useState} from 'react' // eslint-disable-line
2-
import {ModalDialog} from '@remix-ui/modal-dialog' // eslint-disable-line
1+
import React, {useEffect} from 'react' // eslint-disable-line
2+
import {Toaster as SonnerToaster, toast} from 'sonner'
33

44
import './toaster.css'
55

@@ -12,143 +12,51 @@ export interface ToasterProps {
1212
}
1313

1414
export const Toaster = (props: ToasterProps) => {
15-
const [state, setState] = useState<{
16-
message: string | JSX.Element
17-
hide: boolean
18-
hiding: boolean
19-
timeOutId: any
20-
timeOut: number
21-
showModal: boolean
22-
showFullBtn: boolean
23-
}>({
24-
message: '',
25-
hide: true,
26-
hiding: false,
27-
timeOutId: null,
28-
timeOut: props.timeOut || 7000,
29-
showModal: false,
30-
showFullBtn: false
31-
})
32-
3315
useEffect(() => {
3416
if (props.message) {
35-
const timeOutId = setTimeout(() => {
36-
setState((prevState) => {
37-
return { ...prevState, hiding: true }
38-
})
39-
}, state.timeOut)
40-
41-
setState((prevState) => {
42-
if (typeof props.message === 'string' && props.message.length > 201) {
43-
const shortTooltipText = props.message.substring(0, 200) + '...'
44-
45-
return {
46-
...prevState,
47-
hide: false,
48-
hiding: false,
49-
timeOutId,
50-
message: shortTooltipText
17+
// Show toast using Sonner
18+
const duration = props.timeOut || 2000
19+
20+
if (typeof props.message === 'string') {
21+
toast(props.message, {
22+
duration,
23+
onDismiss: () => {
24+
props.handleHide && props.handleHide()
25+
},
26+
onAutoClose: () => {
27+
props.handleHide && props.handleHide()
5128
}
52-
} else {
53-
const shortTooltipText = props.message
54-
55-
return {
56-
...prevState,
57-
hide: false,
58-
hiding: false,
59-
timeOutId,
60-
message: shortTooltipText
29+
})
30+
} else {
31+
// For JSX elements, use toast.custom
32+
toast.custom(
33+
() => (
34+
<div className="remixui_custom_toast">
35+
{props.message}
36+
</div>
37+
),
38+
{
39+
duration,
40+
onDismiss: () => {
41+
props.handleHide && props.handleHide()
42+
},
43+
onAutoClose: () => {
44+
props.handleHide && props.handleHide()
45+
}
6146
}
62-
}
63-
})
64-
}
65-
}, [props.message, props.timestamp])
66-
67-
useEffect(() => {
68-
if (state.hiding) {
69-
setTimeout(() => {
70-
closeTheToaster()
71-
}, 1800)
72-
}
73-
}, [state.hiding])
74-
75-
const showFullMessage = () => {
76-
setState((prevState) => {
77-
return { ...prevState, showModal: true }
78-
})
79-
}
80-
81-
const hideFullMessage = () => {
82-
//eslint-disable-line
83-
setState((prevState) => {
84-
return { ...prevState, showModal: false }
85-
})
86-
}
87-
88-
const closeTheToaster = () => {
89-
if (state.timeOutId) {
90-
clearTimeout(state.timeOutId)
91-
}
92-
props.handleHide && props.handleHide()
93-
setState((prevState) => {
94-
return {
95-
...prevState,
96-
message: '',
97-
hide: true,
98-
hiding: false,
99-
timeOutId: null,
100-
showModal: false
47+
)
10148
}
102-
})
103-
}
104-
105-
const handleMouseEnter = () => {
106-
if (state.timeOutId) {
107-
clearTimeout(state.timeOutId)
10849
}
109-
setState((prevState) => {
110-
return { ...prevState, timeOutId: null }
111-
})
112-
}
113-
114-
const handleMouseLeave = () => {
115-
if (!state.timeOutId) {
116-
const timeOutId = setTimeout(() => {
117-
setState((prevState) => {
118-
return { ...prevState, hiding: true }
119-
})
120-
}, state.timeOut)
121-
122-
setState((prevState) => {
123-
return { ...prevState, timeOutId }
124-
})
125-
}
126-
}
50+
}, [props.message, props.timestamp])
12751

12852
return (
129-
<>
130-
<ModalDialog id="toaster" message={props.message} cancelLabel="Close" cancelFn={() => {}} hide={!state.showModal} handleHide={hideFullMessage} />
131-
{!state.hide && (
132-
<div
133-
data-shared="tooltipPopup"
134-
className={`remixui_tooltip mb-4 alert alert-info p-2 ${state.hiding ? 'remixui_animateTop' : 'remixui_animateBottom'}`}
135-
onMouseEnter={handleMouseEnter}
136-
onMouseLeave={handleMouseLeave}
137-
>
138-
<span className="px-2">
139-
{state.message}
140-
{state.showFullBtn && (
141-
<button className="btn btn-secondary btn-sm mx-3" style={{ whiteSpace: 'nowrap' }} onClick={showFullMessage}>
142-
Show full message
143-
</button>
144-
)}
145-
</span>
146-
<span style={{ alignSelf: 'baseline' }}>
147-
<button data-id="tooltipCloseButton" className="fas fa-times btn-close p-0 mt-2" onClick={closeTheToaster}></button>
148-
</span>
149-
</div>
150-
)}
151-
</>
53+
<SonnerToaster
54+
position="bottom-center"
55+
offset="25vh"
56+
toastOptions={{
57+
className: 'remixui_sonner_toast',
58+
}}
59+
/>
15260
)
15361
}
15462

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@
230230
"sol2uml": "^2.4.3",
231231
"solhint": "^3.4.1",
232232
"solidity-comments-extractor": "^0.0.8",
233+
"sonner": "^2.0.7",
233234
"string-similarity": "^4.0.4",
234235
"svg2pdf.js": "^2.2.1",
235236
"text-encoding": "^0.7.0",

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28743,6 +28743,11 @@ sonic-boom@^2.2.1:
2874328743
dependencies:
2874428744
atomic-sleep "^1.0.0"
2874528745

28746+
sonner@^2.0.7:
28747+
version "2.0.7"
28748+
resolved "https://registry.yarnpkg.com/sonner/-/sonner-2.0.7.tgz#810c1487a67ec3370126e0f400dfb9edddc3e4f6"
28749+
integrity sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==
28750+
2874628751
sort-keys@^2.0.0:
2874728752
version "2.0.0"
2874828753
resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"

0 commit comments

Comments
 (0)