Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Feat/add on arrow release #145

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feat/add on arrow release #145

wants to merge 3 commits into from

Conversation

yujhenchen
Copy link

Resolves #143

Based on this issue: Need onArrowRelease function param for useFocusable

Summary

Implemented the onArrowRelease callback function in the useFocusable hook, allowing users to pass a custom function that is triggered when an arrow key is released.

Usage

 const { ref, focused } = useFocusable({
    onArrowRelease: (direction: string) => {
        // do something when the target arrow key is released
    }
  });

Demo

A ProgressBar component that allows progress to be updated by long-pressing the right arrow key.

ProgressBar.mp4

Looking forward to any feedback on the changes!

@predikament predikament added the enhancement New feature or request label Oct 11, 2024
@predikament
Copy link
Collaborator

@yujhenchen: Thanks for opening a PR with this suggestion - We'll review it as soon as possible and let you know.

asgvard
asgvard requested changes Oct 14, 2024
View reviewed changes
Copy link
Collaborator

@asgvard asgvard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! Thanks for the contribution. I can see that it might be useful to have arrow release events as well. Looks good to me.
Please address the Prettier comment below, otherwise all good :)

src/SpatialNavigation.ts Outdated
Comment on lines 1074 to 1079
? isIncrementalDirection
? siblingCutoffCoordinate >= currentCutoffCoordinate // horizontal LTR next
: siblingCutoffCoordinate <= currentCutoffCoordinate // horizontal LTR previous
: isIncrementalDirection
? siblingCutoffCoordinate <= currentCutoffCoordinate // horizontal RTL next
: siblingCutoffCoordinate >= currentCutoffCoordinate; // horizontal RTL previous
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make sure to run Prettier on your code. All these small changes will be changed back next time we run Prettier. We will automate it with Husky in the future, but for now please only include changes that are relevant to your feature :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @asgvard
Thanks for your review :) I just reverted these unrelated changes. Could you take another quick look to see if everything is good to merge?
Regarding adding Husky, I have used it before in another project and it is really convenient. Can I try and create another issue and PR to deal with it 😀 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xavi160 xavi160 Awaiting requested review from xavi160

@predikament predikament Awaiting requested review from predikament

@Braggiouy Braggiouy Awaiting requested review from Braggiouy

@asgvard asgvard Awaiting requested review from asgvard

Requested changes must be addressed to merge this pull request.

Assignees

@yujhenchen yujhenchen

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Need onArrowRelease function param for useFocusable
3 participants
@yujhenchen @predikament @asgvard