Animated caret not centered; transformation not stable

[j8jacobs]

the animation rotation is working, but its not staying in the center of the row. it's not centered to begin with, so i feel like there might be some weird margin or transform around the origin making the caret stick to the bottom, and then rotate up to the top of the div

[j8jacobs]

also, the active setting color is not being set on the newest version. 3.1.0 (as shown in the pic) isn't highlighting the selected node (active set in the prop), but 2.1.0 and 2.0.3

[tahv0]

Hi! I had this same issue. It can be fixed by making custom Toggle decorator.

Mostly copied from source code:

const Toggle = ({style}) => {
  const {height, width} = style;
  const midHeight = height * 0.5;
  const points = `0,0 0,${height} ${width},${midHeight}`;

  return (
      <Div style={style.base}>
          <Div style={{...style.wrapper, display: 'flex'}}>
              <svg height={height} width={width}>
                  <Polygon points={points}
                           style={style.arrow}/>
              </svg>
          </Div>
      </Div>
  );
};
Toggle.propTypes = {
  style: PropTypes.object
};


const myDecorators = {
  ...decorators,
  Toggle: Toggle,
};

... then add your custom decorators to Treebeard:

         <Treebeard
            decorators={myDecorators}
            onToggle={() => {}}
            data={data}
          />

Solution is on line where I add {display: 'flex'} to style.wrapper: <Div style={{...style.wrapper, display: 'flex'}}>

[j8jacobs]

Thank you so much! For anyone who wants to see the whole file, including the imports and what not:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Treebeard, theme, decorators } from 'react-treebeard';
import styled from '@emotion/styled';


// Customized theme for the tree component
theme.tree.base.color = 'black';
theme.tree.base.backgroundColor = 'white';

const Div = styled('div', {
  shouldForwardProp: prop => ['className', 'children'].indexOf(prop) !== -1
})((({ style }) => style));
const Polygon = styled('polygon', {
  shouldForwardProp: prop => ['className', 'children', 'points'].indexOf(prop) !== -1
})((({ style }) => style));

const Toggle = ({style}) => {
  const {height, width} = style;
  const midHeight = height * 0.5;
  const points = `0, 0 0, ${ height } ${ width }, ${ midHeight } `;

  return (
      <Div style={style.base}>
          <Div style={{...style.wrapper, display: 'flex'}}>
              <svg height={height} width={width}>
                  <Polygon points={points}
                           style={style.arrow}/>
              </svg>
          </Div>
      </Div>
  );
};
Toggle.propTypes = {
  style: PropTypes.object
};


const myDecorators = {
  ...decorators,
  Toggle: Toggle,
};

export default class Tree extends Component {
  toggleNode = (node, toggled) => {
    if (this.state.cursor) { 
      this.state.cursor.active = false; 
    }
    node.active = true;
    if (node.children) { node.toggled = toggled; }
    this.setState({ cursor: node });
  }

  render() {
    return (
      <Treebeard 
        data={this.props.data}
        onToggle={this.toggleNode}
        style={theme}
        decorators={myDecorators}
      />
    );
  }
}

[j8jacobs]

However, the highlighted cursor still isn't displaying and I'm having trouble seeing what's making it do that