fix(Tree): use context to supply generated props to items #12182
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
silviuaavram
requested review from
dzearing,
ecraig12345,
JasonGore,
jdhuntington,
kenotron,
layershifter,
levithomason,
miroslavstastny,
mnajdova and
pompomon
as code owners
msft-github-bot
added
the
Fluent UI react-northstar (v0)
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: d2abb5be48d5bdd44bcd2d593d31441fe45d35e8 (build) |
layershifter
reviewed
Mar 4, 2020
|
|
||
| return [...renderedItems, renderedItem, ...(isSubtreeExpanded ? renderItems(item['items']) : ([] as any))]; | ||
| const elementRef = React.createRef<HTMLElement>(); | ||
| const contextValue: TreeItemRenderContextValue = { |
There was a problem hiding this comment.
This will not work 😨 https://smykhailov.github.io/react-patterns/#/context
So, even if consumers will inject React.memo() around TreeItem they will still receive updates as context value will always change.
layershifter
reviewed
Mar 4, 2020
| const contextValue: TreeItemRenderContextValue = { | ||
| level, | ||
| index: index + 1, | ||
| size: items.length, |
There was a problem hiding this comment.
I don't see any benefits from passing level, index & size via context as they are plain.
I proposed to use Context because I want to avoid creation of new functions in overrideProps, it's done ✔️
Now we need:
- find a way to avoid
elementRef,onSiblingsExpand,onFocusFirstChild,onFocusParentcreation on each render, i.e. remove dependency on exact item TreeItemContextshouldTreeContext, we obviously don't want to wrap each item with ownProvider, it will be easy doable after previous item will be solved
Perf AnalysisNo significant results to display. All results
Perf Analysis (Fluent)Perf comparison
Perf tests with no regressions
|
silviuaavram
commented
Mar 6, 2020
|
|
||
| setActiveItemIds = (e: React.SyntheticEvent, activeItemIds: string[]) => { | ||
| _.invoke(this.props, 'onActiveItemIds', e, { ...this.props, activeItemIds }); | ||
| _.invoke(this.props, 'onActiveItemIdsChange', e, { ...this.props, activeItemIds }); |
There was a problem hiding this comment.
sometimes my coding is simply bad.
silviuaavram
commented
Mar 6, 2020
| }), | ||
| overrideProps: this.handleTreeItemOverrides | ||
| parent, | ||
| level, |
There was a problem hiding this comment.
I want to refactor level, index, treeSize in a subsequent PR. I think it makes sense to just call them ariaPosInSet, ariaSetSize, ariaLevel since that's their only use. Opinions?
There was a problem hiding this comment.
aria-level in this case. But makes sense only if they are used only for attributes...
layershifter
reviewed
Mar 6, 2020
| onTitleClick: (e: React.SyntheticEvent, treeItemProps: TreeItemProps) => void; | ||
| } | ||
|
|
||
| export const TreeItemContext = React.createContext<TreeItemRenderContextValue>(null); |
There was a problem hiding this comment.
Suggested change
| export const TreeItemContext = React.createContext<TreeItemRenderContextValue>(null); | |
| export const TreeContext = React.createContext<TreeContextValue>(null); |
I would say that this is TreeContext
layershifter
reviewed
Mar 6, 2020
layershifter
reviewed
Mar 9, 2020
| onFocusFirstChild: (itemId: string) => void; | ||
| onFocusParent: (itemId: string) => void; | ||
| onSiblingsExpand: (e: React.SyntheticEvent, itemProps: TreeItemProps) => void; | ||
| onTitleClick: (e: React.SyntheticEvent, treeItemProps: TreeItemProps) => void; |
There was a problem hiding this comment.
Suggested change
| onTitleClick: (e: React.SyntheticEvent, treeItemProps: TreeItemProps) => void; | |
| onTitleClick: (e: React.SyntheticEvent, itemProps: TreeItemProps) => void; |
nit
layershifter
approved these changes
Mar 9, 2020
pompomon
approved these changes
Mar 9, 2020
2 tasks
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.
Pull request checklist
$ yarn changeDescription of changes
renderItems.Fixes microsoft/fluent-ui-react#2295.
Focus areas to test
(optional)
Microsoft Reviewers: Open in CodeFlow