-
Notifications
You must be signed in to change notification settings - Fork 10.7k
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
Add hightlighter to the tree control #36480
Merged
Merged
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
2ee357c
Add tree-control expand/collapse on click the expander button or by a…
mdperez86 4be3c5c
Add stories
mdperez86 1ee081c
Upgrade WP components dependency to v19.8.5 to support indeterminate …
mdperez86 33bdd6a
Add styles to fit the disign
mdperez86 a5e1b62
Add type definitions
mdperez86 2d0609d
Add custom hook to manage highlight
mdperez86 1217b20
Add hightlighter to the tree control
mdperez86 c8c76cd
Add stories
mdperez86 fa2c678
Add changelog file
mdperez86 d557e7c
Fix rebase conflicts
mdperez86 ded2caf
Add comment suggestions
mdperez86 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
packages/js/components/changelog/add-35851-tree-control-highlight-item
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: dev | ||
|
||
Add hightlighter to the tree control | ||
31 changes: 31 additions & 0 deletions
31
packages/js/components/src/experimental-tree-control/hooks/use-highlighter.ts
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { useMemo } from 'react'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { CheckedStatus, TreeItemProps } from '../types'; | ||
|
||
export function useHighlighter( { | ||
item, | ||
multiple, | ||
checkedStatus, | ||
shouldItemBeHighlighted, | ||
}: Pick< TreeItemProps, 'item' | 'multiple' | 'shouldItemBeHighlighted' > & { | ||
checkedStatus: CheckedStatus; | ||
} ) { | ||
const isHighlighted = useMemo( () => { | ||
if ( typeof shouldItemBeHighlighted === 'function' ) { | ||
if ( multiple || item.children.length === 0 ) { | ||
return shouldItemBeHighlighted( item ); | ||
} | ||
} | ||
if ( ! multiple ) { | ||
return checkedStatus === 'checked'; | ||
} | ||
}, [ item, multiple, checkedStatus, shouldItemBeHighlighted ] ); | ||
|
||
return { isHighlighted }; | ||
} |
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
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,6 +39,21 @@ type BaseTreeProps = { | |
* @param value The unselection | ||
*/ | ||
onRemove?( value: Item | Item[] ): void; | ||
/** | ||
* It gives a way to determine whether the current rendering | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks |
||
* item is highlighted or not from outside the tree. | ||
* | ||
* @example | ||
* <Tree | ||
* shouldItemBeHighlighted={ isFirstChild } | ||
* /> | ||
* | ||
* @param item The current linked tree item, useful to | ||
* traverse the entire linked tree from this item. | ||
* | ||
* @see {@link LinkedTree} | ||
*/ | ||
shouldItemBeHighlighted?( item: LinkedTree ): boolean; | ||
}; | ||
|
||
export type TreeProps = BaseTreeProps & | ||
|
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.
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.
Typo here!
highlighter
instead ofhightlighter
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.
Ohh! Nice catch. Thanks!