Skip to content
This repository has been archived by the owner on Jan 16, 2023. It is now read-only.

How set selected font color? #57

Open
LiguidCool opened this issue Mar 1, 2017 · 4 comments
Open

How set selected font color? #57

LiguidCool opened this issue Mar 1, 2017 · 4 comments

Comments

@LiguidCool
Copy link

Hi
I copy style.js file from examples. In this file i can change color of selector (selected item), but i don't undestand how set font color?

@eladhayun
Copy link

tree > node > header > base
add color: '#FFFFFF' for example...

@sarahmarciano
Copy link

@eladhayun this change the color of the whole tree I would want to change just the color of the selected node
do you know how can I do that?
thank you.

@covelloz
Copy link

covelloz commented Jun 7, 2018

@eladhayun @LiguidCool @sarahmarciano

You can change the background color using
tree > node > activeLink

However, simply adding color: "blue" to activeLink section doesn't do the trick.
This is because the text is actually tree > node > header > base which has an inline-style hardcoded in there.

I did figure out a way to do it using a custom decorator:

import { Treebeard, decorators } from 'react-treebeard';

class ListTree extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cursor: '',
      prevNode: ''
    };
    this.onToggle = this.onToggle.bind(this);
  }

  onToggle(node, toggled) {
    // Store previous node & de-activate
    if (this.state.prevNode !== '') {
      let stateUpdate = Object.assign({}, this.state);
      stateUpdate.prevNode.active = false;
      this.setState(stateUpdate);
    }
    this.setState({prevNode: node});

    // Activate new node
    node.active = true;
    if(node.children) {
      node.toggled = toggled;
    }
    this.setState({cursor: node});
  }

  render() {
    const mydecorator =  {
      Header: (props) => {
        const activeColor = this.state.cursor.id === props.node.id ? '#428BCA' : '#9DA5AB';
        return (
          <div style={props.style.base}>
            <div id={props.node.id} style={{'color':activeColor}}>
              {props.node.name}
            </div>
          </div>
        );
      }
    }
  return (
            <Treebeard
              data={data}
              onToggle={this.onToggle}
              decorators={{...decorators, Header: mydecorator.Header}}
            />
  )
  }
export default ListTree;

@elenilson-costa
Copy link

How to set the arrow color in treebeard ?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

5 participants