-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Enhancement: Makes usePreventScroll controllable. #972
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
Conversation
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.
Thanks for working on this! Just a couple of suggestions that should fix the tests, lemme know if they make sense
isOpen?: boolean | ||
} | ||
|
||
export function usePreventScroll(options? : PreventScrollOptions) { |
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.
export function usePreventScroll(options? : PreventScrollOptions) { | |
export function usePreventScroll(options? : PreventScrollOptions = {}) { |
Adding the above would make it so you can properly attempt to deconstruct isOpen
even when options is undefined.
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.
Thanks @LFDanLu! I was getting an error (How do I fix error TS1015: Parameter cannot have question mark and initializer?
). However, i stumbled upon this (https://stackoverflow.com/questions/17186566/how-do-i-fix-error-ts1015-parameter-cannot-have-question-mark-and-initializer) and it is all resolved now.
|
||
export function usePreventScroll(options? : PreventScrollOptions) { | ||
|
||
const {isOpen = false} = options; |
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.
const {isOpen = false} = options; | |
const {isOpen = true} = options; |
IMO this should be flipped to true so that pre-existing components will continue to work if they call usePreventScroll without any arguments.
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.
In the issue I suggested this function usePreventScroll(options?: PreventScrollOptions = {isOpen: true})
. Then, if the options aren't given, we default to true (as we do today), but if the options are given, we default to false to match expected behavior based on prop name. Too weird?
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.
that sounds fine but isn't that essentially what the above change is doing?
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.
Ah, I see the difference now (thanks @snowystinger). IMO it feels a bit weird that we would have two different defaults dependent on whether or not options are provided or not. Is there a use case you had in mind?
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.
Just backward compatibility really...
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.
Hello! I'm going to work on this tonight. I'm really sorry for the delay I've been away for days now. Thanks for your help I really appreciate.
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.
@McZenith No worries, thanks for working on this! You can go ahead and implement the format that @devongovett suggested above.
Hey @McZenith! I've updated things a little after reconsidering the API for this to try to make it less confusing. We now have an |
Closes #889
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: