Add useWindowSize hook to DropdownButton #75
Conversation
| const [menuWidth, setMenuWidth] = React.useState(0); | ||
| const ref = React.useRef<HTMLButtonElement>(null); | ||
|
|
||
| React.useEffect(() => { | ||
| if (ref.current) { | ||
| setMenuWidth(ref.current.offsetWidth); | ||
| } | ||
| }, [children, size, styleType]); | ||
| }, [children, size, styleType, windowSize]); |
There was a problem hiding this comment.
Is this really needed? Cause I looked at other libs and no one is doing this. Also, it just adds additional complexity.
There was a problem hiding this comment.
Hmm idk, it's nice. Which libs did you check? Most of them are meant to be as customizable as possible, rather than enforcing standards.
I guess we could also just provide a util.
https://material-ui.com/components/use-media-query/
https://material-ui.com/components/textarea-autosize/
https://blueprintjs.com/docs/#popover2-package/resize-sensor2
https://material.angular.io/cdk/layout/overview
There was a problem hiding this comment.
antd and material-ui changes the select element and menu stays the same size when resizing. react-bootstrap and blueprint does not change anything on resize so hard to tell.
There was a problem hiding this comment.
Material likes to keep the dropdown width same as select, but it does not have any example where select is taking full width.
I would think if you were to code a dynamic (resizable) dropdown using Material, you'd want the width to respond to the change.
But AntD does have some examples.
There was a problem hiding this comment.
Oh this is interesting: https://popper.js.org/docs/v2/modifiers/community-modifiers/
There was a problem hiding this comment.
Your AntD gif does the same as we do right now 😀 and if understand correctly your hook will work with opened menu and resized window.
That modifier would solve a lot of duplication. But does it handle live resizes?
There was a problem hiding this comment.
This is our current behavior and really the main thing I'm trying to solve.
And I haven't gotten that modifier to work tbh.
There was a problem hiding this comment.
I don't think this is a bad behavior:
Maybe @FlyersPh9 can comment on this one.
|
|
Hook listens to window
resizeevent and updates size. Used inDropdownButtonto update menu width when window gets resized.Checklist
Additional Comments
After #73, it became obvious that the header dropdowns were not being updated on resizing window so this PR is mainly intended to fix that.