new more "functional" api

[sghall]

It would be a lot cleaner to export a NodeGroup component that accepts functions for deriving the starting state and rendering. Clears up some conceptual issues with passing a "node" component and reduces the total lines needed to code a transition group. Just much cleaner.

Would look like this...

<NodeGroup
  data={this.state.data}
  keyAccessor={(d) => d.name}

  start={(node, index) => ({ // starting state
    opacity: 1e-6,
    x: 1e-6,
    fill: 'green',
    width: scale.bandwidth(),
  })}

  enter={(node, index) => ({
    opacity: [0.5],
    x: [scale(node.name)],
    timing: { duration: 1500 },
  })}

  update={(node, index) => ({
    opacity: [0.5],
    x: [scale(node.name)],
    fill: 'blue',
    width: [scale.bandwidth()],
    timing: { duration: 1500 },
  })}

  leave={(node, index, remove) => ({
    opacity: [1e-6],
    x: [scale.range()[1]],
    fill: 'red',
    timing: { duration: 1500 },
    events: { end: remove },
  })}

  render={(node, state, index) => {
    const { x, ...rest } = state;

    return (
      <g transform={`translate(${x},0)`}>
        <rect
          height={dims[1]}
          {...rest}
        />
        <text
          x="0"
          y="20"
          fill="white"
          transform="rotate(90 5,20)"
        >{`x: ${x}`}</text>
        <text
          x="0"
          y="5"
          fill="white"
          transform="rotate(90 5,20)"
        >{`name: ${node.name}`}</text>
      </g>
    );
  }}
/>

[sghall]

Done in 0.8.0!