useTreeData -> Selections

[lienas]

Is there an example on how to use setSelectedKeys-function and selectedKeys-prop ??

[reidbarber]

The ComboBox docs use it in the Fully controlled example.

[lienas]

Hi @reidbarber Unfortunately that is not what I am looking for.

I think useTreeData maintains the state itself. The linked example stores one selected item with useState hook.
I guess setSelectedKeys(keys: Set(<Key>): void populates selectedKeys | Set<Key> and therefore useState hook is not necessary - is it ?
What I not know is how to deal with Set<Key>

I want to build a tree-view with multiselect !

[reidbarber]

I think the only other examples we have are on the useTreeData and Selection pages. You could combine those with the example components on useListbox to get an example.

I think we will have more examples once we implement TreeView.

Are there any specific issues you're having?

[lienas]

In the meantime a found the following solution, but when I call setSelectedKeys in my Categories-component selectedKeys of my TreeData is always 1 Click behind although my onSelectionChangeHandler receives the correct keys.

Here is my Code:

import React from 'react';

import TreeView from "../components-proto/tree-view";
import {Item} from "./search-box";
import {useTreeData} from "react-stately";
import {convertedLiferayCategories} from "../migration/categories.helpers";

const Categories = () => {

    let treeData = useTreeData({
        initialItems: convertedLiferayCategories(),
        getKey: item => item.key,
        getChildren: (item) => item.nodes || []
    })

    const onSelectionChangeHandler = (keys: any) => {
        console.log("Keys ::", keys);
        treeData.setSelectedKeys(keys);
        console.log("treedata -> ", treeData.selectedKeys);
    }

    return (
        <TreeView
            items={treeData.items}
            selectionMode={"multiple"}
            onSelectionChange={onSelectionChangeHandler}
        >
            {treeData.items.map(cat => (
                <Item key={cat.key}>{cat.value.label}</Item>)
            )}
        </TreeView>
    );
};

export default Categories;

import React from 'react';
import {TreeProps, useTreeState} from 'react-stately';
import {useMenu} from 'react-aria';
import {Button, Checkbox, List, ListItem} from "@chakra-ui/react";

const TreeView = (props: TreeProps<any>) => {
    // Create menu state based on the incoming props
    let state = useTreeState(props);

    // Get props for the menu element
    let ref = React.useRef<HTMLUListElement>(null);
    let {menuProps} = useMenu(props, state, ref);
    const {selectionManager} = state;
    
    const onSelectHandler = (val: any) => {
        selectionManager.toggleSelection(val.key);
    }

    const onSelectAll = () => {
        selectionManager.selectAll();
    }

    return (
        <List
            {...menuProps}
            ref={ref}
        >
            <Button size={"sm"} my={5} onClick={onSelectAll}>all</Button>
            {[...state.collection].map((item) => {
                return (
                    <ListItem key={item.key} alignItems={"center"}>
                        <Checkbox
                            onChange={() => onSelectHandler(item)}
                            value={item.key}
                            isChecked={selectionManager.isSelected(item.key)}
                        >
                            {item.rendered}
                        </Checkbox>
                    </ListItem>
                )
            })}
        </List>
    );
};

export default TreeView;

And this is an example output of console.log from the categories- component.

[snowystinger]

Some quick notes. You shouldn't need to call treeData.setSelectedKeys(keys); outside the TreeView. You're already setting selection inside. Also, the onSelectAll should probably be in a check for selectionManager.isSelectAll
Would you mind putting together a codesandbox? It'll make debugging a lot easier for us.

[lienas]

Hi Robert, of course: here weg go: https://codesandbox.io/s/strange-albattani-i1k05k Thomas Von: Robert Snow ***@***.***> Datum: Samstag, 8. Oktober 2022 um 20:42 An: adobe/react-spectrum ***@***.***> Cc: Thomas Lucas ***@***.***>, Author ***@***.***> Betreff: Re: [adobe/react-spectrum] useTreeData -> Selections (Discussion #3595) Some quick notes. You shouldn't need to call treeData.setSelectedKeys(keys); outside the TreeView. You're already setting selection inside. Also, the onSelectAll should probably be in a check for selectionManager.isSelectAll Would you mind putting together a codesandbox? It'll make debugging a lot easier for us. — Reply to this email directly, view it on GitHub<#3595 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB7INGEG4HIXFJXYHTAF3MLWCG6B7ANCNFSM6AAAAAAQ4XPDLU>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[lienas]

And what is then the best practice to get the childNotes ?

1. item.childNodes - prop

   • I tried to iterate over this prop with for (let childNode of item.childNodes), but that did not work !

2. item.value.children - prop

   • using item.value.children works , but is that the recommend way ?

[snowystinger]

I think you want to look at this example https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/tree/stories/useTreeState.stories.tsx

[lienas]

I changed my code to the following:

<Item key={cat.key}
      hasChildItems={cat.value.nodes.length > 0}
      childItems={cat.nodes}>

and in my tree-view I call

{[...state.collection].map((item) => {
        if (item.hasChildNodes) {
          console.log("childNodes - >", Array.from(item.childNodes));
        }
        return (...)

But I get an empty Array !
I have updated my sandbox!

[snowystinger]

@lienas were you able to resolve this? Apologies, I lost track of this discussion, but I know you've been making progress from some other discussions.

[lienas]

yes- I could successfully implement selection for my tree-component based on the given story.