-
Notifications
You must be signed in to change notification settings - Fork 292
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
Added GridKeyboardNavigationContext #462
Added GridKeyboardNavigationContext #462
Conversation
…om:mondaycom/monday-ui-react-core into feature/omri/use-grid-keyboard-navigation-context
return ( | ||
<GridKeyboardNavigationContext.Provider value={keyboardContext}> | ||
<Flex ref={wrapperRef}> | ||
<DummyNavigableGrid ref={leftElRef} itemsCount={15} numberOfItemsInLine={4} itemPrefix="L "/> |
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.
The story doesn't look too good, but I wanted to emphasize the layout structure so the behavior will be clear. (you can check the gif in the PR's description).
Do you think I should change it?
…om:mondaycom/monday-ui-react-core into feature/omri/use-grid-keyboard-navigation-context
…om:mondaycom/monday-ui-react-core into feature/omri/use-grid-keyboard-navigation-context
[NAV_DIRECTIONS.RIGHT]: new Map(), | ||
[NAV_DIRECTIONS.LEFT]: new Map(), | ||
[NAV_DIRECTIONS.UP]: new Map(), | ||
[NAV_DIRECTIONS.DOWN]: new Map() |
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.
why not simple {} ?
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.
since I use Objects (refs) as the keys. If I'll use a regular object as a map, the actual value which will be used as key is the result of .toString()
:
on the contrary, a Map
can handle objects as keys
…om:mondaycom/monday-ui-react-core into feature/omri/use-grid-keyboard-navigation-context
src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContextHelper.js
Outdated
Show resolved
Hide resolved
src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContextHelper.js
Outdated
Show resolved
Hide resolved
src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContextHelper.js
Outdated
Show resolved
Hide resolved
…to feature/omri/user-grid-keyboard-navigation
…om:mondaycom/monday-ui-react-core into feature/omri/use-grid-keyboard-navigation-context
…to feature/omri/use-grid-keyboard-navigation-context
Task
Added a context which allows navigation between multiple navigable sections.
A GIF is worth a thousand words :)
In some cases where the navigated components are not in the same dimensions, the "jump" between the two components may look clanky (as seen in the gif). It's very difficult to fix, but probably possible.
Basic
npm run plop
) to create a new component.PropTypes
.Style
Styles are added toIrrelevantNewComponent.modules.scss
file inside of theNewComponent
folder.Component uses CSS Modules.IrrelevantStorybook
/src/NewComponent/__stories__/NewComponent.stories.js
file.Tests