-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a small bounce when bookmarking a puzzle #1940
Conversation
interface BookmarkButtonProps<As extends React.ElementType = React.ElementType> | ||
extends React.HTMLAttributes<HTMLElement> { | ||
puzzleId: string; | ||
bookmarked: boolean; | ||
as?: As; | ||
} | ||
|
||
type BookmarkButtonType = < | ||
As extends React.ElementType = typeof Button | ||
>( | ||
props: BookmarkButtonProps<As> & Omit<React.ComponentPropsWithRef<As>, keyof BookmarkButtonProps>, | ||
context?: any, | ||
) => React.ReactNode; | ||
|
||
const BookmarkButton: BookmarkButtonType = React.forwardRef<HTMLElement, BookmarkButtonProps>(({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the record, these type shenanigans are pretty heavily inspired by some similar type shenanigans in react-bootstrap.
icon={bookmarked ? faStarSolid : faStarRegular} | ||
beat={animateBookmark} | ||
onAnimationEnd={onAnimationEnd} | ||
style={{ '--fa-animation-iteration-count': 1, '--fa-animation-duration': '0.5s' }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This feels just a little slow -- can we make the duration here, say, 0.2s
instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works for me, updated
9df41bf
to
1f90a46
Compare
Screen.Recording.2024-01-05.at.2.14.13.PM.mov