What would a custom per-node icon decorator look like?

[KnowledgeGarden]

A node can have some text (title, label). I'd like it to have a custom icon (not just a folder or document icon), e.g. structured conversation with question, answer, pro and con icons. Ultimately, I want the node to also contain a blog-like text field, but that's another question.

[igor-dv]

@KnowledgeGarden When you create the tree structure you can specify extra data to each node. And then use it in decorator. For example:

const data = {
  name: 'root',
  toggled: true,
  children: [
    {
      name: 'parent',
      someExtraProp: 'semething', /// <- this one
      children: [
        { name: 'child1' },
        { name: 'child2' }
      ]
    }
  ]
};

//
//

function HeaderDecorator (props) {
  const { style, node } = this.props;
  
  let Icon = null

  if (node.someExtraProp === 'semething') {
    Icon = <...>
  }

  return (
    <div style={style.base}>
      {Icon && <Icon/>}
      <a style={newStyleTitle}>
         {node.name}
      </a>
    </div>
  );
}

Fix me if I am missing your question.

[KnowledgeGarden]

@igor-dv That's exactly what I have in mind. What I am up against is a truly weak comprehension of React in the face of lots of experience with other node.js coding.

My data is the Storybook code with an added feature from barebones.js:

  treeData: [
    { icon: '<img src="/images/map_sm.png">', title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] },
  ],

where I placed /images in /build/static (tried both "images/..." and "/images/..."

And I placed the following in tree-node.js:

function HeaderDecorator (props) {
  const { style, node } = this.props;

  let Icon = node.icon;

  return (
    <div style={style.base}>
      {Icon && <Icon/>}
      <a style={newStyleTitle}>
         {node.name}
      </a>
    </div>
  );
}

Of course, I am certain I am missing something. It doesn't show any icons. My ignorance is showing...

[igor-dv]

@KnowledgeGarden did you manage to overcome this challenge ? Or still need a help ?

[odere]

I have the same problem. I need help. It would be great if there will examples of decorators.