Create toaster component #142
Conversation
Codecov Report
@@ Coverage Diff @@
## master #142 +/- ##
==========================================
- Coverage 98.00% 94.87% -3.13%
==========================================
Files 22 25 +3
Lines 300 429 +129
Branches 47 75 +28
==========================================
+ Hits 294 407 +113
- Misses 6 22 +16
Continue to review full report at Codecov.
|
|
|
||
| .toastPadding { | ||
| padding: 8px 8px 0 0; | ||
|
|
There was a problem hiding this comment.
Extra space here. Which makes me wonder, is prettier not working in css?
| }: Props) => { | ||
| const [isShown, setIsShown] = useState(true); | ||
| const [height, setHeight] = useState(0); | ||
| const closeTimer = useRef<number | null>(null); |
There was a problem hiding this comment.
What it looks like for me, is that the ref is used to save the timeout id so that it can be cleared later. In Bloodhound we use react-timer-hook for timer functionality. By using this we can remove clearCloseTimer, startCloseTimer and the input ref and replace it with the hook. WDYT?
| message, | ||
| isClosable, | ||
| }: Props) => { | ||
| const [isShown, setIsShown] = useState(true); |
There was a problem hiding this comment.
Why is isShown a state that is managed inside the component and also managed outside with a prop? Is it possible to have only one place were isShown state is managed?
There was a problem hiding this comment.
This was for the animation right?
There was a problem hiding this comment.
This was so the ToastManager could close the toasts from the parent.
| message: string, | ||
| { isClosable = true, duration = 5, id, intent }: ToastSettings, | ||
| ): ToastInstance => { | ||
| const uniqueId = idCounter; |
There was a problem hiding this comment.
I think keeping state of the latest id can be avoided when using a Date() timestamp with ms as id
|
🎉 This PR is included in version 1.11.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #73