-
Notifications
You must be signed in to change notification settings - Fork 10
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
feat(ActionBar): logic refactor #1219
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.
👍
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.
👍
P.S.: Have you checked the component with React profiler to see how it renders?
threshold: 1, | ||
}; | ||
const shouldDisplayMenu = !isScrollType && menuItemsKeys.length !== 0; | ||
const singleElementSize = 44; |
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.
Shouldn't it be available as a prop? If not I'd suggest to move it outside the component's function.
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.
Currently not, but in the future I plan to improve that component and give a possibility to set the buttons size.
const observer = new ResizeObserver((entries) => { | ||
const { width, height } = entries[0].contentRect; | ||
const containerSize = vertical ? height : width; | ||
const exstraSpacing = menuOptions.length > 0 ? 60 : 0; |
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.
extraSpacing
|
||
return filteredOptions.map((o) => { | ||
const getMenuItems = (menuOptions: IActionBarOption[]) => |
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.
useCallback?
Resolves: #1214
Description
Logic refactor:
IntersectionObserver
toResizeObserver
- from now logic will observe the container size changes, then will calculate how many option buttons will fit in the currently available space:IntersectionObserver
) and will be available in the menuabsolute
positioning)Storybook
https://feature-action-bar-menu-icon-fix--613a8e945a5665003a05113b.chromatic.com
Checklist
Obligatory:
livechat/design-system
)