Skip to content
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.

Sign up for GitHub

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

chore: Update TreeView API #7613

Merged
merged 19 commits into from
Feb 12, 2025
Merged

chore: Update TreeView API #7613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7b0fc70
chore: Update TreeView API
snowystinger Jan 15, 2025
4dbff99
fix docs
snowystinger Jan 15, 2025
a7749a4
fix dynamic example
snowystinger Jan 16, 2025
1fef292
actually save
snowystinger Jan 16, 2025
956e5ee
fix docs
snowystinger Jan 16, 2025
0ecf6d9
review comments
snowystinger Jan 22, 2025
f8cc10f
Revert change to not use hasChildItems
snowystinger Jan 22, 2025
dcfd366
add prop table
snowystinger Jan 29, 2025
ba69dc2
fix docs example
snowystinger Jan 29, 2025
7045d90
remove extra border attributes in theme
snowystinger Jan 30, 2025
04adce4
fix snapshots
snowystinger Jan 30, 2025
9e7b7b2
fix: S2 treeview haschildnodes (#7694)
snowystinger Feb 11, 2025
f78350f
Merge branch 'main' into s2-treeview-api-update
snowystinger Feb 11, 2025
b519ebd
match rac logic with hook
snowystinger Feb 12, 2025
8d8d865
Merge branch 'main' into s2-treeview-api-update
snowystinger Feb 12, 2025
80e08f3
Merge branch 'main' into s2-treeview-api-update
snowystinger Feb 12, 2025
5af1fd3
Fix spacing regression
snowystinger Feb 12, 2025
97b72f2
fix chromatic merge
snowystinger Feb 12, 2025
2cf6ef1
fix lint
snowystinger Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/@react-aria/gridlist/src/useGridListItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ export interface AriaGridListItemOptions {
/** Whether the list row is contained in a virtual scroller. */
isVirtualized?: boolean,
/** Whether selection should occur on press up instead of press down. */
shouldSelectOnPressUp?: boolean
shouldSelectOnPressUp?: boolean,
/** Whether this item has children, even if not loaded yet. */
hasChildItems?: boolean
}

export interface GridListItemAria extends SelectableItemStates {
Expand Down Expand Up @@ -86,13 +88,14 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
};

let treeGridRowProps: HTMLAttributes<HTMLElement> = {};
let hasChildRows;
let hasChildRows = props.hasChildItems;
let hasLink = state.selectionManager.isLink(node.key);
if (node != null && 'expandedKeys' in state) {
// TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
// true...
let children = state.collection.getChildren?.(node.key);
hasChildRows = [...(children ?? [])].length > 1;
hasChildRows = hasChildRows || [...(children ?? [])].length > 1;

if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) {
onAction = () => state.toggleKey(node.key);
}
Expand Down
168 changes: 110 additions & 58 deletions packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

import {ActionMenu, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeView, TreeViewItem} from '../src';
import {ActionMenu, Collection, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeItemContent, TreeView, TreeViewItem} from '../src';
import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
Expand All @@ -36,35 +36,26 @@ function TreeExample(props) {
disabledKeys={['projects-1']}
aria-label="test static tree"
expandedKeys={['projects']}>

<TreeViewItem id="Photos" textValue="Photos">
<Text>Photos</Text>
<Folder />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
<TreeItemContent>
<Text>Photos</Text>
<Folder />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItem>
<TreeViewItem id="projects" textValue="Projects">
<Text>Projects</Text>
<Folder />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
<TreeViewItem id="projects-1" textValue="Projects-1">
<Text>Projects-1</Text>
<TreeItemContent>
<Text>Projects</Text>
<Folder />
<ActionMenu>
<MenuItem id="edit">
Expand All @@ -76,9 +67,11 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
<TreeViewItem id="projects-1A" textValue="Projects-1A">
<Text>Projects-1A</Text>
<FileTxt />
</TreeItemContent>
<TreeViewItem id="projects-1" textValue="Projects-1">
<TreeItemContent>
<Text>Projects-1</Text>
<Folder />
<ActionMenu>
<MenuItem id="edit">
<Edit />
Expand All @@ -89,35 +82,55 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
<TreeViewItem id="projects-1A" textValue="Projects-1A">
<TreeItemContent>
<Text>Projects-1A</Text>
<FileTxt />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem id="projects-2" textValue="Projects-2">
<Text>Projects-2</Text>
<FileTxt />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
<TreeItemContent>
<Text>Projects-2</Text>
<FileTxt />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItem>
<TreeViewItem id="projects-3" textValue="Projects-3">
<Text>Projects-3</Text>
<FileTxt />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
<TreeItemContent>
<Text>Projects-3</Text>
<FileTxt />
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItem>
</TreeViewItem>
</TreeView>
Expand Down Expand Up @@ -207,14 +220,53 @@ let rows = [
]}
];

const DynamicTreeItem = (props) => {
let {childItems, name, icon} = props;
return (
<>
<TreeViewItem id={props.id} childItems={childItems} textValue={name} href={props.href}>
<TreeItemContent>
<Text>{name}</Text>
{icon}
<ActionMenu>
<MenuItem id="edit">
<Edit />
<Text>Edit</Text>
</MenuItem>
<MenuItem id="delete">
<Delete />
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
<Collection items={childItems}>
{(item: any) => (
<DynamicTreeItem
id={item.id}
icon={item.icon}
childItems={item.childItems}
textValue={item.name}
name={item.name}
href={props.href}>
{item.name}
</DynamicTreeItem>
)}
</Collection>
</TreeViewItem>
</>
);
};

const TreeExampleDynamic = (args) => (
<div style={{width: '300px', height: '320px', display: 'flex', flexDirection: 'column'}}>
<TreeView aria-label="test dynamic tree" items={rows} {...args}>
{(item: any) => (
<TreeViewItem childItems={item.childItems} textValue={item.name}>
<Text>{item.name}</Text>
{item.icon}
</TreeViewItem>
<DynamicTreeItem
id={item.id}
icon={item.icon}
childItems={item.childItems}
textValue={item.name}
name={item.name} />
)}
</TreeView>
</div>
Expand Down
Loading