React-sortable-tree: Setting different icons for the nodes

[Guzinsson]

First of all, thank you for the component, fritz-c.

Is there a way to show different icons for parent and child node?

[fritz-c]

Use a CSS selector that overrides the default styles. To differentiate between the parent and child nodes, you might just use a combination of the class name of the handle and the :nth-child(n) selector, where n is whatever level in the tree you want to target.

[AaronHarris]

What if you want that icon to remain with that particular node no matter where it is placed in the tree? It seems using pseudoclass would break the React declarative style.

[foufee]

My tree represents 3 different types of objects, and I want to have different handles for each object, any ideas on how that could be achieved?

[fritz-c]

Check out the generateNodeProps example in the storybook (whose link is in the readme). I use styles on the nodes there, but you could just as easily use CSS classes, assigned based on the depth in the tree.

[foufee]

But I don't want it based on depth, I want it based on some attribute of
the tree node.

On Thu, Oct 5, 2017 at 4:39 AM Fritz [e-mail] wrote:

Check out the generateNodeProps example in the storybook (whose link is in
the readme). I use styles on the nodes there, but you could just as easily
use CSS classes, assigned based on the depth in the tree.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/fritz-c/react-sortable-tree/issues/78#issuecomment-334197772,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACggr8oX7GgQW3e5BNrnJzgAdT-yjs-eks5so6acgaJpZM4M0Ase
.

[fritz-c]

The node data is also available in the generateNodeProps callback’s arguments.

[foufee]

Hm, my lack of knowledge of CSS is letting me down. If I set the classname to "altHandle" in generateNodeProps then I see that classname appear on the row (so it has a class of "rst__row altHandle"), but I don't get how to get this to propagate to the rst__moveHandle class (I was expecting something the handle to have the class "rst__moveHandle altHandle"

Thanks for your help, the treeview has made a massive difference to my app, it's great to use (but my lack of CSS skills is making the last few bits of customization tricky!)

[fritz-c]

Try this:

.altHandle .rst__moveHandle {
  background: red;
}

https://www.webpackbin.com/bins/-KvdoiRyc4tTKjaHM7rU

[BadLeo]

My workaround here:
1) in treeData, set a className for your node

treeData: [{title:"ICON A", className:"icon-a"}, {title:"ICON B", className:"icon-b"}]

2) in generateNodeProps, set the className to node base dom

<SortableTree
treeData={this.state.treeData}
onChange={treeData => this.setState({ treeData })}
getNodeKey={getNodeKey}
generateNodeProps={({ node, path }) => {
  return {
    className:  `${node.className}`,
    };
}}
/>

3) modify it in css

.rst__moveHandle
 {
    background-image : none;
    padding-top : 6px;
    text-align: center;
}
.icon-a> .rst__moveHandle::before {
    content : "\f0e8";
    color : red;
    font : normal normal normal 24px FontAwesome;
}
.icon-b> .rst__moveHandle::before {
    content : "\f0e8";
    color : blue;
    font : normal normal normal 24px FontAwesome;
}

[iamsmkr]

The solution by @BadLeo is good enough if you also want the drag and drop feature.
In my case I didn't wanted the drag and drop functionality so came up with this solution instead!

Tree Data

let node = 'fa fa-laptop'
let service = 'fa fa-cogs'
let user = 'fa fa-user-o'

treeData: [
    { 
      title: 'node-A', 
      className: node, 
      children: [
        { 
          title: 'service-P',
          className: service,
          children: [
            {
              title: 'user-X',
              className: user
            },
            {
              title: 'user-Y',
              className: user
            },
            {
              title: 'user-Z',
              className: user
            }
          ] 
        }
      ] 
    }
]

SortableTree

<SortableTree
    treeData = { this.state.treeData }
    onChange = { treeData => this.setState({ treeData }) }
    canDrag = { false }
    generateNodeProps = {
    ({ node, path }) => ({
        title: (<span><i className={node.className} aria-hidden="true"></i>{node.title}</span>)
    })
}
/>

CSS

.rst__rowContents {
    padding-left: 0px !important;
}
.fa {
    border: solid #bbb 1px;
    padding: 12px;
    margin-right: 10px;
    background-color: #FAFAFA;
}

[rchancey]

can you share how you were able to override the row content background to get that background color? I an not a css expert and you seem to have done it :) I can modify the borders and any child content.. but just not that content background.. in my screen shot below I am trying to change the background behind the title ..I think that is rowContent but I can't seem to change it. I set the classname on the node but how do I override the inner content?

here is what I mean:

[Malekhamad1995]

@BadLeo HOW can change background color of every node