Added GridKeyboardNavigationContext #462
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…om:mondaycom/monday-ui-react-core into feature/omri/use-grid-keyboard-navigation-context
10 tasks
laviomri
commented
Jan 19, 2022
| return ( | ||
| <GridKeyboardNavigationContext.Provider value={keyboardContext}> | ||
| <Flex ref={wrapperRef}> | ||
| <DummyNavigableGrid ref={leftElRef} itemsCount={15} numberOfItemsInLine={4} itemPrefix="L "/> |
There was a problem hiding this comment.
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
MosheZemah
approved these changes
Jan 20, 2022
Comment on lines
5
to
8
| [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.
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
sahariko
reviewed
Jan 20, 2022
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
Base automatically changed from
feature/omri/user-grid-keyboard-navigation
to
master
January 20, 2022 12:55
…to feature/omri/use-grid-keyboard-navigation-context
laviomri
deleted the
feature/omri/use-grid-keyboard-navigation-context
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.scssfile inside of theNewComponentfolder.Component uses CSS Modules.IrrelevantStorybook
/src/NewComponent/__stories__/NewComponent.stories.jsfile.Tests